From 8d7041b6f9ba3a7d8fe261d973b499a1576c8508 Mon Sep 17 00:00:00 2001
From: Mateusz Lis <110568418+mlisek96@users.noreply.github.com>
Date: Sun, 26 Nov 2023 13:46:33 +0100
Subject: [PATCH] update: routes

---
 .../NotFoundPageContainer.jsx                 | 90 +++++++++----------
 src/main.tsx                                  | 26 +++---
 src/router/router.tsx                         | 65 ++++++++------
 3 files changed, 95 insertions(+), 86 deletions(-)

diff --git a/src/components/NotFoundPageContainer/NotFoundPageContainer.jsx b/src/components/NotFoundPageContainer/NotFoundPageContainer.jsx
index a4f8887..1fc56ee 100644
--- a/src/components/NotFoundPageContainer/NotFoundPageContainer.jsx
+++ b/src/components/NotFoundPageContainer/NotFoundPageContainer.jsx
@@ -1,52 +1,52 @@
-import {Container, Image, SimpleGrid, Text, Title} from "@mantine/core";
-import {ButtonGetStarted} from "../ButtonGetStarted/ButtonGetStarted";
-import image from "../../images/picture-background-404.png";
+import { Container, Image, SimpleGrid, Text, Title } from '@mantine/core';
+import image from '../../images/picture-background-404.png';
+import { ButtonGetStarted } from '../ButtonGetStarted/ButtonGetStarted';
 import './NotFoundPageContainer.scss';
 
 export function NotFoundPageContainer() {
-    // function handleClick(event) {
-    //     // event.preventDefault();
-    //     if (localStorage.getItem('valueNameTaken')) {
-    //         location.href = '/main-page';
-    //     }
-    // }
+  // function handleClick(event) {
+  //     // event.preventDefault();
+  //     if (localStorage.getItem('valueNameTaken')) {
+  //         location.href = '/main-page';
+  //     }
+  // }
 
-    return (
-        <div>
-            <Container className="NotFoundPageContainer">
-                <SimpleGrid
-                    spacing={80}
-                    cols={2}
-                    breakpoints={[{ maxWidth: 'sm', cols: 1, spacing: 40 }]}
-                >
-                    <div>
-                        <Title
-                            className='NotFoundPageContainer__title'
-                        >
+  return (
+    <div>
+      <Container className="NotFoundPageContainer">
+        <SimpleGrid
+          spacing={80}
+          cols={2}
+          breakpoints={[{ maxWidth: 'sm', cols: 1, spacing: 40 }]}
+        >
+          <div>
+            <Title
+              className="NotFoundPageContainer__title"
+            >
                             Something is not right...
-                        </Title>
-                        <Text
-                            color="dimmed"
-                            size="lg"
-                        >
+            </Title>
+            <Text
+              color="dimmed"
+              size="lg"
+            >
                             Page you are trying to open does not exist. You may have mistyped the address,
                             or the page has been moved to another URL.
-                        </Text>
-                        <ButtonGetStarted
-                            linkTo={'/BTApp'}
-                            mb={'2.5rem'}
-                            mt={'1.5rem'}
-                            size={'md'}
-                            label={'Get back to main page'}
-                            // onClick={handleClick}
-                        />
-                    </div>
-                    <Image
-                        src={image}
-                        className="NotFoundPageContainer__img"
-                    />
-                </SimpleGrid>
-            </Container>
-        </div>
-    )
-}
\ No newline at end of file
+            </Text>
+            <ButtonGetStarted
+              linkTo="/main-page"
+              mb="2.5rem"
+              mt="1.5rem"
+              size="md"
+              label="Get back to main page"
+              // onClick={handleClick}
+            />
+          </div>
+          <Image
+            src={image}
+            className="NotFoundPageContainer__img"
+          />
+        </SimpleGrid>
+      </Container>
+    </div>
+  );
+}
diff --git a/src/main.tsx b/src/main.tsx
index f911ae8..d4f5be0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,15 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.js'
-import { BudgetsProvider } from "./contexts/BudgetContext.jsx";
-import './index.scss'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.js';
+import { BudgetsProvider } from './contexts/BudgetContext.jsx';
+import './index.scss';
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-      <BudgetsProvider>
-          <App />
-      </BudgetsProvider>
-  </React.StrictMode>
-)
+const container = document.getElementById('root') as HTMLElement;
+const root = createRoot(container);
+root.render(
+  <StrictMode>
+    <BudgetsProvider>
+      <App />
+    </BudgetsProvider>
+  </StrictMode>,
+);
diff --git a/src/router/router.tsx b/src/router/router.tsx
index bee1851..ab889af 100644
--- a/src/router/router.tsx
+++ b/src/router/router.tsx
@@ -1,36 +1,43 @@
-import { Navigate, createBrowserRouter } from 'react-router-dom';
-import { Layout } from '$/components/Layout/Layout';
+import { Suspense } from 'react';
+import { Navigate, Outlet, createBrowserRouter } from 'react-router-dom';
 import { NotFoundPage } from '$/views/404Page';
-import { AddExpense } from '$/views/AddExpense';
-import { ExpensesTable } from '$/views/ExpensesTable';
-import { ExpensesTableCategory } from '$/views/ExpensesTableCategory';
-import { Home } from '$/views/HeroPage';
-import { LogIn } from '$/views/LogIn';
-import { MainPage } from '$/views/MainPage';
 
-export const router = createBrowserRouter([{
+export const router = createBrowserRouter(([{
   path: '/error',
   element: <NotFoundPage />,
-}, {
-  path: '/login',
-  element: <LogIn />,
 }, {
   path: '/',
-  element: <Home />,
-}, {
-  path: '/layout',
   errorElement: <Navigate to="/error" />,
-  element: <Layout />,
-  children: [
-    { path: 'main-page', element: <MainPage /> },
-    {  path: 'add-expense', element: <AddExpense /> },
-    {
-      path: 'expenses-table,',
-      children: [
-        { element: <ExpensesTable />, index: true },
-        { path: 'categories', element: <ExpensesTableCategory /> },
-      ],
-    },
-  ],
-},
-]);
+  element: (
+    <Suspense>
+      <Outlet />
+    </Suspense>
+  ),
+}]));
+
+// export const router = createBrowserRouter([{
+//   path: '/error',
+//   element: <NotFoundPage />,
+// }, {
+//   path: '/login',
+//   element: <LogIn />,
+// }, {
+//   path: '/',
+//   errorElement: <Navigate to="/error" />,
+//   element: <Home />,
+// }, {
+//   path: '/layout',
+//   element: <Layout />,
+//   children: [
+//     { path: '/main-page', element: <MainPage /> },
+//     {  path: 'add-expense', element: <AddExpense /> },
+//     {
+//       path: 'expenses-table,',
+//       children: [
+//         { element: <ExpensesTable />, index: true },
+//         { path: 'categories', element: <ExpensesTableCategory /> },
+//       ],
+//     },
+//   ],
+// },
+// ]);