feat(settings) settings modal with delete account button

src/app/app/shared/settings/SettingsModal.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import 'client-only';
+import { Dialog } from '@headlessui/react';
+import { XIcon } from '@/app/shared/ui/icon/XIcon';
+import { buttonClassNameRed } from '@/app/shared/ui/button/buttonClassName';
+
+interface SettingsModalProps {
+  readonly onCloseModal: () => void;
+  readonly onDeleteAccount: () => void;
+  readonly open: boolean;
+}
+
+export default function SettingsModal({ onCloseModal, onDeleteAccount, open }: SettingsModalProps) {
+  console.log('SettingsModal()');
+
+  return (
+    <Dialog as="div" open={open} className="relative z-50" onClose={onCloseModal}>
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      <div className="fixed inset-0 flex items-center">
+        <Dialog.Panel className="mx-auto w-full rounded-lg bg-white p-4 md:w-[40rem]">
+          <div className="flex items-center justify-between">
+            <h1 className="text-lg font-semibold text-gray-800">Settings</h1>
+            <button
+              type="button"
+              className="-m-2.5 rounded-md p-2.5 text-gray-700"
+              onClick={onCloseModal}
+            >
+              <span className="sr-only">Close modal</span>
+              <XIcon aria-hidden="true" />
+            </button>
+          </div>
+          <button type="button" onClick={onDeleteAccount} className={`${buttonClassNameRed} mt-12`}>
+            Delete account
+          </button>
+          <p className="mt-4 text-xs font-medium text-gray-600">
+            You will immediately delete all your data, including your projects and tasks, by
+            clicking the button above. You can&apos;t undo it.
+          </p>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/app/app/shared/ui/AppHeader.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/navigation';
 
 interface AppHeaderProps {
   readonly onMenuButtonClick: () => void;
+  readonly onSettingsButtonClick: () => void;
 }
 
 export enum SettingsAction {
@@ -41,7 +42,7 @@ const settingsItems: Array<SettingsItem> = [
 ];
 
 const AppHeader = forwardRef<HTMLElement, AppHeaderProps>(
-  ({ onMenuButtonClick }: AppHeaderProps, ref) => {
+  ({ onMenuButtonClick, onSettingsButtonClick }: AppHeaderProps, ref) => {
     const wrappedUserSession = useContext(UserSessionContext);
     const router = useRouter();
     const supabase = createClientComponentClient();
@@ -55,6 +56,7 @@ const AppHeader = forwardRef<HTMLElement, AppHeaderProps>(
           break;
         case SettingsAction.Settings:
           console.log('AppHeader().onProjectActionHandler() - Nav to settings modal');
+          onSettingsButtonClick();
           break;
         default:
           throw new Error(

src/app/app/shared/ui/AppShell.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import 'client-only';
 import { useLayoutEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 
 import { ChildrenProps } from '@/app/shared/ui//ChildrenProps';
 import AppHeader from '@/app/app/shared/ui/AppHeader';
@@ -11,6 +10,9 @@ import { ProjectData } from '@/app/app/shared/project/ProjectData';
 import ProjectModal from '@/app/app/shared/project/ProjectModal';
 import { CreateProjectData, UpdateProjectData } from '@/app/app/shared/project/ProjectData';
 import { createProject } from '@/app/app/shared/project/project-model';
+import SettingsModal from '@/app/app/shared/settings/SettingsModal';
+import { ConfirmationModal, ConfirmationModalProps } from './ConfirmationModal';
+import { deleteUserAccount } from '../user/user-model';
 
 interface AppShellProps extends ChildrenProps {
   readonly project?: ProjectData | null;
@@ -19,17 +21,21 @@ interface AppShellProps extends ChildrenProps {
 
 export default function AppShell({ children, project, projects }: AppShellProps) {
   const [isMenuOpen, setIsMenuOpen] = useState<boolean | null>(null);
-  const [showProjectModal, setShowProjectModal] = useState(false);
+  const [isShowingProjectModal, setIsShowingProjectModal] = useState(false);
+  const [isShowingSettingsModal, setIsShowingSettingsModal] = useState(false);
+  const [confirmationModalProps, setConfirmationModalProps] =
+    useState<ConfirmationModalProps | null>(null);
 
   const headerRef = useRef<HTMLElement>(null);
   const router = useRouter();
+  const pathname = usePathname();
 
-  console.log('AppShell() - showProjectModal: ', showProjectModal);
+  console.log('AppShell() - isShowingProjectModal: ', isShowingProjectModal);
   console.log('AppShell() - projects: ', projects);
 
   const onCloseProjectModal = () => {
     console.log('AppShell().onCloseProjectModal()');
-    setShowProjectModal(false);
+    setIsShowingProjectModal(false);
   };
 
   const onCreateProject = async (data: CreateProjectData) => {
@@ -56,14 +62,44 @@ export default function AppShell({ children, project, projects }: AppShellProps)
       <button
         type="button"
         className="text-blue-600 hover:text-blue-500"
-        onClick={() => setShowProjectModal(true)}
+        onClick={() => setIsShowingProjectModal(true)}
       >
         Click here
       </button>{' '}
       to create your first.
     </p>
   );
 
+  const onCloseSettingsModal = () => {
+    console.log('AppShell().onCloseSettingsModal()');
+    if (confirmationModalProps) return;
+    setIsShowingSettingsModal(false);
+  };
+
+  const navToSettingsPage = () => {
+    setIsShowingSettingsModal(true);
+  };
+
+  const onCloseConfirmationModal = () => {
+    console.log('TaskModal().onCloseConfirmationModal()');
+    setConfirmationModalProps(null);
+  };
+
+  const onDeleteAccount = () => {
+    setConfirmationModalProps({
+      confirmButtonLabel: 'Delete',
+      modalCopy: (
+        <span>Are you sure you want to delete you account and all data associated to it?</span>
+      ),
+      modalTitle: 'Delete Task',
+      onCancelHandler: onCloseConfirmationModal,
+      onConfirmHandler: async () => {
+        deleteUserAccount();
+      },
+      open: true,
+    });
+  };
+
   useLayoutEffect(() => {
     if (headerRef.current === undefined || headerRef.current === null) return;
     const headerWidth = headerRef.current.getBoundingClientRect().width;
@@ -72,12 +108,16 @@ export default function AppShell({ children, project, projects }: AppShellProps)
 
   return (
     <>
-      <AppHeader onMenuButtonClick={() => setIsMenuOpen(!isMenuOpen)} ref={headerRef} />
+      <AppHeader
+        onMenuButtonClick={() => setIsMenuOpen(!isMenuOpen)}
+        onSettingsButtonClick={navToSettingsPage}
+        ref={headerRef}
+      />
       <div className="flex h-full overflow-hidden">
         <AppNav
           isOpen={isMenuOpen}
           projects={projects}
-          onNewProjectClick={() => setShowProjectModal(true)}
+          onNewProjectClick={() => setIsShowingProjectModal(true)}
         />
         <div className="h-full w-full overflow-y-auto overflow-x-hidden md:flex">
           <div className="flex h-full w-full max-w-[24rem] flex-col px-4 md:max-w-[38rem] md:pl-8 lg:max-w-[60rem] xl:pl-36  2xl:pl-60">
@@ -89,11 +129,17 @@ export default function AppShell({ children, project, projects }: AppShellProps)
         </div>
       </div>
       <ProjectModal
-        open={showProjectModal}
+        open={isShowingProjectModal}
         onCloseHandler={onCloseProjectModal}
         onCreateProject={onCreateProject}
         onUpdateProject={onUpdateProject}
       />
+      <SettingsModal
+        open={isShowingSettingsModal}
+        onCloseModal={onCloseSettingsModal}
+        onDeleteAccount={onDeleteAccount}
+      />
+      {confirmationModalProps && <ConfirmationModal {...confirmationModalProps} />}
     </>
   );
 }

src/app/app/shared/user/user-model.ts

@@ -1,4 +1,9 @@
+'use server';
 import { PrismaClient } from '@prisma/client';
+import { cookies } from 'next/headers';
+import { getSessionOrThrow } from '../utils/session-utils';
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
+import { Database } from '@/lib/database.types';
 
 export interface CreateUserData {
   readonly email: string;
@@ -9,16 +14,23 @@ export interface CreateUserData {
 
 export const createUser = async (data: CreateUserData) => {
   const prisma = new PrismaClient();
-
   const user = await prisma.user.findUnique({ where: { id: data.id } });
 
   if (user) return user;
-
-  const newUser = await prisma.user.create({ data });
-  return newUser;
+  return await prisma.user.create({ data });
 };
 
-export const findUserById = (id: string) => {
+export const deleteUserAccount = async () => {
+  console.log('deleteUserAccount()');
+  const session = await getSessionOrThrow();
+  const userId = session.user.id;
+
+  console.log('deleteUserAccount() - userId: ', userId);
+
   const prisma = new PrismaClient();
-  return prisma.user.findUnique({ where: { id } });
+  await prisma.user.delete({ where: { id: userId } });
+
+  const supabase = createServerActionClient<Database>({ cookies });
+  const { error } = await supabase.auth.signOut();
+  console.log('deleteUserAccount() - error: ', error);
 };

src/app/app/shared/utils/session-utils.ts

@@ -1,4 +1,4 @@
-import { Session, createServerActionClient } from '@supabase/auth-helpers-nextjs';
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
 import { cookies } from 'next/headers';
 import { Database } from '@/lib/database.types';
 

src/app/shared/ui/button/buttonClassName.tsx

@@ -3,4 +3,6 @@ export const buttonClassNameCommon =
 
 export const buttonClassNameGreen = `${buttonClassNameCommon} bg-green-600  text-white hover:bg-green-500 focus-visible:outline-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed`;
 
+export const buttonClassNameRed = `${buttonClassNameCommon} border border-red-600 bg-white text-red-600 hover:bg-gray-50 focus-visible:outline-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed`;
+
 export const buttonClassNameWhite = `${buttonClassNameCommon} border bg-white text-gray-700 hover:bg-gray-50 focus-visible:outline-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed`;