finish demo

hswolff · May 18, 2019 · 0ffbaa5 · 0ffbaa5
1 parent d44a6d5
commit 0ffbaa5
Showing 1 changed file with 71 additions and 53 deletions.
diff --git a/videos/why-i-love-usereducer/src/LoginWithContext.js b/videos/why-i-love-usereducer/src/LoginWithContext.js
@@ -1,4 +1,4 @@
-import React, { useReducer } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useImmerReducer } from 'use-immer';
 import { login } from './utils';
 
@@ -66,6 +66,9 @@ const initialState = {
   todos,
 };
 
+const StateContext = React.createContext();
+const DispatchContext = React.createContext();
+
 export default function LoginUseContext() {
   const [state, dispatch] = useImmerReducer(loginReducer, initialState);
   const { username, password, isLoading, error, isLoggedIn, todos } = state;
@@ -84,78 +87,93 @@ export default function LoginUseContext() {
   };
 
   return (
-    <div className="App useContext">
-      <div className="login-container">
-        {isLoggedIn ? (
-          <>
-            <h1>Welcome {username}!</h1>
-            <button onClick={() => dispatch({ type: 'logOut' })}>
-              Log Out
-            </button>
-          </>
-        ) : (
-          <form className="form" onSubmit={onSubmit}>
-            {error && <p className="error">{error}</p>}
-            <p>Please Login!</p>
-            <input
-              type="text"
-              placeholder="username"
-              value={username}
-              onChange={e =>
-                dispatch({
-                  type: 'field',
-                  fieldName: 'username',
-                  payload: e.currentTarget.value,
-                })
-              }
-            />
-            <input
-              type="password"
-              placeholder="password"
-              autoComplete="new-password"
-              value={password}
-              onChange={e =>
-                dispatch({
-                  type: 'field',
-                  fieldName: 'password',
-                  payload: e.currentTarget.value,
-                })
-              }
-            />
-            <button className="submit" type="submit" disabled={isLoading}>
-              {isLoading ? 'Logging in...' : 'Log In'}
-            </button>
-          </form>
-        )}
-      </div>
+    <DispatchContext.Provider value={dispatch}>
+      <StateContext.Provider value={state}>
+        <div className="App useContext">
+          <div className="login-container">
+            {isLoggedIn ? (
+              <>
+                <h1>Welcome {username}!</h1>
+                <button onClick={() => dispatch({ type: 'logOut' })}>
+                  Log Out
+                </button>
+              </>
+            ) : (
+              <form className="form" onSubmit={onSubmit}>
+                {error && <p className="error">{error}</p>}
+                <p>Please Login!</p>
+                <input
+                  type="text"
+                  placeholder="username"
+                  value={username}
+                  onChange={e =>
+                    dispatch({
+                      type: 'field',
+                      fieldName: 'username',
+                      payload: e.currentTarget.value,
+                    })
+                  }
+                />
+                <input
+                  type="password"
+                  placeholder="password"
+                  autoComplete="new-password"
+                  value={password}
+                  onChange={e =>
+                    dispatch({
+                      type: 'field',
+                      fieldName: 'password',
+                      payload: e.currentTarget.value,
+                    })
+                  }
+                />
+                <button className="submit" type="submit" disabled={isLoading}>
+                  {isLoading ? 'Logging in...' : 'Log In'}
+                </button>
+              </form>
+            )}
+          </div>
 
-      <TodoPage todos={todos} dispatch={dispatch} />
-    </div>
+          <TodoPage todos={todos} />
+        </div>
+      </StateContext.Provider>
+    </DispatchContext.Provider>
   );
 }
 
-function TodoPage({ todos, dispatch }) {
+function TodoPage({ todos }) {
   return (
     <div className="todoContainer">
       <h2>Todos</h2>
       {todos.map(item => (
-        <TodoItem key={item.title} dispatch={dispatch} {...item} />
+        <TodoItem key={item.title} {...item} />
       ))}
     </div>
   );
 }
 
-function TodoItem({ title, completed, dispatch }) {
+function TodoItem({ title, completed }) {
+  const dispatch = useContext(DispatchContext);
+  const state = useContext(StateContext);
+  // const { isLoggedIn } = state;
+  const isLoggedIn = true;
   return (
     <div className="todoItem">
       <p>{title}</p>
       <div>
         <input
           type="checkbox"
           checked={completed}
-          onChange={() =>
-            dispatch({ type: 'toggleTodoCompleted', payload: title })
-          }
+          onClick={() => {
+            if (!isLoggedIn) {
+              alert('Please login to click this!');
+            }
+          }}
+          onChange={() => {
+            if (isLoggedIn) {
+              dispatch({ type: 'toggleTodoCompleted', payload: title });
+            }
+          }}
         />
       </div>
     </div>