Implemented #25

Adapted the routing so that dynamic paths will be handled.
amosproj · May 3, 2021 · d691816 · d691816
1 parent 75b5316
commit d691816
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 5 deletions.
diff --git a/frontend/src/components/sidebar/SidebarComponent.js b/frontend/src/components/sidebar/SidebarComponent.js
@@ -57,41 +57,123 @@ function SidebarComponent() {
         )
     }
 
+    /**
+     * Calculates all possible urls by appending products solutions and services
+     * @param {array} categories the url(s) which should be appended
+     * @returns the array of possible urls
+     */
+    function allMenuItems(categories = []) {
+        const a1 = categories.map((path) => path + SLUGS.products);
+        const a2 = categories.map((path) => path + SLUGS.solutions);
+        const a3 = categories.map((path) => path + SLUGS.services);
+        return categories.concat(a1).concat(a2).concat(a3);
+    }
+
 
     return (
         <Menu isMobile={isMobile}>
 
             <div style={{ paddingTop: 20, paddingBottom: 20 }}>
             <img src={logo} />
             </div>
+            {console.log(allMenuItems())}
             <MenuItem
                 id={SLUGS.categories}
-                items={[SLUGS.generation, SLUGS.transmission, SLUGS.industrialApplications]}
+                items={allMenuItems([SLUGS.generation, SLUGS.transmission, SLUGS.industrialApplications])}
                 title='Browse'
                 icon={IconHome}
                 onClick={() => onClick(SLUGS.categories)}
             >
                 <MenuItem
                     id={SLUGS.generation}
                     title='Generation'
+                    items={allMenuItems([SLUGS.generation])}
                     level={2}
                     icon={IconOverview}
                     onClick={() => onClick(SLUGS.generation)}
-                />
+                >
+                    <MenuItem
+                        id={SLUGS.generation + SLUGS.products}
+                        title='Products'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.generation + SLUGS.products)}
+                    />
+                    <MenuItem
+                        id={SLUGS.generation + SLUGS.solutions}
+                        title='Solutions'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.generation + SLUGS.solutions)}
+                    />
+                    <MenuItem
+                        id={SLUGS.generation + SLUGS.services}
+                        title='Services'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.generation + SLUGS.services)}
+                    />
+                </MenuItem>
                 <MenuItem
                     id={SLUGS.transmission}
                     title='Transmission'
+                    items={allMenuItems([SLUGS.transmission])}
                     level={2}
                     icon={IconContacts}
                     onClick={() => onClick(SLUGS.transmission)}
-                />
+                >
+                    <MenuItem
+                        id={SLUGS.transmission + SLUGS.products}
+                        title='Products'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.transmission + SLUGS.products)}
+                    />
+                    <MenuItem
+                        id={SLUGS.transmission + SLUGS.solutions}
+                        title='Solutions'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.transmission + SLUGS.solutions)}
+                    />
+                    <MenuItem
+                        id={SLUGS.transmission + SLUGS.services}
+                        title='Services'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.transmission + SLUGS.services)}
+                    />
+                </MenuItem>
                 <MenuItem
                     id={SLUGS.industrialApplications}
                     title='Industrial Applications'
+                    items={allMenuItems([SLUGS.industrialApplications])}
                     level={2}
                     icon={IconHome}
                     onClick={() => onClick(SLUGS.industrialApplications)}
-                />
+                >
+                    <MenuItem
+                        id={SLUGS.industrialApplications + SLUGS.products}
+                        title='Products'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.industrialApplications + SLUGS.products)}
+                    />
+                    <MenuItem
+                        id={SLUGS.industrialApplications + SLUGS.solutions}
+                        title='Solutions'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.industrialApplications + SLUGS.solutions)}
+                    />
+                    <MenuItem
+                        id={SLUGS.industrialApplications + SLUGS.services}
+                        title='Services'
+                        level={3}
+                        icon={IconHome}
+                        onClick={() => onClick(SLUGS.industrialApplications + SLUGS.services)}
+                    />
+                </MenuItem>
             </MenuItem>
             <MenuItem
                 id={SLUGS.dashboard}

diff --git a/frontend/src/resources/slugs.js b/frontend/src/resources/slugs.js
@@ -6,6 +6,9 @@ export default {
     transmission: '/transmission',
     generation: '/generation',
     industrialApplications: '/industrialApplications',
+    products: '/products',
+    solutions: '/solutions',
+    services: '/services',
     overview: '/overview',
     quickguide: '/quickguide',
     overviewTwo: '/overview/two',

diff --git a/frontend/src/routes/PrivateRoutes.js b/frontend/src/routes/PrivateRoutes.js
@@ -3,6 +3,7 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 import SLUGS from 'resources/slugs';
 import LoadingComponent from 'components/loading';
 const ScenariosDashboardComponent = lazy(() => import('./scenarios/scenariosdashboard'));
+const ProductSolutionsServices = lazy(() => import('./dynamicPaths/ProductSolutionsServicesComponent'));
 const DashboardComponent = lazy(() => import('./dashboard'));
 const ScenariosComponent = lazy(() => import('./scenarios'));
 function PrivateRoutes() {
@@ -15,11 +16,14 @@ function PrivateRoutes() {
                 <Route exact path={SLUGS.generation} render={() => <div>Generation</div>}/>
                 <Route exact path={SLUGS.transmission} render={() => <div>Transmission</div>}/>
                 <Route exact path={SLUGS.industrialApplications} render={() => <div>Industrial Applications</div>} />
+                <Route path={SLUGS.generation+'/:type'} component={ProductSolutionsServices} />
+                <Route path={SLUGS.transmission+'/:type'} component={ProductSolutionsServices} />
+                <Route path={SLUGS.industrialApplications+'/:type'} component={ProductSolutionsServices} />
+                <Route exact path={SLUGS.solutions} render={() => <div>This is where all the solutions of the selected category could be shown.</div>} />
                 <Route exact path={SLUGS.overview} component={ScenariosDashboardComponent} />
                 <Route exact path={SLUGS.comparison} render={() => <div>comparison</div>} />   
                 <Route exact path={SLUGS.inbox} render={() => <div>inbox</div>} />
                 {/* <Route exact path={SLUGS.overviewTwo} component={DropdownComponent}/> */}
-                <Route exact path={SLUGS.overviewThree} render={() => <div>overviewThree</div>} />
 
                 <Route exact path={SLUGS.categories} render={() => <div>categories</div>} />
                 <Route exact path={SLUGS.ideasTwo} render={() => <div>ideasTwo</div>} />

diff --git a/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js b/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function ProductSolutionsServicesComponent() {
+  const { type } = useParams();
+
+  return (
+    <>
+      <h2>At this location the component which shows all the products / models will be implemented</h2>
+      {type === 'products' && <div>This is where all the products of the selected category could be shown.</div>}
+      {type === 'solutions' && <div>This is where all the solutions of the selected category could be shown.</div>}
+      {type === 'services' && <div>This is where all the services of the selected category could be shown.</div>}
+    </>
+  );
+}