From 1988ba9f612c3448811ba0336edcf83d999de118 Mon Sep 17 00:00:00 2001
From: Woojin Jung <44637040+jwoojin9@users.noreply.github.com>
Date: Mon, 26 Aug 2024 16:02:36 +0900
Subject: [PATCH] feat(fe): show update information modal for existing users
 (#2006)

---
 .../components/auth/HeaderAuthPanel.tsx       | 126 +++++++++++-------
 .../components/auth/UpdateInformation.tsx     |  47 +++++++
 apps/frontend/components/ui/dialog.tsx        |  50 ++++---
 3 files changed, 156 insertions(+), 67 deletions(-)
 create mode 100644 apps/frontend/components/auth/UpdateInformation.tsx

diff --git a/apps/frontend/components/auth/HeaderAuthPanel.tsx b/apps/frontend/components/auth/HeaderAuthPanel.tsx
index 3efe1bc4a7..7cd06db45f 100644
--- a/apps/frontend/components/auth/HeaderAuthPanel.tsx
+++ b/apps/frontend/components/auth/HeaderAuthPanel.tsx
@@ -9,15 +9,18 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator
 } from '@/components/ui/dropdown-menu'
-import { cn } from '@/lib/utils'
+import { cn, fetcherWithAuth } from '@/lib/utils'
 import useAuthModalStore from '@/stores/authModal'
 import { LogOut, UserRoundCog, ChevronDown } from 'lucide-react'
 import type { Session } from 'next-auth'
 import { signOut } from 'next-auth/react'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useEffect, useState } from 'react'
 import { BiSolidUser } from 'react-icons/bi'
 import { RxHamburgerMenu } from 'react-icons/rx'
 import AuthModal from './AuthModal'
+import UpdateInformation from './UpdateInformation'
 
 interface HeaderAuthPanelProps {
   session: Session | null
@@ -38,38 +41,73 @@ export default function HeaderAuthPanel({
   )
   const isUser = session?.user.role === 'User'
   const isEditor = group === 'editor'
+  const [needsUpdate, setNeedsUpdate] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    const checkIfNeedsUpdate = async () => {
+      const userResponse = await fetcherWithAuth.get('user')
+      const user: { studentId: string; major: string } =
+        await userResponse.json()
+      const updateNeeded =
+        user.studentId === '0000000000' ||
+        user.major === 'Department Information Unavailable / 학과 정보 없음'
+
+      setNeedsUpdate(updateNeeded)
+    }
+    if (session) {
+      checkIfNeedsUpdate()
+    }
+  }, [session])
+
+  const shouldShowDialog =
+    needsUpdate && pathname.split('/').pop() !== 'settings'
 
   return (
     <div className="ml-2 flex items-center gap-2">
       {session ? (
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            className={cn(
-              'hidden items-center gap-2 rounded-md px-4 py-1 md:flex',
-              isEditor ? 'border-0 ring-offset-0' : 'bg-primary text-white'
-            )}
-          >
-            <BiSolidUser
+        <>
+          <DropdownMenu>
+            <DropdownMenuTrigger
               className={cn(
-                'h-4 w-4',
-                isEditor ? 'size-6 rounded-none text-gray-300' : 'text-white'
+                'hidden items-center gap-2 rounded-md px-4 py-1 md:flex',
+                isEditor ? 'border-0 ring-offset-0' : 'bg-primary text-white'
               )}
-            />
-            {!isEditor && (
-              <p className="font-semibold text-white">
-                {session?.user.username}
-              </p>
-            )}
-            <ChevronDown className="w-4" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className={cn(
-              isEditor &&
-                'mr-5 rounded-sm border-none bg-[#4C5565] px-0 font-normal text-white'
-            )}
-          >
-            {!isUser && (
-              <Link href="/admin">
+            >
+              <BiSolidUser
+                className={cn(
+                  'h-4 w-4',
+                  isEditor ? 'size-6 rounded-none text-gray-300' : 'text-white'
+                )}
+              />
+              {!isEditor && (
+                <p className="font-semibold text-white">
+                  {session?.user.username}
+                </p>
+              )}
+              <ChevronDown className="w-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className={cn(
+                isEditor &&
+                  'mr-5 rounded-sm border-none bg-[#4C5565] px-0 font-normal text-white'
+              )}
+            >
+              {!isUser && (
+                <Link href="/admin">
+                  <DropdownMenuItem
+                    className={cn(
+                      'flex cursor-pointer items-center gap-1',
+                      isEditor
+                        ? 'rounded-none text-white focus:bg-[#222939] focus:text-white'
+                        : 'font-semibold'
+                    )}
+                  >
+                    <UserRoundCog className="size-4" /> Management
+                  </DropdownMenuItem>
+                </Link>
+              )}
+              <Link href="/settings">
                 <DropdownMenuItem
                   className={cn(
                     'flex cursor-pointer items-center gap-1',
@@ -78,11 +116,9 @@ export default function HeaderAuthPanel({
                       : 'font-semibold'
                   )}
                 >
-                  <UserRoundCog className="size-4" /> Management
+                  <UserRoundCog className="size-4" /> Settings
                 </DropdownMenuItem>
               </Link>
-            )}
-            <Link href="/settings">
               <DropdownMenuItem
                 className={cn(
                   'flex cursor-pointer items-center gap-1',
@@ -90,25 +126,23 @@ export default function HeaderAuthPanel({
                     ? 'rounded-none text-white focus:bg-[#222939] focus:text-white'
                     : 'font-semibold'
                 )}
+                onClick={() => {
+                  signOut()
+                }}
               >
-                <UserRoundCog className="size-4" /> Settings
+                <LogOut className="size-4" /> LogOut
               </DropdownMenuItem>
-            </Link>
-            <DropdownMenuItem
-              className={cn(
-                'flex cursor-pointer items-center gap-1',
-                isEditor
-                  ? 'rounded-none text-white focus:bg-[#222939] focus:text-white'
-                  : 'font-semibold'
-              )}
-              onClick={() => {
-                signOut()
-              }}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Dialog open={shouldShowDialog}>
+            <DialogContent
+              className="min-h-[30rem] max-w-[20.5rem]"
+              hideCloseButton={true}
             >
-              <LogOut className="size-4" /> LogOut
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+              <UpdateInformation />
+            </DialogContent>
+          </Dialog>
+        </>
       ) : (
         <Dialog open={currentModal !== ''} onOpenChange={hideModal}>
           <DialogTrigger asChild>
diff --git a/apps/frontend/components/auth/UpdateInformation.tsx b/apps/frontend/components/auth/UpdateInformation.tsx
new file mode 100644
index 0000000000..30310fb603
--- /dev/null
+++ b/apps/frontend/components/auth/UpdateInformation.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import CodedangLogo from '@/public/codedang.svg'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { IoWarningOutline } from 'react-icons/io5'
+
+export default function UpdateInformation() {
+  const router = useRouter()
+  return (
+    <div className="flex w-full flex-col items-center gap-1">
+      <div className="flex justify-center pt-4">
+        <Image
+          className="absolute top-4"
+          src={CodedangLogo}
+          alt="codedang"
+          width={100}
+        />
+      </div>
+      <div className="mt-12 inline-flex items-center text-center font-mono text-xl font-bold text-red-500">
+        <IoWarningOutline />
+        <p className="pl-2">Update Information</p>
+      </div>
+      <div className="mt-5 text-center text-xs text-neutral-700">
+        <p>To continue using the service,</p>
+        <p>you must update your information.</p>
+      </div>
+      <div className="text-center text-xs text-neutral-700">
+        <p>Your account will be DELETED if you do not </p>
+        <p>update your information by August 31.</p>
+      </div>
+      <div className="my-8 w-36 border-b" />
+      <p className="text-xs font-medium">We need the information</p>
+      <ul className="mt-1 text-xs font-medium text-neutral-700">
+        <li>Your Student ID</li>
+        <li>Your First Major</li>
+      </ul>
+      <Button
+        className="mt-10 w-full bg-red-500 font-semibold hover:bg-red-600"
+        onClick={() => router.push('/settings')}
+      >
+        Update Now
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/frontend/components/ui/dialog.tsx b/apps/frontend/components/ui/dialog.tsx
index bec6e4ca5a..1139448c1f 100644
--- a/apps/frontend/components/ui/dialog.tsx
+++ b/apps/frontend/components/ui/dialog.tsx
@@ -15,6 +15,7 @@ type DialogOverlayProps = React.ComponentPropsWithoutRef<
 interface ExtendedDialogContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   showDarkOverlay?: boolean
+  hideCloseButton?: boolean
 }
 
 const Dialog = DialogPrimitive.Root
@@ -47,28 +48,35 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ExtendedDialogContentProps
->(({ className, children, showDarkOverlay, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay showDarkOverlay={showDarkOverlay} />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:border-gray-800 dark:bg-gray-950',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close
-        id="closeDialog"
-        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:focus:ring-gray-300 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400"
+>(
+  (
+    { className, children, showDarkOverlay, hideCloseButton = false, ...props },
+    ref
+  ) => (
+    <DialogPortal>
+      <DialogOverlay showDarkOverlay={showDarkOverlay} />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:border-gray-800 dark:bg-gray-950',
+          className
+        )}
+        {...props}
       >
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
+        {children}
+        {!hideCloseButton && (
+          <DialogPrimitive.Close
+            id="closeDialog"
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:focus:ring-gray-300 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+)
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({