Merge pull request #56 from aws-samples/refactor/comment-form

Refactor/comment form

Author: yeonuk-lim

src/App.tsx

@@ -60,6 +60,14 @@ const WorkshopApp = ({ signOut, user = defaultUser }: WorkshopAppProps) => {
               path="/catalog"
               element={signOut ? <Catalog /> : <NotFound />}
             />
+            <Route
+              path="/catalog/course/:courseId"
+              element={signOut ? <Catalog /> : <NotFound />}
+            />
+            <Route
+              path="/catalog/course/:courseId/class/:classId"
+              element={signOut ? <Catalog /> : <NotFound />}
+            />
             <Route
               path="/profile"
               element={signOut ? <ProfilePage {...getProfileProps(user)} /> : <NotFound />}

src/pages/catalog.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
 import {
   Container, 
   SpaceBetween,
@@ -18,6 +19,9 @@ import BaseAppLayout from "../components/base-app-layout";
 const client = generateClient<Schema>();
 
 export default function Catalog(props: any) {
+  const { courseId, classId } = useParams();
+  const navigate = useNavigate();
+  
   const [activeClass, setActiveClass] = useState<Schema["Class"]["type"]>();
   const [activeCourse, setActiveCourse] = useState<Schema["Course"]["type"]>();
   const [courses, setCourses] = useState<Array<Schema["Course"]["type"]>>([]);
@@ -26,25 +30,62 @@ export default function Catalog(props: any) {
   const fetchCourse = async () => {
     const {data: items } = await client.models.Course.list();
     setCourses(items);
-    if (!activeCourse && items.length > 0) {
+    
+    // URL에 courseId가 있으면 해당 코스를 활성화
+    if (courseId && items.length > 0) {
+      const selectedCourse = items.find(c => c.id === courseId);
+      if (selectedCourse) {
+        setActiveCourse(selectedCourse);
+        setActiveTabId(selectedCourse.id);
+      }
+    } else if (!activeCourse && items.length > 0) {
       setActiveCourse(items[0]);
       setActiveTabId(items[0].id);
     }
   };
 
+  const fetchClass = async () => {
+    if (classId) {
+      try {
+        const { data: classData } = await client.models.Class.get({ id: classId });
+        if (classData) {
+          setActiveClass(classData);
+        }
+      } catch (error) {
+        console.error('Error fetching class:', error);
+      }
+    }
+  };
+
   useEffect(() => {
     fetchCourse();
   }, []);
 
+  useEffect(() => {
+    if (classId) {
+      fetchClass();
+    } else {
+      setActiveClass(undefined);
+    }
+  }, [classId]);
+
   const handleTabChange = (detail: { activeTabId: string }) => {
     const selectedCourse = courses.find(c => c.id === detail.activeTabId);
     if (selectedCourse) {
       setActiveCourse(selectedCourse);
-      setActiveClass(undefined); // Reset active class when changing course
+      setActiveClass(undefined);
       setActiveTabId(detail.activeTabId);
+      // URL 업데이트
+      navigate(`/catalog/course/${detail.activeTabId}`);
     }
   };
 
+  const handleClassSelect = (selectedClass: Schema["Class"]["type"]) => {
+    setActiveClass(selectedClass);
+    // URL 업데이트
+    navigate(`/catalog/course/${activeCourse?.id}/class/${selectedClass.id}`);
+  };
+
   return (
     <BaseAppLayout
       content={
@@ -67,7 +108,7 @@ export default function Catalog(props: any) {
                   (activeClass && activeClass != null && activeClass.class_flag != null && activeClass.class_flag <= 0) ? (
                     <Class activeClass={activeClass} userName={props.user} userId={props.uid} />
                   ) : (
-                    <ClassCatalog activeCourse={course} setActiveClass={setActiveClass} />
+                    <ClassCatalog activeCourse={course} setActiveClass={handleClassSelect} />
                   )
                 )
               }))}