Merge pull request #217 from UTDNebula/JUP-49-improve-contacts

JUP-49: improve club contacts

src/app/manage/[clubId]/edit/EditContactForm.tsx

@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import EditContactSelector from '@src/app/manage/[clubId]/edit/EditContactSelector';
 import { type SelectClub, type SelectContact } from '@src/server/db/models';
 import { api } from '@src/trpc/react';
+import { type contact } from '@src/utils/contact';
 import { editClubContactSchema } from '@src/utils/formSchemas';
 import { useRouter } from 'next/navigation';
 import { useReducer } from 'react';
@@ -55,7 +56,7 @@ const deletedReducer = (
 export default function EditContactForm({
   club,
 }: {
-  club: SelectClub & { contacts: SelectContact[] };
+  club: SelectClub & { contacts: contact[] };
 }) {
   const {
     register,

src/components/club/listing/ContactButtons.tsx

@@ -2,21 +2,40 @@ import type { SelectContact as Contacts } from '@src/server/db/models';
 import { logo } from '@src/icons/ContactIcons';
 import Link from 'next/link';
 
+const EmailButton = ({ item }: { item: Contacts }) => {
+  return (
+    <button
+      key={item.url}
+      className="group relative h-min self-center rounded-full bg-slate-100 p-2.5 transition-colors hover:bg-blue-700"
+    >
+      <Link href={`mailto:${item.url}`}>
+        <div className="relative h-8 w-8">{logo[item.platform]}</div>
+      </Link>
+    </button>
+  );
+};
+
 type contentButtonProps = {
   contacts: Array<Contacts>;
 };
 const ContactButtons = ({ contacts }: contentButtonProps) => {
   return (
     <div className="flex flex-row content-center gap-x-4">
       {contacts.map((item) => (
-        <button
-          key={item.url}
-          className="group relative h-min self-center rounded-full bg-slate-100 p-2.5 transition-colors hover:bg-blue-700"
-        >
-          <Link href={item.url} target="_blank">
-            <div className="relative h-8 w-8">{logo[item.platform]}</div>
-          </Link>
-        </button>
+        <>
+          {item.platform === 'email' ? (
+            <EmailButton item={item} />
+          ) : (
+            <button
+              key={item.url}
+              className="group relative h-min self-center rounded-full bg-slate-100 p-2.5 transition-colors hover:bg-blue-700"
+            >
+              <Link href={item.url} target="_blank">
+                <div className="relative h-8 w-8">{logo[item.platform]}</div>
+              </Link>
+            </button>
+          )}
+        </>
       ))}
     </div>
   );

src/server/api/routers/club.ts

@@ -11,12 +11,12 @@ import {
 } from 'drizzle-orm';
 import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
 import { z } from 'zod';
-import { selectContact } from '@src/server/db/models';
 import { clubEditRouter } from './clubEdit';
 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 { createClubSchema as baseClubSchema } from '@src/utils/formSchemas';
 const byNameSchema = z.object({
   name: z.string().default(''),
 });
@@ -35,22 +35,19 @@ const allSchema = z.object({
   limit: z.number().min(1).max(50).default(10),
   initialCursor: z.number().min(0).default(0),
 });
-const createClubSchema = z.object({
-  name: z.string().min(3),
-  description: z.string().min(1),
-  officers: z
-    .object({
-      id: z.string().min(1),
-      position: z.string().min(1),
-      president: z.boolean(),
-    })
-    .array()
-    .min(1),
-  contacts: selectContact
-    .omit({ clubId: true, url: true })
-    .extend({ url: z.string().url() })
-    .array(),
-});
+const createClubSchema = baseClubSchema
+  .omit({ clubId: true, officers: true })
+  .extend({
+    officers: z
+      .object({
+        id: z.string().min(1),
+        position: z.string(),
+        president: z.boolean(),
+      })
+      .array()
+      .min(1),
+  });
+
 export const clubRouter = createTRPCRouter({
   edit: clubEditRouter,
   byName: publicProcedure.input(byNameSchema).query(async ({ input, ctx }) => {

src/utils/contact.ts

@@ -0,0 +1,66 @@
+import { z } from 'zod';
+
+const emailSchema = z.object({
+  platform: z.literal('email'),
+  clubId: z.string().optional(),
+  url: z.string().email('Must be a valid email'),
+});
+const discordSchema = z.object({
+  platform: z.literal('discord'),
+  clubId: z.string().optional(),
+  url: z.string().url('Valid url required'),
+});
+
+const youtubeSchema = z.object({
+  platform: z.literal('youtube'),
+  clubId: z.string().optional(),
+  url: z.string().url('Valid url required'),
+});
+
+const twitchSchema = z.object({
+  platform: z.literal('twitch'),
+  clubId: z.string().optional(),
+  url: z.string().url('Valid url required'),
+});
+
+const facebookSchema = z.object({
+  platform: z.literal('facebook'),
+  clubId: z.string().optional(),
+  url: z.string().url('Valid url required'),
+});
+
+const twitterSchema = z.object({
+  platform: z.literal('twitter'),
+  clubId: z.string().optional(),
+  url: z.string().url('Valid url required'),
+});
+const instagramSchema = z.object({
+  platform: z.literal('instagram'),
+  clubId: z.string().optional(),
+  url: z.string().url('Valid url required'),
+});
+
+const websiteSchema = z.object({
+  platform: z.literal('website'),
+  clubId: z.string().optional(),
+  url: z.string().url('Valid url required'),
+});
+
+const otherSchema = z.object({
+  platform: z.literal('other'),
+  clubId: z.string().optional(),
+  url: z.string().url('must be a valid url'),
+});
+
+export const contactSchema = z.discriminatedUnion('platform', [
+  emailSchema,
+  discordSchema,
+  youtubeSchema,
+  twitchSchema,
+  facebookSchema,
+  twitterSchema,
+  instagramSchema,
+  websiteSchema,
+  otherSchema,
+]);
+export type contact = z.infer<typeof contactSchema>;

src/utils/formSchemas.ts

@@ -1,5 +1,5 @@
-import { selectContact } from '@src/server/db/models';
 import { z } from 'zod';
+import { contactSchema } from './contact';
 
 export const createClubSchema = z.object({
   name: z.string().min(3, 'Club name must be at least 3 characters long'),
@@ -14,15 +14,10 @@ export const createClubSchema = z.object({
     })
     .array()
     .min(1),
-  contacts: selectContact
-    .omit({ clubId: true, url: true })
-    .extend({ url: z.string().url() })
-    .array(),
+  contacts: contactSchema.array(),
 });
 export const editClubContactSchema = z.object({
-  contacts: selectContact
-    .extend({ clubId: z.string().optional(), url: z.string().url() })
-    .array(),
+  contacts: contactSchema.array(),
 });
 
 export const editClubSchema = z.object({