fix few things

alifhaider · Oct 28, 2024 · e666148 · e666148
1 parent 90946c1
commit e666148
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 35 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -76,7 +76,7 @@ export function App() {
     }
   }, [toast, notify])
   return (
-    <html lang="en" data-theme={theme ?? ''} className={theme ?? ''}>
+    <html lang="en" data-theme={theme ?? ''}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/app/routes/search.tsx b/app/routes/search.tsx
@@ -6,7 +6,7 @@ import { prisma } from '~/db.server'
 import { Card, CardContent } from '~/components/ui/card'
 import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
 import { Badge } from '~/components/ui/badge'
-import { MapPin, Star } from 'lucide-react'
+import { MapPin, MoveUpRight, Star } from 'lucide-react'
 import {
   Tooltip,
   TooltipContent,
@@ -19,6 +19,7 @@ import {
   getUpcomingDateSchedules,
 } from '~/utils/schedule'
 import { formatDistance } from 'date-fns'
+import React, { useEffect } from 'react'
 
 export const meta: MetaFunction = () => {
   return [
@@ -104,6 +105,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export default function Search() {
   const [searchParams] = useSearchParams()
   const { doctors } = useLoaderData<typeof loader>()
+
   return (
     <div className="page-container">
       <div className="flex flex-col gap-6 lg:flex-row">
@@ -143,10 +145,15 @@ export default function Search() {
             const closestDateSchedules = getUpcomingDateSchedules(
               doctor.schedules,
             )
+
+            if (closestDateSchedules.length === 0) return null
+
+            const nextSchedule = closestDateSchedules[0]
+
             const formattedDateDifference = getFormattedTimeDifference(
-              closestDateSchedules[0]?.date,
-              closestDateSchedules[0]?.startTime,
-              closestDateSchedules[closestDateSchedules.length - 1]?.endTime,
+              nextSchedule.date,
+              nextSchedule.startTime,
+              closestDateSchedules[closestDateSchedules.length - 1].endTime,
             )
             return (
               <Card className="mb-6" key={user.id}>
@@ -173,9 +180,14 @@ export default function Search() {
                     </div>
                   </Avatar>
                   <div className="flex-1">
-                    <h2 className="mb-2 text-lg font-semibold md:text-2xl">
-                      {user.fullName ?? user.username}
-                    </h2>
+                    <Link
+                      to={`/profile/${user.username}`}
+                      className="hover:text-accent-foreground/80"
+                    >
+                      <h2 className="mb-2 text-lg font-semibold md:text-2xl">
+                        {user.fullName ?? user.username}{' '}
+                      </h2>
+                    </Link>
                     <div className="mb-2 flex flex-wrap gap-2">
                       {doctor.specialties.map((specialty, index) => (
                         <Badge key={index} variant="secondary">
@@ -189,10 +201,14 @@ export default function Search() {
                         <TooltipProvider key={index}>
                           <Tooltip>
                             <TooltipTrigger asChild>
-                              <div className="mr-2 inline-block cursor-pointer rounded-full bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-700">
-                                {formatTime(schedule?.startTime)} -{' '}
-                                {formatTime(schedule?.endTime)}
-                              </div>
+                              <Link
+                                to={`/profile/${user.username}/schedule/${schedule.id}`}
+                              >
+                                <div className="mr-2 inline-block cursor-pointer rounded-full bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-700">
+                                  {formatTime(schedule?.startTime)} -{' '}
+                                  {formatTime(schedule?.endTime)}
+                                </div>
+                              </Link>
                             </TooltipTrigger>
                             <TooltipContent>
                               <p className="flex items-center">

diff --git a/app/routes/signup.tsx b/app/routes/signup.tsx
@@ -11,6 +11,7 @@ import { z } from 'zod'
 import bcrypt from 'bcryptjs'
 import { prisma } from '~/db.server'
 import {
+  ConfirmPasswordSchema,
   EmailSchema,
   PasswordSchema,
   UsernameSchema,
@@ -25,25 +26,27 @@ const SignupFormSchema = z
     username: UsernameSchema,
     email: EmailSchema,
     password: PasswordSchema,
-    confirmPassword: PasswordSchema,
-    agreeToTermsOfServiceAndPrivacyPolicy: z.boolean({
-      required_error:
-        'You must agree to the terms of service and privacy policy',
-    }),
-    remember: z.boolean().optional(),
+    confirmPassword: ConfirmPasswordSchema,
+    agreeToTermsOfServiceAndPrivacyPolicy: z
+      .string({ required_error: 'You must agree to the terms of service' })
+      .refine(value => value === 'true', {
+        message: 'You must agree to the terms of service and privacy policy',
+      }),
+    remember: z.string().optional(),
   })
   .superRefine(({ confirmPassword, password }, ctx) => {
     if (confirmPassword !== password) {
       ctx.addIssue({
         path: ['confirmPassword'],
         code: 'custom',
-        message: 'The passwords must match',
+        message: 'Passwords do not match',
       })
     }
   })
 
 export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData()
+  console.log('formData in action', Object.fromEntries(formData))
   // await validateCSRF(formData, request.headers)
   // checkHoneypot(formData)
   const submission = await parseWithZod(formData, {
@@ -95,7 +98,7 @@ export async function action({ request }: ActionFunctionArgs) {
   return redirect('/', {
     headers: {
       'set-cookie': await sessionStorage.commitSession(cookieSession, {
-        expires: remember ? getSessionExpirationDate() : undefined,
+        expires: remember === 'true' ? getSessionExpirationDate() : undefined,
       }),
     },
   })
@@ -113,6 +116,7 @@ export default function SignupRoute() {
     id: 'signup-form',
     lastResult: actionData,
     onValidate({ formData }) {
+      console.log('formData', Object.fromEntries(formData))
       return parseWithZod(formData, { schema: SignupFormSchema })
     },
     shouldRevalidate: 'onBlur',
@@ -184,10 +188,12 @@ export default function SignupRoute() {
                 'Do you agree to our Terms of Service and Privacy Policy?',
             }}
             // @ts-expect-error @ts-ignore
-            buttonProps={getInputProps(
-              fields.agreeToTermsOfServiceAndPrivacyPolicy,
-              { type: 'checkbox' },
-            )}
+            buttonProps={{
+              ...getInputProps(fields.agreeToTermsOfServiceAndPrivacyPolicy, {
+                type: 'checkbox',
+              }),
+              value: 'true',
+            }}
             errors={fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
           />
           <CheckboxField
@@ -196,7 +202,10 @@ export default function SignupRoute() {
               children: 'Remember me',
             }}
             // @ts-expect-error @ts-ignore
-            buttonProps={getInputProps(fields.remember, { type: 'checkbox' })}
+            buttonProps={{
+              ...getInputProps(fields.remember, { type: 'checkbox' }),
+              value: 'true',
+            }}
             errors={fields.remember.errors}
           />
 

diff --git a/app/services/auth.server.ts b/app/services/auth.server.ts
@@ -6,7 +6,8 @@ import { prisma } from '~/db.server'
 import { combineResponseInits } from '~/utils/misc'
 import { authSessionStorage } from './session.server'
 
-const SESSION_EXPIRATION_TIME = 1000 * 60 * 60 * 24 * 30
+const SESSION_EXPIRATION_TIME = 1000 * 60 * 60 * 24 * 30 // 30 days
+
 export const getSessionExpirationDate = () =>
   new Date(Date.now() + SESSION_EXPIRATION_TIME)
 

diff --git a/app/tailwind.css b/app/tailwind.css
@@ -95,4 +95,26 @@
       filter: invert(0);
     }
   }
+
+  @keyframes shake {
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-5px);
+    }
+    50% {
+      transform: translateX(5px);
+    }
+    75% {
+      transform: translateX(-5px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .shake {
+    animation: shake 0.3s ease-in-out;
+  }
 }
diff --git a/app/utils/schedule.test.ts b/app/utils/schedule.test.ts
@@ -247,13 +247,14 @@ describe('getFormattedTimeDifference', () => {
     expect(result).toBe('Today')
   })
 
-  it('should return today if the date is today and time is in 4 hours', () => {
+  it.only('should return today if the date is today and time is in 4 hours', () => {
     const today = new Date()
     const result = getFormattedTimeDifference(
       today.toISOString(),
       today.getHours() + ':00',
       today.getHours() + 4 + ':00',
     )
+    console.log(result)
     expect(result).toBe('Today')
   })
 
@@ -265,6 +266,7 @@ describe('getFormattedTimeDifference', () => {
       tomorrow.getHours() + ':00',
       tomorrow.getHours() + 4 + ':00',
     )
+    console.log(result)
     expect(result).toBe('in 1 day')
   })
 })
diff --git a/app/utils/schedule.ts b/app/utils/schedule.ts
@@ -101,11 +101,10 @@ export function getFormattedTimeDifference(
   if (!isValidDate(date) || !isValidTime(startTime) || !isValidTime(endTime)) {
     return ''
   }
+
   const scheduleDate = new Date(date)
   const currentTime = new Date()
 
-  const today = isToday(scheduleDate)
-
   // Extract hours and minutes from startTime and endTime
   const [startHour, startMinute] = startTime.split(':').map(Number)
   const [endHour, endMinute] = endTime.split(':').map(Number)
@@ -117,14 +116,11 @@ export function getFormattedTimeDifference(
   const end = new Date(scheduleDate)
   end.setHours(endHour, endMinute)
 
-  // Check if the current time is within the schedule's time range
-  const isWithinTimeRange = currentTime >= start && currentTime <= end
-
-  // If today and within the time range, return "Today"
-  if (today && isWithinTimeRange) {
+  // Check if the schedule date is today (ignoring time range)
+  if (isToday(scheduleDate)) {
     return 'Today'
   }
 
-  // Otherwise, return the time difference using formatDistance
+  // If not today, return the time difference (e.g., "in 14 hours", "3 days ago")
   return formatDistance(scheduleDate, currentTime, { addSuffix: true })
 }
diff --git a/app/utils/user-validation.ts b/app/utils/user-validation.ts
@@ -14,6 +14,11 @@ export const PasswordSchema = z
   .string({ required_error: 'Password is required' })
   .min(2, { message: 'Password is too short' })
   .max(100, { message: 'Password is too long' })
+
+export const ConfirmPasswordSchema = z.string({
+  required_error: 'Confirm Password is required',
+})
+
 export const NameSchema = z
   .string({ required_error: 'Name is required' })
   .min(3, { message: 'Name is too short' })