fix: fix settings page

Author: debater-coder

src/routes/Main/Settings/General.tsx

@@ -17,6 +17,7 @@ import {
   Button,
 } from "@chakra-ui/react";
 import { Check } from "phosphor-react";
+import { useState } from "react";
 import { useSettingsStore } from "../../../stores/settings";
 
 const PrimaryColour = (props: UseRadioProps) => {
@@ -69,7 +70,10 @@ const ColourPicker = ({
   onChange: (nextValue: string) => void;
 }) => {
   const { getRootProps, getRadioProps } = useRadioGroup({
-    onChange,
+    onChange: (value) => {
+      onChange(value);
+      console.log(value);
+    },
     value,
   });
 
@@ -93,16 +97,16 @@ export default () => {
     expanded,
     hoverExpand,
     showTimesInsteadOfRooms,
-    actions: {
-      setPrimary,
-      setExpanded,
-      setPeriodColours,
-      setHoverExpand,
-      setShowTimesInsteadOfRooms,
-      reset,
-    },
+    setPrimary,
+    setExpanded,
+    setPeriodColours,
+    setHoverExpand,
+    setShowTimesInsteadOfRooms,
+    reset,
   } = useSettingsStore();
 
+  const [deleting, setDeleting] = useState(false);
+
   return (
     <>
       <Heading size={"md"} fontFamily={"Poppins, sans-serif"}>
@@ -162,7 +166,22 @@ export default () => {
         Recovery
       </Heading>
       <FormControl display="flex">
-        <Button onClick={reset}>Reset all settings</Button>
+        <Button
+          colorScheme={deleting ? "red" : undefined}
+          variant={deleting ? "outline" : undefined}
+          onClick={() => {
+            if (!deleting) {
+              setDeleting(true);
+              navigator.vibrate(20);
+            } else {
+              reset();
+              setDeleting(false);
+              navigator.vibrate(100);
+            }
+          }}
+        >
+          {deleting ? "Are you sure?" : "Reset all settings"}
+        </Button>
       </FormControl>
     </>
   );

src/stores/settings/settings.ts

@@ -17,34 +17,32 @@ export type SettingsState = {
   periodColours: "default" | "primary" | "none";
   hoverExpand: boolean;
   showTimesInsteadOfRooms: boolean;
-  actions: Actions;
 };
 
-export const initialState: Omit<SettingsState, "actions"> = {
+export const initialState: SettingsState = {
   primary: "blue",
   expanded: false,
   periodColours: "default",
   hoverExpand: false,
   showTimesInsteadOfRooms: false,
 };
 
-export const useSettingsStore = create<SettingsState>()(
+export const useSettingsStore = create<SettingsState & Actions>()(
   devtools(
     persist(
-      (set): SettingsState => ({
+      (set): SettingsState & Actions => ({
         ...initialState,
-        actions: {
-          setPrimary: (primary) => set({ primary }),
-          setExpanded: (expanded) => set({ expanded }),
-          setPeriodColours: (periodColours) => set({ periodColours }),
-          setHoverExpand: (hoverExpand) => set({ hoverExpand }),
-          setShowTimesInsteadOfRooms: (showTimesInsteadOfRooms) =>
-            set({ showTimesInsteadOfRooms }),
-          reset: () => set(initialState),
-        },
+        setPrimary: (primary) => set({ primary }),
+        setExpanded: (expanded) => set({ expanded }),
+        setPeriodColours: (periodColours) => set({ periodColours }),
+        setHoverExpand: (hoverExpand) => set({ hoverExpand }),
+        setShowTimesInsteadOfRooms: (showTimesInsteadOfRooms) =>
+          set({ showTimesInsteadOfRooms }),
+        reset: () => set(initialState),
       }),
       {
         name: "settings-storage",
+        version: 1,
       }
     )
   )