fix tests and formatting

acm-uiuc · Jul 12, 2024 · e3f759f · e3f759f
1 parent 5b4db8d
commit e3f759f
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 177 deletions.
diff --git a/clientv2/.prettierrc.cjs b/clientv2/.prettierrc.cjs
@@ -0,0 +1 @@
+module.exports = require('eslint-config-mantine/.prettierrc.js');
diff --git a/clientv2/.stylelintrc.json b/clientv2/.stylelintrc.json
@@ -0,0 +1,28 @@
+{
+    "extends": ["stylelint-config-standard-scss"],
+    "rules": {
+      "custom-property-pattern": null,
+      "selector-class-pattern": null,
+      "scss/no-duplicate-mixins": null,
+      "declaration-empty-line-before": null,
+      "declaration-block-no-redundant-longhand-properties": null,
+      "alpha-value-notation": null,
+      "custom-property-empty-line-before": null,
+      "property-no-vendor-prefix": null,
+      "color-function-notation": null,
+      "length-zero-no-unit": null,
+      "selector-not-notation": null,
+      "no-descending-specificity": null,
+      "comment-empty-line-before": null,
+      "scss/at-mixin-pattern": null,
+      "scss/at-rule-no-unknown": null,
+      "value-keyword-case": null,
+      "media-feature-range-notation": null,
+      "selector-pseudo-class-no-unknown": [
+        true,
+        {
+          "ignorePseudoClasses": ["global"]
+        }
+      ]
+    }
+  }
diff --git a/clientv2/package.json b/clientv2/package.json
@@ -21,7 +21,6 @@
     "@azure/msal-react": "^2.0.20",
     "@kinde-oss/kinde-auth-react": "^4.0.1",
     "@mantine/core": "7.11.1",
-    "@mantine/form": "^7.11.1",
     "@mantine/hooks": "7.11.1",
     "@tabler/icons-react": "^3.10.0",
     "dotenv": "^16.4.5",
@@ -50,7 +49,7 @@
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-mantine": "3.2.0",
+    "eslint-config-mantine": "^3.2.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react": "^7.34.3",

diff --git a/clientv2/src/Router.tsx b/clientv2/src/Router.tsx
@@ -1,9 +1,4 @@
-import {
-  createBrowserRouter,
-  Navigate,
-  RouterProvider,
-} from 'react-router-dom';
-import { HomePage } from './pages/Home.page';
+import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
 import { AuthRoleEnum, useAuth } from './components/AuthContext';
 import { LoginPage } from './pages/Login.page';
 import { StudentHomePage } from './pages/student/StudentHome.page';
@@ -46,9 +41,11 @@ export function Router() {
   const { isLoggedIn, userData } = useAuth();
   if (!isLoggedIn || !userData) {
     return <RouterProvider router={unauthenticatedRouter} />;
-  } if (isLoggedIn && userData.role === AuthRoleEnum.RECRUITER) {
+  }
+  if (isLoggedIn && userData.role === AuthRoleEnum.RECRUITER) {
     return <RouterProvider router={recruiterRouter} />;
-  } if (isLoggedIn && userData.role === AuthRoleEnum.STUDENT) {
+  }
+  if (isLoggedIn && userData.role === AuthRoleEnum.STUDENT) {
     return <RouterProvider router={studentRouter} />;
   }
 }
diff --git a/clientv2/src/components/AuthContext/LoadingScreen.tsx b/clientv2/src/components/AuthContext/LoadingScreen.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { LoadingOverlay, useMantineColorScheme } from '@mantine/core';
+
+const FullScreenLoader = () => {
+  const { colorScheme } = useMantineColorScheme();
+  return (
+    <LoadingOverlay visible loaderProps={{ color: colorScheme === 'dark' ? 'white' : 'black' }} />
+  );
+};
+
+export default FullScreenLoader;
diff --git a/clientv2/src/components/AuthContext/index.tsx b/clientv2/src/components/AuthContext/index.tsx
@@ -1,13 +1,9 @@
-import React, {
-  createContext,
-  ReactNode,
-  useContext,
-  useState,
-  useEffect,
-} from 'react';
+import React, { createContext, ReactNode, useContext, useState, useEffect } from 'react';
 import { useMsal } from '@azure/msal-react';
 import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 import { AuthenticationResult, InteractionStatus } from '@azure/msal-browser';
+import { MantineProvider } from '@mantine/core';
+import FullScreenLoader from './LoadingScreen';
 
 export enum AuthSourceEnum {
   MSAL,
@@ -55,17 +51,25 @@ interface AuthProviderProps {
 
 export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const { instance, inProgress, accounts } = useMsal();
-  const {isLoading, isAuthenticated, user, logout: kindeLogout, getToken: getKindeToken} = useKindeAuth();
-
+  const {
+    isLoading,
+    isAuthenticated,
+    user,
+    logout: kindeLogout,
+    getToken: getKindeToken,
+  } = useKindeAuth();
+
   const [userData, setUserData] = useState<AuthContextData | null>(null);
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean>((isAuthenticated || accounts.length > 0) && !isLoading);
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(
+    (isAuthenticated || accounts.length > 0) && !isLoading
+  );
   if (isAuthenticated && !isLoading && !userData) {
     setUserData({
       email: user?.email!,
       name: `${user?.given_name} ${user?.family_name}`,
       authenticationMethod: AuthSourceEnum.LOCAL,
-      role: AuthRoleEnum.RECRUITER
-    })
+      role: AuthRoleEnum.RECRUITER,
+    });
     setIsLoggedIn(true);
   }
 
@@ -80,7 +84,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
           email: accounts[0].username,
           name: accounts[0].name,
           authenticationMethod: AuthSourceEnum.MSAL,
-          role: AuthRoleEnum.STUDENT
+          role: AuthRoleEnum.STUDENT,
         });
         setIsLoggedIn(true);
       }
@@ -112,12 +116,12 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
     if (userData?.authenticationMethod === AuthSourceEnum.MSAL) {
       return null;
-    } else if (userData?.authenticationMethod === AuthSourceEnum.LOCAL) {
-      return await getKindeToken();
-    } else {
-      throw new Error("Unknown authentication method.")
     }
-  }
+    if (userData?.authenticationMethod === AuthSourceEnum.LOCAL) {
+      return getKindeToken();
+    }
+    throw new Error('Unknown authentication method.');
+  };
   const loginMsal = () => {
     instance.loginRedirect();
   };
@@ -138,10 +142,14 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   };
 
   return (
-    <AuthContext.Provider
-      value={{ isLoggedIn, userData, loginMsal, logout, getToken }}
-    >
-      {children}
+    <AuthContext.Provider value={{ isLoggedIn, userData, loginMsal, logout, getToken }}>
+      {isLoading || inProgress !== InteractionStatus.None ? (
+        <MantineProvider>
+          <FullScreenLoader />
+        </MantineProvider>
+      ) : (
+        children
+      )}
     </AuthContext.Provider>
   );
 };
diff --git a/clientv2/src/components/LoginComponent/AcmLoginButton.tsx b/clientv2/src/components/LoginComponent/AcmLoginButton.tsx
@@ -3,16 +3,14 @@ import { useMsal } from '@azure/msal-react';
 import { InteractionStatus } from '@azure/msal-browser';
 import { useAuth } from '../AuthContext';
 
-export function AcmLoginButton(
-  props: ButtonProps & React.ComponentPropsWithoutRef<'button'>,
-) {
+export function AcmLoginButton(props: ButtonProps & React.ComponentPropsWithoutRef<'button'>) {
   const { loginMsal } = useAuth();
   const { inProgress } = useMsal();
   return (
     <Button
       disabled={inProgress === InteractionStatus.Login}
       leftSection={null}
-      color='#FF5F05'
+      color="#FF5F05"
       variant="filled"
       {...props}
       onClick={() => {

diff --git a/clientv2/src/components/LoginComponent/PartnerLoginButton.tsx b/clientv2/src/components/LoginComponent/PartnerLoginButton.tsx
@@ -1,17 +1,14 @@
 import { Button, ButtonProps } from '@mantine/core';
-import { useAuth } from '../AuthContext';
 import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 
-export function PartnerLoginButton(
-  props: ButtonProps & React.ComponentPropsWithoutRef<'button'>,
-) {
+export function PartnerLoginButton(props: ButtonProps & React.ComponentPropsWithoutRef<'button'>) {
   const { login } = useKindeAuth();
   return (
     <Button
       disabled={false}
       leftSection={null}
       variant="filled"
-      color='#0053B3'
+      color="#0053B3"
       {...props}
       onClick={() => {
         login();

diff --git a/clientv2/src/components/LoginComponent/index.tsx b/clientv2/src/components/LoginComponent/index.tsx
@@ -1,37 +1,8 @@
-import { useForm } from '@mantine/form';
-import {
-  TextInput,
-  PasswordInput,
-  Text,
-  Paper,
-  Group,
-  PaperProps,
-  Button,
-  Divider,
-  Stack,
-  Center,
-} from '@mantine/core';
+import { Text, Paper, Group, PaperProps, Divider, Center } from '@mantine/core';
 import { AcmLoginButton } from './AcmLoginButton';
 import { PartnerLoginButton } from './PartnerLoginButton';
 
 export function LoginComponent(props: PaperProps) {
-  const form = useForm({
-    initialValues: {
-      email: '',
-      name: '',
-      password: '',
-      terms: true,
-    },
-
-    validate: {
-      email: (val) => (/^\S+@\S+$/.test(val) ? null : 'Invalid email'),
-      password: (val) =>
-        val.length <= 6
-          ? 'Password should include at least 6 characters'
-          : null,
-    },
-  });
-
   return (
     <Paper radius="md" p="xl" withBorder {...props}>
       <Center>
@@ -46,29 +17,15 @@ export function LoginComponent(props: PaperProps) {
         Welcome to ACM@UIUC Resume Book
       </Text>
 
-      <Divider
-        label="Student Login"
-        labelPosition="center"
-        my="md"
-        size="lg"
-      />
+      <Divider label="Student Login" labelPosition="center" my="md" size="lg" />
 
       <Group grow mb="md" mt="md">
-        <AcmLoginButton radius="xl">
-          Sign in with Illinois NetID
-        </AcmLoginButton>
+        <AcmLoginButton radius="xl">Sign in with Illinois NetID</AcmLoginButton>
       </Group>
 
-      <Divider
-        label="Recruiter Login"
-        labelPosition="center"
-        my="md"
-        size="lg"
-      />
+      <Divider label="Recruiter Login" labelPosition="center" my="md" size="lg" />
       <Group grow mb="md" mt="md">
-        <PartnerLoginButton radius="xl">
-          ACM@UIUC Partner Login
-        </PartnerLoginButton>
+        <PartnerLoginButton radius="xl">ACM@UIUC Partner Login</PartnerLoginButton>
       </Group>
     </Paper>
   );

diff --git a/clientv2/src/components/Navbar/index.tsx b/clientv2/src/components/Navbar/index.tsx
@@ -1,31 +1,18 @@
 'use client';
 
-import {
-  Group,
-  Button,
-  Divider,
-  Box,
-  Burger,
-  Drawer,
-  ScrollArea,
-  rem,
-} from '@mantine/core';
+import { Group, Divider, Box, Burger, Drawer, ScrollArea, rem } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useNavigate } from 'react-router-dom';
 import classes from './index.module.css';
 import LogoBadge from './Logo';
-import { AuthContextData, useAuth } from '../AuthContext';
+import { AuthContextData } from '../AuthContext';
 import { AuthenticatedProfileDropdown } from '../ProfileDropdown';
 
 interface HeaderNavbarProps {
   userData?: AuthContextData | null;
 }
 
 const HeaderNavbar: React.FC<HeaderNavbarProps> = ({ userData }) => {
-  const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] =
-    useDisclosure(false);
-  const navigate = useNavigate();
-  const { isLoggedIn } = useAuth();
+  const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);
   return (
     <Box>
       <header className={classes.header}>
@@ -38,26 +25,9 @@ const HeaderNavbar: React.FC<HeaderNavbarProps> = ({ userData }) => {
             </a>
           </Group>
           <Group h="100%" justify="end" gap={10} visibleFrom="sm">
-            {userData ? (
-              <AuthenticatedProfileDropdown userData={userData} />
-            ) : null}
-            {isLoggedIn ? null : (
-              <Button
-                variant="filled"
-                fullWidth
-                onClick={() => {
-                  navigate('/login');
-                }}
-              >
-                Sign In
-              </Button>
-            )}
+            {userData ? <AuthenticatedProfileDropdown userData={userData} /> : null}
           </Group>
-          <Burger
-            opened={drawerOpened}
-            onClick={toggleDrawer}
-            hiddenFrom="sm"
-          />
+          <Burger opened={drawerOpened} onClick={toggleDrawer} hiddenFrom="sm" />
         </Group>
       </header>
 
@@ -75,21 +45,7 @@ const HeaderNavbar: React.FC<HeaderNavbarProps> = ({ userData }) => {
           <a href="#" className={classes.link}>
             Home
           </a>
-          {userData ? (
-            <AuthenticatedProfileDropdown userData={userData} />
-          ) : null}
-          {isLoggedIn ? null : (
-            <Button
-              variant="filled"
-              style={{ marginTop: '1em' }}
-              fullWidth
-              onClick={() => {
-                navigate('/login');
-              }}
-            >
-              Sign In
-            </Button>
-          )}
+          {userData ? <AuthenticatedProfileDropdown userData={userData} /> : null}
         </ScrollArea>
       </Drawer>
     </Box>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require('eslint-config-mantine/.prettierrc.js');