Plug in Team settings page UI to API

Author: MananTank

apps/dashboard/src/@/api/team.ts

@@ -9,12 +9,12 @@ export type Team = {
   slug: string;
   createdAt: string;
   updatedAt: string;
-  deletedAt: string | null;
-  bannedAt: string | null;
-  // image: string; // -> TODO
+  deletedAt?: string;
+  bannedAt?: string;
+  image?: string;
   billingPlan: "pro" | "growth" | "free";
   billingStatus: "validPayment" | (string & {}); // what's the other value?
-  // billingEmail: string;
+  billingEmail: string;
   // billingExternalId: string;
   // billingType: "STRIPE" | ??
   // billingCustomerPayload: ?? | null

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx

@@ -38,10 +38,9 @@ const testTeam: Team = {
   slug: "team-slug-foo-bar",
   createdAt: "2023-07-07T19:21:33.604Z",
   updatedAt: "2024-07-11T00:01:02.241Z",
-  deletedAt: null,
-  bannedAt: null,
   billingStatus: "validPayment",
   billingPlan: "free",
+  billingEmail: "[email protected]",
 };
 
 function Story() {
@@ -52,6 +51,10 @@ function Story() {
         updateTeamImage={async () => {
           await new Promise((resolve) => setTimeout(resolve, 1000));
         }}
+        updateTeamField={async (value) => {
+          console.log(value);
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }}
       />
       <ComponentVariantions />
       <Toaster richColors />

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx

@@ -1,33 +1,79 @@
 "use client";
 
 import type { Team } from "@/api/team";
-import type { ThirdwebClient } from "thirdweb";
+import { API_SERVER_URL } from "@/constants/env";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { upload } from "thirdweb/storage";
 import { TeamGeneralSettingsPageUI } from "./TeamGeneralSettingsPageUI";
 
 export function TeamGeneralSettingsPage(props: {
   team: Team;
-  client: ThirdwebClient;
+  authToken: string;
 }) {
+  const router = useDashboardRouter();
+
   return (
     <TeamGeneralSettingsPageUI
       team={props.team}
+      updateTeamField={async (teamValue) => {
+        const res = await updateTeam({
+          teamId: props.team.id,
+          value: teamValue,
+          authToken: props.authToken,
+        });
+
+        // Current page's slug is updated
+        if (teamValue.slug) {
+          router.replace(`/team/${teamValue.slug}/~/settings`);
+        } else {
+          router.refresh();
+        }
+
+        if (!res.ok) {
+          console.error(res);
+          throw new Error("Failed to update team name");
+        }
+      }}
       updateTeamImage={async (file) => {
+        let uri: string | undefined = undefined;
+
         if (file) {
           // upload to IPFS
-          const uri = await upload({
-            client: props.client,
+          uri = await upload({
+            client: getThirdwebClient(props.authToken),
             files: [file],
           });
-
-          // TODO - Implement updating the account image with uri
-          console.log(uri);
-        } else {
-          // TODO - Implement deleting the account image
         }
 
-        throw new Error("Not implemented");
+        const res = await updateTeam({
+          teamId: props.team.id,
+          value: {
+            image: uri,
+          },
+          authToken: props.authToken,
+        });
+
+        if (!res.ok) {
+          console.error(res);
+          throw new Error("Failed to update team image");
+        }
       }}
     />
   );
 }
+
+function updateTeam(params: {
+  teamId: string;
+  value: Partial<Team>;
+  authToken: string;
+}) {
+  return fetch(`${API_SERVER_URL}/v1/teams/${params.teamId}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${params.authToken}`,
+    },
+    body: JSON.stringify(params.value),
+  });
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx

@@ -11,16 +11,28 @@ import { FileInput } from "components/shared/FileInput";
 import { useState } from "react";
 import { toast } from "sonner";
 
+type UpdateTeamField = (team: Partial<Team>) => Promise<void>;
+
 export function TeamGeneralSettingsPageUI(props: {
   team: Team;
   updateTeamImage: (file: File | undefined) => Promise<void>;
+  updateTeamField: UpdateTeamField;
 }) {
   const hasPermissionToDelete = false; // TODO
   return (
     <div className="flex flex-col gap-8">
-      <TeamNameFormControl team={props.team} />
-      <TeamSlugFormControl team={props.team} />
-      <TeamAvatarFormControl updateTeamImage={props.updateTeamImage} />
+      <TeamNameFormControl
+        team={props.team}
+        updateTeamField={props.updateTeamField}
+      />
+      <TeamSlugFormControl
+        team={props.team}
+        updateTeamField={props.updateTeamField}
+      />
+      <TeamAvatarFormControl
+        updateTeamImage={props.updateTeamImage}
+        team={props.team}
+      />
       <TeamIdCard team={props.team} />
       <LeaveTeamCard enabled={false} teamName={props.team.name} />
       <DeleteTeamCard
@@ -33,17 +45,13 @@ export function TeamGeneralSettingsPageUI(props: {
 
 function TeamNameFormControl(props: {
   team: Team;
+  updateTeamField: UpdateTeamField;
 }) {
   const [teamName, setTeamName] = useState(props.team.name);
   const maxTeamNameLength = 32;
 
-  // TODO - implement
   const updateTeamMutation = useMutation({
-    mutationFn: async (teamName: string) => {
-      await new Promise((resolve) => setTimeout(resolve, 3000));
-      console.log("Updating team name to", teamName);
-      throw new Error("Not implemented");
-    },
+    mutationFn: (name: string) => props.updateTeamField({ name }),
   });
 
   function handleSave() {
@@ -82,20 +90,14 @@ function TeamNameFormControl(props: {
 
 function TeamSlugFormControl(props: {
   team: Team;
+  updateTeamField: (team: Partial<Team>) => Promise<void>;
 }) {
   const [teamSlug, setTeamSlug] = useState(props.team.slug);
   const [isTeamTaken] = useState(false);
   const maxTeamURLLength = 48;
 
-  // TODO - implement
   const updateTeamMutation = useMutation({
-    mutationFn: async (_slug: string) => {
-      // set isTeamTaken to true if team URL is taken
-      // Fake loading
-      await new Promise((resolve) => setTimeout(resolve, 3000));
-      console.log("Updating team slug to", _slug);
-      throw new Error("Not implemented");
-    },
+    mutationFn: (slug: string) => props.updateTeamField({ slug: slug }),
   });
 
   function handleSave() {
@@ -144,8 +146,11 @@ function TeamSlugFormControl(props: {
 
 function TeamAvatarFormControl(props: {
   updateTeamImage: (file: File | undefined) => Promise<void>;
+  team: Team;
 }) {
-  const [teamAvatar, setTeamAvatar] = useState<File>(); // TODO: prefill with team avatar
+  const [teamAvatar, setTeamAvatar] = useState<File | undefined>(
+    props.team.image ? new File([props.team.image], "team-avatar") : undefined,
+  );
 
   const updateTeamAvatarMutation = useMutation({
     mutationFn: async (_avatar: File | undefined) => {

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx

@@ -40,10 +40,9 @@ const freeTeam: Team = {
   slug: "team-slug-foo-bar",
   createdAt: "2023-07-07T19:21:33.604Z",
   updatedAt: "2024-07-11T00:01:02.241Z",
-  deletedAt: null,
-  bannedAt: null,
   billingStatus: "validPayment",
   billingPlan: "free",
+  billingEmail: "[email protected]",
 };
 
 const proTeam: Team = {
@@ -52,10 +51,9 @@ const proTeam: Team = {
   slug: "team-slug-foo-bar",
   createdAt: "2023-07-07T19:21:33.604Z",
   updatedAt: "2024-07-11T00:01:02.241Z",
-  deletedAt: null,
-  bannedAt: null,
   billingStatus: "validPayment",
   billingPlan: "pro",
+  billingEmail: "[email protected]",
 };
 
 function createMemberStub(id: string, role: TeamAccountRole): TeamMember {

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/page.tsx

@@ -1,5 +1,4 @@
 import { getTeamBySlug } from "@/api/team";
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
 import { TeamGeneralSettingsPage } from "./general/TeamGeneralSettingsPage";
@@ -15,7 +14,5 @@ export default async function Page(props: {
     notFound();
   }
 
-  return (
-    <TeamGeneralSettingsPage team={team} client={getThirdwebClient(token)} />
-  );
+  return <TeamGeneralSettingsPage team={team} authToken={token} />;
 }

apps/dashboard/src/stories/stubs.ts

@@ -45,10 +45,9 @@ export function teamStub(
     billingStatus: "validPayment",
     name: `Team ${id}`,
     slug: `team-${id}`,
-    bannedAt: null,
     createdAt: new Date().toISOString(),
-    deletedAt: null,
     updatedAt: new Date().toISOString(),
+    billingEmail: "[email protected]",
   };
 
   return team;