Merge pull request #105 from agrattan0820/dev

v0.3.13

apps/client/src/components/account-content.tsx

@@ -1,51 +1,59 @@
+/* eslint-disable @next/next/no-img-element */
 "use client";
 
-import Image from "next/image";
-import Button from "./button";
-// import { useRef } from "react";
-// import { FiX } from "react-icons/fi";
+import Button, { SecondaryButton } from "./button";
+import { useRef } from "react";
+import { FiX } from "react-icons/fi";
 import { Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import * as Sentry from "@sentry/nextjs";
+import { deleteUser } from "@ai/utils/queries";
+import toast from "react-hot-toast";
 
 export default function AccountContent({ session }: { session: Session }) {
-  // const dialogRef = useRef<HTMLDialogElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
 
   const handleSignOut = () => {
     Sentry.setUser(null);
     signOut();
   };
 
-  // const handleDeleteAccount = () => {
-  //   Sentry.setUser(null);
-  //   signOut();
-  // };
+  const handleDeleteAccount = async () => {
+    try {
+      await deleteUser(session.user.id);
+      Sentry.setUser(null);
+      signOut();
+    } catch (error) {
+      toast.error("Unable to delete your account");
+      Sentry.captureException(error);
+    }
+  };
 
   return (
     <>
       <section className="container mx-auto flex flex-col items-center justify-center gap-4 px-4">
         <h1 className="mb-8 text-2xl">Your Account</h1>
         {session.user.image && (
-          <Image
+          <img
             src={session.user.image}
             alt={`${session.user.name}'s Google profile image`}
-            width={64}
-            height={64}
-            className="h-16 w-16 rounded-full shadow"
+            width={96}
+            height={96}
+            className="relative z-10 h-24 w-24 rounded-full shadow"
           />
         )}
-        <div>
+        <div className=" -mt-8 rounded-2xl bg-slate-800 p-8 text-sm md:text-base">
           <p>Name: {session.user.name}</p>
           <p>Email: {session.user.email}</p>
         </div>
-        <Button onClick={handleSignOut}>Sign Out</Button>
-        {/* TODO: finish ability to delete account */}
-        {/* <SecondaryButton onClick={() => dialogRef.current?.showModal()}>
+        <Button className="mt-8" onClick={handleSignOut}>
+          Sign Out
+        </Button>
+        <SecondaryButton onClick={() => dialogRef.current?.showModal()}>
           Delete Account
-        </SecondaryButton> */}
+        </SecondaryButton>
       </section>
-      {/* TODO: finish ability to delete account */}
-      {/* <dialog
+      <dialog
         ref={dialogRef}
         className="relative mx-auto w-full max-w-2xl rounded-xl p-8 transition backdrop:bg-slate-900/50 open:animate-modal open:backdrop:animate-modal"
       >
@@ -63,7 +71,7 @@ export default function AccountContent({ session }: { session: Session }) {
             </SecondaryButton>
           </div>
         </form>
-      </dialog> */}
+      </dialog>
     </>
   );
 }

apps/client/src/components/game/face-off-result-image.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 "use client";
 
 import { Dispatch, SetStateAction, useEffect } from "react";
@@ -11,7 +12,6 @@ import {
   useMotionValue,
   useTransform,
 } from "framer-motion";
-import Image, { StaticImageData } from "next/image";
 import { BsTrophy } from "react-icons/bs";
 
 import { cn } from "@ai/utils/cn";
@@ -129,7 +129,7 @@ const FaceOffResultImage = ({
   prompt: string;
   nickname: string;
   percentage: number;
-  image: string | StaticImageData;
+  image: string;
   bothImagesShown: boolean;
   showWinner: boolean;
   showLoser: boolean;
@@ -185,7 +185,7 @@ const FaceOffResultImage = ({
         +<motion.span>{animatedPoints}</motion.span>
       </motion.p>
       <div className="relative">
-        <Image
+        <img
           className={cn(
             `aspect-square transform rounded-xl filter transition`,
             isWinner && "ring ring-yellow-600",

apps/client/src/components/game/image-choice.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable @next/next/no-img-element */
 "use client";
 
 import { Variants, motion } from "framer-motion";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import Image from "next/image";
 import { FiCheck } from "react-icons/fi";
 
 import { cn } from "@ai/utils/cn";
@@ -68,7 +68,7 @@ const ImageChoiceOption = ({
         disabled={disabled ?? !showImage}
         onClick={onClick}
       >
-        <Image
+        <img
           className="aspect-square rounded-xl transition group-hover:brightness-105 group-focus-visible:brightness-105 group-disabled:group-hover:brightness-100 group-disabled:group-focus-visible:brightness-100"
           src={image.src}
           alt={image.alt}

apps/client/src/components/game/leaderboard.tsx

@@ -164,7 +164,7 @@ const Leaderboard = ({
           {leaderboard.allGenerations.map((generation, i) => (
             <li key={i} className="w-[240px] flex-none">
               <div className="relative overflow-hidden rounded-xl">
-                <Image
+                <img
                   className="aspect-square"
                   src={generation.generation.imageUrl}
                   width={1024}

apps/client/src/utils/queries.ts

@@ -117,6 +117,28 @@ export async function existingHost({
   return data;
 }
 
+export type DeleteUserResponse = {
+  user: User;
+};
+
+export async function deleteUser(userId: string) {
+  const response = await fetch(`${URL}/user/${userId}`, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to delete user");
+  }
+
+  const data: DeleteUserResponse = await response.json();
+
+  return data;
+}
+
 // ! ----------> ROOMS <----------
 
 export type JoinRoomResponse = {

apps/server/src/controllers/user.controller.ts

@@ -1,7 +1,7 @@
 import type { NextFunction, Request, Response } from "express";
 
 import { createRoom, joinRoom } from "../services/room.service";
-import { updateUserNickname } from "../services/user.service";
+import { deleteUser, updateUserNickname } from "../services/user.service";
 
 export async function existingHostController(
   req: Request<{}, {}, { userId: string; nickname: string }>,
@@ -28,3 +28,19 @@ export async function existingHostController(
     next(error);
   }
 }
+
+export async function deleteUserController(
+  req: Request<{ id: string }>,
+  res: Response,
+  next: NextFunction
+) {
+  try {
+    const { id } = req.params;
+
+    const deletedUser = await deleteUser({ userId: id });
+
+    res.status(200).json({ user: deletedUser });
+  } catch (error) {
+    next(error);
+  }
+}

apps/server/src/routes/user.route.ts

@@ -1,6 +1,10 @@
 import type { Express } from "express";
-import { existingHostController } from "../controllers/user.controller";
+import {
+  deleteUserController,
+  existingHostController,
+} from "../controllers/user.controller";
 
 export function userRoutes(app: Express) {
   app.post("/user/existingHost", existingHostController);
+  app.delete("/user/:id", deleteUserController);
 }

apps/server/src/server.ts

@@ -55,7 +55,7 @@ export function buildServer() {
   app.use(express.json());
   app.use(
     cors({
-      methods: ["GET", "POST"],
+      methods: ["GET", "POST", "DELETE"],
       origin: process.env.APP_URL ?? "https://www.artificialunintelligence.gg",
       credentials: true,
     })

apps/server/src/services/user.service.ts

@@ -43,3 +43,12 @@ export async function checkUserSession({
 
   return checkDBForSession[0];
 }
+
+export async function deleteUser({ userId }: { userId: string }) {
+  const deletedUser = await db
+    .delete(users)
+    .where(eq(users.id, userId))
+    .returning();
+
+  return deletedUser[0];
+}

packages/database/drizzle/0002_romantic_meltdown.sql

@@ -0,0 +1,47 @@
+ALTER TABLE "generations" DROP CONSTRAINT "generations_user_id_users_id_fk";
+--> statement-breakpoint
+ALTER TABLE "questions_to_games" DROP CONSTRAINT "questions_to_games_question_id_questions_id_fk";
+--> statement-breakpoint
+ALTER TABLE "rooms" DROP CONSTRAINT "rooms_host_id_users_id_fk";
+--> statement-breakpoint
+ALTER TABLE "users_to_games" DROP CONSTRAINT "users_to_games_user_id_users_id_fk";
+--> statement-breakpoint
+ALTER TABLE "users_to_rooms" DROP CONSTRAINT "users_to_rooms_user_id_users_id_fk";
+--> statement-breakpoint
+ALTER TABLE "votes" DROP CONSTRAINT "votes_user_id_users_id_fk";
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "generations" ADD CONSTRAINT "generations_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "questions_to_games" ADD CONSTRAINT "questions_to_games_question_id_questions_id_fk" FOREIGN KEY ("question_id") REFERENCES "questions"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "rooms" ADD CONSTRAINT "rooms_host_id_users_id_fk" FOREIGN KEY ("host_id") REFERENCES "users"("id") ON DELETE set null ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "users_to_games" ADD CONSTRAINT "users_to_games_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "users_to_rooms" ADD CONSTRAINT "users_to_rooms_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "votes" ADD CONSTRAINT "votes_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;