Ported section editing screen

codelitdev · Nov 8, 2024 · 3adf235 · 3adf235
1 parent b27eb9e
commit 3adf235
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 12 deletions.
diff --git a/apps/web/app/dashboard2/product/[id]/section/[section]/lesson/new/page.tsx b/apps/web/app/dashboard2/product/[id]/section/[section]/lesson/new/page.tsx
@@ -20,6 +20,7 @@ export default function Page({
             address={address}
             profile={profile as Profile}
             prefix="/dashboard2"
+            isNew={true}
         />
     );
 }
diff --git a/apps/web/app/dashboard4/(sidebar)/product/[id]/section/[section]/lesson/new/page.tsx b/apps/web/app/dashboard4/(sidebar)/product/[id]/section/[section]/lesson/new/page.tsx
@@ -37,6 +37,7 @@ export default function Page({
                 address={address}
                 profile={profile as Profile}
                 prefix="/dashboard4"
+                isNew={true}
             />
         </DashboardContent>
     );

diff --git a/apps/web/app/dashboard4/(sidebar)/product/[id]/section/[section]/page.tsx b/apps/web/app/dashboard4/(sidebar)/product/[id]/section/[section]/page.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import DashboardContent from "@components/admin/dashboard-content";
+import useCourse from "@components/admin/products/editor/course-hook";
+import SectionEditor from "@components/admin/products/editor/section";
+import { AddressContext } from "@components/contexts";
+import {
+    EDIT_SECTION_HEADER,
+    MANAGE_COURSES_PAGE_HEADING,
+} from "@ui-config/strings";
+import { truncate } from "@ui-lib/utils";
+import { useContext } from "react";
+
+export default function Page({
+    params,
+}: {
+    params: { id: string; section: string };
+}) {
+    const address = useContext(AddressContext);
+    const { id, section } = params;
+    const course = useCourse(id, address);
+    const breadcrumbs = [
+        { label: MANAGE_COURSES_PAGE_HEADING, href: "/dashboard4/products" },
+        {
+            label: course ? truncate(course.title || "", 20) || "..." : "...",
+            href: `/dashboard4/product/${id}?tab=Content`,
+        },
+        {
+            label: EDIT_SECTION_HEADER,
+            href: "#",
+        },
+    ];
+
+    return (
+        <DashboardContent breadcrumbs={breadcrumbs}>
+            <SectionEditor
+                id={id as string}
+                section={section as string}
+                address={address}
+                prefix="/dashboard4"
+            />
+        </DashboardContent>
+    );
+}
diff --git a/apps/web/app/dashboard4/(sidebar)/product/[id]/section/new/page.tsx b/apps/web/app/dashboard4/(sidebar)/product/[id]/section/new/page.tsx
@@ -5,8 +5,8 @@ import useCourse from "@components/admin/products/editor/course-hook";
 import SectionEditor from "@components/admin/products/editor/section";
 import { AddressContext } from "@components/contexts";
 import {
-    BUTTON_NEW_GROUP_TEXT,
     MANAGE_COURSES_PAGE_HEADING,
+    NEW_SECTION_HEADER,
 } from "@ui-config/strings";
 import { truncate } from "@ui-lib/utils";
 import { useContext } from "react";
@@ -21,7 +21,7 @@ export default function Page({ params }: { params: { id: string } }) {
             label: course ? truncate(course.title || "", 20) || "..." : "...",
             href: `/dashboard4/product/${id}?tab=Content`,
         },
-        { label: BUTTON_NEW_GROUP_TEXT, href: "#" },
+        { label: NEW_SECTION_HEADER, href: "#" },
     ];
 
     return (

diff --git a/apps/web/components/admin/products/editor/content/lesson.tsx b/apps/web/components/admin/products/editor/content/lesson.tsx
@@ -345,7 +345,9 @@ const LessonEditor = ({
                                 new AppMessage(APP_MESSAGE_LESSON_DELETED),
                             ),
                         );
-                    router.replace(`/dashboard/product/${courseId}/content`);
+                    router.replace(
+                        `${prefix}/product/${courseId}${prefix === "/dashboard" ? "/content" : "?tab=Content"}`,
+                    );
                 }
             } catch (err: any) {
                 dispatch &&
@@ -481,7 +483,7 @@ const LessonEditor = ({
                             <Tooltip title="Go back to content">
                                 <IconButton variant="soft">
                                     <Link
-                                        href={`${prefix}/product/${courseId}/content`}
+                                        href={`${prefix}/product/${courseId}${prefix === "/dashboard" ? "/content" : "?tab=Content"}`}
                                     >
                                         <Back />
                                     </Link>

diff --git a/apps/web/components/admin/products/editor/content/lessons-list.tsx b/apps/web/components/admin/products/editor/content/lessons-list.tsx
@@ -17,6 +17,7 @@ import {
     Menu2,
     MenuItem,
     DragAndDrop,
+    useToast,
 } from "@courselit/components-library";
 import { actionCreators, AppDispatch } from "@courselit/state-management";
 import { FetchBuilder } from "@courselit/utils";
@@ -186,6 +187,7 @@ export default function LessonsList({
     course,
     prefix,
 }: LessonsProps) {
+    const { toast } = useToast();
     const removeGroup = async (groupId: string, courseId: string) => {
         const mutation = `
         mutation {
@@ -212,6 +214,10 @@ export default function LessonsList({
                             new AppMessage(LESSON_GROUP_DELETED),
                         ),
                     );
+                toast({
+                    title: "",
+                    description: LESSON_GROUP_DELETED,
+                });
                 course.groups.splice(
                     course.groups.findIndex((group) => group.id === groupId),
                     1,

diff --git a/apps/web/pages/dashboard/product/[id]/section/[section]/index.tsx b/apps/web/pages/dashboard/product/[id]/section/[section]/index.tsx
@@ -1,24 +1,47 @@
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
-import { EDIT_SECTION_HEADER } from "../../../../../../ui-config/strings";
+import { EDIT_SECTION_HEADER } from "@/ui-config/strings";
+import { connect } from "react-redux";
+import { AppDispatch, AppState } from "@courselit/state-management";
+import { Address } from "@courselit/common-models";
 
-const BaseLayout = dynamic(
-    () => import("../../../../../../components/admin/base-layout"),
-);
+const BaseLayout = dynamic(() => import("@/components/admin/base-layout"));
 
 const SectionEditor = dynamic(
-    () => import("../../../../../../components/admin/products/editor/section"),
+    () => import("@/components/admin/products/editor/section"),
 );
 
-function EditSection({}) {
+function EditSection({
+    address,
+    dispatch,
+    loading,
+}: {
+    address: Address;
+    dispatch: AppDispatch;
+    loading: boolean;
+}) {
     const router = useRouter();
     const { id, section } = router.query;
 
     return (
         <BaseLayout title={EDIT_SECTION_HEADER}>
-            <SectionEditor id={id as string} section={section as string} />
+            <SectionEditor
+                address={address}
+                id={id as string}
+                section={section as string}
+                dispatch={dispatch}
+                loading={loading}
+                prefix="/dashboard"
+            />
         </BaseLayout>
     );
 }
 
-export default EditSection;
+const mapStateToProps = (state: AppState) => ({
+    loading: state.networkAction,
+    address: state.address,
+});
+
+const mapDispatchToProps = (dispatch: AppDispatch) => ({ dispatch });
+
+export default connect(mapStateToProps, mapDispatchToProps)(EditSection);