Rachel2

apps/backend/src/modules/course/resolver.ts

@@ -10,7 +10,7 @@ import {
   getCourse,
   getCourses,
 } from "./controller";
-import { IntermediateCourse, formatComment } from "./formatter";
+import { IntermediateCourse } from "./formatter";
 import { CourseModule } from "./generated-types/module-types";
 
 const resolvers: CourseModule.Resolvers = {

apps/frontend/package.json

@@ -9,7 +9,7 @@
     "start": "serve -s dist -p 3000"
   },
   "dependencies": {
-    "@apollo/client": "3.12.7",
+    "@apollo/client": "^3.12.7",
     "@floating-ui/dom": "^1.6.13",
     "@mapbox/mapbox-gl-directions": "^4.3.1",
     "@radix-ui/react-checkbox": "^1.1.3",

apps/frontend/src/App.tsx

@@ -22,6 +22,8 @@ const Class = {
   Grades: lazy(() => import("@/components/Class/Grades")),
   Overview: lazy(() => import("@/components/Class/Overview")),
   Sections: lazy(() => import("@/components/Class/Sections")),
+  // added comment
+  Comments: lazy(() => import("@/components/Class/Comments")),
 };
 
 const Course = {
@@ -30,6 +32,7 @@ const Course = {
   Grades: lazy(() => import("@/components/Course/Grades")),
   Overview: lazy(() => import("@/components/Course/Overview")),
   Classes: lazy(() => import("@/components/Course/Classes")),
+  Comments: lazy(() => import("@/components/Class/Comments")),
 };
 
 const Catalog = lazy(() => import("@/app/Catalog"));
@@ -130,6 +133,7 @@ const router = createBrowserRouter([
             element: <Course.Grades />,
             path: "grades",
           },
+
           {
             path: "*",
             loader: () => redirect("."),
@@ -156,6 +160,10 @@ const router = createBrowserRouter([
             element: <Class.Grades />,
             path: "grades",
           },
+          {
+            element: <Course.Comments />,
+            path: "comments",
+          },
           {
             path: "*",
             loader: () => redirect("."),

apps/frontend/src/components/Class/Comments/Comments.module.scss

@@ -0,0 +1,38 @@
+.root {
+  --foreground-color: #000; /* Default for light mode */
+  padding: 24px 0;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+
+  .button {
+    padding: 8px 12px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s ease-in-out;
+  }
+
+  .button:hover {
+    background-color: #0056b3;
+  }
+
+  .li {
+    color: var(--foreground-color);
+  }
+}
+
+[data-theme="dark"] {
+    --foreground-color: #fff; /* Dark mode */
+  }

apps/frontend/src/components/Class/Comments/index.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+
+import { useAddComment } from "@/hooks/api/classes/useAddComment";
+import { useGetComments } from "@/hooks/api/classes/useGetComments";
+import useClass from "@/hooks/useClass";
+
+import styles from "./Comments.module.scss";
+
+export default function Comments() {
+  const { class: _class } = useClass();
+  const [value, setValue] = useState("");
+
+  // Fetch comments for the class
+  const { data: comments } = useGetComments(
+    _class.subject,
+    _class.courseNumber
+  );
+
+  // Mutation for adding a new comment
+  const [addComment] = useAddComment();
+
+  useEffect(() => {
+    if (comments) {
+      console.log("Fetched Comments:", comments);
+    }
+  }, [comments]);
+
+  const userEmail = "[email protected]"; // Replace with actual user email
+
+  const handleSubmit = async () => {
+    if (value.trim() !== "") {
+      try {
+        await addComment(_class.subject, _class.courseNumber, userEmail, value); // Pass arguments directly
+        setValue(""); // Clear input after submission
+      } catch (error) {
+        console.error("Error submitting comment:", error);
+      }
+    }
+  };
+
+  return (
+    <div className={styles.root}>
+      <label htmlFor="text-input">Make a new comment:</label>
+      <input
+        id="text-input"
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        className={styles.input}
+        placeholder="Say anything..."
+      />
+      <button onClick={handleSubmit} className={styles.button}>
+        Submit
+      </button>
+
+      {comments && comments.length > 0 ? (
+        <ul>
+          {comments.map((comment, index) => (
+            <li key={index} className={styles.li}>
+              <p>
+                <strong>{comment.userEmail}</strong>: {comment.content}
+              </p>
+              <p
+                style={{
+                  fontSize: "12px",
+                  color: "gray",
+                  marginBottom: "12px",
+                }}
+              >
+                {new Date(comment.createdAt).toLocaleString()}
+              </p>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No comments yet.</p>
+      )}
+    </div>
+  );
+}

apps/frontend/src/components/Class/Overview/index.tsx

@@ -5,6 +5,7 @@ import styles from "./Overview.module.scss";
 
 export default function Overview() {
   const { class: _class } = useClass();
+  console.log(_class);
 
   return (
     <div className={styles.root}>

apps/frontend/src/components/Class/index.tsx

@@ -53,13 +53,15 @@ const Enrollment = lazy(() => import("./Enrollment"));
 const Grades = lazy(() => import("./Grades"));
 const Overview = lazy(() => import("./Overview"));
 const Sections = lazy(() => import("./Sections"));
+const Comments = lazy(() => import("./Comments"));
 
 interface BodyProps {
   children: ReactNode;
   dialog?: boolean;
 }
 
 function Body({ children, dialog }: BodyProps) {
+  console.log(children);
   return (
     <Suspense
       fallback={
@@ -136,6 +138,7 @@ export default function Class({
   onClose,
   dialog,
 }: ClassProps) {
+  console.log("DIALOG", dialog);
   const { pins, addPin, removePin } = usePins();
   const location = useLocation();
 
@@ -405,6 +408,11 @@ export default function Class({
               <Tabs.Trigger value="grades" asChild>
                 <MenuItem>Grades</MenuItem>
               </Tabs.Trigger>
+
+              {/* Created a new Comments MenuItem */}
+              <Tabs.Trigger value="comments" asChild>
+                <MenuItem>Comments</MenuItem>
+              </Tabs.Trigger>
             </Tabs.List>
           ) : (
             <div className={styles.menu}>
@@ -428,6 +436,12 @@ export default function Class({
                   <MenuItem active={isActive}>Grades</MenuItem>
                 )}
               </NavLink>
+              {/* Make a link */}
+              <NavLink to={{ ...location, pathname: "comments" }}>
+                {({ isActive }) => (
+                  <MenuItem active={isActive}>Comments</MenuItem>
+                )}
+              </NavLink>
             </div>
           )}
         </Container>
@@ -451,6 +465,10 @@ export default function Class({
           <Tabs.Content value="grades" asChild>
             <Grades />
           </Tabs.Content>
+          {/* Add Comments component to body */}
+          <Tabs.Content value="comments" asChild>
+            <Comments />
+          </Tabs.Content>
         </Body>
       </ClassContext>
     </Root>

apps/frontend/src/hooks/api/classes/useAddComment.ts

@@ -0,0 +1,46 @@
+import { useCallback } from "react";
+
+import { MutationHookOptions, useMutation } from "@apollo/client";
+
+import { ADD_COMMENT, CreateCommentResponse } from "@/lib/api";
+
+export const useAddComment = () => {
+  const mutation = useMutation<CreateCommentResponse>(ADD_COMMENT, {
+    update(cache, { data }) {
+      const newComment = data?.addComment;
+
+      if (!newComment) return;
+
+      cache.modify({
+        fields: {
+          comments(existingComments = []) {
+            return [...existingComments, newComment];
+          },
+        },
+      });
+    },
+  });
+
+  const addComment = useCallback(
+    async (
+      subject: string,
+      number: string,
+      userEmail: string,
+      content: string,
+      options?: Omit<MutationHookOptions<CreateCommentResponse>, "variables">
+    ) => {
+      const mutate = mutation[0];
+
+      return await mutate({
+        ...options,
+        variables: { subject, number, userEmail, content },
+      });
+    },
+    [mutation]
+  );
+
+  return [addComment, mutation[1]] as [
+    mutate: typeof addComment,
+    result: (typeof mutation)[1],
+  ];
+};

apps/frontend/src/hooks/api/classes/useGetComments.ts

@@ -0,0 +1,24 @@
+import { QueryHookOptions, useQuery } from "@apollo/client";
+
+import { GET_COMMENTS, getCommentsResponse } from "@/lib/api";
+
+export const useGetComments = (
+  subject: string,
+  number: string,
+  userEmail?: string | null,
+  options?: Omit<QueryHookOptions<getCommentsResponse>, "variables">
+) => {
+  const query = useQuery<getCommentsResponse>(GET_COMMENTS, {
+    ...options,
+    variables: {
+      subject,
+      number,
+      userEmail: userEmail || undefined,
+    },
+  });
+
+  return {
+    ...query,
+    data: query.data?.comments, // Return the comments array
+  };
+};

apps/frontend/src/lib/api/classes.ts

@@ -377,3 +377,56 @@ export const GET_CATALOG = gql`
     }
   }
 `;
+
+export interface Comment {
+  subject: string;
+  number: string;
+  userEmail: string;
+  content: string;
+  createdAt: string;
+}
+export interface getCommentsResponse {
+  comments: Comment[];
+}
+
+export const GET_COMMENTS = gql`
+  query GetComments(
+    $subject: String!
+    $number: CourseNumber!
+    $userEmail: String
+  ) {
+    comments(subject: $subject, number: $number, userEmail: $userEmail) {
+      subject
+      number
+      userEmail
+      content
+      createdAt
+    }
+  }
+`;
+
+export interface CreateCommentResponse {
+  addComment: Comment;
+}
+
+export const ADD_COMMENT = gql`
+  mutation addComment(
+    $subject: String!
+    $number: CourseNumber!
+    $userEmail: String!
+    $content: String!
+  ) {
+    addComment(
+      subject: $subject
+      number: $number
+      userEmail: $userEmail
+      content: $content
+    ) {
+      subject
+      number
+      userEmail
+      content
+      createdAt
+    }
+  }
+`;

apps/frontend/vite.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
   server: {
     host: true,
     port: 3000,
+    allowedHosts: ["localhost", "frontend"],
   },
   resolve: {
     alias: {