From e936385f88d827e517a1d4cf30149eddc09f1ecc Mon Sep 17 00:00:00 2001
From: mohiit1502 <mohiit1502@gmail.com>
Date: Thu, 15 Jun 2023 16:18:03 +0530
Subject: [PATCH] Updated template with TS fixes

---
 src/app/Router.tsx                |  6 +++++-
 src/app/static/styles/global.scss | 18 ++++++++++++++++++
 src/app/types/route.d.ts          |  6 ++++++
 src/app/utils/helper.js           | 14 --------------
 src/app/utils/helper.tsx          | 15 +++++++++++++++
 src/index.tsx                     | 13 ++++++++-----
 6 files changed, 52 insertions(+), 20 deletions(-)
 create mode 100644 src/app/types/route.d.ts
 delete mode 100644 src/app/utils/helper.js
 create mode 100644 src/app/utils/helper.tsx

diff --git a/src/app/Router.tsx b/src/app/Router.tsx
index ff2c362..6b12a09 100644
--- a/src/app/Router.tsx
+++ b/src/app/Router.tsx
@@ -1,8 +1,12 @@
 import { useRoutes } from "react-router-dom"
+import * as pages from "./pages"
+import Helper from "./utils/helper"
 import ROUTES from "./routes"
 
+Helper.populateComponentsInRoutes(ROUTES, pages)
+
 interface RouterProps {}
 
-const Router = (props: RouterProps) => useRoutes(ROUTES)
+const Router = (props: RouterProps): JSX.Element | null => useRoutes(ROUTES)
 
 export default Router
diff --git a/src/app/static/styles/global.scss b/src/app/static/styles/global.scss
index e69de29..7defc06 100644
--- a/src/app/static/styles/global.scss
+++ b/src/app/static/styles/global.scss
@@ -0,0 +1,18 @@
+html, body, #root {
+	height: 100%;
+	width: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/src/app/types/route.d.ts b/src/app/types/route.d.ts
new file mode 100644
index 0000000..2e08438
--- /dev/null
+++ b/src/app/types/route.d.ts
@@ -0,0 +1,6 @@
+interface RouteConfig {
+  path: String
+  class: String
+  element: String | JSX.Element | null
+  children?: RouteConfig[]
+}
diff --git a/src/app/utils/helper.js b/src/app/utils/helper.js
deleted file mode 100644
index e1712dd..0000000
--- a/src/app/utils/helper.js
+++ /dev/null
@@ -1,14 +0,0 @@
-class Helper {
-  static populateComponentsInRoutes(routes, components) {
-    while (routes) {
-      routes.forEach((route) => {
-        route.element = components[route.element]
-        if (route.children) {
-          Helper.populateComponentsInRoutes(route.children, components)
-        }
-      })
-    }
-  }
-}
-
-export default Helper
diff --git a/src/app/utils/helper.tsx b/src/app/utils/helper.tsx
new file mode 100644
index 0000000..921dac2
--- /dev/null
+++ b/src/app/utils/helper.tsx
@@ -0,0 +1,15 @@
+class Helper {
+  static populateComponentsInRoutes(routes: RouteConfig[], components: any) {
+    routes &&
+      routes.forEach((route) => {
+        const Component: JSX.ElementType =
+          components[route.element as keyof object]
+        route.element = <Component />
+        if (route.children) {
+          Helper.populateComponentsInRoutes(route.children, components)
+        }
+      })
+  }
+}
+
+export default Helper
diff --git a/src/index.tsx b/src/index.tsx
index 56496be..4b03c8d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
 import { Provider } from "react-redux"
 import { store } from "./app/store"
 import Router from "./app/Router"
@@ -9,8 +10,10 @@ const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
 
 root.render(
   <React.StrictMode>
-    <Provider store={store}>
-      <Router />
-    </Provider>
-  </React.StrictMode>
-)
\ No newline at end of file
+    <BrowserRouter>
+      <Provider store={store}>
+        <Router />
+      </Provider>
+    </BrowserRouter>
+  </React.StrictMode>,
+)