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 (
+
+ );
+}
+
+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