Update settings form with real data

hooks/useRedirect.ts

@@ -0,0 +1,17 @@
+import { UserContext } from "./../context/UserContext";
+import { useRouter } from "next/router";
+import { useEffect, useContext } from "react";
+
+const PRIVATE_PAGES = ["/settings"];
+
+const useRedirect = () => {
+  const { pathname, push } = useRouter();
+  const { user } = useContext(UserContext);
+  useEffect(() => {
+    if (!user && PRIVATE_PAGES.includes(pathname)) {
+      push("/");
+    }
+  }, [pathname, user, push]);
+};
+
+export default useRedirect;

pages/index.tsx

@@ -1,12 +1,32 @@
 import type { NextPage } from "next";
+import Link from "next/link";
+import { useContext } from "react";
 import Layout from "../components/Layout";
+import { UserContext } from "../context/UserContext";
 
 const Home: NextPage = () => {
+  const { user } = useContext(UserContext);
   return (
     <Layout>
       <div className="">
-        <h1 className="">Welcome!</h1>
-        <p className="">Log in to get started</p>
+        {user ? (
+          <>
+            <h1>
+              Welcome back, <em>{user.name}</em>!
+            </h1>
+            <p>
+              You can change your settings in{" "}
+              <Link href="/settings">
+                <a>here</a>
+              </Link>
+            </p>
+          </>
+        ) : (
+          <>
+            <h1>Welcome!</h1>
+            <p>Log in to get started</p>
+          </>
+        )}
       </div>
     </Layout>
   );

pages/settings.tsx

@@ -1,25 +1,34 @@
 import { NextPage } from "next/types";
-import { useEffect } from "react";
+import { useContext, useEffect } from "react";
 import Layout from "../components/Layout";
+import { UserContext } from "../context/UserContext";
 import useForm from "../hooks/useForm";
+import useRedirect from "../hooks/useRedirect";
 import api from "../utils/api";
 
 const Settings: NextPage = () => {
-  const user = {
-    id: 4,
-    name: "Monkey",
-    email: "monkey@gmail.com",
-    password: "123456",
-    team: "Admins",
-  };
+  const _ = useRedirect();
+  const { user, setUser } = useContext(UserContext);
 
   const { error, submitHandler, success } = useForm(api.updateUser);
 
   useEffect(() => {
     if (success) {
-      console.log(success);
+      setUser(success.result);
     }
-  }, [success]);
+  }, [success, setUser]);
+
+  if (!user) {
+    return (
+      <Layout>
+        <div className="form-alert-msg">
+          There was an error, please reload the page
+        </div>
+      </Layout>
+    );
+  }
+
+  console.log(user);
   return (
     <Layout>
       <form className="form" onSubmit={submitHandler}>
@@ -79,11 +88,16 @@ const Settings: NextPage = () => {
         <button type="submit" className="form-button">
           Save
         </button>
-        {error && (
+        {error && !success && (
           <div role="alert" className="form-alert-msg">
             {error.message}
           </div>
         )}
+        {success && (
+          <div role="alert" className="form-success-msg">
+            Profile updated correctly
+          </div>
+        )}
       </form>
     </Layout>
   );

utils/api.ts

@@ -59,7 +59,7 @@ export const login: FetchApiInterface<
       const user = await fetchUserData(body.email);
       return {
         ...response,
-        user: user,
+        user,
       };
     }
     default: