From 625d38d8df758f4308be4fb26d200e87384c66c8 Mon Sep 17 00:00:00 2001
From: Ethan Bickel <notethanbickel@gmail.com>
Date: Tue, 5 Nov 2024 17:11:45 -0600
Subject: [PATCH] add editing club listed officers and display them

---
 .../edit/officers/EditListedOfficerForm.tsx   | 217 ++++++++++++++++++
 .../edit/officers/EditOfficerForm.tsx         |  38 +--
 .../manage/[clubId]/edit/officers/page.tsx    |   9 +-
 .../club/listing/ClubInfoSegment.tsx          |  14 +-
 src/server/api/routers/club.ts                |  32 +--
 src/server/api/routers/clubEdit.ts            |  64 +++++-
 src/server/db/index.ts                        |   2 +
 src/utils/formSchemas.ts                      |   9 +
 8 files changed, 316 insertions(+), 69 deletions(-)
 create mode 100644 src/app/manage/[clubId]/edit/officers/EditListedOfficerForm.tsx

diff --git a/src/app/manage/[clubId]/edit/officers/EditListedOfficerForm.tsx b/src/app/manage/[clubId]/edit/officers/EditListedOfficerForm.tsx
new file mode 100644
index 00000000..3f8e99cd
--- /dev/null
+++ b/src/app/manage/[clubId]/edit/officers/EditListedOfficerForm.tsx
@@ -0,0 +1,217 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+'use client';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { api } from '@src/trpc/react';
+import { editListedOfficerSchema } from '@src/utils/formSchemas';
+import { useRouter } from 'next/navigation';
+import { useReducer } from 'react';
+import {
+  type FieldErrors,
+  type UseFormRegister,
+  useFieldArray,
+  useForm,
+} from 'react-hook-form';
+import { type z } from 'zod';
+
+type x = {
+  id?: boolean;
+  name?: boolean;
+  position?: boolean;
+}[];
+const modifiedFields = (
+  dirtyFields: x,
+  data: z.infer<typeof editListedOfficerSchema>,
+  officers: {
+    id?: string;
+    name: string;
+    position: string;
+  }[],
+) => {
+  const modded = data.officers.filter(
+    (value, index) =>
+      !!officers.find((off) => off.id === value.id) &&
+      dirtyFields[index]?.position,
+  );
+  const created = data.officers.filter(
+    (value) => typeof value.id === 'undefined',
+  );
+  return {
+    modified: modded as { id: string; name: string; position: string }[],
+    created: created as { name: string; position: string }[],
+  };
+};
+
+type modifyDeletedAction =
+  | {
+      type: 'add';
+      target: string;
+    }
+  | { type: 'reset' };
+const deletedReducer = (state: Array<string>, action: modifyDeletedAction) => {
+  switch (action.type) {
+    case 'add':
+      return [...state, action.target];
+    case 'reset':
+      return [];
+  }
+};
+
+type EditOfficerFormProps = {
+  clubId: string;
+  officers: {
+    id: string;
+    name: string;
+    position: string;
+  }[];
+};
+const EditOfficerForm = ({ clubId, officers }: EditOfficerFormProps) => {
+  const {
+    control,
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, dirtyFields, isDirty },
+  } = useForm<z.infer<typeof editListedOfficerSchema>>({
+    resolver: zodResolver(editListedOfficerSchema),
+    defaultValues: { officers: officers },
+  });
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'officers',
+  });
+  const [deleted, modifyDeleted] = useReducer(deletedReducer, []);
+  const removeItem = (index: number) => {
+    const off = officers.find((officer) => officer.id == fields[index]?.id);
+    if (off) modifyDeleted({ type: 'add', target: off.id });
+    remove(index);
+  };
+  const router = useRouter();
+  const editOfficers = api.club.edit.listedOfficers.useMutation({
+    onSuccess: () => {
+      router.push(`/directory/${clubId}`);
+    },
+  });
+  const submitForm = handleSubmit((data) => {
+    if (dirtyFields.officers !== undefined) {
+      const { modified, created } = modifiedFields(
+        dirtyFields.officers,
+        data,
+        officers,
+      );
+      if (!editOfficers.isPending) {
+        editOfficers.mutate({
+          clubId: clubId,
+          deleted: deleted,
+          modified: modified,
+          created: created,
+        });
+      }
+    }
+  });
+  return (
+    <div className="h-full w-full">
+      <form onSubmit={submitForm}>
+        <div className="flex flex-col gap-y-2">
+          <div className="mb-2 flex flex-row">
+            <button
+              className="ml-auto rounded-lg bg-slate-200 p-2"
+              type="button"
+              onClick={() => {
+                append({ name: '', position: '' });
+              }}
+            >
+              add new Officer
+            </button>
+          </div>
+          <div>
+            {errors.officers && (
+              <p className="text-red-500">{errors.officers.message}</p>
+            )}
+          </div>
+          <div className="space-y-2">
+            {fields.map((field, index) => (
+              <OfficerItem
+                key={field.id}
+                register={register}
+                index={index}
+                remove={removeItem}
+                errors={errors}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-row justify-end gap-x-4 py-2">
+          <button
+            className="rounded-lg bg-slate-200 p-1 font-bold"
+            type="submit"
+          >
+            Save Changes
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              reset({
+                officers: officers,
+              });
+            }}
+            disabled={!isDirty}
+            className="group relative rounded-lg bg-slate-200 p-1 font-bold"
+          >
+            <div className="invisible absolute inset-0 h-full w-full rounded-lg bg-black opacity-80 group-disabled:visible"></div>
+            <div>Discard Changes</div>
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default EditOfficerForm;
+type OfficerItemProps = {
+  register: UseFormRegister<z.infer<typeof editListedOfficerSchema>>;
+  remove: (index: number) => void;
+  index: number;
+  errors: FieldErrors<z.infer<typeof editListedOfficerSchema>>;
+};
+const OfficerItem = ({ register, index, remove, errors }: OfficerItemProps) => {
+  return (
+    <div className="flex flex-row items-center rounded-md bg-slate-300 p-2">
+      <div className="flex flex-col">
+        <div>
+          <input
+            type="text"
+            placeholder="Name"
+            className="mb-1 bg-slate-300 text-xl font-bold text-black"
+            {...register(`officers.${index}.name` as const)}
+            aria-invalid={errors.officers && !!errors.officers[index]?.position}
+          />
+          {errors.officers && errors.officers[index]?.position && (
+            <p className="text-red-500">
+              {errors.officers[index]?.position?.message}
+            </p>
+          )}
+        </div>
+        <div>
+          <input
+            type="text"
+            placeholder="Position"
+            className="bg-slate-300 font-semibold text-black"
+            {...register(`officers.${index}.position` as const)}
+            aria-invalid={errors.officers && !!errors.officers[index]?.position}
+          />
+          {errors.officers && errors.officers[index]?.position && (
+            <p className="text-red-500">
+              {errors.officers[index]?.position?.message}
+            </p>
+          )}
+        </div>
+      </div>
+      <button
+        className="ml-auto disabled:hidden"
+        type="button"
+        onClick={() => remove(index)}
+      >
+        remove
+      </button>
+    </div>
+  );
+};
diff --git a/src/app/manage/[clubId]/edit/officers/EditOfficerForm.tsx b/src/app/manage/[clubId]/edit/officers/EditOfficerForm.tsx
index f0f027d7..aacdb39b 100644
--- a/src/app/manage/[clubId]/edit/officers/EditOfficerForm.tsx
+++ b/src/app/manage/[clubId]/edit/officers/EditOfficerForm.tsx
@@ -6,12 +6,7 @@ import { api } from '@src/trpc/react';
 import { editOfficerSchema } from '@src/utils/formSchemas';
 import { useRouter } from 'next/navigation';
 import { useReducer } from 'react';
-import {
-  type FieldErrors,
-  type UseFormRegister,
-  useFieldArray,
-  useForm,
-} from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { type z } from 'zod';
 
 type x = {
@@ -69,14 +64,12 @@ type EditOfficerFormProps = {
     userId: string;
     name: string;
     locked: boolean;
-    title: string;
     position: 'President' | 'Officer';
   }[];
 };
 const EditOfficerForm = ({ clubId, officers }: EditOfficerFormProps) => {
   const {
     control,
-    register,
     handleSubmit,
     reset,
     formState: { errors, dirtyFields, isDirty },
@@ -143,11 +136,9 @@ const EditOfficerForm = ({ clubId, officers }: EditOfficerFormProps) => {
             {fields.map((field, index) => (
               <OfficerItem
                 key={field.id}
-                register={register}
                 index={index}
                 id={field.userId}
                 remove={removeItem}
-                errors={errors}
                 locked={field.locked}
                 name={field.name}
               />
@@ -181,23 +172,13 @@ const EditOfficerForm = ({ clubId, officers }: EditOfficerFormProps) => {
 };
 export default EditOfficerForm;
 type OfficerItemProps = {
-  register: UseFormRegister<z.infer<typeof editOfficerSchema>>;
   remove: (index: number, userId: string) => void;
   id: string;
   index: number;
   name: string;
   locked: boolean;
-  errors: FieldErrors<z.infer<typeof editOfficerSchema>>;
 };
-const OfficerItem = ({
-  register,
-  index,
-  id,
-  name,
-  remove,
-  errors,
-  locked,
-}: OfficerItemProps) => {
+const OfficerItem = ({ index, id, name, remove, locked }: OfficerItemProps) => {
   return (
     <div className="flex flex-row items-center rounded-md bg-slate-300 p-2">
       <div className="flex flex-col">
@@ -206,21 +187,6 @@ const OfficerItem = ({
             {name}
           </h4>
         </div>
-        <div>
-          <input
-            type="text"
-            placeholder="Position"
-            className="bg-slate-300 font-semibold text-black"
-            {...register(`officers.${index}.title` as const)}
-            aria-invalid={errors.officers && !!errors.officers[index]?.title}
-            disabled={locked}
-          />
-          {errors.officers && errors.officers[index]?.title && (
-            <p className="text-red-500">
-              {errors.officers[index]?.title?.message}
-            </p>
-          )}
-        </div>
       </div>
       <button
         className="ml-auto disabled:hidden"
diff --git a/src/app/manage/[clubId]/edit/officers/page.tsx b/src/app/manage/[clubId]/edit/officers/page.tsx
index 984253d3..0c893304 100644
--- a/src/app/manage/[clubId]/edit/officers/page.tsx
+++ b/src/app/manage/[clubId]/edit/officers/page.tsx
@@ -5,6 +5,7 @@ import { api } from '@src/trpc/server';
 import { getServerAuthSession } from '@src/server/auth';
 import { redirect } from 'next/navigation';
 import { signInRoute } from '@src/utils/redirect';
+import EditListedOfficerForm from './EditListedOfficerForm';
 
 export default async function Page({
   params: { clubId },
@@ -15,13 +16,13 @@ export default async function Page({
   if (!session) redirect(signInRoute(`manage/${clubId}/edit/officers`));
   const role = await api.club.memberType({ id: clubId });
   const officers = await api.club.getOfficers({ id: clubId });
+  const listedOfficers = await api.club.getListedOfficers({ id: clubId });
 
   const mapped = officers.map((officer) => ({
     userId: officer.userId,
     name: officer.userMetadata.firstName + ' ' + officer.userMetadata.lastName,
     locked: officer.memberType == 'President' || role == 'Officer',
     position: officer.memberType as 'President' | 'Officer',
-    title: '', // TODO: link from officers table
   }));
 
   return (
@@ -30,9 +31,13 @@ export default async function Page({
       <div className="flex flex-col gap-y-2 px-5">
         <BlueBackButton />
         <h1 className="text-2xl font-extrabold text-blue-primary">
-          Edit club officers
+          Edit club Collaborators
         </h1>
         <EditOfficerForm clubId={clubId} officers={mapped} />
+        <h1 className="text-2xl font-extrabold text-blue-primary">
+          Edit club officers
+        </h1>
+        <EditListedOfficerForm clubId={clubId} officers={listedOfficers} />
       </div>
     </main>
   );
diff --git a/src/components/club/listing/ClubInfoSegment.tsx b/src/components/club/listing/ClubInfoSegment.tsx
index 1654ea64..ebd2a307 100644
--- a/src/components/club/listing/ClubInfoSegment.tsx
+++ b/src/components/club/listing/ClubInfoSegment.tsx
@@ -7,7 +7,7 @@ const ClubInfoSegment: FC<{
   club: NonNullable<RouterOutputs['club']['getDirectoryInfo']>;
 }> = async ({ club }) => {
   const isActive = await api.club.isActive({ id: club.id });
-  const president = club.userMetadataToClubs.find(
+  const president = (await api.club.getOfficers({ id: club.id })).find(
     (officer) => officer.memberType === 'President',
   );
   return (
@@ -52,13 +52,13 @@ const ClubInfoSegment: FC<{
             {club.description}
           </p>
         </div>
-        {club.userMetadataToClubs.length != 0 && (
+        {club.officers.length != 0 && (
           <div className="min-w-fit">
             <>
               <h1 className="text-center text-2xl font-medium">Leadership</h1>
               <div className="flex flex-col justify-center align-middle">
-                {club.userMetadataToClubs.map((officer) => (
-                  <div className="mt-5 flex flex-row" key={officer.userId}>
+                {club.officers.map((officer) => (
+                  <div className="mt-5 flex flex-row" key={officer.id}>
                     <Image
                       src={club.image}
                       alt="Picture of the author"
@@ -68,12 +68,10 @@ const ClubInfoSegment: FC<{
                     />
                     <div className="mx-5 flex flex-col justify-center align-middle">
                       <p className="text-left text-sm text-slate-600">
-                        {officer.userMetadata.firstName +
-                          ' ' +
-                          officer.userMetadata.lastName}
+                        {officer.name}
                       </p>
                       <p className="mt-2 text-sm text-slate-400">
-                        Officer {/* TODO: link to officers table */}
+                        {officer.position}
                       </p>
                     </div>
                   </div>
diff --git a/src/server/api/routers/club.ts b/src/server/api/routers/club.ts
index 07cd3887..36f6dafc 100644
--- a/src/server/api/routers/club.ts
+++ b/src/server/api/routers/club.ts
@@ -1,14 +1,4 @@
-import {
-  eq,
-  ilike,
-  sql,
-  and,
-  notInArray,
-  inArray,
-  or,
-  lt,
-  gt,
-} from 'drizzle-orm';
+import { eq, ilike, sql, and, notInArray, inArray, lt, gt } from 'drizzle-orm';
 import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
 import { z } from 'zod';
 import { clubEditRouter } from './clubEdit';
@@ -16,6 +6,7 @@ import { userMetadataToClubs } from '@src/server/db/schema/users';
 import { club, usedTags } from '@src/server/db/schema/club';
 import { contacts } from '@src/server/db/schema/contacts';
 import { carousel } from '@src/server/db/schema/admin';
+import { officers as officersTable } from '@src/server/db/schema/officers';
 import { createClubSchema as baseClubSchema } from '@src/utils/formSchemas';
 const byNameSchema = z.object({
   name: z.string().default(''),
@@ -252,6 +243,14 @@ export const clubRouter = createTRPCRouter({
       });
       return officers;
     }),
+  getListedOfficers: protectedProcedure
+    .input(byIdSchema)
+    .query(async ({ input, ctx }) => {
+      const officers = await ctx.db.query.officers.findMany({
+        where: eq(officersTable.clubId, input.id),
+      });
+      return officers;
+    }),
   isActive: publicProcedure.input(byIdSchema).query(async ({ input, ctx }) => {
     const hasPresident = await ctx.db.query.userMetadataToClubs.findFirst({
       where: and(
@@ -278,16 +277,7 @@ export const clubRouter = createTRPCRouter({
           where: (club) => eq(club.id, id),
           with: {
             contacts: true,
-            userMetadataToClubs: {
-              where: (row) =>
-                or(
-                  eq(row.memberType, 'President'),
-                  eq(row.memberType, 'Officer'),
-                ),
-              with: {
-                userMetadata: { columns: { firstName: true, lastName: true } },
-              },
-            },
+            officers: true,
           },
         });
         return byId;
diff --git a/src/server/api/routers/clubEdit.ts b/src/server/api/routers/clubEdit.ts
index 30ca549c..3dfbe4de 100644
--- a/src/server/api/routers/clubEdit.ts
+++ b/src/server/api/routers/clubEdit.ts
@@ -8,6 +8,7 @@ import { selectContact } from '@src/server/db/models';
 import { club } from '@src/server/db/schema/club';
 import { contacts } from '@src/server/db/schema/contacts';
 import { userMetadataToClubs } from '@src/server/db/schema/users';
+import { officers } from '@src/server/db/schema/officers';
 
 async function isUserOfficer(userId: string, clubId: string) {
   const officer = await db.query.userMetadataToClubs.findFirst({
@@ -36,7 +37,7 @@ const editContactSchema = z.object({
   modified: selectContact.array(),
   created: selectContact.omit({ clubId: true }).array(),
 });
-const editOfficerSchema = z.object({
+const editCollaboratorSchema = z.object({
   clubId: z.string(),
   deleted: z.string().array(),
   modified: z
@@ -53,6 +54,24 @@ const editOfficerSchema = z.object({
     })
     .array(),
 });
+
+const editOfficerSchema = z.object({
+  clubId: z.string(),
+  deleted: z.string().array(),
+  modified: z
+    .object({
+      id: z.string(),
+      name: z.string(),
+      position: z.string(),
+    })
+    .array(),
+  created: z
+    .object({
+      name: z.string(),
+      position: z.string(),
+    })
+    .array(),
+});
 const deleteSchema = z.object({ clubId: z.string() });
 
 export const clubEditRouter = createTRPCRouter({
@@ -117,7 +136,7 @@ export const clubEditRouter = createTRPCRouter({
         .onConflictDoNothing();
     }),
   officers: protectedProcedure
-    .input(editOfficerSchema)
+    .input(editCollaboratorSchema)
     .mutation(async ({ input, ctx }) => {
       const isOfficer = await isUserOfficer(ctx.session.user.id, input.clubId);
       if (!isOfficer) {
@@ -169,6 +188,47 @@ export const clubEditRouter = createTRPCRouter({
           where: eq(userMetadataToClubs.memberType, 'Member'),
         });
     }),
+  listedOfficers: protectedProcedure
+    .input(editOfficerSchema)
+    .mutation(async ({ input, ctx }) => {
+      const isOfficer = await isUserOfficer(ctx.session.user.id, input.clubId);
+      if (!isOfficer) {
+        throw new TRPCError({
+          message: 'must be an officer to modify this club',
+          code: 'UNAUTHORIZED',
+        });
+      }
+      if (input.deleted.length > 0) {
+        await ctx.db
+          .delete(userMetadataToClubs)
+          .where(
+            and(
+              eq(userMetadataToClubs.clubId, input.clubId),
+              inArray(userMetadataToClubs.userId, input.deleted),
+            ),
+          );
+      }
+      const promises: Promise<unknown>[] = [];
+      for (const modded of input.modified) {
+        const prom = ctx.db
+          .update(officers)
+          .set({ position: modded.position })
+          .where(
+            and(eq(officers.id, modded.id), eq(officers.clubId, input.clubId)),
+          );
+        promises.push(prom);
+      }
+      await Promise.allSettled(promises);
+      if (input.created.length === 0) return;
+
+      await ctx.db.insert(officers).values(
+        input.created.map((officer) => ({
+          clubId: input.clubId,
+          name: officer.name,
+          position: officer.position,
+        })),
+      );
+    }),
   delete: protectedProcedure
     .input(deleteSchema)
     .mutation(async ({ input, ctx }) => {
diff --git a/src/server/db/index.ts b/src/server/db/index.ts
index cc1185ab..59295784 100644
--- a/src/server/db/index.ts
+++ b/src/server/db/index.ts
@@ -7,6 +7,7 @@ import * as events from './schema/events';
 import * as users from './schema/users';
 import * as forms from './schema/forms';
 import * as admin from './schema/admin';
+import * as officers from './schema/officers';
 import { neon } from '@neondatabase/serverless';
 
 const schema = {
@@ -16,6 +17,7 @@ const schema = {
   ...users,
   ...forms,
   ...admin,
+  ...officers,
 };
 
 const neon_client = neon(env.DATABASE_URL);
diff --git a/src/utils/formSchemas.ts b/src/utils/formSchemas.ts
index 2cc635bb..77dc0bf7 100644
--- a/src/utils/formSchemas.ts
+++ b/src/utils/formSchemas.ts
@@ -36,6 +36,15 @@ export const editOfficerSchema = z.object({
     })
     .array(),
 });
+export const editListedOfficerSchema = z.object({
+  officers: z
+    .object({
+      id: z.string().optional(),
+      name: z.string(),
+      position: z.string().min(1),
+    })
+    .array(),
+});
 
 export const createEventSchema = z.object({
   clubId: z.string(),