Feat/add mock login

src/App.js

@@ -1,13 +1,26 @@
+import { useState, useEffect } from 'react';
+
 import Loading from './components/Loading';
 import Error from './components/Error';
 import TaskList from './components/TaskList';
+import Header from './components/Header';
 
 import { useFetch } from './hooks/useFetch';
+import { useAuth } from './providers/Auth';
 
 const App = () => {
-  const [state, tasks, update, add] = useFetch(
-    process.env.REACT_APP_API_ENDPOINT,
-  );
+  const { currentUser } = useAuth();
+  const [url, setUrl] = useState();
+  const [state, tasks, update, add] = useFetch(url);
+
+  useEffect(() => {
+    if (!currentUser) {
+      setUrl(undefined);
+      return;
+    }
+
+    setUrl(`${process.env.REACT_APP_API_ENDPOINT}?userId=${currentUser}`);
+  }, [currentUser]);
 
   const updateTask = (task) => {
     update(task.id, task);
@@ -19,7 +32,7 @@ const App = () => {
 
   return (
     <>
-      <h1>TODO List</h1>
+      <Header />
       {state === 'PENDING' && <Loading />}
       {state === 'SUCCESS' && (
         <TaskList tasks={tasks} updateTask={updateTask} addTask={addTask} />

src/components/Header.js

@@ -0,0 +1,16 @@
+import SignIn from './SignIn';
+import SignOut from './SignOut';
+
+import { useAuth } from '../providers/Auth';
+
+const Header = () => {
+  const { currentUser } = useAuth();
+  return (
+    <header>
+      <h1>TODO List</h1>
+      {currentUser ? <SignOut /> : <SignIn />}
+    </header>
+  );
+};
+
+export default Header;

src/components/SignIn.js

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+import { useInput } from '../hooks/useInput';
+import { useAuth } from '../providers/Auth';
+
+const SignIn = () => {
+  const { signIn } = useAuth();
+  const [error, setError] = useState();
+  const [{ username, password }, update, reset] = useInput({
+    username: '',
+    password: '',
+  });
+
+  const handleInputChange = (event) => {
+    update(event);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const signedIn = signIn(username, password);
+
+    if (signedIn) {
+      setError(undefined);
+      reset();
+    } else {
+      setError('user or password incorrect');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        name="username"
+        value={username}
+        onChange={handleInputChange}
+      />
+      <input
+        type="password"
+        name="password"
+        value={password}
+        onChange={handleInputChange}
+      />
+      <button type="submit" onClick={handleSubmit}>
+        submit
+      </button>
+      {error && <p>{error}</p>}
+    </form>
+  );
+};
+
+export default SignIn;

src/components/SignOut.js

@@ -0,0 +1,13 @@
+import { useAuth } from '../providers/Auth';
+
+const SignOut = () => {
+  const { signOut } = useAuth();
+
+  const handleButtonClick = () => {
+    signOut();
+  };
+
+  return <button onClick={handleButtonClick}>Sign Out</button>;
+};
+
+export default SignOut;

src/hooks/useFetch.js

@@ -6,6 +6,8 @@ export const useFetch = (url) => {
 
   useEffect(() => {
     if (!url) {
+      setRequestState('INITIAL');
+      setRequestResponse(undefined);
       return;
     }
 

src/index.js

@@ -2,10 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import { AuthProvider } from './providers/Auth';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <AuthProvider>
+      <App />
+    </AuthProvider>
   </React.StrictMode>,
   document.getElementById('root'),
 );

src/providers/Auth.js

@@ -0,0 +1,33 @@
+import { useState, createContext, useContext } from 'react';
+
+const AuthContext = createContext();
+
+export const useAuth = () => useContext(AuthContext);
+
+export const AuthProvider = ({ children }) => {
+  const [currentUser, setCurrentUser] = useState();
+
+  const signIn = (username, password) => {
+    // mock login logic
+    if (
+      username &&
+      username == password &&
+      !isNaN(username) &&
+      username > 0 &&
+      username < 5
+    ) {
+      setCurrentUser(username);
+      return true;
+    }
+
+    return false;
+  };
+
+  const signOut = () => {
+    setCurrentUser(null);
+  };
+
+  const value = { currentUser, signIn, signOut };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};