diff --git a/.env.example b/.env.example index e69de29..3452b5c 100644 --- a/.env.example +++ b/.env.example @@ -0,0 +1 @@ +VITE_API_URL= \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 55866b2..f02975b 100644 --- a/src/App.tsx +++ b/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 { - } path="/login" /> - } path="/sign-up" /> + } path={HOME_URL} /> + Olá} path={HOME_URL} /> + } path={LOGIN_URL} /> + } path={PROFILES_URL} /> + } path={SHOWS_URL} /> + } path={MOVIES_URL} /> + } path={TV_SHOWS_URL} /> + } path={MY_LIST_URL} /> diff --git a/src/components/footer/footer.component.tsx b/src/components/footer/footer.component.tsx new file mode 100644 index 0000000..6088ee0 --- /dev/null +++ b/src/components/footer/footer.component.tsx @@ -0,0 +1,9 @@ +function Footer() { + return ( + + ); +} + +export default Footer; diff --git a/src/components/guard/guard.tsx b/src/components/guard/guard.tsx index b89df83..3b08b16 100644 --- a/src/components/guard/guard.tsx +++ b/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', { diff --git a/src/components/guard/guard.type.ts b/src/components/guard/guard.type.ts index ea18e2a..75d41d7 100644 --- a/src/components/guard/guard.type.ts +++ b/src/components/guard/guard.type.ts @@ -1,7 +1,7 @@ -type Props { - -} +type Props = { + children: JSX.Element +}; export type { - Props -} + Props, +}; diff --git a/src/components/header/header.component.tsx b/src/components/header/header.component.tsx new file mode 100644 index 0000000..e451fdf --- /dev/null +++ b/src/components/header/header.component.tsx @@ -0,0 +1,9 @@ +function Header() { + return ( +
+ Ola +
+ ); +} + +export default Header; diff --git a/src/components/index.ts b/src/components/index.ts index 5c7bc23..e05e42e 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/components/shows-row/shows-row.component.tsx b/src/components/shows-row/shows-row.component.tsx new file mode 100644 index 0000000..0d41ba3 --- /dev/null +++ b/src/components/shows-row/shows-row.component.tsx @@ -0,0 +1,7 @@ +function ShowsRow({ shows, title }: { shows: [], title: string }) { + return ( +

ShowsRow

+ ); +} + +export default ShowsRow; diff --git a/src/modules/axios/axios.ts b/src/modules/axios/axios.ts index 6f91685..4f25179 100644 --- a/src/modules/axios/axios.ts +++ b/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; diff --git a/src/pages/home/home.page.tsx b/src/pages/home/home.page.tsx index 5599fda..abc476d 100644 --- a/src/pages/home/home.page.tsx +++ b/src/pages/home/home.page.tsx @@ -1,8 +1,6 @@ -import { ShowCard } from '@components'; - function Home() { return ( - +

Home

); } diff --git a/src/pages/index.ts b/src/pages/index.ts index fb9c378..0ca4ec9 100644 --- a/src/pages/index.ts +++ b/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'; diff --git a/src/pages/login/login.tsx b/src/pages/login/login.page.tsx similarity index 64% rename from src/pages/login/login.tsx rename to src/pages/login/login.page.tsx index 5ef6662..a0a0b62 100644 --- a/src/pages/login/login.tsx +++ b/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({ 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 ( - + diff --git a/src/pages/profiles/profiles.page.tsx b/src/pages/profiles/profiles.page.tsx new file mode 100644 index 0000000..5951354 --- /dev/null +++ b/src/pages/profiles/profiles.page.tsx @@ -0,0 +1,7 @@ +function Profiles() { + return ( +

Profiles

+ ); +} + +export default Profiles; diff --git a/src/pages/shows/shows.page.tsx b/src/pages/shows/shows.page.tsx new file mode 100644 index 0000000..6355232 --- /dev/null +++ b/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 ( + <> +
+ { myList && } + { movies && } + { tvShows && } +