Task: Add router and routes config and authority route and add types to be router

.prettierrc.json

@@ -1,6 +1,6 @@
 {
   "trailingComma": "es5",
-  "tabWidth": 2,
+  "tabWidth": 4,
   "semi": false,
   "singleQuote": true
 }

package.json

@@ -51,6 +51,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
     "craco-less": "^1.17.1",
     "prettier": "^2.3.1",
     "react-scripts": "4.0.3",

src/app/App.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
+import RouterView from '../routes'
 import './App.css'
 
 const App = () => {
   return (
-    <div className="App">
+    <RouterView />
-      <h1>CUBETIQ</h1>
-    </div>
   )
 }
 

src/config/index.ts

@@ -0,0 +1,3 @@
+export const AppConfig = {
+    APP_NAME: process.env.REACT_APP_NAME
+}

src/routes/index.tsx

@@ -1,7 +1,26 @@
 import React from 'react'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import { routes } from './routes'
 
 const RouterView = () => {
-  return <>Router</>
+    return (
+        <Router>
+            <Switch>
+                {routes.map((route) => {
+                    return (
+                        <Route
+                            key={route.key}
+                            exact={route.exact}
+                            component={route.component}
+                            children={route.children}
+                            location={route.location}
+                            path={route.path}
+                        />
+                    )
+                })}
+            </Switch>
+        </Router>
+    )
 }
 
 export default RouterView

src/routes/routes.ts

@@ -1 +0,0 @@
-export const routes: Array<any> = []

src/routes/routes.tsx

@@ -0,0 +1,49 @@
+import { RouteProps } from 'react-router-dom'
+import About from '../pages/About'
+import Home from '../pages/Home'
+import RouteTypes from './types'
+
+interface Authority {
+    authority?: string | undefined
+    strict?: boolean | undefined
+    with?: Authority | undefined
+}
+
+interface AuthorityProps {
+    authorities?: Authority | string[] | string | undefined
+    strictAuthority?: boolean | undefined
+}
+
+interface CustomRouteProps extends RouteProps, AuthorityProps {
+    key: string
+}
+
+export interface MenuProps {
+    icon: any
+    label?: string | undefined
+}
+
+export interface SideMenuRouteProps extends CustomRouteProps, MenuProps {}
+
+export interface SideSubMenuProps extends MenuProps {
+    key?: string | undefined
+    subMenus: SideSubMenuProps[]
+}
+
+const routes: CustomRouteProps[] = [
+    {
+        key: 'home',
+        exact: true,
+        path: RouteTypes.HOME,
+        component: () => <Home />,
+    },
+    {
+        key: 'about',
+        path: RouteTypes.ABOUT,
+        component: () => <About />,
+    },
+]
+
+const menus: (SideMenuRouteProps | SideSubMenuProps)[] = []
+
+export { routes, menus }

src/routes/types.ts

@@ -0,0 +1,6 @@
+const RouteTypes = {
+    HOME: "/",
+    ABOUT: "/about",
+}
+
+export default RouteTypes