Merge pull request #3 from Minky1703/main

useReducer n useState hook

Author: bharatpaliwal-169

src/App.tsx

@@ -6,6 +6,8 @@ import { Child1 } from './components/Childs/Child1';
 import { Click } from './components/Events/click';
 import { Input } from './components/Events/Input';
 import { Login } from './components/Hooks/Login';
+import { User } from './components/Hooks/User';
+import {Counter} from './components/Hooks/Counter'
 const App =() => {
   return (
     <>
@@ -21,6 +23,10 @@ const App =() => {
       <Input value='' handleChange={(event)=> console.log('Input event',event) } />
       <h1>HOOKS</h1>
       <Login />
+      <h2>User : usestate adv</h2>
+      <User />
+      <h1>Reducer Hook</h1>
+      <Counter />
     </>
   );
 }

src/components/Hooks/Counter.tsx

@@ -0,0 +1,39 @@
+import {useReducer} from 'react'
+
+type CounterState={
+  count: number
+}
+type CounterAction={
+  type: string
+  payload: number
+}
+const initialState = {
+  count : 0
+}
+
+function reducer(state:CounterState,action:CounterAction){
+  switch(action.type){
+    case 'increment':
+      return {count: state.count + action.payload}
+    case 'decrement':
+      return {count: state.count - action.payload}
+    default:
+      return state;
+  }
+}
+export const Counter = () => {
+  const [state,dispatch] = useReducer(reducer,initialState);
+
+  return (
+    <>
+      <h1>Counter</h1>
+      Count : {state.count}
+      <button onClick={() => dispatch({type: 'increment', payload: 10})}>
+        INC
+      </button>
+      <button onClick={() => dispatch({type: 'decrement', payload: 10})}>
+        DEC
+      </button>
+    </>
+  )
+}

src/components/Hooks/User.tsx

@@ -0,0 +1,39 @@
+import {useState} from 'react'
+
+type AuthUser = {
+  name : string,
+  email : string,
+}
+type dummyUser = {
+  name : string,
+  email : string,
+}
+export const User = () => {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [test,setTest] = useState<dummyUser>({} as dummyUser);
+
+  const logout = () => {
+    setUser(null);
+    setTest({} as dummyUser);
+  }
+  const login = () => {
+    setUser({
+      name: 'John Doe',
+      email: 'Joe@something.com'
+    })
+
+    setTest({
+      name: 'John Doe',
+      email: 'sdfsd'
+    })
+  }
+  return (
+    <>
+      <div>User</div>
+      <button onClick={login}>Login</button>
+      <div>{user?.email} : {user?.name}</div>
+      <p> {test.email} : {test.name} </p>
+      <button onClick={logout} >Logout</button>
+    </>
+  )
+}