Feature: add update form

.devcontainer/devcontainer.json

@@ -85,6 +85,6 @@
   },
   // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": "./.devcontainer/scripts/start.sh",
-  // Change to `"node"` to connect as non-root user instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "root"
-}
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  // "remoteUser": "node"
+}

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= # <America/Chicago> -- Use same timezone as local to match NodeJS/Emulator to it

next.config.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   reactStrictMode: true,
+
   env: {
     baseUrl: process.env.BASE_URL,
     apiKey: process.env.API_KEY,
@@ -14,6 +15,7 @@ module.exports = {
   },
   compiler:{
     removeConsole: true,
+    styledComponents: true,
   },
   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",
@@ -46,9 +46,6 @@
     "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",
     "string-width": "^6.1.0",
     "swr": "^2.2.4",
     "tsconfig-paths-webpack-plugin": "^4.0.0"

pages/course/[courseid].tsx

@@ -39,7 +39,6 @@ import {
   roundNumber,
 } from '@src/utilities';
 import type { NextPage } from 'next';
-import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 
@@ -69,19 +68,24 @@ const CourseId: NextPage<CoursePageProps> = ({
   defaultSemesterToggles,
   defaultReviews,
 }) => {
-  const router = useRouter();
+  const {
+    courseId: courseId,
+    name: courseName,
+    numReviews: courseNumReviews,
+    url: courseUrl,
+    avgWorkload: courseAvgWorkload,
+    avgDifficulty: courseAvgDifficulty,
+    avgOverall: courseAvgOverall,
+  } = courseData;
   const [loading, setLoading] = useState<boolean>(false);
   const [snackBarOpen, setSnackBarOpen] = useState<boolean>(false);
   const [snackBarMessage, setSnackBarMessage] = useState<string>('');
   const [reviewModalOpen, setReviewModalOpen] = useState(false);
   const handleReviewModalOpen = () => setReviewModalOpen(true);
   const handleReviewModalClose = () => setReviewModalOpen(false);
 
-  const authContext = useAuth();
-  let user: FirebaseAuthUser | null = null;
-  if (authContext) {
-    ({ user } = authContext);
-  }
+  const authContext : any | null = useAuth();
+  const user: FirebaseAuthUser | null = authContext.user;
 
   const theme = useTheme();
 
@@ -95,8 +99,6 @@ const CourseId: NextPage<CoursePageProps> = ({
     useState<TPayloadReviews>(defaultReviews);
   const orientation = useMediaQuery('(min-width:600px)');
 
-  const path = router.asPath.split('/');
-  const courseId = path[path.length - 1] as TCourseId;
   const { mutate } = useSWRConfig();
   const { data: course_reviews } = useSWR(
     `/course/${courseId}/${selectedYear}/${selectedSemester}`,
@@ -118,9 +120,7 @@ const CourseId: NextPage<CoursePageProps> = ({
       enabled: true,
       name: 'Copy Course Name',
       clickAction: () => {
-        navigator.clipboard.writeText(
-          `${courseData?.courseId}: ${courseData?.name}`,
-        );
+        navigator.clipboard.writeText(`${courseId}: ${courseName}`);
         setSnackBarMessage('Copied Course Name to Clipboard');
         setSnackBarOpen(true);
       },
@@ -160,11 +160,6 @@ const CourseId: NextPage<CoursePageProps> = ({
 
     setSnackBarOpen(false);
   };
-  useEffect(() => {
-    if (courseData?.numReviews) {
-      setLoading(false);
-    }
-  }, [courseData]);
   useEffect(() => {
     if (course_reviews) {
       setCourseReviews(course_reviews);
@@ -217,10 +212,10 @@ const CourseId: NextPage<CoursePageProps> = ({
         }}
       >
         <Typography variant='h4' color='inherit' gutterBottom>
-          {courseData?.name}
+          {courseName}
         </Typography>
-        {courseData && courseData?.url && (
-          <Link href={courseData.url} target='_blank' color="primary.contrastText">
+        {courseUrl && (
+          <Link href={courseUrl} target='_blank' color="primary.contrastText">
             <Box
               sx={{
                 display: 'flex',
@@ -235,99 +230,88 @@ const CourseId: NextPage<CoursePageProps> = ({
             </Box>
           </Link>
         )}
-        {courseData &&
-          courseData?.avgWorkload &&
-          courseData?.avgDifficulty &&
-          courseData.avgOverall && (
-            <Grid
-              sx={{ my: 1 }}
-              container
-              direction='row'
-              spacing={4}
-              justifyContent='center'
-            >
-              <Grid item xs={12} lg={4}>
-                <Card variant='outlined' sx={{ padding: '5 30', color: 'inherit' }}>
-                  <CardContent>
-                    <Typography
-                      sx={{ fontSize: 14 }}
-                      gutterBottom
-                    >
-                      {`Average Workload`}
-                    </Typography>
-                    <Typography variant='h5' sx={{color: 'inherit'}}>
-                      {roundNumber(Number(courseData?.avgWorkload), 1) +
-                        ' hrs/wk'}
-                    </Typography>
-                  </CardContent>
-                </Card>
-              </Grid>
-              <Grid item xs={12} lg={4}>
-                <Card
-                  variant='outlined'
-                  sx={{
-                    padding: '5 30',
-                    borderColor: mapRatingToColorInverted(
-                      Number(courseData?.avgDifficulty),
-                    ),
-                  }}
-                >
-                  <CardContent>
-                    <Typography
-                      sx={{ fontSize: 14,
-                        color: mapRatingToColorInverted(
-                          Number(courseData?.avgDifficulty),
-                        ),
-                       }}
-                      gutterBottom
-                    >
-                      {`Average Difficulty`}
-                    </Typography>
-                    <Typography
-                      variant='h5'
-                      sx={{
-                        color: mapRatingToColorInverted(
-                          Number(courseData?.avgDifficulty),
-                        ),
-                      }}
-                    >
-                      {roundNumber(Number(courseData?.avgDifficulty), 1) +
-                        ' /5'}
-                    </Typography>
-                  </CardContent>
-                </Card>
-              </Grid>
-              <Grid item xs={12} lg={4}>
-                <Card
-                  variant='outlined'
-                  sx={{
-                    margin: '10',
-                    padding: '5 30',
-                    borderColor: mapRatingToColor(
-                      Number(courseData.avgOverall),
-                    ),
-                  }}
-                >
-                  <CardContent>
-                    <Typography
-                      sx={{ fontSize: 14, color: mapRatingToColor(Number(courseData.avgOverall)) }}
-                      gutterBottom
-                    >
-                      {`Average Overall`}
-                    </Typography>
-                    <Typography
-                      variant='h5'
-                      sx={{
-                        color: mapRatingToColor(Number(courseData.avgOverall)),
-                      }}
-                    >
-                      {roundNumber(Number(courseData.avgOverall), 1) + ' /5'}
-                    </Typography>
-                  </CardContent>
-                </Card>
-              </Grid>
+        {courseAvgWorkload && courseAvgDifficulty && courseAvgOverall && (
+          <Grid
+            sx={{ my: 1 }}
+            container
+            direction='row'
+            spacing={4}
+            justifyContent='center'
+          >
+            <Grid item xs={12} lg={4}>
+              <Card variant='outlined' sx={{ padding: '5 30', color:'inherit' }}>
+                <CardContent>
+                  <Typography
+                    sx={{ fontSize: 14 }}
+                    gutterBottom
+                  >
+                    {`Average Workload`}
+                  </Typography>
+                  <Typography variant='h5'>
+                    {roundNumber(Number(courseAvgWorkload), 1) + ' hrs/wk'}
+                  </Typography>
+                </CardContent>
+              </Card>
             </Grid>
-          )}
+            <Grid item xs={12} lg={4}>
+              <Card
+                variant='outlined'
+                sx={{
+                  padding: '5 30',
+                  borderColor: mapRatingToColorInverted(
+                    Number(courseAvgDifficulty),
+                  ),
+                }}
+              >
+                <CardContent>
+                  <Typography
+                    sx={{ fontSize: 14 }}
+                    gutterBottom
+                  >
+                    {`Average Difficulty`}
+                  </Typography>
+                  <Typography
+                    variant='h5'
+                    sx={{
+                      color: mapRatingToColorInverted(
+                        Number(courseAvgDifficulty),
+                      ),
+                    }}
+                  >
+                    {roundNumber(Number(courseAvgDifficulty), 1) + ' /5'}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={12} lg={4}>
+              <Card
+                variant='outlined'
+                sx={{
+                  margin: '10',
+                  padding: '5 30',
+                  borderColor: mapRatingToColor(Number(courseAvgOverall)),
+                }}
+              >
+                <CardContent>
+                  <Typography
+                    sx={{ fontSize: 14 }}
+                    gutterBottom
+                  >
+                    {`Average Overall`}
+                  </Typography>
+                  <Typography
+                    variant='h5'
+                    sx={{
+                      color: mapRatingToColor(Number(courseAvgOverall)),
+                    }}
+                  >
+                    {roundNumber(Number(courseAvgOverall), 1) + ' /5'}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        )}
         <Grid>
           <ToggleButtonGroup
             value={selectedSemester}
@@ -383,7 +367,7 @@ const CourseId: NextPage<CoursePageProps> = ({
           </Box>
         ) : (
           <>
-            {courseData?.numReviews ? (
+            {courseNumReviews ? (
               <>
                 {courseReviews && (
                   <Grid container rowSpacing={5} sx={{ mt: 1 }}>
@@ -419,7 +403,14 @@ const CourseId: NextPage<CoursePageProps> = ({
         closeAfterTransition
         PaperProps={{sx:{backgroundImage: 'none'}}}
       >
-        <ReviewForm {...{ courseData, handleReviewModalClose }} />
+        <ReviewForm
+          {...{
+            courseId,
+            courseName,
+            ['reviewInput']: null,
+            handleReviewModalClose,
+          }}
+        />
       </Dialog>
       <SpeedDial
         ariaLabel='Review Dial'

src/components/FormEditor.tsx

@@ -3,15 +3,15 @@
 import '@toast-ui/editor/dist/toastui-editor.css';
 import { Editor } from '@toast-ui/react-editor';
 import DOMPurify from 'isomorphic-dompurify';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 //SSR is currently not supported for toastui
 
 export default function FormEditor({
   initialValue,
   onChange,
 }: {
-  initialValue: string;
+  initialValue:any;
   onChange: any;
 }) {
   const editorRef = useRef<Editor>(null);
@@ -23,6 +23,15 @@
     const clean = DOMPurify.sanitize(dirty, { FORBID_TAGS: ['img'] });
     onChange(clean);
   }
+
+  useEffect(()=>{
+    //Set initial value this way because theres a character limit the other way when doing it via prop
+    if(!editorRef?.current?.getInstance().getMarkdown()){
+      editorRef?.current?.getInstance().setMarkdown(initialValue)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  },[editorRef?.current?.getInstance().getMarkdown(),initialValue]);
+
   return (
     <Box sx={{
     "& .toastui-editor-dark":{