Refactoring for separation of concerns

package.json

@@ -50,7 +50,8 @@
     "react-hook-form": "7.23.0",
     "react-i18next": "11.15.3",
     "react-query": "3.34.8",
-    "wouter": "2.8.0-alpha.2"
+    "wouter": "2.8.0-alpha.2",
+    "zustand": "3.7.1"
   },
   "msw": {
     "workerDirectory": "public"

src/components/molecules/Header.tsx

@@ -42,6 +42,7 @@ export const Header = ({ title, useAuth = _useAuth }: Props) => {
           {isLoggedIn ? (
             <>
               <Button size="small" to="/count" label="Count" />
+              <Button size="small" to="/count_with_history" label="Undo/Redo" />
               <Button size="small" onClick={logout} label="Logout" />
             </>
           ) : null}

src/pages/StateHistoryCount.tsx

@@ -0,0 +1,58 @@
+import { useCountStore } from "@/stores/countStore";
+
+const Count = () => {
+  const count = useCountStore((state) => state.curr);
+  return <p>You clicked {count}</p>;
+};
+
+const UndoCountButton: React.FC = () => {
+  const undo = useCountStore((state) => state.undo);
+  const hasPrev = useCountStore((state) => state.hasPrev());
+
+  return (
+    <button onClick={undo} disabled={!hasPrev}>
+      undo
+    </button>
+  );
+};
+
+const RedoCountButton: React.FC = () => {
+  const redo = useCountStore((state) => state.redo);
+  const hasNext = useCountStore((state) => state.hasNext());
+
+  return (
+    <button onClick={redo} disabled={!hasNext}>
+      redo
+    </button>
+  );
+};
+
+const SetCountButton: React.FC = ({}) => {
+  const getCount = useCountStore((state) => state.getCurr);
+  const set = useCountStore((state) => state.set);
+
+  return (
+    <>
+      <button onClick={() => set(getCount() - 1)}>-</button>
+      <button onClick={() => set(getCount() + 1)}>+</button>
+    </>
+  );
+};
+
+const ResetCountButton: React.FC = ({}) => {
+  const reset = useCountStore((state) => state.reset);
+
+  return <button onClick={() => reset(0)}>reset to 0</button>;
+};
+
+const StateHistoryCount = () => (
+  <>
+    <Count />
+    <SetCountButton />
+    <UndoCountButton />
+    <RedoCountButton />
+    <ResetCountButton />
+  </>
+);
+
+export default StateHistoryCount;

src/routes.tsx

@@ -12,6 +12,7 @@ const Login = lazy(() => import("@/pages/Login"));
 const Profile = lazy(() => import("@/pages/Profile"));
 const NotFound = lazy(() => import("@/pages/NotFound"));
 const SharedStateCount = lazy(() => import("@/pages/SharedStateCount"));
+const StateHistoryCount = lazy(() => import("@/pages/StateHistoryCount"));
 
 // TODO
 // RestrictAccess.tsx
@@ -68,6 +69,9 @@ export const Routes = () => {
           <PrivateRoute path="/count">
             <SharedStateCount />
           </PrivateRoute>
+          <PrivateRoute path="/count_with_history">
+            <StateHistoryCount />
+          </PrivateRoute>
           <Route>
             <NotFound />
           </Route>

src/stores/countStore.ts

@@ -0,0 +1,55 @@
+import create from "zustand";
+
+type State = { prev: number[]; curr: number; next: number[] };
+
+type Selectors = {
+  getCurr: () => State["curr"];
+  hasPrev: () => boolean;
+  hasNext: () => boolean;
+};
+
+type Actions = {
+  undo: () => void;
+  redo: () => void;
+  set: (value: State["curr"]) => void;
+  reset: (value: State["curr"]) => void;
+};
+
+type Store = State & Selectors & Actions;
+export const useCountStore = create<Store>((set, get) => ({
+  // state
+  prev: [],
+  curr: 0,
+  next: [],
+
+  // selectors
+  getCurr: () => get().curr,
+  hasPrev: () => get().prev.length > 0,
+  hasNext: () => get().next.length > 0,
+
+  // actions
+  undo: () =>
+    set((state) => ({
+      prev: state.prev.slice(0, state.prev.length - 1),
+      curr: state.prev[state.prev.length - 1],
+      next: [state.curr, ...state.next],
+    })),
+  redo: () =>
+    set((state) => ({
+      prev: [...state.prev, state.curr],
+      curr: state.next[0],
+      next: state.next.slice(1),
+    })),
+  set: (newCurr) =>
+    set((state) => ({
+      prev: [...state.prev, state.curr],
+      curr: newCurr,
+      next: [],
+    })),
+  reset: (newCurr) =>
+    set({
+      prev: [],
+      curr: newCurr,
+      next: [],
+    }),
+}));

src/types/path.ts

@@ -5,4 +5,5 @@ export type Path =
   | "/home"
   | "/profile"
   | "/count"
-  | "/setcount";
+  | "/setcount"
+  | "/count_with_history";

yarn.lock

@@ -12176,6 +12176,11 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zustand@3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.1.tgz#7388f0a7175a6c2fd9a2880b383a4bf6cdf6b7c6"
+  integrity sha512-wHBCZlKj+bg03/hP+Tzv24YhnqqP8MCeN9ECPDXoF01062SIbnfl3j9O0znkDw1lNTY0a8WN3F///a0UhhaEqg==
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"