Gift refactor login and register

src/App.css

@@ -1,7 +1,3 @@
-.App {
-  text-align: center;
-}
-
 .App-logo {
   margin: 10px auto;
   padding: 20px 0;
@@ -13,6 +9,10 @@
   width: 100%;
 }
 
+.App-logo:hover {
+  cursor: pointer;
+}
+
 .App-title {
   color: var(--theme-body-txt);
   margin-top: 0.6rem;

src/App.js

@@ -2,15 +2,8 @@ import React, { Suspense } from "react";
 import { Link, Route, Switch } from "wouter";
 
 import Header from "components/Header";
-
-import Register from 'pages/Register'
-import Login from "pages/Login";
-import SearchResults from "pages/SearchResults";
-import Detail from "pages/Detail";
-import ErrorPage from "pages/ErrorPage";
-
-import { UserContextProvider } from "context/UserContext";
-import { GifsContextProvider } from "context/GifsContext";
+import { Register, Login, SearchResults, Detail, ErrorPage } from 'pages'
+import { UserContextProvider, GifsContextProvider } from "context";
 
 import "./App.css";
 
@@ -19,7 +12,7 @@ const HomePage = React.lazy(() => import("./pages/Home"));
 export default function App() {
   return (
     <UserContextProvider>
-      <div className="App">
+      <div css={{textAlign:"center"}}>
         <Suspense fallback={null}>
           <section className="App-content">
             <Header />

src/components/Category/index.js

@@ -1,12 +1,10 @@
 import React from "react";
-import { Link } from "wouter";
 import {
   CategoryTitle,
   CategoryListItem,
   CategoryLink,
   CategoryList,
 } from "./styles";
-import "./Category.css";
 
 export default function Category({ name, options = [] }) {
   return (

src/components/Fav/index.js

@@ -2,13 +2,11 @@ import React, { useState } from "react";
 import useUser from "hooks/useUser";
 import Modal from "components/Modal";
 import Login from "components/Login";
-import { useLocation } from "wouter";
 
 import "./Fav.css";
 
 export default function Fav({ id }) {
   const { isLogged, addFav, favs } = useUser();
-  const [, navigate] = useLocation();
   const [showModal, setShowModal] = useState(false);
 
   const isFaved = favs.some((favId) => favId === id);

src/components/Login/index.js

@@ -1,10 +1,9 @@
-import React, { useState } from "react";
-import {useLocation} from "wouter"
+import React, { useState, useEffect, useCallback } from "react";
+import { useLocation } from "wouter"
 import useUser from 'hooks/useUser'
-import { useEffect } from "react";
 import './Login.css'
 
-export default function Login({onLogin}) {
+export default function Login({ onLogin }) {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [, navigate] = useLocation()
@@ -17,18 +16,18 @@ export default function Login({onLogin}) {
     }
   }, [isLogged, navigate, onLogin])
 
-  const handleSubmit = (e) => {
+  const handleSubmit = useCallback((e) => {
     e.preventDefault();
     login({ username, password })
-  };
+  }, [login, username, password])
 
   return (
     <>
       {isLoginLoading && <strong>Checking credentials...</strong>}
       {!isLoginLoading &&
-        <form className='form' onSubmit={handleSubmit}>
+        <form className='form' onSubmit={handleSubmit} autoComplete={false} >
           <label>
-            username
+            Username
             <input
             placeholder="username"
             onChange={(e) => setUsername(e.target.value)}
@@ -37,7 +36,7 @@ export default function Login({onLogin}) {
           </label>
 
           <label>
-            password
+            Password
             <input
               type="password"
               placeholder="password"

src/components/SearchForm/index.js

@@ -10,7 +10,7 @@ export default function SearchForm({
   initialKeyword = '',
   initialRating = RATINGS[0]
 }) {
-  const [_, pushLocation] = useLocation()
+  const [, pushLocation] = useLocation()
 
   const {keyword, rating, changeKeyword, changeRating} = useForm({ initialKeyword, initialRating })
 

src/context/index.js

@@ -0,0 +1,3 @@
+export { GifsContextProvider } from "./GifsContext";
+export { default as Context } from "./StaticContext";
+export { UserContextProvider } from "./UserContext";

src/pages/Login/Login.test.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import LoginPage from "./index";
+
+
+describe("<LoginPage />", () => {
+  test("renders without crashing", async () => {
+    const { findAllByText } = render(<LoginPage />);
+    const title = await findAllByText(/Login/i);
+    expect(title).toBeTruthy();
+  })
+
+  test("renders a form with two inputs", async () => {
+    const { findByPlaceholderText } = render(<LoginPage />);
+
+    const inputEmail = await findByPlaceholderText(/username/i);
+    const inputPassword = await findByPlaceholderText(/password/i);
+
+    expect(inputEmail).toBeInTheDocument();
+    expect(inputPassword).toBeInTheDocument();
+  })
+
+  test("There is a button to submit the form", async () => {
+    const { container } = render(<LoginPage />);
+    const button = container.querySelector("button");
+
+    expect(button).toBeInTheDocument();
+  })
+})

src/pages/Login/index.js

@@ -1,9 +1,12 @@
 import React from 'react'
 import Login from 'components/Login'
+import { Container } from 'style-components'
 
-export default function LoginPage () {
+export default function LoginPage() {
   return <>
-    <h2>Login</h2>
-    <Login />
+    <Container>
+      <h2 style={{textAlign: "center"}} >Login</h2>
+      <Login />
+    </Container>
   </>
 }

src/pages/Register/index.js

@@ -1,9 +1,12 @@
 import React from 'react'
 import Register from 'components/Register'
+import { Container } from 'style-components'
 
 export default function RegisterPage () {
   return <>
-    <h2>Register</h2>
-    <Register />
+    <Container>
+      <h2>Register</h2>
+      <Register />
+    </Container>
   </>
 }

src/pages/index.js

@@ -0,0 +1,6 @@
+export { default as Detail } from './Detail';
+export { default as ErrorPage } from './ErrorPage';
+export { default as Home } from './Home';
+export { default as Login } from './Login';
+export { default as Register } from './Register';
+export { default as SearchResults } from './SearchResults';

src/style-components/Container.jsx

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+const Container = styled.section`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export default Container;

src/style-components/index.js

@@ -0,0 +1 @@
+export { default as Container } from './Container';