refactor: auth for server and client-side with middleware checks

.vscode/launch.json

@@ -10,7 +10,7 @@
     },
     {
       "name": "Next.js: debug client-side",
-      "type": "pwa-msedge",
+      "type": "msedge",
       "request": "launch",
       "url": "http://localhost:3000",
       "cwd": "${workspaceFolder}/client"
@@ -21,7 +21,18 @@
       "request": "launch",
       "command": "yarn start",
       "cwd": "${workspaceFolder}/client",
-      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithEdge"
+      }
+    },
+    {
+      "name": "Next.js: debug production stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn start:prod",
+      "cwd": "${workspaceFolder}/client",
       "serverReadyAction": {
         "pattern": "started server on .+, url: (https?://.+)",
         "uriFormat": "%s",

client/env/.env.sample

@@ -5,6 +5,7 @@ PORT=3000
 # ----- ----- APOLLO GRAPHQL ----- -----
 
 NEXT_PUBLIC_SERVER_ADDRESS=some-server-url
+SERVER_ACCESS_API_KEY=some-api-key
 
 # ----- ----- IMAGEKIT ----- -----
 

client/src/components/admin/Sidebar/menulist/NavCollapse.jsx

@@ -9,11 +9,9 @@ import {
   ListItemText,
   Typography,
 } from '@mui/material';
-import {
-  FiberManualRecord,
-  KeyboardArrowDown,
-  KeyboardArrowUp,
-} from '@mui/icons-material';
+import FiberManualRecord from '@mui/icons-material/FiberManualRecord';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
 
 // components
 import NavItem from './NavItem';

client/src/components/admin/Sidebar/menulist/NavItem.jsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 
 // context
-import { SidebarContext } from '../../../../context/SidebarContext';
+import { SidebarContext } from '../../../../context/SidebarContextProvider';
 
 const NavItem = ({ item, level }) => {
   const theme = useTheme();

client/src/components/homepage/SocialMedia.js

@@ -15,7 +15,8 @@ import insta4 from '../../assets/images/instagram/insta4.jpeg';
 import insta5 from '../../assets/images/instagram/insta5.jpeg';
 import insta6 from '../../assets/images/instagram/insta6.jpeg';
 import Image from 'next/image';
-import { YouTube, Instagram } from '@mui/icons-material';
+import YouTube from '@mui/icons-material/YouTube';
+import Instagram from '@mui/icons-material/Instagram';
 
 const INSTA_LINKS = [insta1, insta2, insta3, insta4, insta5, insta6];
 

client/src/components/marginals/Footer.js

@@ -209,8 +209,9 @@ const Footer = () => {
                       name='month'
                       className={classes.archivesSelect}
                       onChange={(e) => setMonth(e.target.value)}
+                      defaultValue={''}
                     >
-                      <option value='' selected disabled hidden>
+                      <option value='' disabled hidden>
                         <Typography variant='body1'>Month</Typography>
                       </option>
                       {ARCHIVES.months.map((month, key) => (
@@ -223,8 +224,9 @@ const Footer = () => {
                       name='year'
                       className={classes.archivesSelect}
                       onChange={(e) => setYear(e.target.value)}
+                      defaultValue={''}
                     >
-                      <option value='' selected disabled hidden>
+                      <option value='' disabled hidden>
                         <Typography variant='body1'>Year</Typography>
                       </option>
                       {ARCHIVES.years.map((year, key) => (

client/src/components/onboarding/stages/NewsletterSignup.js

@@ -17,15 +17,16 @@ import newsletter from '../../../assets/images/onboarding/newsletter.png';
 import { ONBOARDING } from '../../../assets/placeholder/onboarding';
 
 //graphql
-import { GraphClient } from '../../../config/ApolloClient';
 import newsLetterSubscription from '../../../graphql/mutations/user/newsLetterSubscription';
 
 //context
-import authContext from '../../../context/auth/AuthContext';
+import { authContext } from '../../../context/AuthContextProvider';
+import { apolloContext } from '../../../context/ApolloContextProvider';
 
 function NewsletterSignup({ onComplete, onSkip, tabletMatches }) {
   const classes = useStyles();
   // const router = useRouter();
+  const graphClient = useContext(apolloContext);
 
   // Local States
   const [isSigned, setIsSigned] = useState(false);
@@ -37,7 +38,7 @@ function NewsletterSignup({ onComplete, onSkip, tabletMatches }) {
   const onSignup = async () => {
     setIsSigned(true);
 
-    await GraphClient.mutate({
+    await graphClient.mutate({
       mutation: newsLetterSubscription,
       variables: {
         userId: mid,

client/src/components/onboarding/stages/SelectTopics.js

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import authContext from '../../../context/auth/AuthContext';
+import { authContext } from '../../../context/AuthContextProvider';
 
 // Hooks
 import useToggle from '../../../hooks/useToggle';
@@ -15,8 +15,8 @@ import Button from '../../shared/button/Regular';
 import { ONBOARDING } from '../../../assets/placeholder/onboarding';
 
 //graphql
-import { GraphClient } from '../../../config/ApolloClient';
 import updateUserTopics from '../../../graphql/mutations/user/updateUserTopics';
+import { apolloContext } from '../../../context/ApolloContextProvider';
 
 function Topic({
   topic,
@@ -64,6 +64,7 @@ function SelectTopics({ onComplete, onSkip, tabletMatches, setSnackbarData }) {
     });
 
   const { user } = useContext(authContext);
+  const graphClient = useContext(apolloContext);
 
   const updateInterestedTopics = async (topics) => {
     try {
@@ -80,7 +81,7 @@ function SelectTopics({ onComplete, onSkip, tabletMatches, setSnackbarData }) {
       }
       console.log(user);
 
-      await GraphClient.mutate({
+      await graphClient.mutate({
         mutation: updateUserTopics,
         variables: {
           id: user.mid,

client/src/components/onboarding/stages/VerifyEmail.js

@@ -11,7 +11,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import verifyEmailImg from '../../../assets/images/onboarding/verifyEmail.png';
 // Constants
 import { ONBOARDING } from '../../../assets/placeholder/onboarding';
-import authContext from '../../../context/auth/AuthContext';
+import { authContext } from '../../../context/AuthContextProvider';
 // Components
 import Button from '../../shared/button/Regular';
 import Input from '../../shared/input/Regular';

client/src/components/onboarding/stages/Welcome.js

@@ -11,7 +11,7 @@ import logo from '../../../assets/images/logo.png';
 // Constants
 import { ONBOARDING } from '../../../assets/placeholder/onboarding';
 //Context
-import authContext from '../../../context/auth/AuthContext';
+import { authContext } from '../../../context/AuthContextProvider';
 
 function Welcome({
   onSignIn,

client/src/components/shared/button/ScrollToTopButton.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 import makeStyles from '@mui/styles/makeStyles';
 import { Fab } from '@mui/material';
-import { KeyboardArrowUp } from '@mui/icons-material';
+import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
 
 const ScrollToTopButton = () => {
   const classes = useStyles();
@@ -26,6 +26,7 @@ const ScrollToTopButton = () => {
 
   useEffect(() => {
     window.addEventListener('scroll', toggleVisible);
+    return () => window.removeEventListener('scroll', toggleVisible);
   }, []);
 
   return (

client/src/components/widgets/HomeCarousel.js

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 
 import makeStyles from '@mui/styles/makeStyles';
 import { useSwipeable } from 'react-swipeable';
-import { ArrowBack, ArrowForward } from '@mui/icons-material';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import ArrowForward from '@mui/icons-material/ArrowForward';
 
 const HomeCarousel = ({ links }) => {
   const classes = useStyles();

client/src/components/widgets/PostHolder.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PhoneOutlined } from '@mui/icons-material';
+import PhoneOutlined from '@mui/icons-material/PhoneOutlined';
 import { Grid, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 

client/src/components/widgets/SocietyCards.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import clsx from 'clsx';
 
-import { ExpandMore } from '@mui/icons-material';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import {
   Card,
   CardActions,

client/src/components/widgets/Squiggles.js

@@ -22,11 +22,11 @@ function Squiggles({ data }) {
             </Button>
           </div>
           <div className={classes.squigglesTextWrapper}>
-            <p className={classes.squigglesText}>
+            <div className={classes.squigglesText}>
               <MarkdownWrapper variant='body1' styles={classes.squigglesText}>
                 {data.content}
               </MarkdownWrapper>
-            </p>
+            </div>
           </div>
         </div>
       </CardContent>