From 80319ee3621924d1eab983ad6bbbcc4fdef32d10 Mon Sep 17 00:00:00 2001 From: Amy Dang Date: Tue, 13 Jul 2021 20:51:40 -0700 Subject: [PATCH 1/3] Add link to sign out user --- src/components/Header/Header.tsx | 36 +++++++++++++++++++------ src/components/Header/header.styles.css | 13 +++++++++ 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 8f50757..a864f61 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,6 +1,7 @@ import React from "react"; -import { Link } from "react-router-dom"; +import { Link, Redirect } from "react-router-dom"; import { HeaderMain, RoundedButton } from "./HeaderStyled"; +import { useAuth } from "../../context/AuthProvider"; import "./header.styles.css"; @@ -8,7 +9,7 @@ import "./header.styles.css"; // } -const Header = (): JSX.Element => { +const Header = () => { const data = [ { id: 1, title: "Day" }, { id: 2, title: "Week" }, @@ -16,6 +17,30 @@ const Header = (): JSX.Element => { { id: 4, title: "Year" }, { id: 5, title: "Five Year" }, ]; + + const auth = useAuth(); + + const logoutUser = () => { + auth.logout(); + } + + const generateNavLinks = () => { + if (auth.user?.authenticated) { + return (Sign out) + } + + return ( + <> + + Login + + + Signup + + + ); + }; + return (
@@ -32,12 +57,7 @@ const Header = (): JSX.Element => { Protected - - Login - - - Signup - + {generateNavLinks()}
); diff --git a/src/components/Header/header.styles.css b/src/components/Header/header.styles.css index 813728e..c4cf0b6 100644 --- a/src/components/Header/header.styles.css +++ b/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; +} From 0ab8177ab5dfb70f1c18ba0a61e8af875a926d1b Mon Sep 17 00:00:00 2001 From: Amy Dang Date: Wed, 14 Jul 2021 20:08:29 -0700 Subject: [PATCH 2/3] Redirect user to the homepage after signing out --- src/components/Header/Header.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index a864f61..b303c2a 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Link, Redirect } from "react-router-dom"; +import { Link, useHistory } from "react-router-dom"; import { HeaderMain, RoundedButton } from "./HeaderStyled"; import { useAuth } from "../../context/AuthProvider"; @@ -19,9 +19,11 @@ const Header = () => { ]; const auth = useAuth(); + const history = useHistory(); const logoutUser = () => { auth.logout(); + history.push("/"); } const generateNavLinks = () => { @@ -34,7 +36,7 @@ const Header = () => { Login - + Signup From d5fb8b79feacc16f1ea848b7343e41f5366e6a5d Mon Sep 17 00:00:00 2001 From: Amy Dang Date: Thu, 15 Jul 2021 19:38:13 -0700 Subject: [PATCH 3/3] Redirect to homepage after login & signup (#29) --- src/components/Login/Login.tsx | 3 +++ src/components/Signup/Signup.tsx | 3 +++ src/components/Signup/tests/Signup.test.tsx | 19 +++++++++++++++++++ 3 files changed, 25 insertions(+) create mode 100644 src/components/Signup/tests/Signup.test.tsx diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx index b8c4a13..a02f17c 100644 --- a/src/components/Login/Login.tsx +++ b/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) => { const { name, value } = event.target; @@ -34,6 +36,7 @@ const Login = () => { const handleSubmit = (event: FormEvent) => { event.preventDefault(); auth.login( form ); + history.push("/"); }; return ( diff --git a/src/components/Signup/Signup.tsx b/src/components/Signup/Signup.tsx index 5bd1bd9..afa2590 100644 --- a/src/components/Signup/Signup.tsx +++ b/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) => { const { name, value } = event.target; @@ -29,6 +31,7 @@ const Signup = () => { // prevent page reload event.preventDefault() auth.signup( form ); + history.push("/"); } return ( diff --git a/src/components/Signup/tests/Signup.test.tsx b/src/components/Signup/tests/Signup.test.tsx new file mode 100644 index 0000000..6e59e70 --- /dev/null +++ b/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(); + 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(); + //TODO: check for email and password inputs + //TODO: check if user is signed in + }); +});