refactor(tsx): convert NavBar components

Author: fabiovincenzi

src/ui/assets/jss/material-dashboard-react/components/headerLinksStyle.js renamed to src/ui/assets/jss/material-dashboard-react/components/headerLinksStyle.ts

@@ -1,9 +1,50 @@
-import { defaultFont, dangerColor, whiteColor } from '../../material-dashboard-react.js';
+import { Theme } from '@material-ui/core/styles';
+import { defaultFont, dangerColor, whiteColor } from '../../material-dashboard-react';
+import dropdownStyle from '../dropdownStyle';
 
-// eslint-disable-next-line max-len
-import dropdownStyle from '../dropdownStyle.js';
+interface HeaderLinksStyle {
+  [key: string]: any;
+  search: {
+    '& > div': {
+      marginTop: string;
+    };
+    [themeBreakpoint: string]: any;
+  };
+  linkText: {
+    zIndex: string;
+    fontSize: string;
+    margin: string;
+    [key: string]: any;
+  };
+  buttonLink: {
+    [themeBreakpoint: string]: any;
+  };
+  searchButton: {
+    [themeBreakpoint: string]: any;
+  };
+  margin: {
+    zIndex: string;
+    margin: string;
+  };
+  searchIcon: {
+    width: string;
+    zIndex: string;
+  };
+  notifications: {
+    zIndex: string;
+    [themeBreakpoint: string]: any;
+  };
+  manager: {
+    [themeBreakpoint: string]: any;
+    display: string;
+  };
+  searchWrapper: {
+    [themeBreakpoint: string]: any;
+    display: string;
+  };
+}
 
-const headerLinksStyle = (theme) => ({
+const headerLinksStyle = (theme: Theme): HeaderLinksStyle => ({
   ...dropdownStyle(theme),
   search: {
     '& > div': {

src/ui/assets/jss/material-dashboard-react/components/headerStyle.js renamed to src/ui/assets/jss/material-dashboard-react/components/headerStyle.ts

@@ -8,9 +8,24 @@ import {
   warningColor,
   dangerColor,
   whiteColor,
-} from '../../material-dashboard-react.js';
+} from '../../material-dashboard-react';
 
-const headerStyle = () => ({
+interface StyleProps {
+  appBar: React.CSSProperties;
+  container: React.CSSProperties;
+  flex: React.CSSProperties;
+  title: React.CSSProperties & {
+    '&:hover,&:focus': React.CSSProperties;
+  };
+  appResponsive: React.CSSProperties;
+  primary: React.CSSProperties;
+  info: React.CSSProperties;
+  success: React.CSSProperties;
+  warning: React.CSSProperties;
+  danger: React.CSSProperties;
+}
+
+const headerStyle = (): StyleProps => ({
   appBar: {
     backgroundColor: 'transparent',
     boxShadow: 'none',
@@ -78,4 +93,4 @@ const headerStyle = () => ({
   },
 });
 
-export default headerStyle;
+export default headerStyle;

src/ui/components/Navbars/DashboardNavbarLinks.jsx renamed to src/ui/components/Navbars/DashboardNavbarLinks.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -7,7 +7,7 @@ import Grow from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Hidden from '@material-ui/core/Hidden';
-import Poppers from '@material-ui/core/Popper';
+import Popper from '@material-ui/core/Popper';
 import Divider from '@material-ui/core/Divider';
 import Button from '../CustomButtons/Button';
 import styles from '../../assets/jss/material-dashboard-react/components/headerLinksStyle';
@@ -18,27 +18,33 @@ import axios from 'axios';
 import { getCookie } from '../../utils';
 
 const useStyles = makeStyles(styles);
+interface UserData {
+  id: string;
+  name: string;
+  email: string;
+}
 
 export default function DashboardNavbarLinks() {
   const classes = useStyles();
   const navigate = useNavigate();
-  const [openProfile, setOpenProfile] = React.useState(null);
-  const [, setAuth] = React.useState(true);
-  const [, setIsLoading] = React.useState(true);
-  const [, setIsError] = React.useState(false);
-  const [data, setData] = React.useState(false);
+  const [openProfile, setOpenProfile] = useState<HTMLElement | null>(null);
+  const [, setAuth] = useState<boolean>(true);
+  const [, setIsLoading] = useState<boolean>(true);
+  const [, setIsError] = useState<boolean>(false);
+  const [data, setData] = useState<UserData | null>(null);
 
   useEffect(() => {
     getUser(setIsLoading, setData, setAuth, setIsError);
   }, []);
 
-  const handleClickProfile = (event) => {
-    if (openProfile && openProfile.contains(event.target)) {
+  const handleClickProfile = (event: React.MouseEvent<HTMLElement>) => {
+    if (openProfile && openProfile.contains(event.target as Node)) {
       setOpenProfile(null);
     } else {
       setOpenProfile(event.currentTarget);
     }
   };
+
   const handleCloseProfile = () => {
     setOpenProfile(null);
   };
@@ -47,24 +53,26 @@ export default function DashboardNavbarLinks() {
     navigate('/dashboard/profile', { replace: true });
   };
 
-  const logout = () => {
-    axios
-      .post(
-        `${import.meta.env.VITE_API_URI}/api/auth/logout`,
+  const logout = async () => {
+    try {
+      const response = await axios.post(
+        `${import.meta.env.VITE_API_URI || 'http://localhost:3000'}/api/auth/logout`,
         {},
         {
           withCredentials: true,
           headers: {
             'X-CSRF-TOKEN': getCookie('csrf'),
           },
         },
-      )
-      .then((res) => {
-        if (!res.data.isAuth && !res.data.user) {
-          setAuth(false);
-          navigate(0);
-        }
-      });
+      );
+
+      if (!response.data.isAuth && !response.data.user) {
+        setAuth(false);
+        navigate(0);
+      }
+    } catch (error) {
+      console.error('Logout failed:', error);
+    }
   };
 
   return (
@@ -74,7 +82,7 @@ export default function DashboardNavbarLinks() {
           color={window.innerWidth > 959 ? 'transparent' : 'white'}
           justIcon={window.innerWidth > 959}
           simple={window.innerWidth <= 959}
-          aria-owns={openProfile ? 'profile-menu-list-grow' : null}
+          aria-owns={openProfile ? 'profile-menu-list-grow' : undefined}
           aria-haspopup='true'
           onClick={handleClickProfile}
           className={classes.buttonLink}
@@ -84,7 +92,7 @@ export default function DashboardNavbarLinks() {
             <p className={classes.linkText}>Profile</p>
           </Hidden>
         </Button>
-        <Poppers
+        <Popper
           open={Boolean(openProfile)}
           anchorEl={openProfile}
           transition
@@ -94,7 +102,6 @@ export default function DashboardNavbarLinks() {
           {({ TransitionProps, placement }) => (
             <Grow
               {...TransitionProps}
-              id='profile-menu-list-grow'
               style={{
                 transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
               }}
@@ -116,7 +123,7 @@ export default function DashboardNavbarLinks() {
               </Paper>
             </Grow>
           )}
-        </Poppers>
+        </Popper>
       </div>
     </div>
   );

src/ui/components/Navbars/Navbar.jsx renamed to src/ui/components/Navbars/Navbar.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -12,30 +11,48 @@ import styles from '../../assets/jss/material-dashboard-react/components/headerS
 
 const useStyles = makeStyles(styles);
 
-export default function Header(props) {
+interface Route {
+  component: any;
+  icon: any;
+  layout: string;
+  name: string;
+  rtlName?: string;
+  path: string;
+  visible: boolean;
+}
+
+interface HeaderProps {
+  color?: 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  rtlActive?: boolean;
+  handleDrawerToggle: () => void;
+  routes: Route[];
+}
+
+const Header: React.FC<HeaderProps> = (props) => {
   const classes = useStyles();
-  function makeBrand() {
-    let name;
-    props.routes.map((prop) => {
+
+  const makeBrand = (): string => {
+    let name = '';
+    props.routes.forEach((prop) => {
       if (window.location.href.indexOf(prop.layout + prop.path) !== -1) {
-        name = props.rtlActive ? prop.rtlName : prop.name;
+        name = props.rtlActive ? prop.rtlName || prop.name : prop.name;
       }
-      return null;
     });
     return name;
-  }
-  const { color } = props;
+  };
+
+  const { color = 'primary' } = props;
   const appBarClasses = classNames({
-    [' ' + classes[color]]: color,
+    [` ${classes[color]}`]: color,
   });
+
   return (
     <AppBar style={{ borderRadius: '0px', zIndex: 10 }} className={classes.appBar + appBarClasses}>
       <Toolbar className={classes.container}>
         <div className={classes.flex}>
           {/* Here we create navbar brand, based on route name */}
           <h2
             style={{ marginLeft: '15px', fontSize: '19px', fontWeight: 400 }}
-            color='transparent'
             className={classes.title}
           >
             {makeBrand()}
@@ -52,11 +69,6 @@ export default function Header(props) {
       </Toolbar>
     </AppBar>
   );
-}
-
-Header.propTypes = {
-  color: PropTypes.oneOf(['primary', 'info', 'success', 'warning', 'danger']),
-  rtlActive: PropTypes.bool,
-  handleDrawerToggle: PropTypes.func,
-  routes: PropTypes.arrayOf(PropTypes.object),
 };
+
+export default Header;