reset time button

rgodha24 · Sep 21, 2023 · 6a0748b · 6a0748b
1 parent 911864d
commit 6a0748b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/packages/web/src/components/ui/select.tsx b/packages/web/src/components/ui/select.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, MinusCircle, MinusIcon } from "lucide-react";
+import { Check, ChevronDown } from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import { Button } from "./button";
 
 const Select = SelectPrimitive.Root;
 

diff --git a/packages/web/src/lib/dates.ts b/packages/web/src/lib/dates.ts
@@ -10,6 +10,7 @@ type Values = {
 type Functions = {
   setStart: (date: Date | ((d: Date) => Date)) => void;
   setEnd: (date: Date | ((d: Date) => Date)) => void;
+  setTimes: (start: Date, end: Date) => void;
 };
 
 export const datesStore = create<Values & Functions>((set) => ({
@@ -46,4 +47,7 @@ export const datesStore = create<Values & Functions>((set) => ({
       return { end: date };
     });
   },
+  setTimes: (start, end) => {
+    set({ start, end });
+  },
 }));
diff --git a/packages/web/src/routes/home.tsx b/packages/web/src/routes/home.tsx
@@ -10,7 +10,7 @@ import { useSignins } from "@/lib/useSignins";
 import { useWsConnection } from "@/lib/ws";
 import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { RefreshCwIcon } from "lucide-react";
+import { ClockIcon, RefreshCwIcon } from "lucide-react";
 import { FC, useEffect, useMemo, useState } from "react";
 import { useStore } from "zustand";
 import { selectedClassAtom, scannerNameAtom } from "@/lib/atoms";
@@ -20,7 +20,8 @@ import {
   Tooltip,
   TooltipContent,
 } from "@/components/ui/tooltip";
-import { formatDistanceStrict } from "date-fns";
+import { formatDistanceStrict, setHours, setMinutes } from "date-fns";
+import { toast } from "@/components/ui/use-toast";
 
 export type Class = {
   name: string;
@@ -100,6 +101,7 @@ export const Home = () => {
   return (
     <>
       <div className="flex flex-row gap-x-4 justify-between mx-4">
+        <ResetTimeButton />
         <DateTimePicker date={start} setDate={setStart} />
         <ClassSelect classes={classes.data} />
         <ScannerSelect scanners={scanners.data} />
@@ -121,6 +123,43 @@ export const Home = () => {
   );
 };
 
+const ResetTimeButton: FC<{}> = () => {
+  const { setTimes } = useStore(datesStore, ({ setTimes }) => ({ setTimes }));
+
+  return (
+    <div className="min-w-4">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <Button
+              variant="outline"
+              className="flex-1 rounded-full group"
+              size="icon"
+              onClick={() => {
+                setTimes(
+                  setMinutes(new Date(), new Date().getMinutes() - 10),
+                  setHours(new Date(), new Date().getHours() + 1)
+                );
+                toast({
+                  title: "reset time successfully",
+                });
+              }}
+            >
+              <ClockIcon className="h-4 min-w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>
+              reset time to starting at 10 minutes go and ending at 1 hour in
+              the future
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+};
+
 const FetchFromServerButton: FC<{
   onClick: () => void;
   isSubmitting: boolean;