From 5efb4d05cb9ffc32b43761e60dd8683ecff4408d Mon Sep 17 00:00:00 2001
From: Hai Nguyen <2nguyen.work@gmail.com>
Date: Tue, 22 Sep 2026 22:37:36 +0700
Subject: [PATCH] feat: change route path id

---
 src/App.jsx                               | 51 +++++++++++++++--------
 src/pages/Course/CourseDetails.jsx        |  4 +-
 src/pages/Course/CourseFormPage.jsx       |  6 +--
 src/pages/Course/CoursesPage.jsx          |  4 +-
 src/pages/lesson/LessonPage.jsx           |  2 +-
 src/pages/lesson/components/ActionBar.jsx |  2 +-
 6 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 96a4765..13ed39d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,24 +18,39 @@ function App() {
   return (
     <>
       <BrowserRouter>
-      <Routes>
-        <Route element={<MainLayout />}>
-          <Route index element={<Navigate to="/courses" replace />} />
-          <Route path="/courses" element={<CoursesPage />} />
-          <Route path="/courses/new" element={<CourseFormPage />} />
-          <Route path="/courses/:courseId/detail" element={<CourseDetail />} />
-          <Route path="/courses/:courseId/edit" element={<CourseFormPage />} />
-          <Route path="/courses/:courseId/lessons/new" element={<LessonFormPage />} />
-          <Route path="/courses/:courseId/lessons/:lessonId/edit" element={<LessonFormPage />} />
-          <Route path="/lessons" element={<LessonPage />} />
-          <Route path="/question-bank/mcq" element={<MCQPage />} />
-          <Route path="/question-bank/paragraph" element={<ParagraphPage />} />
-          <Route path="/users" element={<UsersPage />} />
-          <Route path="/settings/masterdata" element={<MasterdataPage />} />
-          <Route path="/settings/role" element={<RolePage />} />
-          <Route path="/settings/permission" element={<PermissionPage />} />
-        </Route>
-      </Routes>
+        <Routes>
+          <Route element={<MainLayout />}>
+            <Route index element={<Navigate to="/courses" replace />} />
+            <Route path="/courses" element={<CoursesPage />} />
+            <Route path="/courses/new" element={<CourseFormPage />} />
+            <Route
+              path="/courses/detail/:courseId"
+              element={<CourseDetail />}
+            />
+            <Route
+              path="/courses/edit/:courseId"
+              element={<CourseFormPage />}
+            />
+            <Route
+              path="/courses/:courseId/lessons/new"
+              element={<LessonFormPage />}
+            />
+            <Route
+              path="/courses/:courseId/lessons/edit/:lessonId"
+              element={<LessonFormPage />}
+            />
+            <Route path="/lessons" element={<LessonPage />} />
+            <Route path="/question-bank/mcq" element={<MCQPage />} />
+            <Route
+              path="/question-bank/paragraph"
+              element={<ParagraphPage />}
+            />
+            <Route path="/users" element={<UsersPage />} />
+            <Route path="/settings/masterdata" element={<MasterdataPage />} />
+            <Route path="/settings/role" element={<RolePage />} />
+            <Route path="/settings/permission" element={<PermissionPage />} />
+          </Route>
+        </Routes>
       </BrowserRouter>
       <Toaster />
     </>
diff --git a/src/pages/Course/CourseDetails.jsx b/src/pages/Course/CourseDetails.jsx
index 005e5b2..bcc9505 100644
--- a/src/pages/Course/CourseDetails.jsx
+++ b/src/pages/Course/CourseDetails.jsx
@@ -199,7 +199,7 @@ function CourseDetail() {
           <Button
             variant="outline"
             className="rounded-xl bg-app-surface-muted text-app-text hover:bg-app-interactive-hover"
-            onClick={() => navigate(`/courses/${courseId}/edit`)}
+            onClick={() => navigate(`/courses/edit/${courseId}`)}
           >
             <HiOutlinePencil className="w-4 h-4 mr-2" />
             Edit
@@ -416,7 +416,7 @@ function CourseDetail() {
                       <div className="col-span-1 flex items-center justify-end gap-1">
                         <button
                           onClick={() =>
-                            navigate(`/courses/${courseId}/lessons/${lesson.id}/edit`)
+                            navigate(`/courses/${courseId}/lessons/edit/${lesson.id}`)
                           }
                           className="w-8 h-8 rounded-lg flex items-center justify-center text-app-text-muted hover:text-app-primary hover:bg-app-primary-soft transition-colors"
                           title="Edit"
diff --git a/src/pages/Course/CourseFormPage.jsx b/src/pages/Course/CourseFormPage.jsx
index 3c3b35b..3e544d1 100644
--- a/src/pages/Course/CourseFormPage.jsx
+++ b/src/pages/Course/CourseFormPage.jsx
@@ -122,10 +122,10 @@ function CourseFormPage() {
         await courseService.update(courseId, payload);
       } else {
         const created = await courseService.create(payload);
-        navigate(`/courses/${created.id}/detail`);
+        navigate(`/courses/detail/${created.id}`);
         return;
       }
-      navigate(`/courses/${courseId}/detail`);
+      navigate(`/courses/detail/${courseId}`);
     } catch (err) {
       setError(err.message || 'Failed to save course');
     } finally {
@@ -168,7 +168,7 @@ function CourseFormPage() {
             <Button
               variant="outline"
               className="rounded-xl bg-app-surface-muted text-app-text hover:bg-app-interactive-hover"
-              onClick={() => navigate(isEditing ? `/courses/${courseId}/detail` : '/courses')}
+              onClick={() => navigate(isEditing ? `/courses/detail/${courseId}` : '/courses')}
               disabled={saving}
             >
               <HiOutlineArrowLeft className="w-4 h-4 mr-2" />
diff --git a/src/pages/Course/CoursesPage.jsx b/src/pages/Course/CoursesPage.jsx
index 1ebdeea..7fa4e52 100644
--- a/src/pages/Course/CoursesPage.jsx
+++ b/src/pages/Course/CoursesPage.jsx
@@ -63,7 +63,7 @@ function CoursePage() {
   });
 
   const handleClick = (course) => {
-    navigate(`/courses/${course.id}/detail`);
+    navigate(`/courses/detail/${course.id}`);
   };
 
   return (
@@ -130,7 +130,7 @@ function CoursePage() {
               course={course}
               image={course.image}
               handleClick={() => handleClick(course)}
-              onEdit={() => navigate(`/courses/${course.id}/edit`)}
+              onEdit={() => navigate(`/courses/edit/${course.id}`)}
             />
           ))}
           {filtered.length === 0 && (
diff --git a/src/pages/lesson/LessonPage.jsx b/src/pages/lesson/LessonPage.jsx
index 2c19fe9..6cb2ce0 100644
--- a/src/pages/lesson/LessonPage.jsx
+++ b/src/pages/lesson/LessonPage.jsx
@@ -110,7 +110,7 @@ function LessonPage() {
           <button
             type="button"
             style={actionBtn}
-            onClick={() => navigate(`/courses/${row.courseId}/lessons/${row.id}/edit`)}
+            onClick={() => navigate(`/courses/${row.courseId}/lessons/edit/${row.id}`)}
             onMouseEnter={(e) => { e.target.style.background = '#7132f5'; e.target.style.color = '#ffffff'; }}
             onMouseLeave={(e) => { e.target.style.background = '#ffffff'; e.target.style.color = '#5741d8'; }}
           >
diff --git a/src/pages/lesson/components/ActionBar.jsx b/src/pages/lesson/components/ActionBar.jsx
index 0a124a2..1738e27 100644
--- a/src/pages/lesson/components/ActionBar.jsx
+++ b/src/pages/lesson/components/ActionBar.jsx
@@ -19,7 +19,7 @@ function ActionBar({ courseId, isPublished, onTogglePublish, onSaveDraft, saving
         </Link>
         <span>/</span>
         <Link
-          to={`/courses/${courseId}/detail`}
+          to={`/courses/detail/${courseId}`}
           className="hover:text-primary transition-colors truncate max-w-[200px]"
         >
           {courseId}