Feature: add update form

.devcontainer/Dockerfile

@@ -4,6 +4,8 @@
 ARG VARIANT="20-bullseye"
 FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
 
-RUN apt-get update && apt-get install -y openjdk-11-jdk \
+RUN apt-get update && apt-get install -y \
+  # Note: `openjdk-11-jdk` required for Firebase Emulators suite
+  openjdk-11-jdk \
   && apt-get clean \
   && rm -rf /var/lib/apt/lists/*

.devcontainer/devcontainer.json

@@ -5,40 +5,36 @@
   "build": {
     "dockerfile": "Dockerfile"
   },
+  "runArgs": ["--name", "omshub-website-dev"],
   "mounts": [
-    "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
+    // cache `node_modules`
+    "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
+    // cache firebase emulators suite JAR files -- ref: https://firebase.google.com/docs/emulator-suite/install_and_configure#integrate_with_your_ci_system
+    "source=${localWorkspaceFolderBasename}-fb_emulators_root,target=/root/.cache/firebase/emulators/,type=volume", // root user
+    "source=${localWorkspaceFolderBasename}-fb_emulators_nonroot,target=/home/${containerUser}/.cache/firebase/emulators/,type=volume" // non-root user (e.g., `node`)
   ],
   "customizations": {
     "vscode": {
       "settings": {},
-      "workspaceFolder":"${containerWorkspaceFolder}",
+      "workspaceFolder": "${containerWorkspaceFolder}",
       // Add the IDs of extensions you want installed when the container is created.
       "extensions": [
         "dbaeumer.vscode-eslint",
         "esbenp.prettier-vscode",
-        "ms-azuretools.vscode-docker",
+        "oderwat.indent-rainbow",
         "mhutchie.git-graph"
-      ],
+      ]
     }
   },
   "containerEnv": {
-    "CHOKIDAR_USEPOLLING":"true",
-    "WATCHPACK_POLLING":"true"
+    "CHOKIDAR_USEPOLLING": "true",
+    "WATCHPACK_POLLING": "true"
   },
   "forwardPorts": [
     // Application and Storybook
-    3000,
-    6006,
+    3000, 6006,
     // Local Firebase Emulator Suite
-    4000,
-    4400,
-    4500,
-    5000,
-    5001,
-    8080,
-    9099,
-    9150,
-    9199
+    4000, 4400, 4500, 5000, 5001, 8080, 9099, 9150, 9199
   ],
   "portsAttributes": {
     // Application and Storybook

context/AuthContext.tsx

@@ -5,6 +5,7 @@ import {
   TContextProviderProps,
   TSignInAction,
 } from '@context/types';
+import { TNullable } from '@globals/types';
 import { isGTEmail, isOutlookEmail } from '@globals/utilities';
 import {
   FacebookAuthProvider,
@@ -23,28 +24,31 @@ import router from 'next/router';
 import { createContext, useContext, useEffect, useState } from 'react';
 
 export type TAuthContext = {
-  user: FirebaseAuthUser | null;
+  user: TNullable<FirebaseAuthUser>;
   loading: Boolean;
   signInWithProvider: TSignInAction;
   signWithMagic: TSignInAction;
   logout: () => void;
 };
 
-const AuthContext = createContext<TAuthContext | null>(null);
+// local storage key
+const EMAIL_FOR_SIGN_IN = 'emailForSignIn';
+
+const AuthContext = createContext<TNullable<TAuthContext>>(null);
 
 export const useAuth = () => useContext(AuthContext);
 
 // eslint-disable-next-line no-undef
 export const AuthContextProvider = ({ children }: TContextProviderProps) => {
-  const [user, setUser] = useState<FirebaseAuthUser | null>(null);
+  const [user, setUser] = useState<TNullable<FirebaseAuthUser>>(null);
   const [loading, setLoading] = useState<Boolean>(true);
   const { setAlert } = useAlert();
 
   useEffect(() => {
     setLoading(true);
     const unsubscribe = onAuthStateChanged(
       auth,
-      (user: FirebaseAuthUser | null) => {
+      (user: TNullable<FirebaseAuthUser>) => {
         if (user) {
           setUser(user);
           setLoading(false);
@@ -55,7 +59,7 @@ export const AuthContextProvider = ({ children }: TContextProviderProps) => {
       },
     );
     // OAuth Providers
-    const email = window.localStorage.getItem('emailForSignIn');
+    const email = window.localStorage.getItem(EMAIL_FOR_SIGN_IN);
 
     if (isSignInWithEmailLink(auth, window.location.href) && !!email) {
       // Sign the user in
@@ -74,6 +78,7 @@ export const AuthContextProvider = ({ children }: TContextProviderProps) => {
   };
   const logout = async () => {
     setUser(null);
+    window.localStorage.removeItem(EMAIL_FOR_SIGN_IN);
     await signOut(auth);
     router.push('/');
   };
@@ -84,7 +89,7 @@ export const AuthContextProvider = ({ children }: TContextProviderProps) => {
       handleCodeInApp: true,
     }).then(() => {
       // Save the users email to verify it after they access their email
-      window.localStorage.setItem('emailForSignIn', email);
+      window.localStorage.setItem(EMAIL_FOR_SIGN_IN, email);
       const additionalInstructions =
         isGTEmail(email) || isOutlookEmail(email)
           ? ' NOTE: gatech.edu or outlook.com domain may require release from Quarantine. See https://security.microsoft.com/quarantine'

context/ColorContext.tsx

@@ -1,13 +1,16 @@
 import { TContextProviderProps } from '@context/types';
-import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+  experimental_extendTheme as extendTheme,
+} from '@mui/material/styles';
 import { getDesignTokens } from '@src/theme';
 
 const { palette: lightPalette } = getDesignTokens('light');
 const { palette: darkPalette } = getDesignTokens('dark');
 
 export const theme = extendTheme({
   typography: {
-    fontFamily:[
+    fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
       '"Segoe UI"',
@@ -20,34 +23,36 @@ export const theme = extendTheme({
       '"Segoe UI Symbol"',
     ].join(','),
   },
-  cssVarPrefix:'omshub',
-  colorSchemes:{
-    light:{
-      palette: lightPalette
+  cssVarPrefix: 'omshub',
+  colorSchemes: {
+    light: {
+      palette: lightPalette,
+    },
+    dark: {
+      palette: darkPalette,
     },
-    dark:{
-      palette: darkPalette
-    }
   },
   components: {
-     MuiDrawer: {
-       styleOverrides: {
-         paper: {
-           backgroundColor: "123",
-           boxShadow:"",
-           backgroundImage:"",
-         }
-       }
-     }
- }
-})
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: '123',
+          boxShadow: '',
+          backgroundImage: '',
+        },
+      },
+    },
+  },
+});
 
 export const ColorProvider = ({ children }: TContextProviderProps) => {
-
-
   return (
-      <CssVarsProvider theme={theme} defaultMode="system" disableTransitionOnChange> 
-        {children}
-      </CssVarsProvider>
+    <CssVarsProvider
+      theme={theme}
+      defaultMode='system'
+      disableTransitionOnChange
+    >
+      {children}
+    </CssVarsProvider>
   );
-};
+};

example.env

@@ -10,3 +10,4 @@ NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
 # firebase emulator suite vars
 NEXT_PUBLIC_IS_EMULATOR_MODE= # <true | false>
 NEXT_PUBLIC_FIRESTORE_EMULATOR_HOST= # <localhost:8080> -- ref: https://stackoverflow.com/a/66790889
+TZ= # <US/Pacific | US/Mountain | US/Central | US/Eastern | etc.> -- Use same timezone as local to match NodeJS/Emulator to it; ref: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List

firebase/utilityFunctions.ts

@@ -1,4 +1,4 @@
-import { TCourseId, TNullableNumber } from '@globals/types';
+import { TCourseId, TNullable } from '@globals/types';
 const LEN_SIMPLE_COURSE_NUMBER = 5; //   DD-CCCC-...     (e.g., CS-6200-...)     [total 5 * `-`]
 const LEN_COMPOUND_COURSE_NUMBER = 6; // DD-CCCC-CCC-... (e.g., CS-8803-O08-...) [total 6 * `-`]
 const SEPARATOR_TOKEN = '-';
@@ -44,7 +44,7 @@ export const parseReviewId = (reviewId: string) => {
 };
 
 export type TAveragesData = {
-  oldAverage?: TNullableNumber;
+  oldAverage?: TNullable<number>;
   oldCount?: number;
   newCount: number;
   oldValue?: number;
@@ -87,10 +87,10 @@ export const updateAverage = ({
 type TAveragesInputData = {
   courseId: TCourseId;
   // N.B. `avg`s are null when `numReviews` === 0
-  avgWorkload?: TNullableNumber;
-  avgDifficulty?: TNullableNumber;
-  avgOverall?: TNullableNumber;
-  avgStaffSupport?: TNullableNumber;
+  avgWorkload?: TNullable<number>;
+  avgDifficulty?: TNullable<number>;
+  avgOverall?: TNullable<number>;
+  avgStaffSupport?: TNullable<number>;
   oldWorkload?: number;
   oldDifficulty?: number;
   oldOverall?: number;

globals/types.ts

@@ -1,7 +1,6 @@
 /* --- TYPE DEFINITIONS --- */
 
-export type TNullableNumber = number | null;
-export type TNullableString = string | null;
+export type TNullable<T> = T | null;
 export type TObjectKey = string | number;
 
 export type TKeyMap = {
@@ -28,7 +27,7 @@ export interface CourseDataStatic {
   name: TCourseName;
   departmentId: TDepartmentId;
   courseNumber: string;
-  url: TNullableString; // url may be null (i.e., no existing page)
+  url: TNullable<string>; // url may be null (i.e., no existing page)
   aliases: string[];
   isDeprecated: boolean;
   isFoundational: boolean;
@@ -38,10 +37,10 @@ export interface CourseDataStatic {
 export interface CourseDataDynamic {
   courseId: TCourseId;
   numReviews: number;
-  avgWorkload: TNullableNumber;
-  avgDifficulty: TNullableNumber;
-  avgOverall: TNullableNumber;
-  avgStaffSupport: TNullableNumber;
+  avgWorkload: TNullable<number>;
+  avgDifficulty: TNullable<number>;
+  avgOverall: TNullable<number>;
+  avgStaffSupport: TNullable<number>;
   reviewsCountsByYearSem: TReviewsCountsByYearSemObject;
 }
 
@@ -56,7 +55,7 @@ export interface Review {
   reviewerId: string; // `userId` of review author
   isGTVerifiedReviewer: boolean;
   created: number; // Unix timestamp
-  modified: TNullableNumber; // Unix timestamp
+  modified: TNullable<number>; // Unix timestamp
   body: string;
   upvotes: number;
   downvotes: number;
@@ -78,14 +77,14 @@ export interface Review {
   programmingLanguagesIds?: TProgrammingLanguageId[];
   /* --- user background review data --- */
   preparation?: TRatingScale;
-  omsCoursesTaken?: TNullableNumber;
+  omsCoursesTaken?: TNullable<number>;
   hasRelevantWorkExperience?: boolean;
   experienceLevelId?: TExperienceLevelId;
   gradeId?: string;
 }
 
 export interface User {
-  userId: TNullableString; // invalid request returns null
+  userId: TNullable<string>; // invalid request returns null
   hasGTEmail: boolean;
   educationLevelId?: TEducationLevelId;
   subjectAreaId?: string;

next.config.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   reactStrictMode: true,
+
   env: {
     baseUrl: process.env.BASE_URL,
     apiKey: process.env.API_KEY,
@@ -12,8 +13,14 @@ module.exports = {
     appId: process.env.APP_ID,
     measurementId: process.env.MEASUREMENT_ID,
   },
-  compiler:{
+  compiler: {
     removeConsole: true,
+    styledComponents: true,
   },
-  transpilePackages: ['@mui/system', '@mui/material', '@mui/icons-material','@mui/styles'],
+  transpilePackages: [
+    '@mui/system',
+    '@mui/material',
+    '@mui/icons-material',
+    '@mui/styles',
+  ],
 };

package.json

@@ -8,7 +8,7 @@
     "npm": "please-use-yarn"
   },
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' next dev",
+    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "build-sitemap": "next-sitemap",
     "start": "next start",
@@ -38,17 +38,22 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.14.5",
     "@mui/x-data-grid": "^6.6.0",
+    "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "@toast-ui/react-editor": "^3.2.2",
+    "@types/prismjs": "^1.26.4",
     "firebase": "^9.15.0",
     "html-to-image": "^1.11.11",
     "isomorphic-dompurify": "^1.8.0",
     "next": "^14.2.3",
+    "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.45.2",
-    "react-markdown": "^8.0.5",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "^3.0.1",
+    "react-markdown": "^9.0.1",
+    "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "string-width": "^6.1.0",
     "swr": "^2.2.4",
     "tsconfig-paths-webpack-plugin": "^4.0.0"