Redirect user to homepage after login or signup

src/components/Header/Header.tsx

@@ -1,21 +1,48 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { HeaderMain, RoundedButton } from "./HeaderStyled";
+import { useAuth } from "../../context/AuthProvider";
 
 import "./header.styles.css";
 
 // interface iHeader {
 
 // }
 
-const Header = (): JSX.Element => {
+const Header = () => {
   const data = [
     { id: 1, title: "Day" },
     { id: 2, title: "Week" },
     { id: 3, title: "Month" },
     { id: 4, title: "Year" },
     { id: 5, title: "Five Year" },
   ];
+
+  const auth = useAuth();
+  const history = useHistory();
+
+  const logoutUser = () => {
+    auth.logout();
+    history.push("/");
+  }
+
+  const generateNavLinks = () => {
+    if (auth.user?.authenticated)  {
+      return (<a onClick={logoutUser}>Sign out</a>)
+    }
+
+    return (
+      <>
+        <Link className="login" to="/login">
+        Login
+        </Link>
+        <Link className="signup" to="/signup">
+        Signup
+        </Link>
+      </>
+    );
+  };
+
   return (
     <HeaderMain dark={true}>
       <div className="left">
@@ -32,12 +59,7 @@ const Header = (): JSX.Element => {
         <Link to="/protected">
           Protected
         </Link>
-        <Link className="login" to="/login">
-          Login
-        </Link>
-        <Link className="signup" to="/signup">
-          Signup
-        </Link>
+        {generateNavLinks()}
       </div>
     </HeaderMain>
   );

src/components/Header/header.styles.css

@@ -19,3 +19,16 @@
 .signup {
   margin-right: 40px;
 }
+
+.right > a {
+  color: white;
+  text-decoration: underline;
+}
+
+.right > a:visited{
+  color: white;
+}
+
+.right > a:hover{
+  cursor: pointer;
+}

src/components/Login/Login.tsx

@@ -7,6 +7,7 @@ import React, {
 import { useAuth } from "../../context/AuthProvider";
 import type User from "../../types/User";
 import './Login.css'
+import { useHistory } from "react-router-dom";
 
 import {
   LoginForm,
@@ -22,6 +23,7 @@ const Login = () => {
 
   const [form, setForm] = useState(formState);
   const auth = useAuth();
+  const history = useHistory();
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
@@ -34,6 +36,7 @@ const Login = () => {
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     auth.login( form );
+    history.push("/");
   };
 
   return (

src/components/Signup/Signup.tsx

@@ -7,6 +7,7 @@ import React, {
 import { useAuth } from "../../context/AuthProvider";
 import type User from "../../types/User";
 import "./Signup.css";
+import { useHistory } from "react-router-dom";
 
 const Signup = () => {
   const formState: User = {
@@ -16,6 +17,7 @@ const Signup = () => {
 
   const [form, setForm] = useState(formState);
   const auth = useAuth();
+  const history = useHistory();
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
@@ -29,6 +31,7 @@ const Signup = () => {
     // prevent page reload
     event.preventDefault()
     auth.signup( form );
+    history.push("/");
   }
 
   return (

src/components/Signup/tests/Signup.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Signup from "../../Signup";
+
+describe("Signup component", () => {
+  test("pages renders correctly", () => {
+    const {queryByLabelText, queryByRole} = render(<Signup/>);
+    expect(queryByLabelText("Email")).toBeTruthy();
+    expect(queryByLabelText("Password")).toBeTruthy();
+    expect(queryByRole("button")).toBeVisible();
+    //TODO: check if button is rendered.
+  });
+
+  test("page signs in user after signing up", () => {
+    render(<Signup/>);
+    //TODO: check for email and password inputs
+    //TODO: check if user is signed in
+  });
+});