WIP: Sidebar without products and mails

apps/web/app/dashboard2/blog/[id]/details/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Details } from "@components/admin/blogs/editor/details";
+import BlogEditorLayout from "@components/admin/blogs/editor/layout";
+import {
+    AddressContext,
+    ProfileContext,
+    SiteInfoContext,
+} from "@components/contexts";
+import { Profile } from "@courselit/common-models";
+import { useContext } from "react";
+
+export default function Page({ params }: { params: { id: string } }) {
+    const address = useContext(AddressContext);
+    const profile = useContext(ProfileContext);
+    const siteinfo = useContext(SiteInfoContext);
+    const { id } = params;
+
+    return (
+        <BlogEditorLayout
+            id={id}
+            profile={profile as Profile}
+            siteInfo={siteinfo}
+            address={address}
+            prefix="dashboard2"
+        >
+            <Details
+                id={id as string}
+                address={address}
+                profile={profile as Profile}
+            />
+        </BlogEditorLayout>
+    );
+}

apps/web/app/dashboard2/blog/[id]/publish/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Publish } from "@components/admin/blogs/editor/publish";
+import BlogEditorLayout from "@components/admin/blogs/editor/layout";
+import {
+    AddressContext,
+    ProfileContext,
+    SiteInfoContext,
+} from "@components/contexts";
+import { Profile } from "@courselit/common-models";
+import { useContext } from "react";
+
+export default function Page({ params }: { params: { id: string } }) {
+    const address = useContext(AddressContext);
+    const profile = useContext(ProfileContext);
+    const siteinfo = useContext(SiteInfoContext);
+    const { id } = params;
+
+    return (
+        <BlogEditorLayout
+            id={id}
+            profile={profile as Profile}
+            siteInfo={siteinfo}
+            address={address}
+            prefix="dashboard2"
+        >
+            <Publish id={id} address={address} loading={false} />
+        </BlogEditorLayout>
+    );
+}

apps/web/app/dashboard2/blog/layout.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { ProfileContext } from "@components/contexts";
+import { UIConstants } from "@courselit/common-models";
+import { checkPermission } from "@courselit/utils";
+import { redirect } from "next/navigation";
+import { useContext } from "react";
+const { permissions } = UIConstants;
+
+export default function Page({ children }) {
+    const profile = useContext(ProfileContext);
+
+    if (
+        !checkPermission(profile.permissions!, [
+            permissions.manageAnyCourse,
+            permissions.manageCourse,
+        ])
+    ) {
+        redirect("/dashboard2");
+    }
+
+    return <div className="mx-auto lg:max-w-[1200px] w-full">{children}</div>;
+}

apps/web/app/dashboard2/blog/new/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { NewBlog } from "@components/admin/blogs/new-blog";
+import { AddressContext } from "@components/contexts";
+import { useContext } from "react";
+
+export default function Page() {
+    const address = useContext(AddressContext);
+
+    return <NewBlog address={address} networkAction={false} />;
+}

apps/web/app/dashboard2/blog/test/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { AddressContext } from "@components/contexts";
+import { TextEditor } from "@courselit/components-library";
+import { useContext } from "react";
+
+export default function Page() {
+    const address = useContext(AddressContext);
+
+    return <TextEditor onChange={() => {}} url={address.backend} />;
+}

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { Index as Blogs } from "@components/admin/blogs";
+import {
+    AddressContext,
+    ProfileContext,
+    SiteInfoContext,
+} from "@components/contexts";
+import { UIConstants } from "@courselit/common-models";
+import { Link } from "@courselit/components-library";
+import { checkPermission } from "@courselit/utils";
+import { redirect } from "next/navigation";
+import { useContext } from "react";
+const { permissions } = UIConstants;
+
+export default function Page() {
+    const address = useContext(AddressContext);
+    const profile = useContext(ProfileContext);
+    const siteinfo = useContext(SiteInfoContext);
+
+    if (
+        !checkPermission(profile.permissions!, [
+            permissions.manageAnyCourse,
+            permissions.manageCourse,
+        ])
+    ) {
+        redirect("/dashboard2");
+    }
+
+    return (
+        <div className="mx-auto lg:max-w-[1200px] w-full">
+            <Link href="/dashboard2/blog/test">Test</Link>
+            <Blogs address={address} loading={false} siteinfo={siteinfo} />
+        </div>
+    );
+}

apps/web/app/dashboard2/layout.tsx

@@ -0,0 +1,101 @@
+import React, { ReactNode } from "react";
+import { auth } from "@/auth";
+import Layout from "@components/layout";
+import { FetchBuilder } from "@courselit/utils";
+import { headers } from "next/headers";
+import { getBackendAddress } from "@ui-lib/utils";
+import { defaultState } from "@components/default-state";
+import { decode } from "base-64";
+import { SiteInfo } from "@courselit/common-models";
+import { redirect } from "next/navigation";
+import "../../styles/globals.css";
+
+interface PageProps {
+    children: ReactNode;
+}
+
+export default async function Page({ children }: PageProps) {
+    const session = await auth();
+    if (!session) {
+        redirect("/login");
+    }
+    const headersList = headers();
+    const address = getBackendAddress({
+        "x-forwarded-proto": headersList.get("x-forwarded-proto"),
+        host: headersList.get("host"),
+    });
+
+    const siteInfoQuery = `
+            { site: getSiteInfo {
+                    name,
+                    settings {
+                        title,
+                        subtitle,
+                        logo {
+                            file,
+                            caption
+                        },
+                        currencyISOCode,
+                        paymentMethod,
+                        stripeKey,
+                        codeInjectionHead,
+                        codeInjectionBody,
+                        mailingAddress,
+                        hideCourseLitBranding,
+                        razorpayKey,
+                    },
+                    theme {
+                        name,
+                        active,
+                        styles,
+                        url
+                    },
+                    typefaces {
+                        section,
+                        typeface,
+                        fontWeights
+                    },
+                }
+            }
+            `;
+    const siteInfoFetch = new FetchBuilder()
+        .setUrl(`${address}/api/graph`)
+        .setPayload(siteInfoQuery)
+        .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 (
+        <Layout session={session} address={address} siteinfo={finalSiteInfo}>
+            {children}
+        </Layout>
+    );
+}

apps/web/app/dashboard2/my-content/page.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { AddressContext, ProfileContext } from "@components/contexts";
+import {
+    Button2,
+    Link,
+    Section,
+    Skeleton,
+} from "@courselit/components-library";
+import { FetchBuilder } from "@courselit/utils";
+import {
+    ACCOUNT_NO_PURCHASE_PLACEHOLDER,
+    ACCOUNT_PROGRESS_SUFFIX,
+    MY_CONTENT_HEADER,
+    VISIT_COURSE_BUTTON,
+} from "@ui-config/strings";
+import { useContext, useEffect, useState } from "react";
+
+export default function Page() {
+    const [courses, setCourses] = useState([]);
+    const [loaded, setLoaded] = useState(false);
+
+    const profile = useContext(ProfileContext);
+    const address = useContext(AddressContext);
+
+    useEffect(() => {
+        const loadEnrolledCourses = async () => {
+            const query = `
+            query {
+                courses: getEnrolledCourses (userId: "${profile.userId}"){
+                    courseId,
+                    title,
+                    type,
+                    slug,
+                    progress
+                }
+            }
+            `;
+            try {
+                const fetch = new FetchBuilder()
+                    .setUrl(`${address.backend}/api/graph`)
+                    .setPayload(query)
+                    .setIsGraphQLEndpoint(true)
+                    .build();
+                const response = await fetch.exec();
+                if (response.courses) {
+                    setCourses(response.courses);
+                }
+                setLoaded(true);
+            } catch (e: any) {}
+        };
+
+        loadEnrolledCourses();
+    }, [address.backend, profile.userId]);
+
+    return (
+        <div className="mx-auto lg:max-w-[1200px] w-full">
+            <div className="flex flex-col gap-4">
+                <h1 className="text-4xl font-semibold mb-2">
+                    {MY_CONTENT_HEADER}
+                </h1>
+                {!loaded && (
+                    <div className="flex justify-center items-center flex-col gap-4">
+                        <Skeleton className="w-full h-[120px]" />
+                        <Skeleton className="w-full h-[110px]" />
+                    </div>
+                )}
+                {loaded &&
+                    courses.length > 0 &&
+                    courses.map((course: Record<string, string>) => (
+                        <div className="mb-4" key={course.courseId as string}>
+                            <Section>
+                                <div className="flex items-center justify-between mb-4">
+                                    <h2 className="font-medium text-lg">
+                                        {course.title}
+                                    </h2>
+                                    <p>
+                                        {(
+                                            (course.progress as unknown) * 100
+                                        ).toFixed(2)}
+                                        {ACCOUNT_PROGRESS_SUFFIX}
+                                    </p>
+                                </div>
+                                <div className="flex justify-end">
+                                    <div>
+                                        <Link
+                                            href={`/course/${course.slug}/${course.courseId}`}
+                                        >
+                                            <Button2>
+                                                {VISIT_COURSE_BUTTON}
+                                            </Button2>
+                                        </Link>
+                                    </div>
+                                </div>
+                            </Section>
+                        </div>
+                    ))}
+                {loaded && !courses.length && (
+                    <p className="p-4">{ACCOUNT_NO_PURCHASE_PLACEHOLDER}</p>
+                )}
+            </div>
+        </div>
+    );
+}