Rewritten as SSR

Author: maparent

apps/website/app/(home)/auth/group/page.tsx

@@ -1,12 +1,9 @@
 import { ListGroups } from "~/components/auth/ListGroups";
-import { Suspense } from "react";
 
 const Page = () => (
   <main>
     <div className="mx-auto max-w-6xl space-y-12 px-6 py-12">
-      <Suspense fallback={<>Loading</>}>
-        <ListGroups />
-      </Suspense>
+      <ListGroups />
     </div>
   </main>
 );

apps/website/app/components/auth/ListGroups.tsx

@@ -1,76 +1,55 @@
-"use client";
-
-import { createClient } from "~/utils/supabase/client";
+import { createClient } from "~/utils/supabase/server";
 import { getSessionUserData } from "~/utils/supabase/account";
 import Link from "next/link";
-import { useState, useEffect } from "react";
 import { Tables } from "@repo/database/dbTypes";
-import useInternalError from "~/utils/internalError";
+import internalError from "~/utils/internalErrorSsr";
 
 type GroupData = Tables<"my_groups">;
 
-export const ListGroups = () => {
-  const [groupData, setGroupData] = useState<GroupData[] | null>(null);
-  const [adminData, setAdminData] = useState<Record<string, boolean>>({});
-  const [userName, setUserName] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const internalError = useInternalError();
+export const ListGroups = async () => {
+  let groupData: GroupData[] | null = null;
+  let adminData: Record<string, boolean> = {};
+  let userName: string | undefined;
+  let error: string | undefined;
 
-  useEffect(() => {
-    const getGroups = async () => {
-      try {
-        const client = createClient();
-        const userData = await getSessionUserData(client);
-        if (!userData) {
-          const userMessage = "Not logged in.\nPlease log in from application.";
-          setError(userMessage);
-          return;
-        }
-        const { name, type, id } = userData;
-        if (type === "anonymous") setUserName("Space " + name);
-        else if (type === "group") setUserName("group " + name);
-        else if (type === "person") setUserName(name);
-        const groupResponse = await client.from("my_groups").select();
-        if (groupResponse.error) {
-          const userMessage = "Could not access DiscourseGraphs";
-          setError(userMessage);
-          internalError({
-            error: groupResponse.error,
-          });
-          return;
-        }
-        setGroupData(groupResponse.data);
-        const membershipReq = await client
-          .from("group_membership")
-          .select("group_id,admin")
-          .eq("member_id", id);
-        if (membershipReq.error) {
-          const userMessage = "Could not access Discourse Graphs";
-          setError(userMessage);
-          internalError({
-            error: membershipReq.error,
-          });
-          return;
-        }
-        setAdminData(
-          Object.fromEntries(
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            membershipReq.data.map(({ group_id, admin }) => [
-              group_id,
-              admin || false,
-            ]),
-          ),
-        );
-      } catch (error) {
-        const userMessage = "Unknown error occurred";
-        setError(userMessage);
-        internalError({
-          error,
-        });
-      }
-    };
-    void getGroups();
-  }, [internalError]);
+  try {
+    const client = await createClient();
+    const userData = await getSessionUserData(client);
+    if (!userData) {
+      throw new Error("Not logged in.\nPlease log in from application.");
+    }
+    const { name, type, id } = userData;
+    if (type === "anonymous") userName = "Space " + name;
+    else if (type === "group") userName = "group " + name;
+    else if (type === "person") userName = name;
+    const groupResponse = await client.from("my_groups").select();
+    if (groupResponse.error) {
+      internalError({
+        error: groupResponse.error,
+      });
+      throw new Error("Could not access DiscourseGraphs");
+    }
+    groupData = groupResponse.data;
+    const membershipReq = await client
+      .from("group_membership")
+      .select("group_id,admin")
+      .eq("member_id", id);
+    if (membershipReq.error) {
+      internalError({
+        error: membershipReq.error,
+      });
+      throw new Error("Could not access Discourse Graphs");
+    }
+    adminData = Object.fromEntries(
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      membershipReq.data.map(({ group_id, admin }) => [
+        group_id,
+        admin || false,
+      ]),
+    );
+  } catch (error) {
+    error = error instanceof Error ? error.message : "An unknown error occured";
+  }
 
   return (
     <>
@@ -81,7 +60,7 @@ export const ListGroups = () => {
         {error ? (
           "Error: " + error
         ) : groupData === null ? (
-          "loading"
+          "Error" // we should have had an error in that case
         ) : groupData.length === 0 ? (
           <p>You are not part of any group.</p>
         ) : (

apps/website/app/utils/supabase/account.ts

@@ -11,9 +11,11 @@ export const getSessionUserData = async (
   type: AgentType;
   email?: string;
 } | null> => {
-  const session = await client.auth.getSession();
-  if (!session?.data?.session?.user) return null;
-  const { id, email } = session.data.session.user;
+  const { data, error } = await client.auth.getUser();
+  if (error || !data?.user) return null;
+  const userData = data.user;
+  if (typeof userData.id !== "string") return null;
+  const { id, email }: { id: string; email?: string } = userData;
   if (email) {
     const [name, host] = email.split("@") as [string, string];
     if (host === "database.discoursegraphs.com" && name.endsWith("-anon")) {
@@ -37,7 +39,7 @@ export const getSessionUserData = async (
   const accountReq = await client
     .from("PlatformAccount")
     .select("name")
-    .eq("dg_account", session.data.session.user.id)
+    .eq("dg_account", id)
     .eq("agent_type", "person")
     .maybeSingle();
   if (accountReq.error || !accountReq.data) {