npm - kitchen-simulator - Versions diffs - 5.0.0-test.12 → 5.0.0-test.13 - Mend

kitchen-simulator 5.0.0-test.12 → 5.0.0-test.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "5.0.0-test.12",
+  "version": "5.0.0-test.13",
   "description": "It is a kitchen simulator.",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -14,8 +14,17 @@
   },
   "files": [
-    "src/*.js",
-    "src/*.jsx",
+    "src/_renderer.jsx",
+    "src/AppContext.js",
+    "src/constants.js",
+    "src/index.js",
+    "src/index.html.ejs",
+    "src/KitchenConfigurator.jsx",
+    "src/KitchenConfiguratorApp.jsx",
+    "src/models.js",
+    "src/shared-style.js",
+    "src/version.js",
     "src/catalog",
     "src/utils",
     "src/actions",

package/src/_renderer.jsx CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
 import KitchenConfiguratorApp from './KitchenConfiguratorApp.jsx'; // webpack alias points to ../src
-import mockProps from './mockProps.json';
-import mockCategoryData from './categoryData.json';
-import mockDataBundle from './dataBundle.json';
+import mockProps from './mocks/mockProps.json';
+import mockCategoryData from './mocks/categoryData.json';
+import mockDataBundle from './mocks/dataBundle.json';
 import ReactDOM from 'react-dom';
 // --- renderer props ---

package/src/index.html.ejs ADDED Viewed

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" type="text/css" href="/assets/fonts/style.css" />
+    <link
+      rel="icon"
+      type="image/jpg"
+      href="/assets/img/rta/rta_logo_box_blue_ico.jpg"
+      id="favicon_icon_jpg"
+    />
+    <link
+      rel="icon"
+      type="image/svg"
+      href="/assets/img/rta/rta_logo_box_blue_ico.svg"
+      id="favicon_icon_svg"
+    />
+    <link
+      rel="shortcut icon"
+      type="image/jpg"
+      href="/assets/img/rta/rta_logo_box_blue_ico.jpg"
+      id="favicon_shortcut_jpg"
+    />
+    <link
+      rel="shortcut icon"
+      type="image/svg"
+      href="/assets/img/rta/rta_logo_box_blue_ico.svg"
+      id="favicon_shortcut_svg"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body,
+      #app {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        font-family: 'Milliard Book';
+        font-weight: normal;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      #error {
+        position: relative;
+      }
+      ::-webkit-scrollbar {
+        width: 2px;
+        border-radius: 2px;
+        position: absolute;
+      }
+      ::-webkit-scrollbar-track-piece {
+        background-color: #fff;
+        border-radius: 1px;
+        position: absolute;
+      }
+      ::-webkit-scrollbar-thumb:vertical {
+        height: 30px;
+        background-color: rgb(193, 202, 228);
+      }
+      ::-webkit-scrollbar-thumb {
+        background-color: rgb(220, 220, 220);
+        border-radius: 5px;
+        transition: all 0.3s;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(193, 202, 228);
+        border-radius: 5px;
+        transition: all 0.3s;
+      }
+    </style>
+    <!-- Hotjar Tracking Code for New DIY -->
+    <script>
+      (function (h, o, t, j, a, r) {
+        h.hj =
+          h.hj ||
+          function () {
+            (h.hj.q = h.hj.q || []).push(arguments);
+          };
+        h._hjSettings = { hjid: 5088152, hjsv: 6 };
+        a = o.getElementsByTagName('head')[0];
+        r = o.createElement('script');
+        r.async = 1;
+        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+        a.appendChild(r);
+      })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+    </script>
+  </head>
+  <body>
+    <div id="app" style="display: none">
+      <div
+        style="
+          width: 100vw;
+          height: 100vh;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        "
+      >
+        <img
+          id="kc_spinner"
+          style="height: 60px"
+          alt="Loading"
+          src="/assets/img/loading/loading.gif"
+        />
+      </div>
+    </div>
+    <div id="error" style="z-index: -1"></div>
+    <!-- Start of LiveChat (www.livechat.com) code -->
+    <script>
+      function injectThertastore() {
+        // --- LiveChat SCRIPT ---
+        const liveScript = document.createElement('script');
+        liveScript.innerHTML = `
+          window.__lc = window.__lc || {};
+          window.__lc.license = 3185312;
+          (function (n, t, c) {
+            function i(n) { return e._h ? e._h.apply(null, n) : e._q.push(n); }
+            var e = {
+              _q: [], _h: null, _v: '2.0',
+              on: function () { i(['on', c.call(arguments)]); },
+              once: function () { i(['once', c.call(arguments)]); },
+              off: function () { i(['off', c.call(arguments)]); },
+              get: function () {
+                if (!e._h)
+                  throw new Error("[LiveChatWidget] You can't use getters before load.");
+                return i(['get', c.call(arguments)]);
+              },
+              call: function () { i(['call', c.call(arguments)]); },
+              init: function () {
+                var n = t.createElement('script');
+                n.async = true;
+                n.type = 'text/javascript';
+                n.src = 'https://cdn.livechatinc.com/tracking.js';
+                t.head.appendChild(n);
+              }
+            };
+            !n.__lc.asyncInit && e.init();
+            n.LiveChatWidget = n.LiveChatWidget || e;
+          })(window, document, [].slice);
+        `;
+        document.body.appendChild(liveScript);
+        // --- LiveChat NOSCRIPT ---
+        const noscript = document.createElement('noscript');
+        noscript.innerHTML = `
+          <a href="https://www.livechat.com/chat-with/3185312/" rel="nofollow">
+            Chat with us
+          </a>, powered by
+          <a href="https://www.livechat.com/?welcome" rel="noopener nofollow" target="_blank">
+            LiveChat
+          </a>
+        `;
+        document.body.appendChild(noscript);
+      }
+      function injectPrimecabinetry() {
+        // --- Richpanel SCRIPT ---
+        const richpanelScript = document.createElement('script');
+        richpanelScript.innerHTML = `
+          window.richpanel||(window.richpanel=[]),window.richpanel.q=[],
+          mth=["track","debug","atr"],
+          sk=function(e){return function(){
+            a=Array.prototype.slice.call(arguments);
+            a.unshift(e);
+            window.richpanel.q.push(a)
+          }};
+          for(var i=0;mth.length>i;i++)window.richpanel[mth[i]]=sk(mth[i]);
+          window.richpanel.load=function(e){
+            var i=document,
+              n=i.getElementsByTagName("script")[0],
+              r=i.createElement("script");
+            r.type="text/javascript";
+            r.async=true;
+            r.src="https://cdn.richpanel.com/js/richpanel-root.js?appClientId=primecabinetry2965";
+            n.parentNode.insertBefore(r,n)
+          };
+          window.richpanel.ensure_rpuid="";
+          richpanel.load("primecabinetry2965");
+        `;
+        document.body.appendChild(richpanelScript);
+      }
+      // brand → injection function mapping
+      const brandInjectors = {
+        thertastore: injectThertastore,
+        primecabinetry: injectPrimecabinetry
+        // future brands go here
+      };
+      // extract brand from URL
+      const brand = window.location.pathname.split('/')[1];
+      // pick injector
+      const injector = brandInjectors[brand];
+      if (injector) {
+        injector();
+      } else {
+        console.warn(
+          `[Brand Injection] Unknown brand "${brand}". Defaulting to Thertastore.`
+        );
+        brandInjectors['thertastore']();
+      }
+    </script>
+    <!-- End of LiveChat code -->
+  </body>
+</html>

package/src/@history.js DELETED Viewed

@@ -1,3 +0,0 @@
-import * as history from 'history';
-export default history.createBrowserHistory();

package/src/CrossSignOn.jsx DELETED Viewed

@@ -1,94 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ls from 'localstorage-slim';
-import {
-  LOCAL_STORAGE_CUSTOMER_INFO,
-  LOCAL_STORAGE_ORIGINAL_TOKEN,
-  LOCAL_STORAGE_TOKEN_NAME,
-  LOCAL_STORAGE_TOKEN_VALUE
-} from './constants.js';
-import { base64Decode } from './utils/helper.js';
-export const LOG_PREFIX = `[Cross Sign On]`;
-export const QUERY_PARAM_TOKEN = 'token';
-export const ENCODED_QUERY_PARAM_TOKEN = 'details';
-try {
-  console.log(`${LOG_PREFIX} Clearing local storage`);
-  ls.clear();
-} catch (e) {
-  console.log(`${LOG_PREFIX} Error clearing local storage`, e);
-}
-function extractAccessTokenFromUrl() {
-  try {
-    const url = new URL(window.location.href);
-    const token = url.searchParams.get(QUERY_PARAM_TOKEN);
-    const encodedToken = url.searchParams.get(ENCODED_QUERY_PARAM_TOKEN);
-    if (!token && !encodedToken) {
-      console.log(`${LOG_PREFIX} No access token found in URL`);
-      return undefined;
-    }
-    if (token) {
-      ls.set(LOCAL_STORAGE_ORIGINAL_TOKEN, token);
-      ls.set(LOCAL_STORAGE_TOKEN_VALUE, token);
-      ls.set(LOCAL_STORAGE_TOKEN_NAME, 'token=');
-      return token;
-    }
-    try {
-      const decoded = base64Decode(encodedToken);
-      const parsed = JSON.parse(decoded);
-      ls.set(LOCAL_STORAGE_ORIGINAL_TOKEN, encodedToken);
-      if (parsed.token) {
-        ls.set(LOCAL_STORAGE_TOKEN_VALUE, parsed.token);
-      }
-      ls.set(LOCAL_STORAGE_TOKEN_NAME, 'details=');
-      const customerInfo = {
-        email: parsed.email,
-        firstName: parsed.first_name,
-        lastName: parsed.last_name
-      };
-      ls.set(LOCAL_STORAGE_CUSTOMER_INFO, customerInfo);
-      return parsed;
-    } catch (e) {
-      return undefined;
-    }
-  } catch (e) {
-    console.error(`${LOG_PREFIX} Error extracting access token from URL`, e);
-    return undefined;
-  }
-}
-function extractAccessTokenFromLocalStorage() {
-  const token = ls.get(LOCAL_STORAGE_ORIGINAL_TOKEN);
-  if (!token || typeof token !== 'string') return undefined;
-  return token;
-}
-const CrossSignOn = ({ App }) => {
-  const [accessToken, setAccessToken] = useState(() => {
-    return extractAccessTokenFromUrl() || extractAccessTokenFromLocalStorage();
-  });
-  useEffect(() => {
-    const handleTokenChange = () => {
-      const newToken =
-        extractAccessTokenFromUrl() || extractAccessTokenFromLocalStorage();
-      setAccessToken(newToken);
-    };
-    window.addEventListener('token-changed', handleTokenChange);
-    return () => {
-      window.removeEventListener('token-changed', handleTokenChange);
-    };
-  }, []);
-  return <App accessToken={accessToken} />;
-};
-export default CrossSignOn;

package/src/renderer.jsx DELETED Viewed

@@ -1,466 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ContainerDimensions from 'react-container-dimensions';
-import Immutable, { Map } from 'immutable';
-import immutableDevtools from 'immutable-devtools';
-import { createStore } from 'redux';
-import { Provider } from 'react-redux';
-import ReactGA from 'react-ga4';
-import { hotjar } from 'react-hotjar';
-import * as Sentry from '@sentry/react';
-import browserHistory from './@history.js';
-import * as history from 'history';
-import AppContext from './AppContext.js';
-import { HashRouter, Route, Router, Switch } from 'react-router-dom';
-import exporter from './catalog/utils/exporter';
-import axios from 'axios';
-import MyCatalog from './catalog/mycatalog';
-import Login from './components/login/Login.js';
-import Register from './components/login/Register.js';
-import {
-  API_SERVER_URL,
-  ERROR_DATABASE,
-  MODE,
-  NO_DATA_DATABASE,
-  TOE_KICK_MOLDING
-} from './constants.js'; // import { Progress } from 'antd';
-import ToolbarScreenshotButton from '../src/ui/toolbar-screenshot-button.jsx';
-import MobileDetect from 'mobile-detect';
-import * as zlib from 'browserify-zlib';
-import Buffer from 'buffer';
-import { getPathInfo, isEmpty } from './utils/helper.js';
-import {
-  KitchenConfigurator,
-  Models as PlannerModels,
-  Plugins as PlannerPlugins,
-  reducer as PlannerReducer
-} from './index'; //KitchenConfigurator
-import { newProject } from './actions/project-actions.js';
-import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
-import CrossSignOn from './CrossSignOn.jsx';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { ReactQueryDevtools } from 'react-query/devtools';
-import {
-  render2DItem,
-  render3DApplianceItem,
-  render3DItem,
-  render3DLightingItem
-} from './catalog/utils/item-loader'; // Axios config
-// Axios config
-axios.defaults.baseURL = API_SERVER_URL;
-const md = new MobileDetect(window.navigator.userAgent);
-const isMobile = md.mobile();
-if (isMobile === null) {
-  document.getElementById('app').style.display = 'block';
-} else alert('The Kitchen Design software is only available from Desktop use');
-//define state
-let AppState = Map({
-  KitchenConfigurator: new PlannerModels.State()
-});
-console.log('Version: 378.45-202509_DIY-364-mbox-crash');
-ReactGA.initialize([
-  {
-    trackingId: 'G-YK2JCC9F9G' // https://dev.addovisuals.com
-  },
-  {
-    trackingId: 'G-3Y44W0RY2E' // https://demo.kc.addovisuals.com/
-  },
-  {
-    trackingId: 'G-M2VD74KP44' // https://rtastore.diydesignspace.com/
-  }
-]);
-hotjar.initialize('3010506', '6');
-isProduction &&
-  Sentry.init({
-    dsn: process.env.SENTRY_DSN,
-    environment: process.env.SENTRY_ENVIRONMENT
-  });
-//define reducer
-let reducer = (state, action) => {
-  state = state || AppState;
-  state = state.update('KitchenConfigurator', plannerState =>
-    PlannerReducer(plannerState, action)
-  );
-  return state;
-};
-let blackList =
-  isProduction === true
-    ? []
-    : ['UPDATE_MOUSE_COORDS', 'UPDATE_ZOOM_SCALE', 'UPDATE_2D_CAMERA'];
-if (!isProduction) {
-  console.info(
-    'Environment is in development and these actions will be blacklisted',
-    blackList
-  );
-  console.info('Enable Chrome custom formatter for Immutable pretty print');
-  immutableDevtools(Immutable);
-}
-//init store
-let store = createStore(
-  reducer,
-  null,
-  !isProduction && window.devToolsExtension
-    ? window.devToolsExtension({
-        features: {
-          pause: true, // start/pause recording of dispatched actions
-          lock: true, // lock/unlock dispatching actions and side effects
-          persist: true, // persist states on page reloading
-          export: true, // export history of actions in a file
-          import: 'custom', // import history of actions from a file
-          jump: true, // jump back and forth (time travelling)
-          skip: true, // skip (cancel) actions
-          reorder: true, // drag and drop actions in the history list
-          dispatch: true, // dispatch custom actions or action creators
-          test: true // generate tests for the selected actions
-        },
-        actionsBlacklist: blackList,
-        maxAge: 999999
-      })
-    : f => f
-);
-let plugins = [PlannerPlugins.Keyboard(), PlannerPlugins.ConsoleDebugger()];
-let toolbarButtons = [ToolbarScreenshotButton];
-let categoryData;
-if (isMobile === null) {
-  sessionStorage.setItem('visualizerName', getPathInfo(1));
-  axios
-    .get(`${API_SERVER_URL}/api/dealer/${getPathInfo(1)}/config`)
-    .then(async res => {
-      const { success, id, logoImg, companyUrl, config } = res.data;
-      let configdata = JSON.parse(config);
-      if (
-        success === false ||
-        (id === 0 && logoImg === '' && companyUrl === '')
-      ) {
-        alert('No Catalog');
-        return;
-      }
-      await axios
-        .post(
-          `${API_SERVER_URL}/api/planner/read/planner`,
-          {
-            type: MODE === 'staging' ? 2 : 1
-          },
-          {
-            responseType: 'arraybuffer'
-          }
-        )
-        .then(async response => {
-          const unzip_data = JSON.parse(
-            zlib.unzipSync(new Buffer.Buffer.from(response.data)).toString()
-          );
-          const { data, appliances, lighting, furnishing, success } =
-            unzip_data;
-          if (success === false) {
-            console.log(NO_DATA_DATABASE);
-          }
-          if (success === 'error') {
-            alert(ERROR_DATABASE);
-          }
-          await axios
-            .post(
-              `${API_SERVER_URL}/api/toolbar/getCategoryData`,
-              {
-                type: MODE === 'staging' ? 2 : 1
-              },
-              {
-                responseType: 'arraybuffer'
-              }
-            )
-            .then(response => {
-              categoryData = JSON.parse(
-                zlib.unzipSync(new Buffer.Buffer.from(response.data)).toString()
-              );
-              const { catalogs, colorAlias, subgroups } = categoryData.data;
-              let door_color_alias = [];
-              let subgroup_ids = catalogs
-                .filter(item => item.id == id)[0]
-                .manufacturer_subgroup_ids.split(',');
-              let door_color_alias_ids = [];
-              subgroups.forEach(subgroup => {
-                if (subgroup_ids.some(id => id == subgroup.id.toString())) {
-                  subgroup.door_color_alias_ids.split(',').forEach(item => {
-                    item != '' && door_color_alias_ids.push(item);
-                  });
-                }
-              });
-              colorAlias.forEach(
-                color =>
-                  door_color_alias_ids.some(id => id == color.id.toString()) &&
-                  door_color_alias.push(color)
-              );
-              const doorStyleData = categoryData.data.doorStyles.items;
-              categoryData.data.doorStyles.items = doorStyleData.treeStruct;
-              // construct a doorStyle variable
-              door_color_alias.forEach(dca => {
-                doorStyleData.doorColorData.forEach(dc => {
-                  // convert string into integer.
-                  dc.door_style_id = parseInt(dc.door_style_id);
-                  // find the original for the alias.
-                  if (dc.id !== dca.door_color_id) return;
-                  dc.name = dca.alias_name;
-                  dc.color_sku_alias = dca.sku_alias_name;
-                  // judge the door style of the current door color
-                  doorStyleData.treeStruct.forEach(el => {
-                    el.items.forEach(
-                      elem =>
-                        dc.door_style_id === elem.id &&
-                        (dc.door_style_name = elem.name)
-                    );
-                  });
-                  // convert string into array
-                  dca.alias_installation_type = isEmpty(
-                    dca.alias_installation_type
-                  )
-                    ? []
-                    : dca.alias_installation_type
-                        .split(',')
-                        .map(item => parseInt(item));
-                  // add door color to doorStyle variable according to 'alias_installation_type' of its alias
-                  categoryData.data.doorStyles.items.forEach(item => {
-                    if (
-                      dca.alias_installation_type.some(ait => ait === item.id)
-                    )
-                      item.items.forEach(ds => {
-                        if (ds.name === dc.door_style_name) ds.items.push(dc);
-                      });
-                  });
-                });
-              });
-              let molding = [];
-              let toeMoldingData = [];
-              let cabinets = categoryData.data.cabinets;
-              cabinets[cabinets.length - 1].items.forEach(index => {
-                if (index.name.toLowerCase().includes('molding')) {
-                  index.items.forEach(item => {
-                    molding.push(item);
-                  });
-                }
-                // store all toe kick molding templates
-                if (index.name.includes(TOE_KICK_MOLDING)) {
-                  index.items.forEach(item => {
-                    toeMoldingData.push(item);
-                  });
-                }
-              });
-              categoryData.data.toeMoldingData = toeMoldingData;
-              const promises = molding.map(child => {
-                return new Promise((resolve, reject) => {
-                  const url = child?.shape_svg;
-                  if (!url) {
-                    // Skip if no SVG URL available
-                    return resolve();
-                  }
-                  const loader = new SVGLoader();
-                  loader.load(
-                    url,
-                    data => {
-                      child.data = {
-                        paths: data.paths,
-                        svg_width: data.xml?.viewBox?.animVal?.width ?? 0,
-                        svg_height: data.xml?.viewBox?.animVal?.height ?? 0
-                      };
-                      resolve();
-                    },
-                    null,
-                    error => {
-                      console.error(error);
-                      reject(error);
-                    }
-                  );
-                });
-              });
-              return Promise.all(promises);
-            });
-          // Load Outline SVG Data
-          let svgLoadPromises = data.map(async item => {
-            if (item.outline) {
-              try {
-                const response = await fetch(item.outline, {
-                  cache: 'no-store'
-                });
-                const svgText = await response.text();
-                const loader = new SVGLoader();
-                const parsed = loader.parse(svgText);
-                if (isEmpty(parsed.paths)) return null;
-                return {
-                  paths: parsed.paths,
-                  svgWidth:
-                    parseFloat(parsed.xml.getAttribute('width')) ||
-                    parsed.xml.viewBox?.animVal?.width ||
-                    0,
-                  svgHeight:
-                    parseFloat(parsed.xml.getAttribute('height')) ||
-                    parsed.xml.viewBox?.animVal?.height ||
-                    0,
-                  reverse: !!parseFloat(parsed.xml.getAttribute('height'))
-                    ? false
-                    : true
-                };
-              } catch (err) {
-                console.error('Failed to load SVG:', item.outline, err);
-                return null;
-              }
-            } else {
-              return null;
-            }
-          });
-          let outlineSVGData = await Promise.all(svgLoadPromises);
-          // End: Load Outline SVG Data
-          const Item = [];
-          data.forEach((obj, index) => {
-            Item.push(
-              exporter({
-                ...obj,
-                type: 'cabinet',
-                outlineSVGData: outlineSVGData[index],
-                render2DItem,
-                render3DItem
-              })
-            );
-          });
-          appliances.forEach(obj => {
-            Item.push(
-              exporter({
-                ...obj,
-                render2DItem,
-                render3DItem: render3DApplianceItem,
-                type: 'appliance'
-              })
-            );
-          });
-          lighting.forEach(obj => {
-            Item.push(
-              exporter({
-                ...obj,
-                type: 'lighting',
-                render2DItem,
-                render3DItem: render3DLightingItem
-              })
-            );
-          });
-          furnishing.forEach(obj => {
-            Item.push(
-              exporter({
-                ...obj,
-                type: 'furnishing',
-                render2DItem,
-                render3DItem: render3DApplianceItem
-              })
-            );
-          });
-          for (let x in Item) MyCatalog.registerElement(Item[x]);
-          let MainComponent = (props, width, height) => (
-            <KitchenConfigurator
-              catalog={MyCatalog}
-              width={width}
-              height={height}
-              {...props}
-              logoImage={logoImg}
-              companyURL={companyUrl}
-              plugins={plugins}
-              toolbarButtons={toolbarButtons}
-              stateExtractor={state => state.get('KitchenConfigurator')}
-              categoryData={categoryData}
-              data={data}
-              configData={configdata}
-            />
-          );
-          const queryClient = new QueryClient();
-          const MainApp = props => (
-            <QueryClientProvider client={queryClient}>
-              <ReactQueryDevtools initialIsOpen={false} />
-              <AppContext.Provider>
-                <Provider store={store}>
-                  <ContainerDimensions>
-                    {({ width, height }) => (
-                      <HashRouter history={history.createHashHistory()}>
-                        <Router history={browserHistory}>
-                          <Switch>
-                            <Route
-                              exact
-                              path="/:visualizerName/"
-                              name="kc"
-                              render={routeProps => (
-                                <MainComponent
-                                  {...routeProps}
-                                  {...props}
-                                  width={width}
-                                  height={height}
-                                />
-                              )}
-                            />
-                            <Route path="/login" render={() => <Login />} />
-                            <Route
-                              path="/register"
-                              render={() => <Register />}
-                            />
-                            <Route
-                              path="/:visualizerName/project/:role/:token/:pid"
-                              render={routeProps => (
-                                <MainComponent
-                                  {...routeProps}
-                                  {...props}
-                                  width={width}
-                                  height={height}
-                                />
-                              )}
-                            />
-                          </Switch>
-                        </Router>
-                      </HashRouter>
-                    )}
-                  </ContainerDimensions>
-                </Provider>
-              </AppContext.Provider>
-            </QueryClientProvider>
-          );
-          setTimeout(() => {
-            ReactDOM.render(
-              <CrossSignOn App={MainApp} />,
-              document.getElementById('app')
-            );
-          }, 100);
-        })
-        .catch(err => {
-          alert(
-            'Something wrong happened. Do you want to clear the cache and restart the app?'
-          );
-          console.log('Failed to load Category Data in src/renderer.jsx', err);
-          sessionStorage.clear();
-          store.dispatch(newProject());
-        });
-    });
-}