Setup connect to the backend + change ui

.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+.env
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -13,9 +13,12 @@
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.0",
+    "@reduxjs/toolkit": "^1.9.5",
+    "axios": "^1.4.0",
     "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.2.0",
+    "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.2",

public/locales/en/translation.json

@@ -17,8 +17,7 @@
     "notification": "Notification",
     "generalTickets": "General Tickets",
     "settings": "Settings",
-    "lightMode": "Light Mode",
-    "profile": "Profile"
+    "lightMode": "Light Mode"
   },
   "dashboard": {
     "heading": "Dashboard"

public/locales/ua/translation.json

@@ -17,8 +17,7 @@
     "notification": "Сповіщення",
     "generalTickets": "Загальні квитки",
     "settings": "Налаштування",
-    "lightMode": "Світлий режим",
-    "profile": "Профіль"
+    "lightMode": "Світлий режим"
   },
   "dashboard": {
     "heading": "Панель приладів"

src/Router/Router.jsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Route, Routes } from "react-router-dom";
 import { Layout } from "../components/Layout";
 import { endpoints } from "../constants";
@@ -14,10 +15,15 @@ import { Profile } from "../components/Pages/Profile/Profile";
 import { ErrorPage } from "../components/Pages/ErrorPage/ErrorPage";
 
 const Router = () => {
+  const [isAuth, setIsAuth] = useState(false);
+
   return (
     <Routes>
-      <Route path={endpoints.base} element={<Layout />}>
-        <Route index element={<GeneralTickets />}></Route>
+      <Route
+        path={endpoints.base}
+        element={<Layout isAuth={isAuth} setIsAuth={setIsAuth} />}
+      >
+        <Route index element={<GeneralTickets isAuth={isAuth} />}></Route>
         <Route path={endpoints.dashboard} element={<Dashboard />} />
         <Route path={endpoints.sent} element={<Sent />} />
         <Route path={endpoints.received} element={<Received />} />

src/components/Layout/Layout.jsx

@@ -8,9 +8,8 @@ import { Box, Grid } from "@mui/material";
 
 const drawerWidth = 300;
 
-const Layout = () => {
+const Layout = ({ isAuth, setIsAuth }) => {
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [isAuth, setIsAuth] = useState(false);
   const { palette } = useTheme();
 
   const handleDrawerToggle = () => {
@@ -43,7 +42,7 @@ const Layout = () => {
           color: palette.common.white,
         }}
       >
-        <Outlet />
+        <Outlet isAuth={isAuth} setIsAuth={setIsAuth} />
       </Box>
     </Grid>
   );