refactor(tsx): convert Admin component

Author: fabiovincenzi

src/ui/assets/jss/material-dashboard-react/layouts/dashboardStyle.js renamed to src/ui/assets/jss/material-dashboard-react/layouts/dashboardStyle.ts

@@ -1,6 +1,17 @@
-import { drawerWidth, transition, container } from '../../material-dashboard-react.js';
+import { Theme } from '@material-ui/core/styles/createTheme';
+import { drawerWidth, transition, container } from '../../material-dashboard-react';
 
-const appStyle = (theme) => ({
+interface AppStyleProps {
+  wrapper: React.CSSProperties;
+  mainPanel: React.CSSProperties & {
+    [key: string]: any;
+  };
+  content: React.CSSProperties;
+  container: typeof container;
+  map: React.CSSProperties;
+}
+
+const appStyle = (theme: Theme): AppStyleProps => ({
   wrapper: {
     position: 'relative',
     top: '0',
@@ -16,14 +27,14 @@ const appStyle = (theme) => ({
     ...transition,
     maxHeight: '100%',
     width: '100%',
-    overflowScrolling: 'touch',
+    WebkitOverflowScrolling: 'touch' as any,
   },
   content: {
     marginTop: '70px',
     padding: '30px 15px',
     minHeight: 'calc(100vh - 123px)',
   },
-  container,
+  container: { ...container },
   map: {
     marginTop: '70px',
   },

src/ui/layouts/Dashboard.jsx renamed to src/ui/layouts/Dashboard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Routes, Route, Navigate, useParams } from 'react-router-dom';
 import PerfectScrollbar from 'perfect-scrollbar';
 import 'perfect-scrollbar/css/perfect-scrollbar.css';
@@ -12,78 +12,87 @@ import logo from '../assets/img/git-proxy.png';
 import { UserContext } from '../../context';
 import { getUser } from '../services/user';
 
-let ps;
-let refresh = false;
+interface RouteType {
+  layout: string;
+  path: string;
+  component: React.ComponentType<any>;
+}
 
-const switchRoutes = (
-  <Routes>
-    {routes.map((prop, key) => {
-      if (prop.layout === '/dashboard') {
-        return <Route exact path={prop.path} element={<prop.component />} key={key} />;
-      }
-      return null;
-    })}
-    <Route exact path='/dashboard' element={<Navigate to='/dashboard/repo' />} />
-  </Routes>
-);
+interface DashboardProps {
+  [key: string]: any;
+}
 
-const useStyles = makeStyles(styles);
+interface UserType {
+  id?: string;
+  name?: string;
+  email?: string;
+}
+
+let ps: PerfectScrollbar | undefined;
+let refresh = false;
 
-export default function Dashboard({ ...rest }) {
-  // styles
+const useStyles = makeStyles(styles as any);
+
+const Dashboard: React.FC<DashboardProps> = ({ ...rest }) => {
   const classes = useStyles();
-  // ref to help us initialize PerfectScrollbar on windows devices
-  const mainPanel = React.createRef();
-  // states and functions
-  const [color] = React.useState('blue');
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const [user, setUser] = useState({});
-
-  const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
-  };
-  const getRoute = () => {
-    return window.location.pathname !== '/dashboard/maps';
-  };
+  const mainPanel = useRef<HTMLDivElement>(null);
+  const [color] = useState<'purple' | 'blue' | 'green' | 'orange' | 'red'>('blue');
+  const [mobileOpen, setMobileOpen] = useState<boolean>(false);
+  const [user, setUser] = useState<UserType>({});
+  const { id } = useParams<{ id?: string }>();
+
+  const handleDrawerToggle = () => setMobileOpen((prev) => !prev);
+  const isMapRoute = () => window.location.pathname === '/dashboard/maps';
+
   const resizeFunction = () => {
     if (window.innerWidth >= 960) {
       setMobileOpen(false);
     }
   };
-  // initialize and destroy the PerfectScrollbar plugin
 
-  const { id } = useParams();
-  React.useEffect(() => {
+  const switchRoutes = (
+    <Routes>
+      {routes.map((prop: RouteType, key: number) => {
+        if (prop.layout === '/dashboard') {
+          const Component = prop.component;
+          return <Route path={prop.path} element={<Component />} key={key} />;
+        }
+        return null;
+      })}
+      <Route path='/dashboard' element={<Navigate to='/dashboard/repo' />} />
+    </Routes>
+  );
+
+  useEffect(() => {
     async function loadUser() {
-      if (navigator.platform.indexOf('Win') > -1) {
+      if (navigator.platform.indexOf('Win') > -1 && mainPanel.current) {
         ps = new PerfectScrollbar(mainPanel.current, {
           suppressScrollX: true,
           suppressScrollY: false,
         });
         document.body.style.overflow = 'hidden';
-        if (!refresh) {
-          refresh = true;
-          await getUser(null, setUser, null, null, null);
-        }
       }
-      window.addEventListener('resize', resizeFunction);
+
       if (!refresh) {
         refresh = true;
-        await getUser(null, setUser, null, null, null);
+        await getUser(undefined, setUser);
       }
+
+      window.addEventListener('resize', resizeFunction);
     }
+
     loadUser();
 
-    // Specify how to clean up after this effect:
-    return function cleanup() {
+    return () => {
       if (navigator.platform.indexOf('Win') > -1 && ps) {
         ps.destroy();
       }
       window.removeEventListener('resize', resizeFunction);
     };
   }, [id]);
+
   return (
-    <UserContext.Provider value={{ user, setUser }}>
+    <UserContext.Provider value={{ user, setUser } as any}>
       <div className={classes.wrapper}>
         <Sidebar
           background='#1a1a1a'
@@ -96,17 +105,20 @@ export default function Dashboard({ ...rest }) {
         />
         <div className={classes.mainPanel} ref={mainPanel}>
           <Navbar routes={routes} handleDrawerToggle={handleDrawerToggle} {...rest} />
-          {/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
-          {getRoute() ? (
-            <div className={classes.content}>
-              <div className={classes.container}>{switchRoutes}</div>
-            </div>
-          ) : (
+          {isMapRoute() ? (
             <div className={classes.map}>{switchRoutes}</div>
+          ) : (
+            <>
+              <div className={classes.content}>
+                <div className={classes.container}>{switchRoutes}</div>
+              </div>
+              <Footer />
+            </>
           )}
-          {getRoute() ? <Footer /> : null}
         </div>
       </div>
     </UserContext.Provider>
   );
-}
+};
+
+export default Dashboard;