Routes

backend/.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+mynotes.md

ui/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  "extends": [
+    "react-app",
+    "react-app/jest"
+  ]
+}

ui/package.json

@@ -11,6 +11,7 @@
     "eslint": "^8.17.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -19,6 +20,7 @@
     "build": "react-scripts build --mode=production",
     "test-watch": "react-scripts test --coverage",
     "test": "react-scripts test --watchAll=false",
+    "update-test": "react-scripts test -- -u",
     "eject": "react-scripts eject",
     "ci: lighthouse": "lhci autorun"
   },

ui/src/App.js

@@ -1,18 +1,10 @@
-import Dashboard from "./Components/Dashboard/Dashboard";
-import Footer from "./Components/Footer/Footer";
-import { FEATURE_FLAGS, FEATURE_FLAGS_HEADERS} from "./Mock/featureFlags";
+import RootRoute from './Routes/Route';
 
 function App() {
   return (
-    <main 
-      className='flex flex-col items-center'
-    >
-      <Dashboard 
-        featureFlags={FEATURE_FLAGS} 
-        headers={FEATURE_FLAGS_HEADERS}
-      />
-      <Footer />
-    </main>
+    <>
+      <RootRoute />
+    </>
   );
 }
 

ui/src/Components/Dashboard/Table/TableHeader/TableHeader.js

@@ -1,4 +1,3 @@
-import PreviousMap from "postcss/lib/previous-map";
 import { camelCaseToNormal } from "../../../../Utils/helpers";
 import SortCursor from "./SortCursor";
 import { TABLE } from "../../../../Constant/constant";

ui/src/Components/Footer/Footer.js

@@ -4,8 +4,8 @@ export default function Footer(){
     return(
         <footer className="my-8 w-screen flex justify-center text-xs">
             <span className="ml-2">{FOOTER.COPYRIGHT}</span>
-            <a href="#" className="ml-2 hover:underline">{FOOTER.RDS_WEBSITE}</a>
-            <a href="#" className="ml-2 hover:underline">{FOOTER.DISCORD_SERVER}</a> 
+            <a href="http://www.google.com" className="ml-2 hover:underline">{FOOTER.RDS_WEBSITE}</a>
+            <a href="http://www.google.com" className="ml-2 hover:underline">{FOOTER.DISCORD_SERVER}</a> 
         </footer>
     )
 }

ui/src/Components/Header/Header.js

@@ -11,7 +11,7 @@ export default function Header({ user }) {
       />
 
       <h1 className='text-lg'>
-        {user.github_display_name}
+      {user.github_display_name}
       </h1>
 
       <Button

ui/src/Components/Layout/Layout.js

@@ -0,0 +1,19 @@
+import Header from '../Header/Header';
+import Footer from '../Footer/Footer';
+import Navigation from '../Navigation/Navigation';
+import { USER } from '../../test/Fixtures/user';
+
+export default function Layout(props){
+    return(
+        <>
+        <Header user={USER} />
+            <main className='flex flex-row my-4'>
+                <Navigation />
+                <section> 
+                    {props.children}
+                </section>
+            </main>
+        <Footer />
+        </>
+    )
+}

ui/src/Components/Navigation/Navigation.js

@@ -0,0 +1,22 @@
+import { NavLink } from "react-router-dom";
+import { NAV } from '../../Constant/routes';
+
+export default function LeftNav(){
+    const createNavigation = () => {
+        return NAV.map((item, key) => {
+            if(item.visible){
+                return <li key={key} className='text-blue-600 hover:underline text-sm py-1'>
+                  <NavLink to={item.path}>{item.name}</NavLink> 
+                </li>
+            }
+            return null;
+        })
+    }
+    return(
+        <nav className='px-3'>
+            <ul>
+               {createNavigation()} 
+            </ul>
+        </nav>
+    )
+}

ui/src/Constant/constant.js

@@ -4,10 +4,8 @@ export const FOOTER = {
     "DISCORD_SERVER":"Discord server"
 }
 
-
 export const TABLE = {
     "ASCENDING":"ascending",
     "DESCENDING":"descending",
     "ENABLED":"Enabled",
 }
-

ui/src/Constant/routes.js

@@ -0,0 +1,45 @@
+import Home from '../Pages/Home/Home';
+import Docs from '../Pages/Docs/Docs';
+import Sdk from '../Pages/Sdk/Sdk';
+import Users from '../Pages/Users/Users';
+import Flags from '../Pages/Flags/Flags';
+import NotFound from '../Pages/NotFound/NotFound';
+
+export const NAV = [
+    {
+        name: 'Home',
+        path: '/',
+        element: <Home />,
+        visible: true
+    },
+    {
+        name: "Create Users",
+        path:  "/users",
+        element:  <Users />,
+        visible: true
+
+    },
+    {
+        name: "Flags",
+        path:  "/flags",
+        element: <Flags />,
+        visible: true
+    },
+    {
+        name: "SDK",
+        path:  "/SDK",
+        element: <Sdk />,
+        visible: true
+    },
+    {
+        name: "Docs",
+        path:  "/docs",
+        element: <Docs />,
+        visible: true
+    },
+    {
+        path: "*",
+        element: <NotFound />,
+        visible: false
+    }
+]

ui/src/Pages/Docs/Docs.js

@@ -0,0 +1,9 @@
+import Layout from "../../Components/Layout/Layout";
+
+export default function Docs(){
+    return(
+        <Layout>
+            <h1>Docs</h1>
+        </Layout>
+    )
+}

ui/src/Pages/Flags/Flags.js

@@ -0,0 +1,9 @@
+import Layout from "../../Components/Layout/Layout";
+
+export default function Flags(){
+    return(
+        <Layout>
+            <h1>Flags</h1>
+        </Layout>
+    )
+}

ui/src/Pages/Home/Home.js

@@ -0,0 +1,17 @@
+import Dashboard from "../../Components/Dashboard/Dashboard";
+import Layout from "../../Components/Layout/Layout";
+import { FEATURE_FLAGS, FEATURE_FLAGS_HEADERS} from "../../Mock/featureFlags";
+
+export default function Home(){
+    return(
+        <Layout>
+            <Dashboard 
+            featureFlags={FEATURE_FLAGS} 
+            headers={FEATURE_FLAGS_HEADERS}
+            />
+       </Layout>
+    )
+}
+
+
+

ui/src/Pages/NotFound/NotFound.js

@@ -0,0 +1,10 @@
+import Layout from "../../Components/Layout/Layout";
+import { Link} from "react-router-dom";
+
+export default function NotFound(){
+    return(
+        <Layout>
+            <h1>Not found. Go back to <Link to="/">Home</Link></h1>
+        </Layout>
+    )
+}

ui/src/Pages/Sdk/Sdk.js

@@ -0,0 +1,9 @@
+import Layout from "../../Components/Layout/Layout";
+
+export default function Sdk(){
+    return(
+        <Layout>
+            <h1>Sdk</h1>
+        </Layout>
+    )
+}

ui/src/Pages/Users/Users.js

@@ -0,0 +1,9 @@
+import Layout from "../../Components/Layout/Layout";
+
+export default function Users(){
+    return(
+        <Layout>
+            <h1>Users</h1>
+        </Layout>
+    )
+}

ui/src/Routes/Route.js

@@ -0,0 +1,18 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { NAV } from "../Constant/routes";
+
+export default function RootRoute(){
+    const createNavigation = () => {
+        return NAV.map((item, key) => {
+            const Element = item.element;
+            return <Route path={item.path} element={Element} />;
+        })
+    }
+    return(
+        <BrowserRouter>
+        <Routes>
+            {createNavigation()}
+        </Routes>
+       </BrowserRouter>
+    )
+}