fix: imports, pages and redux.

.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

src/App.tsx

@@ -2,7 +2,11 @@ import { Routes, Route } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { Provider } from 'react-redux';
 
-import { Login } from '@pages';
+import { Login, Shows, Profiles, Home } from '@pages';
+import {
+  HOME_URL, LOGIN_URL, MOVIES_URL, MY_LIST_URL, PROFILES_URL, SHOWS_URL, TV_SHOWS_URL,
+} from '@url-paths';
+import { Guard } from '@components';
 import GlobalStyles from './themes/main/global-styles';
 import theme from './themes/main/theme';
 import store from './store/store/store';
@@ -13,8 +17,14 @@ function App(): JSX.Element {
       <GlobalStyles />
       <ThemeProvider theme={theme}>
         <Routes>
-          <Route element={<Login />} path="/login" />
-          <Route element={<Login />} path="/sign-up" />
+          <Route element={<Home />} path={HOME_URL} />
+          <Route element={<h1>Olá</h1>} path={HOME_URL} />
+          <Route element={<Login />} path={LOGIN_URL} />
+          <Route element={<Guard><Profiles /></Guard>} path={PROFILES_URL} />
+          <Route element={<Guard><Shows /></Guard>} path={SHOWS_URL} />
+          <Route element={<Guard><Shows /></Guard>} path={MOVIES_URL} />
+          <Route element={<Guard><Shows /></Guard>} path={TV_SHOWS_URL} />
+          <Route element={<Guard><Shows /></Guard>} path={MY_LIST_URL} />
         </Routes>
       </ThemeProvider>
     </Provider>

src/components/footer/footer.component.tsx

@@ -0,0 +1,9 @@
+function Footer() {
+  return (
+    <footer>
+      footer
+    </footer>
+  );
+}
+
+export default Footer;

src/components/guard/guard.tsx

@@ -3,13 +3,12 @@ import { useSelector } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router';
 
 import { Props } from './guard.type';
-import { tokenSelector } from 'store/user/user.selector';
+import { tokenSelector } from '../../store/user/user.selector';
 
 function Guard({ children }: Props) {
   const token = useSelector(tokenSelector);
   const navigate = useNavigate();
   const from = useLocation();
-
   useEffect(() => {
     if (!token) {
       navigate('/login', {

src/components/guard/guard.type.ts

@@ -1,7 +1,7 @@
-type Props {
-
-}
+type Props = {
+  children: JSX.Element
+};
 
 export type {
-  Props
-}
+  Props,
+};

src/components/header/header.component.tsx

@@ -0,0 +1,9 @@
+function Header() {
+  return (
+    <header>
+      Ola
+    </header>
+  );
+}
+
+export default Header;

src/components/index.ts

@@ -4,3 +4,6 @@ export { default as FormError } from './form-error/form-error';
 export { default as NetflixLogo } from './netflix-logo/netflix-logo';
 export { default as ShowCard } from './show-card/show-card.component';
 export { default as Guard } from './guard/guard';
+export { default as Header } from './header/header.component';
+export { default as Footer } from './footer/footer.component';
+export { default as ShowsRow } from './shows-row/shows-row.component';

src/components/shows-row/shows-row.component.tsx

@@ -0,0 +1,7 @@
+function ShowsRow({ shows, title }: { shows: [], title: string }) {
+  return (
+    <h1>ShowsRow</h1>
+  );
+}
+
+export default ShowsRow;

src/modules/axios/axios.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const axiosInstance = axios.create({
-  baseURL: 'http://localhost:3000',
+  baseURL: import.meta.env.VITE_API_URL,
 });
 
 export default axiosInstance;

src/pages/home/home.page.tsx

@@ -1,8 +1,6 @@
-import { ShowCard } from '@components';
-
 function Home() {
   return (
-    <ShowCard />
+    <h1>Home</h1>
   );
 }
 

src/pages/index.ts

@@ -1,2 +1,4 @@
-export { default as Login } from './login/login';
+export { default as Login } from './login/login.page';
 export { default as Home } from './home/home.page';
+export { default as Shows } from './shows/shows.page';
+export { default as Profiles } from './profiles/profiles.page';

src/pages/login/login.tsx → src/pages/login/login.page.tsx

@@ -1,19 +1,24 @@
-import { useState, useCallback, ChangeEvent } from 'react';
+import { useState, useCallback, ChangeEvent, useEffect } from 'react';
 import * as yup from 'yup';
 import { useDispatch, useSelector } from 'react-redux';
 import { Grid } from '@mui/material';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import {
   Button, Input, FormError, NetflixLogo,
 } from '@components';
 import { Wrapper } from './login.styled';
-import { authenticated } from '../../store/user/user.selector';
 import userSlice from '../../store/user/user.slice';
-import { Error } from '../../types/yup';
+// import { Error } from '../../types/yup';
+import { USER_TOKEN_COOKIE } from '../../store/user/user.type';
+import { errorSelector, tokenSelector } from '../../store/user/user.selector';
 
 function Login(): JSX.Element {
   const dispatch = useDispatch();
-  const userAuthenticated = useSelector(authenticated);
+  const token = useSelector(tokenSelector);
+  const userError = useSelector(errorSelector);
+  const navigate = useNavigate();
+  const from = useLocation();
 
   const [data, setData] = useState<object>({
     email: '',
@@ -47,12 +52,30 @@ function Login(): JSX.Element {
 
       resetError('');
 
-      dispatch(userSlice.actions.setData({}));
+      dispatch(userSlice.actions.authentication(data));
     } catch (yupError: unknown) {
-      setError((yupError as Error).erros[0]);
+      setError((yupError as Error).errors[0]);
     }
   }, [data]);
 
+  useEffect(() => {
+    if (token) {
+      navigate('/', {
+        state: { from },
+      });
+    }
+  }, [token]);
+
+  useEffect(() => {
+    const localToken = localStorage.getItem(USER_TOKEN_COOKIE);
+
+    if (localToken) {
+      dispatch(userSlice.actions.setData({
+        token: localToken,
+      }));
+    }
+  }, []);
+
   return (
     <Wrapper
       container
@@ -73,7 +96,7 @@ function Login(): JSX.Element {
           placeholder="Senha"
           onChange={handleChange}
         />
-        <FormError message={error} />
+        <FormError message={error || userError} />
         <Button onClick={handleSend}>
           Entrar
         </Button>

src/pages/profiles/profiles.page.tsx

@@ -0,0 +1,7 @@
+function Profiles() {
+  return (
+    <h1>Profiles</h1>
+  );
+}
+
+export default Profiles;

src/pages/shows/shows.page.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { showsActions } from 'store/shows/shows.slice';
+import { Header, Footer, ShowsRow } from '@components';
+import { listSelector, myListSelector } from 'store/shows/shows.selector';
+
+function Shows() {
+  const dispatch = useDispatch();
+  const shows = useSelector(listSelector);
+  const myList = useSelector(myListSelector);
+  const movies = shows.MOVIE;
+  const tvShows = shows.TV_SHOWS;
+
+  useEffect(() => {
+    dispatch(showsActions.getList());
+    dispatch(showsActions.getMyList());
+  }, []);
+
+  return (
+    <>
+      <Header />
+      { myList && <ShowsRow shows={myList} title="Minha Lista" />}
+      { movies && <ShowsRow shows={movies} title="Filmes" />}
+      { tvShows && <ShowsRow shows={tvShows} title="Séries" />}
+      <Footer />
+    </>
+  );
+}
+
+export default Shows;

src/services/user/user.ts

@@ -3,7 +3,7 @@ import axiosInstance from '../../modules/axios/axios';
 import { AuthPayload } from './user.type';
 
 const userService = () => {
-  const auth = (payload: AuthPayload) => axiosInstance.post('/auth', payload);
+  const auth = (payload: AuthPayload) => axiosInstance.post('/login', payload);
 
   return {
     auth,

src/url-paths/index.ts

@@ -0,0 +1,17 @@
+const HOME_URL = '/';
+const SHOWS_URL = '/shows';
+const LOGIN_URL = '/login';
+const PROFILES_URL = '/profiles';
+const MOVIES_URL = '/movies';
+const TV_SHOWS_URL = '/tv-shows';
+const MY_LIST_URL = '/my-list';
+
+export {
+  HOME_URL,
+  SHOWS_URL,
+  LOGIN_URL,
+  PROFILES_URL,
+  MOVIES_URL,
+  TV_SHOWS_URL,
+  MY_LIST_URL,
+};

tsconfig.json

@@ -18,6 +18,7 @@
     "paths": {
       "@components": ["./src/components/index"],
       "@pages": ["./src/pages/index"],
+      "@url-paths": ["./src/url-paths/index"],
       "store/*": ["./src/store/*"]
     }
   },