("/todos");
diff --git a/src/state-management/Counter.tsx b/src/state-management/Counter.tsx
deleted file mode 100644
index d95731c7..00000000
--- a/src/state-management/Counter.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useState } from 'react';
-
-const Counter = () => {
- const [value, setValue] = useState(0);
-
- return (
-
- Counter ({value})
-
-
-
- );
-};
-
-export default Counter;
diff --git a/src/state-management/HomePage.tsx b/src/state-management/HomePage.tsx
index f60556d5..4fca4413 100644
--- a/src/state-management/HomePage.tsx
+++ b/src/state-management/HomePage.tsx
@@ -1,4 +1,4 @@
-import TaskList from './TaskList';
+import TaskList from "./tasks/TaskList";
const HomePage = () => {
return ;
diff --git a/src/state-management/NavBar.tsx b/src/state-management/NavBar.tsx
index d30f48f8..f87d6025 100644
--- a/src/state-management/NavBar.tsx
+++ b/src/state-management/NavBar.tsx
@@ -1,9 +1,15 @@
-import LoginStatus from './LoginStatus';
+import { useContext } from "react";
+import LoginStatus from "./auth/LoginStatus";
+import TasksContext from "./tasks/taskContexts";
+import useCounterStore from "./counter/store";
const NavBar = () => {
+ const { tasks } = useContext(TasksContext);
+ const counter = useCounterStore((s) => s.counter);
+ console.log("Render NavBar");
return (
);
diff --git a/src/state-management/LoginStatus.tsx b/src/state-management/auth/LoginStatus.tsx
similarity index 59%
rename from src/state-management/LoginStatus.tsx
rename to src/state-management/auth/LoginStatus.tsx
index e7ee0335..a8e5c3f4 100644
--- a/src/state-management/LoginStatus.tsx
+++ b/src/state-management/auth/LoginStatus.tsx
@@ -1,14 +1,14 @@
-import { useState } from "react";
+import useAuthStore from "./store";
const LoginStatus = () => {
- const [user, setUser] = useState('');
+ const { user, login, logout } = useAuthStore();
if (user)
return (
<>
@@ -16,7 +16,7 @@ const LoginStatus = () => {
);
return (
diff --git a/src/state-management/auth/store.ts b/src/state-management/auth/store.ts
new file mode 100644
index 00000000..87edf455
--- /dev/null
+++ b/src/state-management/auth/store.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface AuthStore {
+ user: string;
+ login: (username: string) => void;
+ logout: () => void;
+}
+
+const useAuthStore = create((set) => ({
+ user: "",
+ login: (username) => set(() => ({ user: username })),
+ logout: () => set(() => ({ user: "" })),
+}));
+
+export default useAuthStore;
diff --git a/src/state-management/counter/Counter.tsx b/src/state-management/counter/Counter.tsx
new file mode 100644
index 00000000..4b64cd3a
--- /dev/null
+++ b/src/state-management/counter/Counter.tsx
@@ -0,0 +1,19 @@
+import useCounterStore from "./store";
+
+const Counter = () => {
+ const { counter, increment, reset } = useCounterStore();
+
+ return (
+
+ Counter ({counter})
+
+
+
+ );
+};
+
+export default Counter;
diff --git a/src/state-management/counter/store.ts b/src/state-management/counter/store.ts
new file mode 100644
index 00000000..84b71250
--- /dev/null
+++ b/src/state-management/counter/store.ts
@@ -0,0 +1,21 @@
+import { mountStoreDevtool } from "simple-zustand-devtools";
+import { create } from "zustand";
+
+interface CounterStore {
+ counter: number;
+ max: number;
+ increment: () => void;
+ reset: () => void;
+}
+
+const useCounterStore = create((set) => ({
+ counter: 0,
+ max: 5,
+ increment: () => set((store) => ({ counter: store.counter + 1 })),
+ reset: () => set(() => ({ max: 10 })),
+}));
+
+if (process.env.NODE_ENV === "development")
+ mountStoreDevtool("Counter Store", useCounterStore);
+
+export default useCounterStore;
diff --git a/src/state-management/TaskList.tsx b/src/state-management/tasks/TaskList.tsx
similarity index 57%
rename from src/state-management/TaskList.tsx
rename to src/state-management/tasks/TaskList.tsx
index c4fdf79a..f78ee9ab 100644
--- a/src/state-management/TaskList.tsx
+++ b/src/state-management/tasks/TaskList.tsx
@@ -1,21 +1,22 @@
-import { useState } from 'react';
+import { useContext } from "react";
+import TasksContext from "./taskContexts";
+import useAuthStore from "../auth/store";
-interface Task {
- id: number;
- title: string;
-}
+const useTask = () => useContext(TasksContext);
const TaskList = () => {
- const [tasks, setTasks] = useState([]);
+ const { tasks, dispatch } = useTask();
+ const { user } = useAuthStore();
return (
<>
+ User: {user}