refactor time slots

app/home/(user)/_components/booking/time-slots.tsx

@@ -11,6 +11,7 @@ import { pathsConfig } from '@kit/shared/config';
 import { formatDateAndTime } from '@kit/shared/utils';
 import { Button } from '@kit/ui/shadcn/button';
 import { Card } from '@kit/ui/shadcn/card';
+import { Skeleton } from '@kit/ui/shadcn/skeleton';
 import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
@@ -19,6 +20,7 @@ import { updateReservationTime } from '~/lib/services/reservation.service';
 
 import { createInitialReservationAction } from '../../_lib/server/actions';
 import { EnrichedCartItem } from '../cart/types';
+import BookingPagination from './booking-pagination';
 import { ServiceProvider, TimeSlot } from './booking.context';
 import { useBooking } from './booking.provider';
 
@@ -68,57 +70,16 @@ const TimeSlots = ({
         }) ?? [],
         'StartTime',
         'asc',
-      ),
+      ).filter(({ StartTime }) => isSameDay(StartTime, selectedDate)),
     [booking.timeSlots, selectedDate],
   );
 
-  const totalPages = Math.ceil(filteredBookings.length / PAGE_SIZE);
-
   const paginatedBookings = useMemo(() => {
     const startIndex = (currentPage - 1) * PAGE_SIZE;
     const endIndex = startIndex + PAGE_SIZE;
     return filteredBookings.slice(startIndex, endIndex);
   }, [filteredBookings, currentPage, PAGE_SIZE]);
 
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
-  const generatePageNumbers = () => {
-    const pages = [];
-    const maxVisiblePages = 5;
-
-    if (totalPages <= maxVisiblePages) {
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      if (currentPage <= 3) {
-        for (let i = 1; i <= 4; i++) {
-          pages.push(i);
-        }
-        pages.push('...');
-        pages.push(totalPages);
-      } else if (currentPage >= totalPages - 2) {
-        pages.push(1);
-        pages.push('...');
-        for (let i = totalPages - 3; i <= totalPages; i++) {
-          pages.push(i);
-        }
-      } else {
-        pages.push(1);
-        pages.push('...');
-        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-          pages.push(i);
-        }
-        pages.push('...');
-        pages.push(totalPages);
-      }
-    }
-
-    return pages;
-  };
-
   if (!booking?.timeSlots?.length) {
     return null;
   }
@@ -143,12 +104,17 @@ const TimeSlots = ({
       timeSlot.StartTime,
       booking.selectedLocationId ? booking.selectedLocationId : null,
       comments,
-    ).then(() => {
-      if (onComplete) {
-        onComplete();
-      }
-      router.push(pathsConfig.app.cart);
-    });
+    )
+      .then(() => {
+        if (onComplete) {
+          onComplete();
+        }
+        router.push(pathsConfig.app.cart);
+      })
+      .catch((error) => {
+        console.error('Booking error: ', error);
+        throw error;
+      });
 
     toast.promise(() => bookTimePromise, {
       success: <Trans i18nKey={'booking:bookTimeSuccess'} />,
@@ -199,12 +165,15 @@ const TimeSlots = ({
 
     return handleBookTime(timeSlot);
   };
-
+  console.log('paginatedBookings', booking.isLoadingTimeSlots);
   return (
-    <div className="flex w-full flex-col gap-4">
+    <Skeleton
+      isLoading={booking.isLoadingTimeSlots}
+      className="flex w-full flex-col gap-4"
+    >
       <div className="flex h-full w-full flex-col gap-2 overflow-auto">
         {paginatedBookings.map((timeSlot, index) => {
-          const isEHIF = timeSlot.HKServiceID > 0;
+          const isHaigeKassa = timeSlot.HKServiceID > 0;
           const serviceProviderTitle = getServiceProviderTitle(
             currentLocale,
             timeSlot.serviceProvider,
@@ -212,6 +181,7 @@ const TimeSlots = ({
           const price =
             booking.selectedService?.variants?.[0]?.calculated_price
               ?.calculated_amount ?? cartItem?.unit_price;
+
           return (
             <Card
               className="xs:flex xs:justify-between grid w-full justify-center-safe gap-3 p-4"
@@ -222,7 +192,7 @@ const TimeSlots = ({
                 <div className="flex">
                   <h5
                     className={cn(
-                      (serviceProviderTitle || isEHIF) &&
+                      (serviceProviderTitle || isHaigeKassa) &&
                         "after:mx-2 after:content-['·']",
                     )}
                   >
@@ -230,12 +200,14 @@ const TimeSlots = ({
                   </h5>
                   {serviceProviderTitle && (
                     <span
-                      className={cn(isEHIF && "after:mx-2 after:content-['·']")}
+                      className={cn(
+                        isHaigeKassa && "after:mx-2 after:content-['·']",
+                      )}
                     >
                       {serviceProviderTitle}
                     </span>
                   )}
-                  {isEHIF && <span>{t('booking:ehifBooking')}</span>}
+                  {isHaigeKassa && <span>{t('booking:ehifBooking')}</span>}
                 </div>
                 <div className="flex text-xs">{timeSlot.location?.address}</div>
               </div>
@@ -254,63 +226,14 @@ const TimeSlots = ({
             </Card>
           );
         })}
-
-        {!paginatedBookings.length && (
-          <div className="wrap text-muted-foreground flex size-full content-center-safe justify-center-safe">
-            <p>{t('booking:noResults')}</p>
-          </div>
-        )}
       </div>
 
-      {totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <div className="text-muted-foreground text-sm">
-            {t('common:pageOfPages', {
-              page: currentPage,
-              total: totalPages,
-            })}
-          </div>
-
-          <div className="flex items-center gap-1">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handlePageChange(currentPage - 1)}
-              disabled={currentPage === 1}
-            >
-              <Trans i18nKey="common:previous" defaultValue="Previous" />
-            </Button>
-
-            {generatePageNumbers().map((page, index) => (
-              <Button
-                key={index}
-                variant={page === currentPage ? 'default' : 'outline'}
-                size="sm"
-                onClick={() =>
-                  typeof page === 'number' && handlePageChange(page)
-                }
-                disabled={page === '...'}
-                className={cn(
-                  'min-w-[2rem]',
-                  page === '...' && 'cursor-default hover:bg-transparent',
-                )}
-              >
-                {page}
-              </Button>
-            ))}
-
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handlePageChange(currentPage + 1)}
-              disabled={currentPage === totalPages}
-            >
-              <Trans i18nKey="common:next" defaultValue="Next" />
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
+      <BookingPagination
+        totalPages={Math.ceil(filteredBookings.length / PAGE_SIZE)}
+        setCurrentPage={setCurrentPage}
+        currentPage={currentPage}
+      />
+    </Skeleton>
   );
 };