abstract out hook for updating org logo

Author: bderbs30

src/lib/components/settings/OrgLogoUploader.tsx

@@ -6,14 +6,20 @@ import { Loader2, Upload } from 'lucide-react';
 import { toast } from 'sonner';
 import useFileUpload from '@/lib/hooks/useFileUpload';
 import useFileClient from '@/lib/hooks/useFileClient';
-import { authClient } from '@/lib/auth/auth-client';
 
 type OrgLogoUploaderProps = {
     organization: { id: string; name: string; logo: string | null };
+    updateLogo: (logoUrl: string) => Promise<boolean>;
+    disabled?: boolean;
     onUpdated: () => void;
 };
 
-export default function OrgLogoUploader({ organization, onUpdated }: OrgLogoUploaderProps) {
+export default function OrgLogoUploader({
+    organization,
+    updateLogo,
+    disabled = false,
+    onUpdated,
+}: OrgLogoUploaderProps) {
     const {
         file,
         preview,
@@ -37,12 +43,8 @@ export default function OrgLogoUploader({ organization, onUpdated }: OrgLogoUplo
                     toast.error('Failed to upload logo');
                     return;
                 }
-                await authClient.organization.update({
-                    data: { logo: url },
-                    organizationId: organization.id,
-                });
-                toast.success('Logo updated');
-                onUpdated();
+                const ok = await updateLogo(url);
+                if (ok) onUpdated();
             } catch (err) {
                 toast.error(
                     `Failed to update logo: ${err instanceof Error ? err.message : 'Unknown error'}`
@@ -52,14 +54,14 @@ export default function OrgLogoUploader({ organization, onUpdated }: OrgLogoUplo
             }
         };
         upload();
-    }, [file, organization.id, uploadFile, onUpdated]);
+    }, [file, organization.id, uploadFile, updateLogo, onUpdated]);
 
     return (
         <div>
             <button
                 type="button"
                 onClick={openFilePicker}
-                disabled={isUploading}
+                disabled={isUploading || disabled}
                 className="group bg-sarge-gray-500 text-sarge-gray-0 relative flex size-18 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg disabled:cursor-not-allowed"
             >
                 {logoSrc ? (

src/lib/components/settings/OrganizationTab.tsx

@@ -17,8 +17,9 @@ export default function OrganizationTab() {
     const orgId = activeOrganization?.id;
     const isOwner = activeMember?.role === 'owner';
 
-    const { members, refresh } = useOrgMembersAndInvites(orgId);
-    const { renameOrg, isMutating, transferOwnership, deleteOrg } = useOrgSettings(orgId);
+    const { members } = useOrgMembersAndInvites(orgId);
+    const { renameOrg, updateLogo, isMutating, transferOwnership, deleteOrg } =
+        useOrgSettings(orgId);
 
     const [nameDraft, setNameDraft] = useState(activeOrganization?.name ?? '');
     const [transferOpen, setTransferOpen] = useState(false);
@@ -41,7 +42,6 @@ export default function OrganizationTab() {
     };
 
     const redirectToDashboard = () => {
-        refresh();
         router.push('/crm/dashboard');
         router.refresh();
     };
@@ -60,6 +60,8 @@ export default function OrganizationTab() {
                         name: activeOrganization.name,
                         logo: activeOrganization.logo ?? null,
                     }}
+                    updateLogo={updateLogo}
+                    disabled={isMutating}
                     onUpdated={() => router.refresh()}
                 />
 

src/lib/hooks/useOrgSettings.ts

@@ -3,7 +3,10 @@
 import { useState } from 'react';
 import { toast } from 'sonner';
 import { authClient } from '@/lib/auth/auth-client';
-import { transferOwnership as transferOwnershipApi } from '@/lib/api/organizations';
+import {
+    transferOwnership as transferOwnershipApi,
+    updateOrganization as updateOrganizationApi,
+} from '@/lib/api/organizations';
 
 export type UseOrgSettingsResult = {
     renameOrg: (newName: string) => Promise<boolean>;
@@ -51,10 +54,7 @@ export function useOrgSettings(organizationId: string | undefined): UseOrgSettin
         }
         try {
             setIsMutating(true);
-            await authClient.organization.update({
-                data: { logo: logoUrl },
-                organizationId,
-            });
+            await updateOrganizationApi(organizationId, { logo: logoUrl });
             toast.success('Logo updated');
             return true;
         } catch (err) {

src/lib/schemas/organization.schema.ts

@@ -13,14 +13,16 @@ export const getOrganizationSchema = z.object({
     id: z.string('Invalid organization ID'),
 });
 
-export const updateOrganizationSchema = z.object({
-    name: z
-        .string()
-        .min(2, 'Name must be at least 2 characters')
-        .max(100, 'Name must be less than 100 characters')
-        .trim(),
-    logo: z.url(),
-});
+export const updateOrganizationSchema = z
+    .object({
+        name: z
+            .string()
+            .min(2, 'Name must be at least 2 characters')
+            .max(100, 'Name must be less than 100 characters')
+            .trim(),
+        logo: z.url(),
+    })
+    .partial()
 
 export type CreateOrganizationDTO = z.infer<typeof createOrganizationSchema>;
 export type UpdateOrganizationDTO = z.infer<typeof updateOrganizationSchema>;

src/lib/services/organization.service.ts

@@ -74,8 +74,6 @@ async function updateOrganization(
     id: string,
     organization: UpdateOrganizationDTO
 ): Promise<Organization> {
-    const { name, logo } = organization;
-
     const existingOrg = await prisma.organization.findUnique({
         where: { id },
     });
@@ -84,24 +82,29 @@ async function updateOrganization(
         throw new NotFoundException('Organization', id);
     }
 
-    const orgWithSameName = await prisma.organization.findFirst({
-        where: {
-            name,
-            id: { not: id },
-        },
-    });
+    const nextName = organization.name ?? existingOrg.name;
+    const nextLogo = organization.logo ?? existingOrg.logo;
 
-    if (orgWithSameName) {
-        throw new ConflictException('Organization', 'with that name');
+    if (organization.name !== undefined && organization.name !== existingOrg.name) {
+        const orgWithSameName = await prisma.organization.findFirst({
+            where: {
+                name: organization.name,
+                id: { not: id },
+            },
+        });
+
+        if (orgWithSameName) {
+            throw new ConflictException('Organization', 'with that name');
+        }
     }
 
     const updated = await prisma.organization.update({
         where: {
             id,
         },
         data: {
-            name,
-            logo,
+            name: nextName,
+            logo: nextLogo,
         },
     });
     return updated;