From 3adf235b999dcebb7cdd0efcbbafcba3cb466442 Mon Sep 17 00:00:00 2001 From: Rajat Saxena Date: Fri, 8 Nov 2024 09:35:11 +0530 Subject: [PATCH] Ported section editing screen --- .../section/[section]/lesson/new/page.tsx | 1 + .../section/[section]/lesson/new/page.tsx | 1 + .../product/[id]/section/[section]/page.tsx | 44 +++++++++++++++++++ .../product/[id]/section/new/page.tsx | 4 +- .../admin/products/editor/content/lesson.tsx | 6 ++- .../products/editor/content/lessons-list.tsx | 6 +++ .../product/[id]/section/[section]/index.tsx | 39 ++++++++++++---- 7 files changed, 89 insertions(+), 12 deletions(-) create mode 100644 apps/web/app/dashboard4/(sidebar)/product/[id]/section/[section]/page.tsx 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 index 0a31823f..b16ec10e 100644 --- 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 index 98dcb073..a2bba1d3 100644 --- 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} /> ); 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 new file mode 100644 index 00000000..db2deb44 --- /dev/null +++ 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 ( + + + + ); +} 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 index e5d3472e..8e9a3d73 100644 --- 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 index ebc48117..d87a20bb 100644 --- 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 = ({ diff --git a/apps/web/components/admin/products/editor/content/lessons-list.tsx b/apps/web/components/admin/products/editor/content/lessons-list.tsx index 72865d15..bad27660 100644 --- 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 index c4dff6c8..7ebd877d 100644 --- 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 ( - + ); } -export default EditSection; +const mapStateToProps = (state: AppState) => ({ + loading: state.networkAction, + address: state.address, +}); + +const mapDispatchToProps = (dispatch: AppDispatch) => ({ dispatch }); + +export default connect(mapStateToProps, mapDispatchToProps)(EditSection);