mosh-hamedani#3

Author: Chaffychaf007

src/App.tsx

@@ -1,15 +1,30 @@
+import { useReducer } from "react";
 import "./App.css";
 import TodoForm from "./react-query/TodoForm";
 import TodoList from "./react-query/TodoList";
+import Counter from "./state-management/Counter";
+import LoginStatus from "./state-management/LoginStatus";
+import TaskList from "./state-management/TaskList";
+import tasksReducer from "./state-management/reducers/tasksReducer";
+import NavBar from "./state-management/NavBar";
+import HomePage from "./state-management/HomePage";
+import TasksContext from "./state-management/contexts/tasksContext";
+import authReducer from "./state-management/reducers/authReducer";
+import AuthContext from "./state-management/contexts/authContext";
 
 
 function App() {
+  const [tasks, tasksDispatch] = useReducer(tasksReducer, []);
+  const [user, authDispatch] = useReducer(authReducer, '');
+  
   return (
-    <>
-  <TodoForm />
-  <TodoList />
-  </>
-  )
+  <AuthContext.Provider value={{ user, dispatch: authDispatch }}>
+    <TasksContext.Provider value={{ tasks, dispatch: tasksDispatch }}>
+      <NavBar />
+      <HomePage />
+    </TasksContext.Provider>
+  </AuthContext.Provider>
+  );
 }
 
 export default App;

src/state-management/Counter.tsx

@@ -1,19 +1,21 @@
-import { useState } from 'react';
+import { useReducer, useState } from 'react';
+import counterReducer from './reducers/counterReducer';
 
 const Counter = () => {
-  const [value, setValue] = useState(0);
+  
+  const [value, dispatch] = useReducer(counterReducer, 0);
 
   return (
     <div>
       Counter ({value})
       <button
-        onClick={() => setValue(value + 1)}
+        onClick={() => dispatch({ type: 'INCREMENT' })}
         className="btn btn-primary mx-1"
       >
         Increment
       </button>
       <button
-        onClick={() => setValue(0)}
+        onClick={() => dispatch({ type: 'RESET' })}
         className="btn btn-primary mx-1"
       >
         Reset

src/state-management/LoginStatus.tsx

@@ -1,22 +1,24 @@
-import { useState } from "react";
+import { useContext, useReducer, useState } from "react";
+import authReducer from "./reducers/authReducer";
+import AuthContext from "./contexts/authContext";
 
 const LoginStatus = () => {
-  const [user, setUser] = useState('');
+  const {user, dispatch} = useContext(AuthContext);
 
   if (user)
     return (
       <>
         <div>
           <span className="mx-2">{user}</span>
-          <a onClick={() => setUser('')} href="#">
+          <a onClick={() => dispatch({ type: 'LOGOUT'})} href="#">
             Logout
           </a>
         </div>
       </>
     );
   return (
     <div>
-      <a onClick={() => setUser('mosh.hamedani')} href="#">
+      <a onClick={() => dispatch({ type: 'LOGIN', username: 'raf.avetisov'})} href="#">
         Login
       </a>
     </div>

src/state-management/NavBar.tsx

@@ -1,9 +1,14 @@
+import { useContext } from 'react';
 import LoginStatus from './LoginStatus';
+import TasksContext from './contexts/tasksContext';
 
 const NavBar = () => {
+
+  const {tasks} = useContext(TasksContext);
+
   return (
     <nav className="navbar d-flex justify-content-between">
-      <span className="badge text-bg-secondary">4</span>
+      <span className="badge text-bg-secondary">{tasks.length}</span>
       <LoginStatus />
     </nav>
   );

src/state-management/TaskList.tsx

@@ -1,22 +1,25 @@
-import { useState } from 'react';
-
-interface Task {
-  id: number;
-  title: string;
-}
+import { useContext, useReducer, useState } from 'react';
+import tasksReducer from './reducers/tasksReducer';
+import TasksContext from './contexts/tasksContext';
+import AuthContext from './contexts/authContext';
 
 const TaskList = () => {
-  const [tasks, setTasks] = useState<Task[]>([]);
-
+  const { tasks, dispatch } = useContext(TasksContext);
+  const {user} = useContext(AuthContext);
   return (
     <>
+      <p>User: {user}</p>
       <button
         onClick={() =>
-          setTasks([
-            { id: Date.now(), title: 'Task ' + Date.now() },
-            ...tasks,
-          ])
+          dispatch({ 
+            type: 'ADD', 
+            task: { 
+              id: Date.now(), 
+              title: 'Task ' + Date.now()
+            }
+          })
         }
+        
         className="btn btn-primary my-3"
       >
         Add Task
@@ -31,7 +34,10 @@ const TaskList = () => {
             <button
               className="btn btn-outline-danger"
               onClick={() =>
-                setTasks(tasks.filter((t) => t.id !== task.id))
+                dispatch({ 
+                  type: 'DELETE', 
+                  taskId: task.id
+                })
               }
             >
               Delete

src/state-management/contexts/authContext.ts

@@ -0,0 +1,12 @@
+import { Dispatch } from "react";
+import { AuthAction } from "../reducers/authReducer";
+import React from "react";
+
+interface AuthContextType {
+    user: string;
+    dispatch: Dispatch<AuthAction>;
+}
+
+const AuthContext = React.createContext<AuthContextType>({} as AuthContextType);
+
+export default AuthContext;

src/state-management/contexts/tasksContext.ts

@@ -0,0 +1,12 @@
+import { Dispatch } from "react";
+import { Task, TaskAction } from "../reducers/tasksReducer";
+import React from "react";
+
+interface TasksContextType {
+    tasks: Task[];
+    dispatch: Dispatch<TaskAction>;
+}
+
+const TasksContext = React.createContext<TasksContextType>({} as TasksContextType);
+
+export default TasksContext;

src/state-management/reducers/authReducer.ts

@@ -0,0 +1,19 @@
+
+interface LoginAction {
+    type: 'LOGIN';
+    username: string;
+}
+
+interface LogoutAction {
+    type: 'LOGOUT';
+}
+
+export type AuthAction = LoginAction | LogoutAction;
+
+const authReducer = (state: string, action: AuthAction): string => {
+    if (action.type === 'LOGIN') return action.username;
+    if (action.type === 'LOGOUT') return '';
+    return state;
+}
+
+export default authReducer;

src/state-management/reducers/counterReducer.ts

@@ -0,0 +1,12 @@
+
+interface Action {
+    type: 'INCREMENT' | 'RESET';
+}
+
+const counterReducer = (state: number, action: Action) => {
+    if (action.type === 'INCREMENT') return state + 1;
+    if (action.type === 'RESET') return 0;
+    return state;
+}
+
+export default counterReducer;

src/state-management/reducers/tasksReducer.ts

@@ -0,0 +1,28 @@
+
+export interface Task {
+    id: number;
+    title: string;
+  }
+
+interface AddTask {
+    type: 'ADD';
+    task: Task;
+}
+
+interface DeleteTask {
+    type: 'DELETE';
+    taskId: number;
+}
+
+export type TaskAction = AddTask | DeleteTask;
+
+const tasksReducer = (tasks: Task[], action: TaskAction): Task[] => {
+    switch (action.type) {
+        case 'ADD':
+            return [action.task, ...tasks];
+        case 'DELETE':
+            return tasks.filter(t=> t.id !== action.taskId);
+    }
+}
+
+export default tasksReducer;