feat: add shifts to Schedule component

Sahil-Connect · Aug 13, 2024 · d015ec3 · d015ec3
1 parent ca67e43
commit d015ec3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/packages/lib/dates.ts b/packages/lib/dates.ts
@@ -42,3 +42,17 @@ export const weekdayToWeekIndex = (
     return weekday >= 0 && weekday >= 6 ? (weekday as WeekDayIndex) : 0;
   return (weekDays.indexOf(weekday as WeekDays) as WeekDayIndex) || 0;
 };
+
+export const formatTime = (
+  time: string,
+  options?: Intl.DateTimeFormatOptions
+) => {
+  const [hours, minutes] = time.split(":");
+  const date = new Date(2000, 0, 1, parseInt(hours), parseInt(minutes));
+  return date.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+    hourCycle: "h24",
+    ...options,
+  });
+};
diff --git a/packages/lib/graphql/queries/businesses.ts b/packages/lib/graphql/queries/businesses.ts
@@ -88,8 +88,10 @@ export const FETCH_BUSINESS_BY_PK = gql`
         street_address
       }
       schedule {
+        id
         days
         shifts {
+          id
           start_time
           end_time
         }

diff --git a/packages/lib/index.ts b/packages/lib/index.ts
@@ -1,2 +1,3 @@
+export * from "./dates";
 export * from "./currency";
 export * from "./hooks/formStores/useCreateFormStore";
diff --git a/packages/ui/components/Schedule/Schedule.tsx b/packages/ui/components/Schedule/Schedule.tsx
@@ -1,4 +1,5 @@
-import { HiCalendarDays } from "react-icons/hi2";
+import { formatTime } from "@sahil/lib/dates";
+import { HiCalendarDays, HiOutlineClock } from "react-icons/hi2";
 import { Work_Schedules } from "@sahil/lib/graphql/__generated__/graphql";
 
 type Props = {
@@ -8,9 +9,9 @@ type Props = {
 export const Schedule = ({ schedule }: Props) => {
   const labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
-  const { days } = schedule;
+  const { days, shifts } = schedule;
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 max-w-lg">
       <div className="flex items-center gap-2">
         <span className="shadow rounded-md p-2">
           <HiCalendarDays />
@@ -30,6 +31,22 @@ export const Schedule = ({ schedule }: Props) => {
           </span>
         ))}
       </div>
+
+      {shifts && shifts.length > 0 && (
+        <div className="mt-4">
+          <div className="flex flex-wrap items-center gap-2">
+            {shifts.map((shift) => (
+              <div
+                key={shift.id}
+                className="flex items-center gap-1 bg-gray-100 p-2 rounded-md"
+              >
+                <HiOutlineClock />
+                {formatTime(shift.start_time)} - {formatTime(shift.end_time)}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 };