adds api, guard, tailwind

7 files changed, 92 insertions, 74 deletions

diff --git a/client/components/common/button.jsx b/client/components/common/button.jsx
new file mode 100644
index 0000000..1e8719a
--- /dev/null
+++ b/client/components/common/button.jsx
@@ -0,0 +1,7 @@
+export const Button = ({ children, ...other }) => {
+  return (
+    <button className="bg-gray-600 pt-2 pb-2 pr-4 pl-4 rounded-lg font-bold text-white" {...other}>
+      {children}
+    </button>
+  );
+};
diff --git a/client/components/common/input.jsx b/client/components/common/input.jsx
new file mode 100644
index 0000000..aa38216
--- /dev/null
+++ b/client/components/common/input.jsx
@@ -0,0 +1,3 @@
+export const Input = (props) => {
+  return <input className="border-2 rounded-lg p-1" {...props} />;
+};
diff --git a/client/components/common/paper.jsx b/client/components/common/paper.jsx
new file mode 100644
index 0000000..9e64c8b
--- /dev/null
+++ b/client/components/common/paper.jsx
@@ -0,0 +1,3 @@
+export const Paper = ({ children }) => {
+  return <div className="shadow-md flex flex-col p-4">{children}</div>;
+};
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>
diff --git a/client/components/router.jsx b/client/components/router.jsx
index 59ea7c3..fa552fc 100644
--- a/client/components/router.jsx
+++ b/client/components/router.jsx
@@ -1,18 +1,18 @@
 import { useContext } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { Home } from './home/_home';
-import { SettingsContext } from '../utils/settings_context';
+import { AuthContext } from '../utils/auth_context';
 import { SignIn } from './sign_in/_sign_in';
 import { SignUp } from './sign_up/_sign_up';
 
 export const Router = () => {
-  const [settings] = useContext(SettingsContext);
-  const { jwt } = settings;
+  const [authToken] = useContext(AuthContext);
+
   return (
     <Routes>
       <Route
         path="/"
-        element={jwt ? <Home /> : <Navigate replace to="signin" />} // no jwt means not logged in
+        element={authToken ? <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 a6e802c..295a7c9 100644
--- a/client/components/sign_in/_sign_in.jsx
+++ b/client/components/sign_in/_sign_in.jsx
@@ -1,9 +1,12 @@
 import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { SettingsContext } from '../../utils/settings_context';
+import { AuthContext } from '../../utils/auth_context';
+import { Paper } from '../common/paper';
+import { Input } from '../common/input';
+import { Button } from '../common/button';
 
 export const SignIn = () => {
-  const [, dispatch] = useContext(SettingsContext);
+  const [, setAuthToken] = useContext(AuthContext);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const navigate = useNavigate();
@@ -25,7 +28,7 @@ export const SignIn = () => {
     });
     if (res.status === 201) {
       const result = await res.json();
-      dispatch({ type: 'update', payload: { jwt: result.token } });
+      setAuthToken(result.token);
       navigate('/');
     } else {
       console.error('An issue occurred when logging in.');
@@ -33,28 +36,23 @@ export const SignIn = () => {
   };
 
   return (
-    <div>
-      <div>Email</div>
-      <input
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <div>Password</div>
-      <input
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <div>
-        <button type="button" onClick={signIn}>
-          Sign in
-        </button>
-      </div>
-      <div>
-        <button type="button" onClick={goToSignUp}>
-          Sign up
-        </button>
+    <div className="flex flex-row justify-center m-4">
+      <div className="w-96">
+        <Paper>
+          <div>Email</div>
+          <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <div>Password</div>
+          <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+          <div className="flex flex-row justify-end mt-2">
+            <Button type="button" onClick={goToSignUp}>
+              Sign up
+            </Button>
+            <div className="pl-2" />
+            <Button type="button" onClick={signIn}>
+              Sign in
+            </Button>
+          </div>
+        </Paper>
       </div>
     </div>
   );
diff --git a/client/components/sign_up/_sign_up.jsx b/client/components/sign_up/_sign_up.jsx
index 13ac6c7..c5d0dcd 100644
--- a/client/components/sign_up/_sign_up.jsx
+++ b/client/components/sign_up/_sign_up.jsx
@@ -1,9 +1,12 @@
 import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { SettingsContext } from '../../utils/settings_context';
+import { AuthContext } from '../../utils/auth_context';
+import { Paper } from '../common/paper';
+import { Input } from '../common/input';
+import { Button } from '../common/button';
 
 export const SignUp = () => {
-  const [, dispatch] = useContext(SettingsContext);
+  const [, setAuthToken] = useContext(AuthContext);
   const navigate = useNavigate();
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
@@ -46,45 +49,36 @@ export const SignUp = () => {
     });
     if (res.status === 201) {
       const result = await res.json();
-      dispatch({ type: 'update', payload: { jwt: result.token } });
+      setAuthToken(result.token);
       navigate('/');
     }
   };
 
   return (
-    <div>
-      <div>Name</div>
-      <input
-        type="text"
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-      />
-      <div>Email</div>
-      <input
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      <div>Confirm Email</div>
-      <input
-        type="email"
-        value={emailConfirmation}
-        onChange={(e) => setEmailConfirmation(e.target.value)}
-      />
-      <div>Password</div>
-      <input
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <div>Confirm Password</div>
-      <input
-        type="password"
-        value={passwordConfiramation}
-        onChange={(e) => setPasswordConfirmation(e.target.value)}
-      />
-      <div>
-        <button type="button" onClick={signUp}>Sign up</button>
+    <div className="flex flex-row justify-center m-4">
+      <div className="w-96">
+        <Paper>
+          <div>Name</div>
+          <Input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+          <div>Email</div>
+          <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+          <div>Confirm Email</div>
+          <Input type="email" value={emailConfirmation} onChange={(e) => setEmailConfirmation(e.target.value)} />
+          <div>Password</div>
+          <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+          <div>Confirm Password</div>
+          <Input
+            type="password"
+            value={passwordConfiramation}
+            onChange={(e) => setPasswordConfirmation(e.target.value)}
+          />
+          <div className="flex flex-row justify-end mt-2">
+            <Button type="button" onClick={signUp}>
+              Sign up
+            </Button>
+          </div>
+          <div className="flex">{errorMessage}</div>
+        </Paper>
       </div>
     </div>
   );