updated dependencies (#560)

* updated dependencies i updated almost all the dependencies except for 3 i think. also the new dependencies generated problems with the public images. i also fixed those bugs transforming the images from static to dynamic. * deleting some code the src from imagePath was deleted * Update Navbar.tsx fix bug with the <ListItem> component * Update Navbar.tsx finding some bugs * fix to NavBar, compatible date-fns/MUI versions, ci.yml to node LTS * remove carats from dependencies --------- Co-authored-by: Bennett Fife <[email protected]> Co-authored-by: Bennett Fife <[email protected]>
SeattleColleges · Oct 23, 2024 · 4aa1e98 · 4aa1e98
1 parent 7db957a
commit 4aa1e98
Show file tree

Hide file tree

Showing 9 changed files with 13,939 additions and 13,318 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,4 +1,3 @@
-
 name: Continuous Integration
 run-name: Node.js CI
 on:
@@ -12,16 +11,15 @@ on:
 #        required: false
 jobs:
   build-and-test:
-
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
       - name: Clean install
         run: npm ci
       - name: Run linter
@@ -33,42 +31,41 @@ jobs:
       - name: Test coverage
         run: npm run test:coverage
 
-#      - name: Run Redux/State Management Tests
-#        run: npm run redux:tests
-#
-#      - name: Run Component Tests
-#        run: npm run test:components
-#
-#      - name: Run End-to-End Tests
-#        run: npm run test:e2e
-#
-#      - name: Run Snapshot Tests
-#        run: npm run test:snapshot
-#
-#      - name: Run Routing Tests
-#        run: npm run test:routing
-#
-#      - name: Run API Tests
-#        run: npm run test:api
-#
-#      - name: Run Integration Tests
-#        run: npm run test:integration
+      #      - name: Run Redux/State Management Tests
+      #        run: npm run redux:tests
+      #
+      #      - name: Run Component Tests
+      #        run: npm run test:components
+      #
+      #      - name: Run End-to-End Tests
+      #        run: npm run test:e2e
+      #
+      #      - name: Run Snapshot Tests
+      #        run: npm run test:snapshot
+      #
+      #      - name: Run Routing Tests
+      #        run: npm run test:routing
+      #
+      #      - name: Run API Tests
+      #        run: npm run test:api
+      #
+      #      - name: Run Integration Tests
+      #        run: npm run test:integration
 
       - name: Build App
         run: npm run build --if-present
 
-# https://docs.github.com/en/actions/using-workflows/storing-workflow-data-as-artifacts
+      # https://docs.github.com/en/actions/using-workflows/storing-workflow-data-as-artifacts
       - name: Archive Next.js build
         uses: actions/upload-artifact@v3
         with:
-            name: next.js-build
-            path: .next/
-            retention-days: 14
+          name: next.js-build
+          path: .next/
+          retention-days: 14
 
       - name: Archive code coverage results
         uses: actions/upload-artifact@v3
         with:
           name: code-coverage-report
           path: docs/coverage/index.html
           retention-days: 14
-
diff --git a/app/auth/change-password/page.tsx b/app/auth/change-password/page.tsx
@@ -32,8 +32,10 @@ const ChangePassword = () => {
   const router = useRouter();
   const { palette } = useTheme();
 
+
   const imagePath = palette.mode === "dark" ? "/images/white_vertical_nsc_logo.png" : "/images/blue_vertical_nsc_logo.png";
 
+
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'));

diff --git a/app/auth/forgot-password/page.tsx b/app/auth/forgot-password/page.tsx
@@ -11,6 +11,11 @@ const URL = process.env.NSC_EVENTS_PUBLIC_API_URL;
 const ForgotPassword = () => {
   const { palette } = useTheme();
 
+  const darkImagePath = '/images/white_nsc_logo.png';
+  const lightImagePath = '/images/blue_nsc_logo.png';
+  const imagePath = palette.mode === "dark" ? darkImagePath : lightImagePath;
+
+
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'));
@@ -81,7 +86,7 @@ const ForgotPassword = () => {
         <Box sx={{ display: 'flex', justifyContent: 'center', marginBottom: 2 }}>
 
           <Image
-            src="/images/blue_vertical_nsc_logo.png"  //removed 'public' ehre
+            src={imagePath}
             alt="North Seattle College Logo"
             width={150}
             height={50}

diff --git a/app/auth/sign-in/page.tsx b/app/auth/sign-in/page.tsx
@@ -14,6 +14,11 @@ if (URL?.includes('localhost')) {
 
 const Signin = () => {
   const { palette } = useTheme();
+
+  const darkImagePath = '/images/white_nsc_logo.png';
+  const lightImagePath = '/images/blue_nsc_logo.png';
+  const imagePath = palette.mode === "dark" ? darkImagePath : lightImagePath;
+
 
   const [error, setError] = useState("");
   const [userInfo, setUserInfo] = useState({
@@ -95,7 +100,7 @@ const Signin = () => {
           }}
         >
           <Image
-            src={palette.mode === "dark" ? "/images/white_vertical_nsc_logo.png" : "/images/blue_vertical_nsc_logo.png"}
+            src={imagePath}
             alt="North Seattle College Logo"
             width={150}
             height={50}

diff --git a/app/page.tsx b/app/page.tsx
@@ -15,8 +15,10 @@ const Home = () => {
   const { palette } = useTheme();
 
   // Reference the image paths directly instead of using imports
-  const darkImagePath = "/images/white_nsc_logo.png";
-  const lightImagePath = "/images/blue_nsc_logo.png";
+  const googlePlayImage = '/images/google_play.png'
+  const darkImagePath = '/images/white_nsc_logo.png';
+  const lightImagePath = '/images/blue_nsc_logo.png';
+
   const imagePath = palette.mode === "dark" ? darkImagePath : lightImagePath;
   const containerColor = palette.mode === "dark" ? "#333" : "#fff";
 
@@ -111,10 +113,10 @@ const Home = () => {
               <Button variant="contained" color="secondary">
                 {/* Use direct reference for google play image */}
                 <Image
-                  src="/images/google_play.png"
+                  src={googlePlayImage}
                   alt="google_play"
-                  width={20}
-                  height={20}
+                  width={40}
+                  height={40}
                   style={{ marginRight: "8px" }}
                 />
                 Download App

diff --git a/components/DrawerComp.tsx b/components/DrawerComp.tsx
@@ -20,6 +20,7 @@ const DrawerComp: React.FC<DrawerCompProps> = ({ isOpen, toggleDrawer }) => {
   // Update: Directly referencing the image paths
   const darkImagePath = "/images/white_vertical_nsc_logo.png";
   const lightImagePath = "/images/blue_vertical_nsc_logo.png";
+
   const imagePath = palette.mode === "dark" ? darkImagePath : lightImagePath;
   const toggleColor = palette.mode === "dark" ? palette.primary.contrastText : palette.primary.main;
 

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -11,16 +11,21 @@ import AuthProfileMenu from './AuthProfileMenu';
 import ThemeToggle from './ThemeToggle';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
+
 export default function Navbar() {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const { isAuth, user } = useAuth();
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
   const router = useRouter();
   const theme = useTheme();
-  const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+  const isMediumScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
 
   const toggleDrawer = (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
-    if (event.type === 'keydown' && 'key' in event && (event.key === 'Tab' || event.key === 'Shift')) {
+    if (
+      event.type === "keydown" &&
+      "key" in event &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
       return;
     }
     setDrawerOpen(open);
@@ -35,37 +40,37 @@ export default function Navbar() {
   };
 
   const handleProfileClick = () => {
-    router.push('/profile');
+    router.push("/profile");
     toggleDrawer(false);
   };
 
   const handleSignOut = () => {
-    localStorage.removeItem('token');
-    window.dispatchEvent(new CustomEvent('auth-change'));
-    router.push('/auth/sign-in');
+    localStorage.removeItem("token");
+    window.dispatchEvent(new CustomEvent("auth-change"));
+    router.push("/auth/sign-in");
   };
 
   const handleAccountClick = () => {
-    if (user?.role === 'admin') {
-      router.push('/admin');
-    } else if (user?.role === 'creator') {
-      router.push('/creator');
-    } 
+    if (user?.role === "admin") {
+      router.push("/admin");
+    } else if (user?.role === "creator") {
+      router.push("/creator");
+    }
     toggleDrawer(false);
   };
 
   const list = () => (
-    <div role='presentation' onClick={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}>
+    <div role="presentation" onClick={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}>
       <List>
-        <ListItem component={Link} href='/'>
+        <ListItem component={Link} href="/">
           <ListItemText primary="Events" />
         </ListItem>
         {isAuth ? (
-          <ListItem button>
+          <ListItem>
             <AuthProfileMenu />
           </ListItem>
         ) : (
-          <ListItem component={Link} href='/auth/sign-in'>
+          <ListItem component={Link} href="/auth/sign-in">
             <ListItemText primary="Sign In" />
           </ListItem>
         )}
@@ -89,54 +94,79 @@ export default function Navbar() {
               color="inherit"
               aria-label="menu"
               onClick={toggleDrawer(true)}
-              sx={{ display: { xs: 'block', sm: 'block', md: 'none' } }} 
+              sx={{ display: { xs: "block", sm: "block", md: "none" } }}
             >
               <MenuIcon />
             </IconButton>
-            <Grid container spacing={2} alignItems="center" sx={{ display: { xs: 'none', md: 'flex' } }}>
+            <Grid
+              container
+              spacing={2}
+              alignItems="center"
+              sx={{ display: { xs: "none", md: "flex" } }}
+            >
               {/* Events Link remains outside AuthProfileMenu for general access */}
               <Grid item>
                 <Link href="/" passHref>
-                  <Button color="inherit" sx={{ textTransform: 'none' }}>Events</Button>
+                  <Button color="inherit" sx={{ textTransform: "none" }}>
+                    Events
+                  </Button>
                 </Link>
               </Grid>
 
               {/* AuthProfileMenu contains Create Event and Sign Out actions */}
               {isAuth && user && (
-                <Box sx={{ flexGrow: 0, display: 'flex', alignItems: 'center' }}>
+                <Box sx={{ flexGrow: 0, display: "flex", alignItems: "center" }}>
                   <Tooltip title="Open user menu">
-                    <IconButton onClick={handleOpenUserMenu} sx={{ p: 0, ml: 3, mr: 1, mt: 2, color: "white" }}>
+                    <IconButton
+                      onClick={handleOpenUserMenu}
+                      sx={{ p: 0, ml: 3, mr: 1, mt: 2, color: "white" }}
+                    >
                       <AccountCircleIcon />
                     </IconButton>
                   </Tooltip>
                   <Menu
-                    sx={{ mt: '45px' }}
+                    sx={{ mt: "45px" }}
                     id="menu-appbar"
                     anchorEl={anchorElUser}
                     anchorOrigin={{
-                      vertical: 'top',
-                      horizontal: 'right',
+                      vertical: "top",
+                      horizontal: "right",
                     }}
                     keepMounted
                     transformOrigin={{
-                      vertical: 'top',
-                      horizontal: 'right',
+                      vertical: "top",
+                      horizontal: "right",
                     }}
                     open={Boolean(anchorElUser)}
                     onClose={handleCloseUserMenu}
                     disableScrollLock
                   >
                     {isAuth && user && (
-                      <MenuItem onClick={() => { handleProfileClick(); handleCloseUserMenu(); }}>
+                      <MenuItem
+                        onClick={() => {
+                          handleProfileClick();
+                          handleCloseUserMenu();
+                        }}
+                      >
                         <Typography textAlign="center">Profile</Typography>
                       </MenuItem>
                     )}
                     {isAuth && user && (user.role === "admin" || user.role === "creator") && (
-                      <MenuItem onClick={() => { handleAccountClick(); handleCloseUserMenu(); }}>
+                      <MenuItem
+                        onClick={() => {
+                          handleAccountClick();
+                          handleCloseUserMenu();
+                        }}
+                      >
                         <Typography textAlign="center">My Account</Typography>
                       </MenuItem>
                     )}
-                    <MenuItem onClick={() => { handleCloseUserMenu(); handleSignOut(); }}>
+                    <MenuItem
+                      onClick={() => {
+                        handleCloseUserMenu();
+                        handleSignOut();
+                      }}
+                    >
                       <Typography textAlign="center">Sign Out</Typography>
                     </MenuItem>
                   </Menu>
@@ -145,7 +175,9 @@ export default function Navbar() {
               {!isAuth && (
                 <Grid item>
                   <Link href="/auth/sign-in" passHref>
-                    <Button color="inherit" sx={{ textTransform: 'none' }}>Sign In</Button>
+                    <Button color="inherit" sx={{ textTransform: "none" }}>
+                      Sign In
+                    </Button>
                   </Link>
                 </Grid>
               )}