From 99db8b8f961e87fc0e1edd66d0353309b464aaea Mon Sep 17 00:00:00 2001
From: simon0820s <simon0820s@gmail.com>
Date: Mon, 16 Dec 2024 15:48:42 -0500
Subject: [PATCH] feat(attendanceRequests): add skeleton

---
 .../Card/Skeleton/index.tsx                   | 25 +++++++++++++++--
 .../SelectionCard/index.tsx                   | 28 ++++++++++++++++---
 .../auth/signin/EmailForm/index.tsx           |  2 +-
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/components/activities/Payout/AttendanceRequests/Card/Skeleton/index.tsx b/src/components/activities/Payout/AttendanceRequests/Card/Skeleton/index.tsx
index d79fd56..7a2c05c 100644
--- a/src/components/activities/Payout/AttendanceRequests/Card/Skeleton/index.tsx
+++ b/src/components/activities/Payout/AttendanceRequests/Card/Skeleton/index.tsx
@@ -1,5 +1,26 @@
+import { Card, CardContent, Skeleton, Stack } from '@mui/material'
 import React from 'react'
 
-export default function AttendanceRequestSkeleton() {
-  return <div>index</div>
+export default function AttendanceRequestCardSkeleton() {
+  return (
+    <Card>
+      <CardContent sx={{ paddingLeft: '36px', paddingRight: '44px' }}>
+        <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
+          <Stack direction="row" gap="32px" alignItems="center">
+            <Skeleton variant="circular" height={32} width={32} />
+            <Stack gap="10px">
+              <Skeleton height={32} width={120} />
+              <div style={{ display: 'grid', gap: '10px', gridTemplateColumns: 'auto 1fr' }}>
+                <Skeleton height={12} width={80} />
+                <Skeleton height={12} width={60} />
+                <Skeleton height={12} width={80} />
+                <Skeleton height={12} width={60} />
+              </div>
+            </Stack>
+          </Stack>
+          <Skeleton variant="circular" height={32} width={32} />
+        </Stack>
+      </CardContent>
+    </Card>
+  )
 }
diff --git a/src/components/activities/Payout/AttendanceRequests/SelectionCard/index.tsx b/src/components/activities/Payout/AttendanceRequests/SelectionCard/index.tsx
index edc805d..831fe82 100644
--- a/src/components/activities/Payout/AttendanceRequests/SelectionCard/index.tsx
+++ b/src/components/activities/Payout/AttendanceRequests/SelectionCard/index.tsx
@@ -6,6 +6,7 @@ import { type AttendanceRequest } from '@/types/activities'
 import AttendanceRequestCard from '@/components/activities/Payout/AttendanceRequests/Card'
 import Link from 'next/link'
 import { type ReactNode } from 'react'
+import AttendanceRequestCardSkeleton from '../Card/Skeleton'
 
 type Props = {
   requests: AttendanceRequest[]
@@ -14,13 +15,32 @@ type Props = {
 }
 
 export default function AttendanceRequestsSelectionCard({ requests, setRequests, children }: Props) {
-  if (!requests)
+  if (requests.length == 0)
     return (
-      <ItemsCard title="My Activities">
-        {Array.from({ length: 3 }).map((_, index) => (
+      <ItemsCard
+        title="Attendee"
+        headerAction={
+          <>
+            <Typography variant="body1" color="#7E7E7E" sx={{ marginRight: '24px', paddingTop: '6px' }}>
+              Select
+            </Typography>
+          </>
+        }
+        actions={
+          <>
+            <Link href="/activities">
+              <Button>Go Back</Button>
+            </Link>
+            {children}
+          </>
+        }
+      >
+        {Array.from({ length: 2 })?.map((_, index) => (
           <Box key={index}>
             <Divider />
-            <Box paddingLeft={4}></Box>
+            <CardContent>
+              <AttendanceRequestCardSkeleton />
+            </CardContent>
           </Box>
         ))}
       </ItemsCard>
diff --git a/src/components/auth/signin/EmailForm/index.tsx b/src/components/auth/signin/EmailForm/index.tsx
index 682691d..6a757ff 100644
--- a/src/components/auth/signin/EmailForm/index.tsx
+++ b/src/components/auth/signin/EmailForm/index.tsx
@@ -21,7 +21,7 @@ const EmailForm = (): ReactElement => {
     formState: { errors, isValid },
   } = useForm({
     resolver: zodResolver(formSignInSchema),
-    mode: 'all',
+    mode: 'onTouched',
   })
 
   useEffect(() => {