ScottyLabs · Adrastopoulos · Sep 8, 2024 · Sep 8, 2024 · Nov 23, 2024
diff --git a/emails/LostandFoundHeader.png b/emails/LostandFoundHeader.png
diff --git a/emails/subscription.tsx b/emails/subscription.tsx
@@ -0,0 +1,92 @@
+import { Category, Item } from '@prisma/client';
+import {
+  Body,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Preview,
+  Row,
+  Section,
+  Tailwind,
+  Text
+} from '@react-email/components';
+
+type Props = {
+  previewText?: string;
+  category?: Category;
+  items?: Item[];
+  baseUrl?: string;
+  username?: string;
+};
+export default function Email({
+  previewText = '',
+  category,
+  items,
+  baseUrl,
+  username
+}: Props) {
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="my-auto mx-auto bg-white px-2 font-sans">
+          <Container className="my-[40px] mx-auto max-w-[465px] rounded border border-solid border-[#eaeaea] p-[20px]">
+            <Section className="mt-[32px]">
+              <Img
+                src={`${baseUrl}/static/logo.png`}
+                width="40"
+                height="37"
+                alt="Vercel"
+                className="my-0 mx-auto"
+              />
+            </Section>
+            <Heading className="my-[30px] mx-0 p-0 text-center text-[24px] font-normal text-black">
+              Subscription Update
+            </Heading>
+            <Text className="text-[14px] leading-[24px] text-black">
+              Hello {username},
+            </Text>
+            <Text className="text-[14px] leading-[24px] text-black">
+              Daily updates for the category{' '}
+              <span className="font-semibold">{category}</span> are ready.
+            </Text>
+
+            <Section>
+              {items?.map((item) => (
+                <Row key={item.id}>
+                  <Column align="right">
+                    <Text>
+                      Item Name:{' '}
+                      <span className="font-semibold">{item.name}</span>
+                    </Text>
+                  </Column>
+                  <Column align="right">
+                    <Text>
+                      Description:{' '}
+                      <span className="font-semibold">{item.itemLocation}</span>
+                    </Text>
+                  </Column>
+                  <Column align="right">
+                    <Text>
+                      Location:{' '}
+                      <span className="font-semibold">
+                        {item.shortDescription}
+                      </span>
+                    </Text>
+                  </Column>
+                </Row>
+              ))}
+            </Section>
+
+            <Hr className="my-[26px] mx-0 w-full border border-solid border-[#eaeaea]" />
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
diff --git a/emails/textcomponent.tsx b/emails/textcomponent.tsx
diff --git a/package.json b/package.json
@@ -8,14 +8,17 @@
     "postinstall": "prisma generate",
     "lint": "next lint",
     "start": "next start",
-    "format": "yarn prettier . --write --ignore-path ./.gitignore"
+    "format": "yarn prettier . --write --ignore-path ./.gitignore",
+    "email-dev": "email dev",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@clerk/nextjs": "^4.29.7",
     "@headlessui/react": "^1.7.13",
     "@headlessui/tailwindcss": "^0.1.3",
     "@hookform/resolvers": "^2.9.11",
     "@prisma/client": "^4.12.0",
+    "@react-email/components": "^0.0.25",
     "@tailwindcss/typography": "^0.5.7",
     "@tanstack/react-query": "^4.24.6",
     "@trpc/client": "^10.11.0",
@@ -24,6 +27,7 @@
     "@trpc/server": "^10.11.0",
     "clsx": "^1.2.1",
     "daisyui": "^2.39.1",
+    "mailgun.js": "^10.2.3",
     "mongodb": "^4.11.0",
     "next": "14",
     "next-themes": "^0.2.1",
@@ -38,6 +42,7 @@
     "react-toastify": "^9.0.8",
     "sharp": "^0.31.1",
     "superjson": "1.9.1",
+    "tsx": "^4.19.0",
     "zod": "^3.21.4",
     "zod-validation-error": "^0.2.1",
     "zustand": "^4.3.3"
@@ -62,6 +67,7 @@
     "prettier-plugin-organize-imports": "^3.2.2",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "prisma": "^4.12.0",
+    "react-email": "^3.0.1",
     "tailwindcss": "^3.2.0",
     "typescript": "^4.8.4"
   }

diff --git a/prisma/migrations/20240908124506_add_application_database_user_id/migration.sql b/prisma/migrations/20240908124506_add_application_database_user_id/migration.sql
@@ -0,0 +1,106 @@
+-- CreateEnum
+CREATE TYPE "Location" AS ENUM ('AN', 'BH', 'BK', 'CUC', 'CIC', 'CFA', 'DH', 'GHC', 'HOA', 'HBH', 'HH', 'HL', 'III', 'MM', 'MI', 'NSH', 'PH', 'POS', 'PCA', 'TEP', 'OTHER');
+
+-- CreateEnum
+CREATE TYPE "RetrieveLocation" AS ENUM ('CUC', 'GHC');
+
+-- CreateEnum
+CREATE TYPE "Category" AS ENUM ('BEVERAGE_CONTAINER', 'CHARGER', 'CLOTHING', 'EARBUDS_HEADPHONES_CASES', 'GLASSES_CASES', 'JEWELRY_WATCHES', 'KEYS', 'PHONES_LAPTOPS_TABLETS', 'STATIONARY', 'UMBRELLA', 'OTHER');
+
+-- CreateEnum
+CREATE TYPE "Color" AS ENUM ('BLACK', 'BLUE', 'BROWN', 'GREEN', 'GREY', 'MULTICOLOR', 'METALLIC', 'ORANGE', 'PURPLE', 'RED', 'WHITE', 'YELLOW', 'OTHER');
+
+-- CreateEnum
+CREATE TYPE "ItemInteraction" AS ENUM ('CREATE', 'APPROVE', 'UNAPPROVE', 'ARCHIVE', 'UNARCHIVE', 'EDIT', 'DELETE');
+
+-- CreateEnum
+CREATE TYPE "Status" AS ENUM ('PENDING', 'APPROVED', 'ARCHIVED');
+
+-- CreateEnum
+CREATE TYPE "Value" AS ENUM ('GENERAL', 'HIGH');
+
+-- CreateEnum
+CREATE TYPE "Permission" AS ENUM ('USER', 'MODERATOR', 'ADMIN');
+
+-- CreateTable
+CREATE TABLE "Item" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "foundDate" TIMESTAMP(3) NOT NULL,
+    "foundLocation" "Location" NOT NULL,
+    "foundDescription" TEXT NOT NULL,
+    "shortDescription" TEXT NOT NULL,
+    "categories" "Category"[],
+    "color" "Color" NOT NULL,
+    "value" "Value" NOT NULL,
+    "identifiable" BOOLEAN NOT NULL,
+    "retrieveLocation" "RetrieveLocation" NOT NULL,
+    "itemLocation" TEXT NOT NULL,
+    "longDescription" TEXT,
+    "status" "Status" NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Item_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "AuditLog" (
+    "id" TEXT NOT NULL,
+    "interaction" "ItemInteraction" NOT NULL,
+    "actorId" TEXT NOT NULL,
+    "itemId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "AuditLog_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Subscription" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "category" "Category" NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Subscription_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "externalId" TEXT NOT NULL,
+    "notifications" BOOLEAN NOT NULL DEFAULT true,
+    "permission" "Permission" NOT NULL DEFAULT 'USER',
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+    "id" TEXT NOT NULL,
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_userId_category_key" ON "Subscription"("userId", "category");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_externalId_key" ON "User"("externalId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
+
+-- AddForeignKey
+ALTER TABLE "AuditLog" ADD CONSTRAINT "AuditLog_actorId_fkey" FOREIGN KEY ("actorId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "AuditLog" ADD CONSTRAINT "AuditLog_itemId_fkey" FOREIGN KEY ("itemId") REFERENCES "Item"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Subscription" ADD CONSTRAINT "Subscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -97,7 +97,7 @@ enum Permission {
 }
 
 model Item {
-  id               String     @id @default(cuid())
+  id               String           @id @default(cuid())
   name             String
   foundDate        DateTime
   foundLocation    Location
@@ -112,13 +112,13 @@ model Item {
   longDescription  String?
   auditLogs        AuditLog[]
   status           Status
-  createdAt        DateTime   @default(now())
+  createdAt        DateTime         @default(now())
 }
 
 model AuditLog {
   id          String          @id @default(cuid())
   interaction ItemInteraction
-  actor       Account            @relation(fields: [actorId], references: [clerkId], onDelete: Cascade)
+  actor       User            @relation(fields: [actorId], references: [id], onDelete: Cascade)
   actorId     String
   item        Item            @relation(fields: [itemId], references: [id], onDelete: Cascade)
   itemId      String
@@ -128,21 +128,20 @@ model AuditLog {
 model Subscription {
   id        String   @id @default(cuid())
   userId    String
-  user      Account     @relation(fields: [userId], references: [clerkId], onDelete: Cascade)
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
   category  Category
   createdAt DateTime @default(now())
 
   @@unique([userId, category])
 }
 
-model Account {
-  clerkId       String         @id @unique
+model User {
+  id            String         @id @default(cuid())
+  externalId    String         @unique
   notifications Boolean        @default(true)
   permission    Permission     @default(USER)
   auditLogs     AuditLog[]
   subscriptions Subscription[]
-
-  @@index([clerkId])
 }
 
 model VerificationToken {

diff --git a/src/components/Dialogs/UserEditDialog.tsx b/src/components/Dialogs/UserEditDialog.tsx
@@ -28,8 +28,8 @@ function EditUserForm() {
   useEffect(() => {
     if (!selectedUser) return;
     methods.reset({
-      permission: selectedUser.account.permission,
-      notifications: selectedUser.account.notifications
+      permission: selectedUser.user.permission,
+      notifications: selectedUser.user.notifications
     });
   }, [selectedUser]);
   const { clearDialog } = useDialogStore();
@@ -40,7 +40,7 @@ function EditUserForm() {
     <form
       onSubmit={methods.handleSubmit((data) => {
         userUpdateMutation.mutate({
-          clerkId: selectedUser.account.clerkId,
+          externalId: selectedUser.user.externalId,
           data
         });
       }, console.error)}

diff --git a/src/components/ItemHistory.tsx b/src/components/ItemHistory.tsx
@@ -20,9 +20,7 @@ export function ItemHistory({ item }: ItemHistoryProps) {
           Modified By
         </div>
         <div className="collapse-content whitespace-normal  text-xs">
-          <p>
-            {auditLogQuery.data.map((audit) => audit.actor.clerkId).join('\n')}
-          </p>
+          <p>{auditLogQuery.data.map((audit) => audit.actor.id).join('\n')}</p>
         </div>
       </button>
       <button type="button" tabIndex={0} className="collapse-arrow collapse">

diff --git a/src/components/UserRow.tsx b/src/components/UserRow.tsx
@@ -24,7 +24,7 @@ export default function UserRow({
       <div className="avatar">
         <div className="w-8 rounded-full sm:w-12">
           <Image
-            src={data.user.imageUrl ?? '/pfp.png'}
+            src={data.clerkUser.imageUrl ?? '/pfp.png'}
             width={48}
             height={48}
             alt="img"
@@ -34,20 +34,18 @@ export default function UserRow({
       <div className="flex-1">
         <div className="w-24">
           <div className="overflow-hidden text-ellipsis font-bold leading-5 sm:overflow-visible sm:text-lg">
-            {data.user.firstName} {data.user.lastName}
+            {data.clerkUser.firstName} {data.clerkUser.lastName}
           </div>
           <div className="overflow-hidden text-ellipsis text-sm text-base-content/50 sm:overflow-visible">
-            {data.user.emailAddresses[0]?.emailAddress ?? 'No Email'}
+            {data.clerkUser.emailAddresses[0]?.emailAddress ?? 'No Email'}
           </div>
         </div>
       </div>
-      <div className="text-xs font-bold opacity-70">
-        {data.account.permission}
-      </div>
+      <div className="text-xs font-bold opacity-70">{data.user.permission}</div>
       <div
         className="tooltip"
         data-tip={
-          data.account.notifications
+          data.user.notifications
             ? 'Notifications Enabled'
             : 'Notifications Disabled'
         }
@@ -57,7 +55,7 @@ export default function UserRow({
             <input
               type="checkbox"
               className="cursor-none"
-              checked={data.account.notifications}
+              checked={data.user.notifications}
               readOnly
             />
             <div className="swap-on">

diff --git a/src/lib/mailgun.ts b/src/lib/mailgun.ts
@@ -0,0 +1,9 @@
+import FormData from 'form-data';
+import Mailgun from 'mailgun.js';
+
+const mailgun = new Mailgun(FormData);
+
+export const mg = mailgun.client({
+  username: 'api',
+  key: process.env.MAILGUN_API_KEY || 'key-yourkeyhere'
+});
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
@@ -45,13 +45,13 @@ export const ItemSearchSchema = z.object({
 });
 
 export const UserSchema = z.object({
-  clerkId: z.string(),
+  externalId: z.string(),
   permission: z.nativeEnum(Permission),
   notifications: z.boolean()
 });
 export const UserCreateSchema = UserSchema;
 export const UserUpdateSchema = z.object({
-  clerkId: z.string(),
+  externalId: z.string(),
   data: UserSchema.partial()
 });
 export const UserListSchema = z.object({