refactor(fe): refactor settings page using context and custom hooks

apps/frontend/app/(client)/(main)/settings/_components/ConfirmModal.tsx

@@ -0,0 +1,61 @@
+import BaseModal from '@/components/BaseModal'
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogFooter
+} from '@/components/shadcn/alert-dialog'
+
+interface ModalProps {
+  open: boolean
+  handleOpen: () => void
+  handleClose: () => void
+  confirmAction: () => void
+  title?: string
+  description?: string
+}
+
+/**
+ *
+ * ConfirmModal component renders a modal dialog with confirm and cancel actions.
+ *
+ * @param open - Determines if the modal is open.
+ * @param handleClose - Function to close the modal.
+ * @param confirmAction - Function to execute when the user confirms.
+ * @param title - Title of the modal.
+ * @param description - Description of the modal.
+ *
+ * @remarks
+ * * AlertDialogFooter section (Button section) is separated using ConfirmModal component for reusability.
+ */
+export default function ConfirmModal({
+  open,
+  handleClose,
+  confirmAction,
+  title = '',
+  description = ''
+}: ModalProps) {
+  return (
+    <BaseModal
+      handleClose={handleClose}
+      title={title}
+      open={open}
+      description={description}
+      darkMode={false}
+    >
+      <AlertDialogFooter>
+        <AlertDialogAction
+          className="border-none bg-slate-100 text-[#3333334D] hover:bg-slate-200"
+          onClick={confirmAction}
+        >
+          Leave
+        </AlertDialogAction>
+        <AlertDialogCancel
+          className="bg-primary hover:bg-primary-strong border-none text-white"
+          onClick={handleClose}
+        >
+          Stay
+        </AlertDialogCancel>
+      </AlertDialogFooter>
+    </BaseModal>
+  )
+}

apps/frontend/app/(client)/(main)/settings/_components/CurrentPwSection.tsx

@@ -3,35 +3,30 @@ import { Input } from '@/components/shadcn/input'
 import { cn } from '@/libs/utils'
 import invisibleIcon from '@/public/icons/invisible.svg'
 import visibleIcon from '@/public/icons/visible.svg'
-import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
-import type { FieldErrors, UseFormRegister } from 'react-hook-form'
 import { FaCheck } from 'react-icons/fa6'
+import { useSettingsContext } from './context'
 
 interface CurrentPwSectionProps {
   currentPassword: string
   isCheckButtonClicked: boolean
   isPasswordCorrect: boolean
-  setPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
-  passwordShow: boolean
   checkPassword: () => Promise<void>
-  register: UseFormRegister<SettingsFormat>
-  errors: FieldErrors<SettingsFormat>
-  updateNow: boolean
 }
 
 export default function CurrentPwSection({
   currentPassword,
   isCheckButtonClicked,
   isPasswordCorrect,
-  setPasswordShow,
-  passwordShow,
-  checkPassword,
-  register,
-  errors,
-  updateNow
+  checkPassword
 }: CurrentPwSectionProps) {
+  const {
+    passwordState: { passwordShow, setPasswordShow },
+    updateNow,
+    formState: { register, errors }
+  } = useSettingsContext()
+
   return (
     <>
       <label className="-mb-4 mt-4 text-xs">Password</label>

apps/frontend/app/(client)/(main)/settings/_components/IdSection.tsx

@@ -1,17 +1,14 @@
 import { Input } from '@/components/shadcn/input'
+import { useSettingsContext } from './context'
+
+export default function IdSection() {
+  const { isLoading, defaultProfileValues } = useSettingsContext()
 
-export default function IdSection({
-  isLoading,
-  defaultUsername
-}: {
-  isLoading: boolean
-  defaultUsername: string
-}) {
   return (
     <>
       <label className="-mb-4 text-xs">ID</label>
       <Input
-        placeholder={isLoading ? 'Loading...' : defaultUsername}
+        placeholder={isLoading ? 'Loading...' : defaultProfileValues.username}
         disabled={true}
         className="border-neutral-300 text-neutral-600 placeholder:text-neutral-400 disabled:bg-neutral-200"
       />

apps/frontend/app/(client)/(main)/settings/_components/MajorSection.tsx

@@ -17,28 +17,16 @@ import { majors } from '@/libs/constants'
 import { cn } from '@/libs/utils'
 import React from 'react'
 import { FaChevronDown, FaCheck } from 'react-icons/fa6'
+import { useSettingsContext } from './context'
 
-interface MajorSectionProps {
-  majorOpen: boolean
-  setMajorOpen: React.Dispatch<React.SetStateAction<boolean>>
-  majorValue: string
-  setMajorValue: React.Dispatch<React.SetStateAction<string>>
-  updateNow: boolean
-  isLoading: boolean
-  defaultProfileValues: {
-    major?: string
-  }
-}
+export default function MajorSection() {
+  const {
+    isLoading,
+    updateNow,
+    majorState: { majorOpen, setMajorOpen, majorValue, setMajorValue },
+    defaultProfileValues
+  } = useSettingsContext()
 
-export default function MajorSection({
-  majorOpen,
-  setMajorOpen,
-  majorValue,
-  setMajorValue,
-  updateNow,
-  isLoading,
-  defaultProfileValues
-}: MajorSectionProps) {
   return (
     <>
       <label className="-mb-4 mt-2 text-xs">First Major</label>

apps/frontend/app/(client)/(main)/settings/_components/NameSection.tsx

@@ -1,25 +1,19 @@
 import { Input } from '@/components/shadcn/input'
 import { cn } from '@/libs/utils'
-import type { SettingsFormat } from '@/types/type'
-import type { FieldErrors, UseFormRegister } from 'react-hook-form'
+import { useSettingsContext } from './context'
 
 interface NameSectionProps {
-  isLoading: boolean
-  updateNow: boolean
-  defaultProfileValues: { userProfile?: { realName?: string } }
-  register: UseFormRegister<SettingsFormat>
-  errors: FieldErrors<SettingsFormat>
   realName: string
 }
 
-export default function NameSection({
-  isLoading,
-  updateNow,
-  defaultProfileValues,
-  register,
-  errors,
-  realName
-}: NameSectionProps) {
+export default function NameSection({ realName }: NameSectionProps) {
+  const {
+    isLoading,
+    updateNow,
+    defaultProfileValues,
+    formState: { register, errors }
+  } = useSettingsContext()
+
   return (
     <>
       <label className="-mb-4 text-xs">Name</label>

apps/frontend/app/(client)/(main)/settings/_components/NewPwSection.tsx

@@ -2,34 +2,29 @@ import { Input } from '@/components/shadcn/input'
 import { cn } from '@/libs/utils'
 import invisibleIcon from '@/public/icons/invisible.svg'
 import visibleIcon from '@/public/icons/visible.svg'
-import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
-import type { FieldErrors, UseFormRegister } from 'react-hook-form'
+import { useSettingsContext } from './context'
 
 interface NewPwSectionProps {
-  newPasswordShow: boolean
-  setNewPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
   newPasswordAble: boolean
   isPasswordsMatch: boolean
   newPassword: string
   confirmPassword: string
-  updateNow: boolean
-  register: UseFormRegister<SettingsFormat>
-  errors: FieldErrors<SettingsFormat>
 }
 
 export default function NewPwSection({
-  newPasswordShow,
-  setNewPasswordShow,
   newPasswordAble,
   isPasswordsMatch,
   newPassword,
-  confirmPassword,
-  updateNow,
-  register,
-  errors
+  confirmPassword
 }: NewPwSectionProps) {
+  const {
+    passwordState: { newPasswordShow, setNewPasswordShow },
+    updateNow,
+    formState: { register, errors }
+  } = useSettingsContext()
+
   return (
     <>
       <div className="flex items-center gap-2">

apps/frontend/app/(client)/(main)/settings/_components/ReEnterNewPwSection.tsx

@@ -4,29 +4,28 @@ import visibleIcon from '@/public/icons/visible.svg'
 import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
-import type { UseFormRegister, UseFormGetValues } from 'react-hook-form'
+import type { UseFormGetValues } from 'react-hook-form'
+import { useSettingsContext } from './context'
 
 interface ReEnterNewPwSectionProps {
-  confirmPasswordShow: boolean
-  setConfirmPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
   newPasswordAble: boolean
-  updateNow: boolean
-  register: UseFormRegister<SettingsFormat>
   getValues: UseFormGetValues<SettingsFormat>
   confirmPassword: string
   isPasswordsMatch: boolean
 }
 
 export default function ReEnterNewPwSection({
-  confirmPasswordShow,
-  setConfirmPasswordShow,
   newPasswordAble,
-  updateNow,
-  register,
   getValues,
   confirmPassword,
   isPasswordsMatch
 }: ReEnterNewPwSectionProps) {
+  const {
+    updateNow,
+    passwordState: { confirmPasswordShow, setConfirmPasswordShow },
+    formState: { register }
+  } = useSettingsContext()
+
   return (
     <>
       {/* Re-enter new password */}

apps/frontend/app/(client)/(main)/settings/_components/SaveButton.tsx

@@ -1,18 +1,19 @@
 import { Button } from '@/components/shadcn/button'
+import { useSettingsContext } from './context'
 
 interface SaveButtonProps {
-  updateNow: boolean
   saveAbleUpdateNow: boolean
   saveAble: boolean
   onSubmitClick: () => void
 }
 
 export default function SaveButton({
-  updateNow,
   saveAbleUpdateNow,
   saveAble,
   onSubmitClick
 }: SaveButtonProps) {
+  const { updateNow } = useSettingsContext()
+
   return (
     <div className="mt-2 text-end">
       <Button

apps/frontend/app/(client)/(main)/settings/_components/StudentIdSection.tsx

@@ -1,27 +1,18 @@
 import { Input } from '@/components/shadcn/input'
 import { cn } from '@/libs/utils'
-import type { SettingsFormat } from '@/types/type'
-import type { FieldErrors, UseFormRegister } from 'react-hook-form'
+import { useSettingsContext } from './context'
 
 interface StudentIdSectionProps {
   studentId: string
-  updateNow: boolean
-  isLoading: boolean
-  errors: FieldErrors<SettingsFormat>
-  register: UseFormRegister<SettingsFormat>
-  defaultProfileValues: {
-    studentId?: string
-  }
 }
 
-export default function StudentIdSection({
-  studentId,
-  updateNow,
-  isLoading,
-  errors,
-  register,
-  defaultProfileValues
-}: StudentIdSectionProps) {
+export default function StudentIdSection({ studentId }: StudentIdSectionProps) {
+  const {
+    isLoading,
+    updateNow,
+    defaultProfileValues,
+    formState: { register, errors }
+  } = useSettingsContext()
   return (
     <>
       <label className="-mb-4 mt-2 text-xs">Student ID</label>

apps/frontend/app/(client)/(main)/settings/_components/TopicSection.tsx

@@ -1,4 +1,8 @@
-export default function TopicSection({ updateNow }: { updateNow: boolean }) {
+import { useSettingsContext } from './context'
+
+export default function TopicSection() {
+  const { updateNow } = useSettingsContext()
+
   return (
     <>
       <h1 className="-mb-1 text-center text-2xl font-bold">Settings</h1>