From b19e836e5ee52c14c75d87013650c7c0b60e63d0 Mon Sep 17 00:00:00 2001 From: ahmetkuslular Date: Wed, 21 Sep 2022 16:08:22 +0300 Subject: [PATCH] FIX: client js packages fixes and welcome screen style --- package.json | 1 - .../apiService/apiManager/BaseApiManager.js | 33 +++++----- .../apiManagerCache/ClientApiManagerCache.js | 7 ++- .../apiManagerCache/ServerApiManagerCache.js | 7 ++- .../partials/Welcome/PartialCards.js | 15 +---- .../partials/Welcome/welcomeStyle.js | 62 ++++++++++++++++--- src/universal/utils/lodash/omit.js | 4 +- src/universal/utils/lodash/omitByIndexOf.js | 22 +++++++ src/universal/utils/lodash/pick.js | 24 +++++++ src/universal/utils/lodash/pickByIndexOf.js | 22 +++++++ webpack.client.config.js | 28 +-------- webpack.common.config.js | 2 +- webpack.server.config.js | 3 +- 13 files changed, 161 insertions(+), 69 deletions(-) create mode 100644 src/universal/utils/lodash/omitByIndexOf.js create mode 100644 src/universal/utils/lodash/pick.js create mode 100644 src/universal/utils/lodash/pickByIndexOf.js diff --git a/package.json b/package.json index 971bc0b..d6f378a 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "compression": "^1.7.4", "cookie-parser": "1.4.3", "copy-webpack-plugin": "4.5.2", - "core-js": "3.20.3", "css-loader": "6.5.1", "css-minimizer-webpack-plugin": "3.4.1", "eev": "0.1.5", diff --git a/src/universal/core/apiService/apiManager/BaseApiManager.js b/src/universal/core/apiService/apiManager/BaseApiManager.js index 82d86ae..6866a65 100644 --- a/src/universal/core/apiService/apiManager/BaseApiManager.js +++ b/src/universal/core/apiService/apiManager/BaseApiManager.js @@ -4,19 +4,20 @@ import { JSON_CONTENT_TYPE, REQUEST_TYPES_WITH_BODY } from '../../../utils/constants'; -import voltranConfig from '../../../../../voltran.config'; import CookieService from '../../../service/CookieService'; +import pickByIndexOf from '../../../utils/lodash/pickByIndexOf'; +import omitByIndexOf from '../../../utils/lodash/omitByIndexOf'; function createBaseConfig() { return {}; } class BaseApiManager { - constructor(customConfig) { + constructor(config) { const headers = { common: { ...createBaseConfig.headers, - ...(customConfig ? customConfig.headers : null) + ...(config ? config.headers : null) } }; @@ -24,25 +25,23 @@ class BaseApiManager { headers['Accept-Encoding'] = 'gzip, deflate'; } - if (process.env.BROWSER && voltranConfig.setCookiesToHeader) { - const cookieMap = CookieService.getAllItems(); - - Object.keys(cookieMap).forEach(key => { - if (voltranConfig.setCookiesToHeaderKeys.length > 0) { - voltranConfig.setCookiesToHeaderKeys.map(item => { - if (key.indexOf(item) === 0) { - headers[key] = cookieMap[key]; - } - }); - } else { - headers[key] = cookieMap[key]; - } + if (process.env.BROWSER && config?.addCookiesToHeader) { + let cookies = CookieService.getAllItems(); + if (config?.includeCookies?.length > 0) { + cookies = pickByIndexOf(cookies, config?.includeCookies); + } + if (config?.excludeCookies?.length > 0) { + cookies = omitByIndexOf(cookies, config?.excludeCookies); + } + + Object.keys(cookies).forEach(key => { + headers[key] = cookies[key]; }); } this.api = this.createInstance({ ...createBaseConfig(), - ...customConfig, + ...config, headers }); } diff --git a/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js b/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js index 7d4c0a7..df61d8b 100644 --- a/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js +++ b/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js @@ -5,7 +5,12 @@ import createCache from '../utils/createCache'; const { services, serviceConfigs } = require('__APP_CONFIG__'); const getCache = func => { - const cache = createCache(ClientApiManager, services, serviceConfigs?.client, func); + const { client, defaultConfig } = serviceConfigs; + const config = { + ...defaultConfig, + ...client + }; + const cache = createCache(ClientApiManager, services, config, func); return cache; }; diff --git a/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js b/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js index 6c122e9..e89bcea 100644 --- a/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js +++ b/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js @@ -5,7 +5,12 @@ import createCache from '../utils/createCache'; const { services, serviceConfigs } = require('__APP_CONFIG__'); const getCache = func => { - const cache = createCache(ServerApiManager, services, serviceConfigs?.server, func); + const { server, defaultConfig } = serviceConfigs; + const config = { + ...defaultConfig, + ...server + }; + const cache = createCache(ServerApiManager, services, config, func); return cache; }; diff --git a/src/universal/partials/Welcome/PartialCards.js b/src/universal/partials/Welcome/PartialCards.js index 8fb2946..34ee902 100644 --- a/src/universal/partials/Welcome/PartialCards.js +++ b/src/universal/partials/Welcome/PartialCards.js @@ -5,15 +5,6 @@ import { ServerStyleSheet } from 'styled-components'; import partials from './partials'; import groupBy from '../../utils/lodash/groupBy'; -const STATUS_COLOR = { - live: '#8dc63f', - dev: '#FF6000', - page: '#00abff', - 1: '#9b59b6', - 2: '#c0392b', - 3: '#16a085' -}; - const sheet = new ServerStyleSheet(); const Welcome = () => { @@ -26,10 +17,8 @@ const Welcome = () => { className="link" >
-
-
- {title} -
+
+
{title}
{item.name}
diff --git a/src/universal/partials/Welcome/welcomeStyle.js b/src/universal/partials/Welcome/welcomeStyle.js index 9b09e2b..e378dce 100644 --- a/src/universal/partials/Welcome/welcomeStyle.js +++ b/src/universal/partials/Welcome/welcomeStyle.js @@ -10,8 +10,8 @@ const welcomeStyle = () => { --theme-bg-color: #fafafb; --body-font: "Poppins", sans-serif; --body-color: #2f2f33; - --active-color: #0162ff; - --active-light-color: #e1ebfb; + --active-color: #4e4e4e; + --active-light-color: #f1f1f1; --header-bg-color: #fff; --border-color: #d8d8d8; --alert-bg-color: #e8f2ff; @@ -157,7 +157,7 @@ const welcomeStyle = () => { } .group-title { font-size: 24px; - font-weight: 600; + font-weight: 700; } .link { color: inherit; @@ -190,12 +190,13 @@ const welcomeStyle = () => { } .card { - padding: 20px 16px; + padding: 16px 16px; background-color: var(--header-bg-color); border-radius: 8px; cursor: pointer; transition: 0.2s; text-decoration: none; + position: relative; } .card:hover { transform: scale(1.02); @@ -207,8 +208,7 @@ const welcomeStyle = () => { } .card-title { font-weight: 600; - margin-top: 16px; - font-size: 14px; + font-size: 16px; } .card-subtitle { color: var(--subtitle-color); @@ -220,6 +220,54 @@ const welcomeStyle = () => { display: flex; align-items: flex-start; } + + .ribbon-wrapper { + width: 85px; + height: 88px; + overflow: hidden; + position: absolute; + top: 0; + right: 0; + } + + .ribbon { + font-size: 10px; + font-weight: bold; + color: var(--header-bg-color);; + text-align: center; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + position: relative; + padding: 0; + left: 26px; + top: 14px; + width: 80px; + -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); + -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); + box-shadow: 0px 0px 3px rgba(0,0,0,0.3); + } + + .color-live{ + background-color: #badc58; + } + .color-dev{ + background-color: #f0932b; + } + .color-page{ + background-color: #00abff; + } + .color-1{ + background-color: #9b59b6; + } + .color-2{ + background-color: #c0392b; + } + .color-3{ + background-color: #16a085; + } + .badge{ display: flex; align-items: center; @@ -227,7 +275,7 @@ const welcomeStyle = () => { background-color: #f50; font-weight: 600; margin-top: 16px; - font-size: 14px; + font-size: 10px; padding: 5px 10px; color: white; border-radius: 5px; diff --git a/src/universal/utils/lodash/omit.js b/src/universal/utils/lodash/omit.js index 3894d9e..e894b64 100644 --- a/src/universal/utils/lodash/omit.js +++ b/src/universal/utils/lodash/omit.js @@ -14,7 +14,9 @@ const keyControl = (keys, key) => { }; function omit(obj, ...keys) { - return Object.fromEntries(Object.entries(obj).filter(([k]) => keyControl(keys, k))); + return obj == null + ? {} + : Object?.fromEntries(Object.entries(obj).filter(([k]) => keyControl(keys, k))); } export default omit; diff --git a/src/universal/utils/lodash/omitByIndexOf.js b/src/universal/utils/lodash/omitByIndexOf.js new file mode 100644 index 0000000..d11b6ca --- /dev/null +++ b/src/universal/utils/lodash/omitByIndexOf.js @@ -0,0 +1,22 @@ +function omitByIndexOf(object, keys) { + if (object == null) { + return {}; + } + + const result = Object.keys(object).reduce((result, cookiesKey) => { + if (object[cookiesKey]) { + if (keys.some(item => cookiesKey.indexOf(item) === -1)) { + return { + ...result, + [cookiesKey]: object[cookiesKey] + }; + } + return result; + } + return result; + }, {}); + + return result; +} + +export default omitByIndexOf; diff --git a/src/universal/utils/lodash/pick.js b/src/universal/utils/lodash/pick.js new file mode 100644 index 0000000..e278de2 --- /dev/null +++ b/src/universal/utils/lodash/pick.js @@ -0,0 +1,24 @@ +function pickObject(object, keys) { + return keys.reduce((obj, key) => { + if (Array.isArray(key)) { + return { + ...obj, + ...pickObject(object, key) + }; + } + + if (object && Object.prototype.hasOwnProperty.call(object, key)) { + return { + ...obj, + [key]: object[key] + }; + } + return obj; + }, {}); +} + +function pick(object, ...keys) { + return object == null ? {} : pickObject(object, keys); +} + +export default pick; diff --git a/src/universal/utils/lodash/pickByIndexOf.js b/src/universal/utils/lodash/pickByIndexOf.js new file mode 100644 index 0000000..127f26d --- /dev/null +++ b/src/universal/utils/lodash/pickByIndexOf.js @@ -0,0 +1,22 @@ +function pickByIndexOf(object, keys) { + if (object == null) { + return {}; + } + + const result = Object.keys(object).reduce((result, cookiesKey) => { + if (object[cookiesKey]) { + if (keys.some(item => cookiesKey.indexOf(item) !== -1)) { + return { + ...result, + [cookiesKey]: object[cookiesKey] + }; + } + return result; + } + return result; + }, {}); + + return result; +} + +export default pickByIndexOf; diff --git a/webpack.client.config.js b/webpack.client.config.js index 7eac9ce..abc9c77 100644 --- a/webpack.client.config.js +++ b/webpack.client.config.js @@ -25,22 +25,19 @@ const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`; const appConfig = require(appConfigFilePath); const commonConfig = require('./webpack.common.config'); const postCssConfig = require('./postcss.config'); -const babelConfig = require('./babel.server.config'); const voltranClientConfigPath = voltranConfig.webpackConfiguration.client; const voltranClientConfig = voltranClientConfigPath ? require(voltranConfig.webpackConfiguration.client) : ''; -const normalizeUrl = require('./lib/os.js'); const replaceString = require('./config/string.js'); const fragmentManifest = require(voltranConfig.routing.dictionary); const fixFragmentManifest = require('./src/universal/core/route/dictionary'); -const isDebug = voltranConfig.dev; +const isDebug = appConfig.dev; const reScript = /\.(js|jsx|mjs)$/; -const distFolderPath = voltranConfig.distFolder; const isProd = process.env.BROWSER && process.env.VOLTRAN_ENV === 'prod'; const hideCssPrefixOnTest = voltranConfig.hideCssPrefixOnTest; @@ -73,27 +70,8 @@ const appConfigFileTarget = `${voltranConfig.appConfigFile.output.path}/${voltra fs.copyFileSync(appConfigFilePath, appConfigFileTarget); -chunks.client.unshift('regenerator-runtime/runtime.js', 'core-js/stable', 'intersection-observer'); - if (isDebug) { - const appConfigJSONContent = require(appConfigFileTarget); - - for (const service in appConfigJSONContent.services) { - appConfigJSONContent.services[service].clientUrl = - appConfigJSONContent.services[service].serverUrl; - } - - const moduleExportsText = 'module.exports'; - const appConfigFileContent = fs.readFileSync(appConfigFileTarget).toString(); - const moduleExportsIndex = appConfigFileContent.indexOf(moduleExportsText); - - let context = appConfigFileContent.substr(0, moduleExportsIndex + moduleExportsText.length); - context += '='; - context += JSON.stringify(appConfigJSONContent); - context += ';'; - - fs.writeFileSync(appConfigFileTarget, context); - + chunks.client.unshift('regenerator-runtime/runtime.js'); chunks.client.push('webpack-hot-middleware/client'); } @@ -234,7 +212,7 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { ? [] : [ new CleanWebpackPlugin({ - verbose: false, + verbose: true, dangerouslyAllowCleanPatternsOutsideProject: true }) ]), diff --git a/webpack.common.config.js b/webpack.common.config.js index cfb65b5..9c624e0 100644 --- a/webpack.common.config.js +++ b/webpack.common.config.js @@ -86,7 +86,7 @@ const commonConfig = merge(voltranCommonConfig, { // Choose a developer tool to enhance debugging // https://webpack.js.org/configuration/devtool/#devtool - devtool: isDebug ? 'inline-cheap-module-source-map' : 'source-map', + // devtool: isDebug ? 'inline-cheap-module-source-map' : 'source-map', plugins: [ new webpack.DefinePlugin({ diff --git a/webpack.server.config.js b/webpack.server.config.js index 4a8e9eb..107b5b3 100644 --- a/webpack.server.config.js +++ b/webpack.server.config.js @@ -16,7 +16,6 @@ const postCssConfig = require('./postcss.config'); const packageJson = require(path.resolve(process.cwd(), 'package.json')); const replaceString = require('./config/string.js'); -const distFolderPath = voltranConfig.distFolder; const isDebug = voltranConfig.dev; const isProd = process.env.BROWSER && process.env.VOLTRAN_ENV === 'prod'; const hideCssPrefixOnTest = voltranConfig.hideCssPrefixOnTest; @@ -122,7 +121,7 @@ const serverConfig = merge(commonConfig, voltranServerConfig, { plugins: [ new CleanWebpackPlugin({ - verbose: false, + verbose: true, dangerouslyAllowCleanPatternsOutsideProject: true }),