4 files changed, 69 insertions, 20 deletions

diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx
index 59389ad..02ebe38 100644
--- a/client/components/home/_home.jsx
+++ b/client/components/home/_home.jsx
@@ -1,3 +1,23 @@
+import { useContext } from 'react';
+import { SettingsContext } from '../../utils/settings_context';
+
 export const Home = () => {
-  return <div>I am the home page</div>;
+  const [, dispatch] = useContext(SettingsContext);
+  const logout = async () => {
+    const res = await fetch('/sessions', {
+      method: 'DELETE',
+    });
+    if (res.status === 200) {
+      dispatch({ type: 'update', payload: { jwt: undefined } });
+    }
+  };
+
+  return (
+    <div>
+      <h1>Welcome</h1>
+      <button type="button" onClick={logout}>
+        Logout
+      </button>
+    </div>
+  );
 };
diff --git a/client/components/router.jsx b/client/components/router.jsx
index 6760bea..59ea7c3 100644
--- a/client/components/router.jsx
+++ b/client/components/router.jsx
@@ -7,12 +7,12 @@ import { SignUp } from './sign_up/_sign_up';
 
 export const Router = () => {
   const [settings] = useContext(SettingsContext);
-  const { JWT } = settings;
+  const { jwt } = settings;
   return (
     <Routes>
       <Route
         path="/"
-        element={JWT ? <Home /> : <Navigate replace to="signin" />} // no JWT means not logged in
+        element={jwt ? <Home /> : <Navigate replace to="signin" />} // no jwt means not logged in
       />
       <Route path="signin" element={<SignIn />} />
       <Route path="signup" element={<SignUp />} />
diff --git a/client/components/sign_in/_sign_in.jsx b/client/components/sign_in/_sign_in.jsx
index 753b2b5..a6e802c 100644
--- a/client/components/sign_in/_sign_in.jsx
+++ b/client/components/sign_in/_sign_in.jsx
@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router';
+import { SettingsContext } from '../../utils/settings_context';
 
 export const SignIn = () => {
+  const [, dispatch] = useContext(SettingsContext);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const navigate = useNavigate();
@@ -10,6 +12,26 @@ export const SignIn = () => {
     navigate('/signup');
   };
 
+  const signIn = async () => {
+    const res = await fetch('/sessions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        email,
+        password,
+      }),
+    });
+    if (res.status === 201) {
+      const result = await res.json();
+      dispatch({ type: 'update', payload: { jwt: result.token } });
+      navigate('/');
+    } else {
+      console.error('An issue occurred when logging in.');
+    }
+  };
+
   return (
     <div>
       <div>Email</div>
@@ -25,7 +47,9 @@ export const SignIn = () => {
         onChange={(e) => setPassword(e.target.value)}
       />
       <div>
-        <button type="button">Sign in</button>
+        <button type="button" onClick={signIn}>
+          Sign in
+        </button>
       </div>
       <div>
         <button type="button" onClick={goToSignUp}>
diff --git a/client/components/sign_up/_sign_up.jsx b/client/components/sign_up/_sign_up.jsx
index bbbd51b..13ac6c7 100644
--- a/client/components/sign_up/_sign_up.jsx
+++ b/client/components/sign_up/_sign_up.jsx
@@ -1,6 +1,10 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { SettingsContext } from '../../utils/settings_context';
 
 export const SignUp = () => {
+  const [, dispatch] = useContext(SettingsContext);
+  const navigate = useNavigate();
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [emailConfirmation, setEmailConfirmation] = useState('');
@@ -29,20 +33,21 @@ export const SignUp = () => {
       setErrorMessage('Name cannot be blank.');
       return;
     }
-    try {
-      await fetch('/users', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          name,
-          email,
-          password,
-        }),
-      });
-    } catch (e) {
-      console.log(e.message);
+    const res = await fetch('/users', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name,
+        email,
+        password,
+      }),
+    });
+    if (res.status === 201) {
+      const result = await res.json();
+      dispatch({ type: 'update', payload: { jwt: result.token } });
+      navigate('/');
     }
   };