FIX: client js packages fixes and welcome screen style

hepsiburada · Sep 29, 2022 · b19e836 · b19e836
1 parent 43b4a2e
commit b19e836
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 69 deletions.
diff --git 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
@@ -4,45 +4,44 @@ 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)
       }
     };
 
     if (!process.env.BROWSER) {
       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
@@ -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
@@ -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
@@ -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"
     >
       <div className="card">
-        <div className="card-header">
-          <div className="badge" style={{ backgroundColor: STATUS_COLOR[status] }}>
-            {title}
-          </div>
+        <div className="ribbon-wrapper">
+          <div className={`ribbon color-${status}`}> {title}</div>
         </div>
         <div className="card-title">{item.name}</div>
         <div className="card-subtitle">

diff --git 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,14 +220,62 @@ 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;
             justify-content: center;
             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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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({