Removed client side loading from public pages as much as possible

Author: rajat1saxena

apps/web/app/(with-contexts)/(with-layout)/home-page-layout.tsx

@@ -10,36 +10,27 @@ import {
 } from "@components/contexts";
 import { BaseLayout } from "@components/public/base-layout";
 import { Profile } from "@courselit/common-models";
-import { getPage } from "@ui-lib/utils";
-import { useContext, useEffect, useState } from "react";
+import { getFullSiteSetup } from "@ui-lib/utils";
+import { useContext } from "react";
 
 export default function HomepageLayout({
     children,
+    siteInfo,
 }: {
     children: React.ReactNode;
+    siteInfo: Awaited<ReturnType<typeof getFullSiteSetup>>;
 }) {
-    const [page, setPage] = useState<any>(null);
     const address = useContext(AddressContext);
     const siteinfo = useContext(SiteInfoContext);
     const typefaces = useContext(TypefacesContext);
     const config = useContext(ServerConfigContext);
     const { profile } = useContext(ProfileContext);
     const { theme } = useContext(ThemeContext);
 
-    useEffect(() => {
-        if (address.backend) {
-            getPage(address.backend).then(setPage);
-        }
-    }, [address]);
-
-    if (!page) {
-        return null;
-    }
-
     return (
         <BaseLayout
-            layout={page.layout}
-            title={page.title}
+            layout={siteInfo!.page.layout}
+            title={siteInfo!.page.title || ""}
             typefaces={typefaces}
             siteInfo={siteinfo}
             dispatch={() => {}}
@@ -49,7 +40,7 @@ export default function HomepageLayout({
                 siteinfo,
                 address: address,
                 profile: profile as Profile,
-                auth: profile.email
+                auth: profile?.email
                     ? {
                           guest: false,
                           checked: true,

apps/web/app/(with-contexts)/(with-layout)/layout.tsx

@@ -1,17 +1,25 @@
 import { auth } from "@/auth";
 import { SessionProvider } from "next-auth/react";
 import HomepageLayout from "./home-page-layout";
+import { headers } from "next/headers";
+import { getAddressFromHeaders, getFullSiteSetup } from "@ui-lib/utils";
 
 export default async function Layout({
     children,
 }: {
     children: React.ReactNode;
 }) {
     const session = await auth();
+    const address = getAddressFromHeaders(headers);
+    const siteInfo = await getFullSiteSetup(address);
+
+    if (!siteInfo) {
+        return null;
+    }
 
     return (
         <SessionProvider session={session}>
-            <HomepageLayout>{children}</HomepageLayout>
+            <HomepageLayout siteInfo={siteInfo}>{children}</HomepageLayout>
         </SessionProvider>
     );
 }

apps/web/app/(with-contexts)/(with-layout)/p/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { getPage, getSiteInfo } from "@ui-lib/utils";
+import { getFullSiteSetup, getPage } from "@ui-lib/utils";
 import { getAddressFromHeaders } from "@/ui-lib/utils";
 import ClientSidePage from "./client-side-page";
 import { headers } from "next/headers";
@@ -15,7 +15,7 @@ export async function generateMetadata(
     parent: ResolvingMetadata,
 ): Promise<Metadata> {
     const address = getAddressFromHeaders(headers);
-    const siteInfo = await getSiteInfo(address);
+    const siteInfo = await getFullSiteSetup(address);
     if (!siteInfo) {
         return {
             title: `${(await parent)?.title?.absolute}`,
@@ -64,7 +64,7 @@ export async function generateMetadata(
 
 export default async function Page({ params }: Props) {
     const address = getAddressFromHeaders(headers);
-    const siteInfo = await getSiteInfo(address);
+    const siteInfo = await getFullSiteSetup(address);
     if (!siteInfo) {
         return null;
     }

apps/web/app/(with-contexts)/(with-layout)/page.tsx

@@ -1,4 +1,4 @@
-import { getPage, getSiteInfo } from "@ui-lib/utils";
+import { getFullSiteSetup } from "@ui-lib/utils";
 import { getAddressFromHeaders } from "@/ui-lib/utils";
 import ClientSidePage from "./p/[id]/client-side-page";
 import { headers } from "next/headers";
@@ -15,14 +15,14 @@ export async function generateMetadata(
     parent: ResolvingMetadata,
 ): Promise<Metadata> {
     const address = getAddressFromHeaders(headers);
-    const siteInfo = await getSiteInfo(address);
+    const siteInfo = await getFullSiteSetup(address, "homepage");
     if (!siteInfo) {
         return {
             title: "CourseLit",
         };
     }
 
-    const page = await getPage(address, "homepage");
+    const page = siteInfo.page;
 
     const title = page.title || siteInfo.settings.title;
     const socialImage = page.socialImage || siteInfo.settings.logo;
@@ -63,16 +63,14 @@ export async function generateMetadata(
 
 export default async function Page() {
     const address = getAddressFromHeaders(headers);
-    const siteInfo = await getSiteInfo(address);
+    const siteInfo = await getFullSiteSetup(address, "homepage");
     if (!siteInfo) {
         return null;
     }
 
-    const page = await getPage(address, "homepage");
-
     return (
         <ClientSidePage
-            page={page}
+            page={siteInfo.page}
             siteinfo={siteInfo.settings}
             theme={siteInfo.theme}
         />

apps/web/app/(with-contexts)/dashboard/(sidebar)/my-content/page.tsx

@@ -2,16 +2,20 @@
 
 import { useState, useEffect, useContext } from "react";
 import type { ContentItem } from "@/components/admin/my-content/content";
-import { AddressContext, ProfileContext } from "@components/contexts";
+import {
+    AddressContext,
+    ProfileContext,
+    ThemeContext,
+} from "@components/contexts";
 import { MY_CONTENT_HEADER } from "@ui-config/strings";
 import DashboardContent from "@components/admin/dashboard-content";
 import { FetchBuilder } from "@courselit/utils";
 import { Constants, MembershipEntityType } from "@courselit/common-models";
 import { MyContentCard } from "@components/admin/my-content/content-card";
 import { BookOpen, Users } from "lucide-react";
 import Link from "next/link";
-import { Button } from "@components/ui/button";
 import { SkeletonCard } from "@components/skeleton-card";
+import { Button } from "@courselit/page-primitives";
 
 function ContentGrid({
     items,
@@ -45,6 +49,7 @@ export default function Page() {
     const [loading, setLoading] = useState(true);
     const { profile } = useContext(ProfileContext);
     const address = useContext(AddressContext);
+    const { theme } = useContext(ThemeContext);
 
     useEffect(() => {
         const getUserContent = async () => {
@@ -111,13 +116,13 @@ export default function Page() {
             </p>
             {type === Constants.MembershipEntityType.COURSE ? (
                 <Link href="/products" className="text-primary">
-                    <Button variant="outline" size="sm">
+                    <Button size="sm" theme={theme.theme}>
                         Browse products
                     </Button>
                 </Link>
             ) : (
                 <Link href="/communities" className="text-primary">
-                    <Button variant="outline" size="sm">
+                    <Button size="sm" theme={theme.theme}>
                         Browse communities
                     </Button>
                 </Link>