Cleanup

prototype_nextjs/src/components/CircularColorInput.tsx

@@ -6,7 +6,7 @@ export type CircularColorInputProps = React.ComponentProps<'input'> & {
 
 /**
  * Calculates a slightly lighter/darker color than `color`, depending on if it
- *  dark or light. If `color` is dark, returns a lighter color and vice verca.
+ *  dark or light. If `color` is dark, returns a lighter color and vice versa.
  *
  * Figure out a color is dark by checking the return value of
  *  `theme.palette.getContrastText`.
@@ -32,7 +32,7 @@ function calculateBorderColor(color: string, theme: Theme): string {
 }
 
 // color input styling: https://stackoverflow.com/a/56814437
-// there is also https://stackoverflow.com/a/41884762 but it's not a cross browser solution
+// there is also https://stackoverflow.com/a/41884762, but it's not a cross browser solution
 /**
  * Custom circular color input. Because MUI doesn't have a proper implementation
  *  of `type=color`.

prototype_nextjs/src/components/DebouncedTextField.tsx

@@ -11,7 +11,9 @@ export type DebouncedTextFieldProps = Omit<TextFieldProps, 'value' | 'onChange'
 /**
  * A controlled TextField that uses debouncing for better performance. Should be used for searching.
  *
- * @param onSearchSubmit
+ * @param debounceTimeoutMs The amount of time (ms) after user stops typing to wait before calling `onSearchSubmit`
+ * @param initialValue
+ * @param onSearchSubmit The action to execute `debounceTimeoutMs`ms after user stops typing
  * @param resetResults
  * @see https://javascript.plainenglish.io/how-to-create-an-optimized-real-time-search-with-react-6dd4026f4fa9
  */

prototype_nextjs/src/components/Layout.tsx

@@ -47,7 +47,7 @@ export default function Layout({
   children,
 }: LayoutProps) {
   const noSidebar = sidebar.type === SidebarType.NONE;
-  const [showSidebar, setShowSidebar] = useState(true && !noSidebar);
+  const [showSidebar, setShowSidebar] = useState(!noSidebar);
 
   const toggleSidebar = () => setShowSidebar((show) => !show);
 

prototype_nextjs/src/components/LoadingPage.tsx

@@ -1,16 +1,17 @@
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress, { type CircularProgressProps } from '@mui/material/CircularProgress';
 import Stack from '@mui/material/Stack';
 
 export type LoadingPageProps = {
   dark?: boolean
-  size?: number
+  size?: CircularProgressProps['size']
 };
 
 /**
  * A component displaying an infinitely spinning spinner to represent something
  *  is loading.
  *
  * @param dark if `true`, black background & light spinner; else default background & dark spinner
+ * @param size spinner size
  */
 export default function LoadingPage({
   dark = true,

prototype_nextjs/src/components/layout/sidebar/ProjectsList.tsx

@@ -140,7 +140,7 @@ export default function ProjectsList() {
           sx={{
             inset: 0,
             overflowY: 'auto',
-            // TODO?: scrollbar styling isnt fully supported on firefox
+            // TODO?: scrollbar styling isn't fully supported on firefox
             // so try and figure out workaround? idk
             // https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
             '&::-webkit-scrollbar': {

prototype_nextjs/src/lib/inviteToken.ts

@@ -6,7 +6,7 @@ import jwt from 'jsonwebtoken';
 const getSecret = () => process.env.INVITE_TOKEN_SECRET as string;
 
 /**
- * Returns a JWT token that is to be used as as invite token.
+ * Returns a JWT token that is to be used as an invite token.
  *  - payload contains inviter email
  *  - can only be used once (is stored in database)
  *  - expires in a week from the date it was generated

prototype_nextjs/src/lib/projects.ts

@@ -43,6 +43,6 @@ export function getEmployeeRoleInProject(userId: string, project: ProjectTeam):
   return null;
 }
 
-export function emmployeeHasAccessToProject(userId: string, project: ProjectTeam): boolean {
+export function employeeHasAccessToProject(userId: string, project: ProjectTeam): boolean {
   return getEmployeeRoleInProject(userId, project) !== null;
 }

prototype_nextjs/src/pages/_app.tsx

@@ -41,7 +41,7 @@ declare module '@mui/material/styles' {
     light: Palette['primary'];
     dark: Palette['primary'];
 
-    contrast: Palette['primary']; // constrast to theme
+    contrast: Palette['primary']; // contrast to theme
     makeItAllGrey: Palette['primary'];
     makeItAllOrange: Palette['primary'];
   }
@@ -252,10 +252,7 @@ export default function App({
 
         <ThemedToaster />
 
-        <Box sx={{
-          bgcolor: 'background.default',
-          minHeight: '100vh',
-        }}>
+        <Box minHeight="100vh">
           {noAuth ? (
             <Component {...pageProps} />
           ) : (
@@ -314,9 +311,9 @@ function Auth({ children }: { children: React.ReactNode }) {
 
   if (status === 'loading') {
     return (
-      <div className="vh-100 vw-100">
+      <Box height="100vh" width="100vw">
         <LoadingPage />
-      </div>
+      </Box>
     );
   }
 

prototype_nextjs/src/pages/api/auth/[...nextauth].ts

@@ -29,7 +29,7 @@ export const authOptions: NextAuthOptions = {
          *
          * Works by basically re-signing them in (getting their info from database again), but instead
          *  of using their email & password, it uses the session to know who is signed in.
-         *  - We can't use their email & password because their password isn't stored in plain text and
+         *  - We can't use their email & password because their password isn't stored in plain text, and
          *   it's inconvenient to ask them to re-enter it.
          *
          * After "signing in", next-auth's signIn flow will re-set the cookie/session stored on the client.

prototype_nextjs/src/pages/examples/no_sidebar.tsx

@@ -2,7 +2,6 @@ import type { GetServerSidePropsContext } from 'next';
 import Head from 'next/head';
 import { unstable_getServerSession } from 'next-auth/next';
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/material';
 
 import { SidebarType } from '~/components/Layout';
 import type { AppPage, SessionUser } from '~/types';

prototype_nextjs/src/pages/index.tsx

@@ -39,9 +39,9 @@ const SignInPage: AppPage = () => {
 
   const handleSubmit: React.ComponentProps<typeof Formik<SignInFormData>>['onSubmit']
     = async ({ email, password }, { setFieldError }) => {
-      // unfocus the focused element so that an error from backend doesn't almost immediately
-      // disappear if they submitted the form while focused on an element (i.e. pressed enter.
-      // because touched will update to true when they unfocus from the element
+      // Unfocus the focused element so that an error from backend doesn't almost immediately
+      // disappear if they submitted the form while focused on an element (i.e. pressed enter).
+      // Because touched will immediately update to true when they unfocus from the element
       document.querySelector<HTMLInputElement>(':focus')?.blur();
 
       toast.dismiss('signInFailed');