wow

package.json

@@ -13,26 +13,26 @@
     "immer": "^10.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.9.0",
+    "react-icons": "^4.10.1",
     "react-tiny-popover": "^7.2.4",
-    "zustand": "^4.3.8"
+    "zustand": "^4.3.9"
   },
   "devDependencies": {
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react-swc": "^3.0.0",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.38.0",
+    "eslint": "^8.44.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-react-refresh": "^0.4.1",
     "postcss": "^8.4.24",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.2",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.3.2",
-    "typescript": "^5.0.2",
+    "typescript": "^5.1.6",
     "vite": "^4.3.9"
   }
 }

src/store/ClockStore.ts

@@ -0,0 +1,150 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+import { moneyTime, randomId } from "../utils";
+import { OverviewStore } from "./xOverviewStore";
+
+export type Clock = {
+  id: string;
+  name: string;
+  timerOn: boolean;
+  timerStart: number;
+  timerTime: number;
+  money: number;
+  moneyHour: string;
+};
+
+type ClockStore = {
+  clockList: Clock[];
+  startClock: (id: string) => void;
+  stopClock: (id: string) => void;
+  deleteClock: (id: string) => void;
+  createClock: () => void;
+  updateClock: (id: string) => void;
+  resetClock: (id: string) => void;
+  updateClockTime: (id: string, time: number) => void;
+  changeName: (id: string, name: string) => void;
+  changeMoneyHour: (id: string, moneyHour: string) => void;
+  stopResetClocks: () => void;
+  stopClocks: () => void;
+};
+
+export const ClockStore = create<ClockStore>()(
+  immer<ClockStore>((set) => ({
+    clockList: [
+      {
+        id: randomId(),
+        name: "",
+        timerOn: false,
+        timerStart: 0,
+        timerTime: 0,
+        money: 0,
+        moneyHour: "180",
+      },
+    ],
+    startClock: (id) =>
+      set((state) => {
+        const { clockList } = state;
+        const i = clockList.findIndex((clock) => clock.id === id);
+        clockList[i].timerOn = true;
+        clockList[i].timerStart = Date.now() - clockList[i].timerTime;
+      }),
+    stopClock: (id) =>
+      set((state) => {
+        const { clockList } = state;
+        const i = clockList.findIndex((clock) => clock.id === id);
+        clockList[i].timerOn = false;
+      }),
+    deleteClock: (id) =>
+      set((state) => {
+        const i = state.clockList.findIndex((clock) => clock.id === id);
+        state.clockList.splice(i, 1);
+      }),
+    createClock: () =>
+      set((state) => {
+        state.clockList.push({
+          id: randomId(),
+          name: "",
+          timerOn: false,
+          timerStart: 0,
+          timerTime: 0,
+          money: 0,
+          moneyHour: "180",
+        });
+      }),
+    updateClock: (id) =>
+      set((state) => {
+        const { clockList } = state;
+        const i = clockList.findIndex((clock) => clock.id === id);
+        const money = moneyTime(clockList[i].timerTime, clockList[i].moneyHour);
+
+        clockList[i].money = money;
+        clockList[i].timerTime = Date.now() - clockList[i].timerStart;
+
+        OverviewStore.getState().updateMoneyList(clockList[i].id, money);
+      }),
+    updateClockTime: (id, time) => {
+      const clock = ClockStore.getState().clockList.find(
+        (clock) => clock.id === id
+      );
+      const clockTimerOn = clock?.timerOn ? true : false;
+
+      ClockStore.getState().stopClock(id);
+      OverviewStore.getState().stopOverviewClock();
+
+      set((state) => {
+        const { clockList } = state;
+        const i = clockList.findIndex((clock) => clock.id === id);
+
+        if (clockList[i].timerTime + time >= 0) {
+          clockList[i].timerTime += time;
+        } else {
+          clockList[i].timerTime = 0;
+        }
+
+        clockList[i].money = moneyTime(
+          clockList[i].timerTime,
+          clockList[i].moneyHour
+        );
+        OverviewStore.getState().updateMoneyList(id, clockList[i].money);
+      });
+      if (clockTimerOn) {
+        ClockStore.getState().startClock(id);
+        OverviewStore.getState().startOverviewClock();
+      }
+    },
+    resetClock: (id) =>
+      set((state) => {
+        const { clockList } = state;
+        const i = clockList.findIndex((clock) => clock.id === id);
+        clockList[i].money = 0;
+        clockList[i].timerTime = 0;
+        OverviewStore.getState().updateMoneyList(id, clockList[i].money);
+      }),
+    changeName: (id, name) =>
+      set((state) => {
+        const i = state.clockList.findIndex((clock) => clock.id === id);
+        state.clockList[i].name = name;
+      }),
+    changeMoneyHour: (id, moneyHour) =>
+      set((state) => {
+        const i = state.clockList.findIndex((clock) => clock.id === id);
+        state.clockList[i].moneyHour = moneyHour;
+      }),
+    stopResetClocks: () =>
+      set((state) => {
+        state.clockList.map((clock) => {
+          clock.timerOn = false;
+          clock.money = 0;
+          clock.timerTime = 0;
+          return clock;
+        });
+      }),
+    stopClocks: () =>
+      set((state) => {
+        state.clockList.map((clock) => {
+          clock.timerOn = false;
+          return clock;
+        });
+      }),
+  }))
+);