TASK9

src/App.js

@@ -1,24 +1,33 @@
-import logo from './logo.svg';
-import './App.css';
-import Dashboard from './pages/Dashboard'
-import Categories from './pages/Categories'
-import Products from './pages/Products'
-import Login from './pages/Login'
-import {Navigate, Route, Routes} from 'react-router-dom'
-import {useEffect,useState} from 'react'
-import Drawer from './components/Drawer'
+import "./App.css";
+import routes, { renderRoutes } from "./routes";
+import { Router } from "react-router-dom";
+import { AuthProvider } from "./contexts/AuthContext";
+import { createBrowserHistory } from "history";
+import { createTheme } from "./theme";
+import { create } from "jss";
+import rtl from "jss-rtl";
+import { useContext } from "react";
+import { jssPreset, StylesProvider, ThemeProvider } from "@material-ui/core";
+import SettingsContext from './contexts/SettingsContext'
+const history = createBrowserHistory();
+const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
 
-
-function App(props) {
-
-
-  return  <Routes>
-   <Route path="/dashboard" element={<Drawer/>}/>
-   <Route path="/categories" element={<Drawer   {...props}/>}/>
-   <Route path="/products" element={<Drawer/>}/>
-   <Route path="/login" element={<Login/>}/>
-
-</Routes>
+function App() {
+  const { settings } = useContext(SettingsContext);
+  const theme = createTheme({
+    direction: settings.direction,
+    responsiveFontSizes: settings.responsiveFontSizes,
+    theme: settings.theme,
+  });
+  return (
+    <ThemeProvider theme={theme}>
+      <StylesProvider jss={jss}>
+        <Router history={history}>
+          <AuthProvider>{renderRoutes(routes)}</AuthProvider>
+        </Router>
+      </StylesProvider>
+    </ThemeProvider>
+  );
 }
 
 export default App;

src/common/Constants.js

@@ -0,0 +1,8 @@
+export const SESSION_KEY = "CompUserData";
+export const BASE_URL = "https://website-backend.computiq.tech";
+
+export const THEMES = {
+    LIGHT: 'LIGHT',
+    ONE_DARK: 'ONE_DARK'
+  };
+

src/components/BoardItems.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Box,makeStyles, Typography } from '@material-ui/core';
+
+
+const useStyles = makeStyles(()=>({
+    flx:{
+        color: '#575756',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems:'center'
+    },
+
+    box: {
+        display: 'flex',
+        alignItems:'center'
+    },
+
+    img: {
+        fontSize: 35,
+        marginLeft: 5
+    }
+
+}))
+
+
+export default function BoardItems(props) {
+    const classes = useStyles()
+    return (
+        <>
+        <Typography variant="h4" component="div">SCORE BOARD</Typography>
+        {
+            props.dataP.map((item,i)=>{
+                return (
+                    <Box className={classes.flx} key={i}>
+                        <Box className={classes.box}>
+                            <Typography variant="h6" component="div">#{props.data.findIndex((data)=> (data.user__first_name+' '+data.user__last_name)===(item.user__first_name+' '+item.user__last_name) )}</Typography>
+                            <Typography variant="h6" component="div" className={classes.img}>{item.user__score_profile__photo}</Typography>
+                        </Box>
+                        <Typography variant="h6" component="div">{item.user__first_name+' '+item.user__last_name}</Typography>
+                        <Typography variant="h6" component="div">{item.total_score} points</Typography>
+                    </Box>
+                )
+            })
+        }    
+        </>
+    )
+}

src/components/LoadingScreen.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function LoadingScreen(props) {
+    return (
+        <div>
+            LoadingScreen
+        </div>
+    );
+}
+
+export default LoadingScreen;