WIP: Page builder ported to Dashboard 4

apps/web/app/dashboard2/pages/page.tsx

@@ -16,5 +16,12 @@ export default function Page() {
         return <LoadingScreen />;
     }
 
-    return <Pages address={address} loading={false} dispatch={() => {}} />;
+    return (
+        <Pages
+            address={address}
+            loading={false}
+            dispatch={() => {}}
+            prefix="/dashboard2"
+        />
+    );
 }

apps/web/app/dashboard4/(sidebar)/layout.tsx

@@ -0,0 +1,15 @@
+import { AppSidebar } from "@components/admin/dashboard-skeleton/app-sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+
+export default async function Layout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <SidebarProvider>
+            <AppSidebar />
+            <SidebarInset>{children}</SidebarInset>
+        </SidebarProvider>
+    );
+}

apps/web/app/dashboard4/(sidebar)/page/new/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import DashboardContent from "@components/admin/dashboard-content";
+import { AddressContext } from "@components/contexts";
+import {
+    MANAGE_PAGES_PAGE_HEADING,
+    NEW_PAGE_HEADING,
+} from "@ui-config/strings";
+import dynamic from "next/dynamic";
+import { useContext } from "react";
+const NewPage = dynamic(() => import("@components/admin/pages/new-page"));
+
+const breadcrumbs = [
+    { label: MANAGE_PAGES_PAGE_HEADING, href: "/dashboard4/pages" },
+    { label: NEW_PAGE_HEADING, href: "#" },
+];
+
+export default function Page() {
+    const address = useContext(AddressContext);
+
+    return (
+        <DashboardContent breadcrumbs={breadcrumbs}>
+            <NewPage address={address} prefix="/dashboard4" />
+        </DashboardContent>
+    );
+}

apps/web/app/dashboard4/pages/page.tsx → apps/web/app/dashboard4/(sidebar)/pages/page.tsx

@@ -22,7 +22,12 @@ export default function Page() {
 
     return (
         <DashboardContent breadcrumbs={breadcrumbs}>
-            <Pages address={address} loading={false} dispatch={() => {}} />
+            <Pages
+                address={address}
+                loading={false}
+                dispatch={() => {}}
+                prefix="/dashboard4"
+            />
         </DashboardContent>
     );
 }

apps/web/app/dashboard4/layout-with-context.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { AppSidebar } from "@components/admin/dashboard-skeleton/app-sidebar";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { SiteInfo } from "@courselit/common-models";
+import { SiteInfo, Typeface } from "@courselit/common-models";
 import { ReactNode, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { defaultState } from "@components/default-state";
@@ -11,18 +9,22 @@ import {
     AddressContext,
     ProfileContext,
     SiteInfoContext,
+    TypefacesContext,
 } from "@components/contexts";
+import { Toaster } from "@courselit/components-library";
 
 export default function Layout({
     session,
     address,
     children,
     siteinfo,
+    typefaces,
 }: {
     session: any;
     address: string;
     children: ReactNode;
     siteinfo: SiteInfo;
+    typefaces: Typeface[];
 }) {
     const [open, setOpen] = useState(false);
     const [profile, setProfile] = useState(defaultState.profile);
@@ -84,12 +86,16 @@ export default function Layout({
         >
             <SiteInfoContext.Provider value={siteinfo}>
                 <ProfileContext.Provider value={profile}>
-                    <SidebarProvider>
-                        <AppSidebar />
-                        <SidebarInset>{children}</SidebarInset>
-                    </SidebarProvider>
+                    <TypefacesContext.Provider value={typefaces}>
+                        {children}
+                        {/* <SidebarProvider>
+                            <AppSidebar />
+                            <SidebarInset>{children}</SidebarInset>
+                        </SidebarProvider> */}
+                    </TypefacesContext.Provider>
                 </ProfileContext.Provider>
             </SiteInfoContext.Provider>
+            <Toaster />
         </AddressContext.Provider>
     );
 }

apps/web/app/dashboard4/layout.tsx

@@ -64,41 +64,38 @@ export default async function Layout({
         .setIsGraphQLEndpoint(true)
         .build();
     const siteInfoResponse = await siteInfoFetch.exec();
-    let finalSiteInfo: SiteInfo = {};
-    if (siteInfoResponse.site.settings) {
-        const siteinfo = siteInfoResponse.site.settings;
-        finalSiteInfo = {
-            title: siteinfo.title || defaultState.siteinfo.title,
-            subtitle: siteinfo.subtitle || defaultState.siteinfo.subtitle,
-            logo: siteinfo.logo || defaultState.siteinfo.logo,
-            currencyISOCode:
-                siteinfo.currencyISOCode ||
-                defaultState.siteinfo.currencyISOCode,
-            paymentMethod:
-                siteinfo.paymentMethod || defaultState.siteinfo.paymentMethod,
-            stripeKey: siteinfo.stripeKey || defaultState.siteinfo.stripeKey,
-            codeInjectionHead:
-                decode(siteinfo.codeInjectionHead) ||
-                defaultState.siteinfo.codeInjectionHead,
-            codeInjectionBody:
-                decode(siteinfo.codeInjectionBody) ||
-                defaultState.siteinfo.codeInjectionBody,
-            mailingAddress:
-                siteinfo.mailingAddress || defaultState.siteinfo.mailingAddress,
-            hideCourseLitBranding:
-                siteinfo.hideCourseLitBranding ||
-                defaultState.siteinfo.hideCourseLitBranding,
-            razorpayKey:
-                siteinfo.razorpayKey || defaultState.siteinfo.razorpayKey,
-        };
-    }
+
     return (
         <LayoutWithContext
             session={session}
             address={address}
-            siteinfo={finalSiteInfo}
+            siteinfo={formatSiteInfo(siteInfoResponse.site.settings)}
+            typefaces={siteInfoResponse.site.typefaces}
         >
             {children}
         </LayoutWithContext>
     );
 }
+
+const formatSiteInfo = (siteinfo: SiteInfo) => ({
+    title: siteinfo.title || defaultState.siteinfo.title,
+    subtitle: siteinfo.subtitle || defaultState.siteinfo.subtitle,
+    logo: siteinfo.logo || defaultState.siteinfo.logo,
+    currencyISOCode:
+        siteinfo.currencyISOCode || defaultState.siteinfo.currencyISOCode,
+    paymentMethod:
+        siteinfo.paymentMethod || defaultState.siteinfo.paymentMethod,
+    stripeKey: siteinfo.stripeKey || defaultState.siteinfo.stripeKey,
+    codeInjectionHead: siteinfo.codeInjectionHead
+        ? decode(siteinfo.codeInjectionHead)
+        : defaultState.siteinfo.codeInjectionHead,
+    codeInjectionBody: siteinfo.codeInjectionBody
+        ? decode(siteinfo.codeInjectionBody)
+        : defaultState.siteinfo.codeInjectionBody,
+    mailingAddress:
+        siteinfo.mailingAddress || defaultState.siteinfo.mailingAddress,
+    hideCourseLitBranding:
+        siteinfo.hideCourseLitBranding ||
+        defaultState.siteinfo.hideCourseLitBranding,
+    razorpayKey: siteinfo.razorpayKey || defaultState.siteinfo.razorpayKey,
+});

apps/web/app/dashboard4/page/[id]/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import PageEditor from "@components/admin/page-editor";
+import {
+    AddressContext,
+    ProfileContext,
+    SiteInfoContext,
+    TypefacesContext,
+} from "@components/contexts";
+import { Profile } from "@courselit/common-models";
+import { useSearchParams } from "next/navigation";
+import { useContext } from "react";
+
+export default function Page({ params }: { params: { id: string } }) {
+    const { id } = params;
+    const searchParams = useSearchParams();
+    const redirectTo = searchParams?.get("redirectTo");
+    const address = useContext(AddressContext);
+    const siteInfo = useContext(SiteInfoContext);
+    const typefaces = useContext(TypefacesContext);
+    const profile = useContext(ProfileContext);
+
+    return (
+        <PageEditor
+            id={id as string}
+            address={address}
+            siteInfo={siteInfo}
+            typefaces={typefaces}
+            profile={profile as Profile}
+            redirectTo={
+                redirectTo
+                    ? typeof redirectTo === "string"
+                        ? redirectTo
+                        : redirectTo[0]
+                    : ""
+            }
+            prefix="/dashboard4"
+            state={{
+                siteinfo: siteInfo,
+                address: address,
+                profile: profile as Profile,
+                auth: {
+                    guest: profile ? false : true,
+                    checked: profile ? true : false,
+                },
+                networkAction: false,
+                theme: {
+                    name: "dummy",
+                    active: false,
+                    styles: {},
+                },
+                typefaces: [
+                    {
+                        section: "default",
+                        typeface: "",
+                        fontWeights: [100],
+                        fontSize: 0,
+                        lineHeight: 0,
+                        letterSpacing: 0,
+                        case: "captilize",
+                    },
+                ],
+                message: {
+                    message: "",
+                    open: false,
+                    action: null,
+                },
+            }}
+            dispatch={() => {}}
+        />
+    );
+}

apps/web/components/admin/dashboard-skeleton/app-sidebar.tsx

@@ -137,7 +137,9 @@ function getSidebarItems(profile: Partial<Profile>, path, tab) {
             title: SIDEBAR_MENU_PAGES,
             url: "/dashboard4/pages",
             icon: Globe,
-            isActive: path === "/dashboard4/pages",
+            isActive:
+                path === "/dashboard4/pages" ||
+                path.startsWith("/dashboard4/page"),
             items: [],
         });
     }

apps/web/components/admin/page-editor/admin-widget.tsx

@@ -1,6 +1,4 @@
-import { AppState } from "@courselit/state-management";
-import { ComponentType } from "react";
-import { connect } from "react-redux";
+import { AppDispatch, AppState } from "@courselit/state-management";
 import widgets from "../../../ui-config/widgets";
 
 interface AdminWidgetProps {
@@ -13,31 +11,32 @@ interface AdminWidgetProps {
     ) => void;
     preservedStateAcrossRerender: Record<string, unknown>;
     pageData: Record<string, unknown>;
+    dispatch: AppDispatch;
+    state: AppState;
 }
 
-function AdminWidget({
+export default function AdminWidget({
     name,
     settings,
     onChange,
     hideActionButtons,
     preservedStateAcrossRerender,
     pageData,
+    dispatch,
+    state,
 }: AdminWidgetProps) {
     const AdminWidget = widgets[name].adminWidget;
-    const AdminWidgetWithStateAndDispatch: any = connect(
-        (state: AppState) => state,
-    )(AdminWidget as ComponentType<never>);
 
     return (
-        <AdminWidgetWithStateAndDispatch
+        <AdminWidget
             name={name}
             settings={settings}
             onChange={onChange}
             hideActionButtons={hideActionButtons}
             preservedStateAcrossRerender={preservedStateAcrossRerender}
             pageData={pageData}
+            dispatch={dispatch}
+            {...state}
         />
     );
 }
-
-export default AdminWidget;

apps/web/components/admin/page-editor/edit-widget.tsx

@@ -1,14 +1,11 @@
 import { useState } from "react";
-import { Address } from "@courselit/common-models";
 import widgets from "../../../ui-config/widgets";
-import { connect } from "react-redux";
-import { AppState } from "@courselit/state-management";
+import { AppDispatch, AppState } from "@courselit/state-management";
 import { Cross as Close } from "@courselit/icons";
 import AdminWidget from "./admin-widget";
 import { IconButton, Button } from "@courselit/components-library";
 
 interface EditWidgetProps {
-    address: Address;
     onChange: (widgetId: string, settings: Record<string, unknown>) => void;
     onClose: (...args: any[]) => void;
     onDelete: (widgetId: string) => void;
@@ -19,14 +16,18 @@ interface EditWidgetProps {
         deleteable: boolean;
     };
     pageData: Record<string, unknown>;
+    state: AppState;
+    dispatch: AppDispatch;
 }
 
-function EditWidget({
+export default function EditWidget({
     onChange,
     onClose,
     onDelete,
     widget,
     pageData,
+    state,
+    dispatch,
 }: EditWidgetProps) {
     const [deleteConfirmation, setDeleteConfirmation] = useState(false);
     const [hideActionButtons, setHideActionButtons] = useState(false);
@@ -73,6 +74,8 @@ function EditWidget({
                             preservedStateAcrossRerender
                         }
                         pageData={pageData}
+                        state={state}
+                        dispatch={dispatch}
                     />
                     {!hideActionButtons && (
                         <div
@@ -102,9 +105,3 @@ function EditWidget({
         </div>
     );
 }
-
-const mapStateToProps = (state: AppState) => ({
-    address: state.address,
-});
-
-export default connect(mapStateToProps)(EditWidget);