reset btn added

danikova · Dec 1, 2023 · 77b4d9f · 77b4d9f
1 parent 741dcd0
commit 77b4d9f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 29 deletions.
diff --git a/src/components/settings-form.tsx b/src/components/settings-form.tsx
@@ -9,10 +9,10 @@ import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
 
 export function SettingsForm({
   data,
-  setData,
+  setDirtyData,
 }: {
   data: FormData;
-  setData: (data: Partial<FormData>) => void;
+  setDirtyData: (data: Partial<FormData>) => void;
 }) {
   const { endDate, digits, title, imageId } = data;
 
@@ -22,22 +22,22 @@ export function SettingsForm({
       <Input
         value={title}
         onChange={(e) => {
-          setData({ ...data, title: e.target.value });
+          setDirtyData({ title: e.target.value });
         }}
       />
       <Label>Selected an end date</Label>
       <DateTimePicker
         date={endDate}
         setDate={(date) => {
-          setData({ ...data, endDate: date });
+          setDirtyData({ endDate: date });
         }}
       />
       <Label>Toggle digits</Label>
       <ToggleGroup
         type="multiple"
         value={digits}
         onValueChange={(value) => {
-          setData({ ...data, digits: value });
+          setDirtyData({ digits: value });
         }}
       >
         <ToggleGroupItem value="d" variant="outline">
@@ -61,15 +61,15 @@ export function SettingsForm({
         <PictureUpload
           btnText={imageId ? "Replace" : "Upload"}
           onChange={(value) => {
-            setData({ ...data, imageId: value });
+            setDirtyData({ imageId: value });
           }}
         />
         <Button
           variant="outline"
           disabled={!imageId}
           className="px-[0.6rem]"
           onClick={() => {
-            setData({ ...data, imageId: "" });
+            setDirtyData({ imageId: "" });
           }}
         >
           <Trash className="h-[1.2rem] w-[1.2rem]" />

diff --git a/src/components/settings-toggle.tsx b/src/components/settings-toggle.tsx
@@ -21,7 +21,7 @@ export function SettingsToggle() {
   const [data, setData] = useFormData();
   const [dirtyData, setDirtyData] = useState<Partial<FormData>>({});
   const combinedData = useMemo<FormData>(
-    () => _.defaults(dirtyData, data),
+    () => _.defaults(_.cloneDeep(dirtyData), data),
     [data, dirtyData]
   );
   const isButtonsDisabled = useMemo(
@@ -41,37 +41,54 @@ export function SettingsToggle() {
           <DialogTitle>Timer settings</DialogTitle>
           <DialogDescription className="opacity-50">
             Here you can edit some properties for this timer, you can update
-            this instance or create a new timer
+            this instance or you can create a totally new timer with the
+            provided properties
           </DialogDescription>
         </DialogHeader>
-        <SettingsForm data={combinedData} setData={setDirtyData} />
-        <DialogFooter>
+        <SettingsForm
+          data={combinedData}
+          setDirtyData={(partialData) => {
+            setDirtyData({ ...dirtyData, ...partialData });
+          }}
+        />
+        <DialogFooter className="flex flex-row sm:flex-row justify-between sm:justify-between">
           <Button
             variant="outline"
             disabled={isButtonsDisabled}
             onClick={() => {
-              const loc = window.location;
-              const params = getNewParams(combinedData);
-              window.open(
-                `${loc.origin}${loc.pathname}?${params.toString()}`,
-                "_blank"
-              );
               setDirtyData({});
-              toast({ title: "Create new timer" });
             }}
           >
-            Create new
-          </Button>
-          <Button
-            disabled={isButtonsDisabled}
-            onClick={() => {
-              setData(dirtyData);
-              setDirtyData({});
-              toast({ title: "Updating current timer" });
-            }}
-          >
-            Update
+            Reset form
           </Button>
+          <div className="flex gap-x-4">
+            <Button
+              variant="outline"
+              disabled={isButtonsDisabled}
+              onClick={() => {
+                const loc = window.location;
+                const params = getNewParams(combinedData);
+                window.open(
+                  `${loc.origin}${loc.pathname}?${params.toString()}`,
+                  "_blank"
+                );
+                setDirtyData({});
+                toast({ title: "Create new timer" });
+              }}
+            >
+              Create new
+            </Button>
+            <Button
+              disabled={isButtonsDisabled}
+              onClick={() => {
+                setData(dirtyData);
+                setDirtyData({});
+                toast({ title: "Updating current timer" });
+              }}
+            >
+              Update
+            </Button>
+          </div>
         </DialogFooter>
       </DialogContent>
     </Dialog>