adds api, guard, tailwind

1 files changed, 22 insertions, 9 deletions

diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx
index 02ebe38..00a7ab3 100644
--- a/client/components/home/_home.jsx
+++ b/client/components/home/_home.jsx
@@ -1,20 +1,33 @@
-import { useContext } from 'react';
-import { SettingsContext } from '../../utils/settings_context';
+import { useContext, useEffect, useState } from 'react';
+import { ApiContext } from '../../utils/api_context';
+import { AuthContext } from '../../utils/auth_context';
 
 export const Home = () => {
-  const [, dispatch] = useContext(SettingsContext);
+  const [, setAuthToken] = useContext(AuthContext);
+  const api = useContext(ApiContext);
+
+  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useState(null);
+  useEffect(async () => {
+    const res = await api.get('/users/me');
+    setUser(res.user);
+    setLoading(false);
+  }, []);
+
   const logout = async () => {
-    const res = await fetch('/sessions', {
-      method: 'DELETE',
-    });
-    if (res.status === 200) {
-      dispatch({ type: 'update', payload: { jwt: undefined } });
+    const res = await api.del('/sessions');
+    if (res.success) {
+      setAuthToken(null);
     }
   };
 
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <div>
-      <h1>Welcome</h1>
+      <h1>Welcome {user.name}</h1>
       <button type="button" onClick={logout}>
         Logout
       </button>