feat(update): store, services and .env

.eslintrc.js

@@ -22,6 +22,12 @@ extends: [
   rules: {
     'import/prefer-default-export': 'off',
     'react/react-in-jsx-scope': 'off',
-    'react/jsx-props-no-spreading': 'off'
+    'react/jsx-props-no-spreading': 'off',
+    'no-param-reassign': [
+      'error', {
+      props: true,
+        ignorePropertyModificationsFor: ['state']
+      }
+    ]
   }
-}
+}

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+.env.local

package.json

@@ -20,6 +20,7 @@
     "react-redux": "^8.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
+    "redux-saga": "^1.1.3",
     "styled-components": "^5.3.5",
     "yup": "^0.32.11"
   },

src/components/button/button.tsx

@@ -1,8 +1,11 @@
 import { ButtonStyled } from './button.styled';
+import { Props } from './button.type';
 
-function Button(props: any) {
+function Button({ onClick, children }: Props) {
   return (
-    <ButtonStyled {...props} />
+    <ButtonStyled onClick={onClick}>
+      {children}
+    </ButtonStyled>
   );
 }
 

src/components/button/button.type.ts

@@ -0,0 +1,10 @@
+import { MouseEvent, ReactNode } from 'react';
+
+type Props = {
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void
+  children: ReactNode
+};
+
+export type {
+  Props,
+};

src/components/form-error/form-error.tsx

@@ -1,13 +1,12 @@
-import { Error } from './form-error.styled'
-
-function FormError (props: any) {
-  const { message, ...restProps } = props
+import { Error } from './form-error.styled';
+import { Props } from './form-error.type';
 
+function FormError({ message }: Props) {
   return (
-    <Error {...restProps}>
+    <Error>
       {message}
     </Error>
-  )
+  );
 }
 
-export default FormError
+export default FormError;

src/components/form-error/form-error.type.ts

@@ -0,0 +1,7 @@
+type Props = {
+  message: string
+};
+
+export type {
+  Props,
+};

src/components/guard/guard.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router';
+
+import { Props } from './guard.type';
+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', {
+        state: { from },
+      });
+    }
+  }, []);
+
+  if (!token) return null;
+
+  return children;
+}
+
+export default Guard;

src/components/guard/guard.type.ts

@@ -0,0 +1,7 @@
+type Props {
+
+}
+
+export type {
+  Props
+}

src/components/index.ts

@@ -2,3 +2,5 @@ export { default as Button } from './button/button';
 export { default as Input } from './input/input';
 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';

src/components/input/input.tsx

@@ -1,9 +1,15 @@
-import { InputStyled } from './input.styled'
+import { InputStyled } from './input.styled';
+import { Props } from './input.type';
 
-function Input(props: any) {
+function Input({
+  type,
+  name,
+  placeholder,
+  onChange,
+}: Props) {
   return (
-    <InputStyled {...props}/>
-  )
+    <InputStyled type={type} name={name} placeholder={placeholder} onChange={onChange} />
+  );
 }
 
-export default Input
+export default Input;

src/components/input/input.type.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent } from 'react';
+
+type Props = {
+  type: string;
+  name: string;
+  placeholder: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+};
+
+export type {
+  Props,
+};

src/components/show-card/show-card.component.tsx

@@ -0,0 +1,9 @@
+import { Container } from './show-card.styled';
+
+function ShowCard() {
+  return (
+    <Container />
+  );
+}
+
+export default ShowCard;

src/components/show-card/show-card.styled.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+
+
+`;
+
+export {
+  Container,
+};

src/modules/axios/axios.ts

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

src/pages/home/home.page.tsx

@@ -0,0 +1,9 @@
+import { ShowCard } from '@components';
+
+function Home() {
+  return (
+    <ShowCard />
+  );
+}
+
+export default Home;

src/pages/home/home.styled.ts

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+

src/pages/index.ts

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

src/pages/login/login.styled.tsx

@@ -3,5 +3,5 @@ import { Grid } from '@mui/material';
 
 export const Wrapper = styled(Grid)`
   min-height: 100vh;
-  background-color: #1A1A1A;
+  background-color: ${(props) => props.theme.palette.core.secondary};
 `;

src/pages/login/login.tsx

@@ -3,10 +3,13 @@ import * as yup from 'yup';
 import { useDispatch, useSelector } from 'react-redux';
 import { Grid } from '@mui/material';
 
-import { Button, Input, FormError, NetflixLogo } from '@components';
+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';
 
 function Login(): JSX.Element {
   const dispatch = useDispatch();
@@ -26,6 +29,13 @@ function Login(): JSX.Element {
     }));
   }, [setData]);
 
+  const resetError = useCallback(
+    (errorMessage: string) => {
+      setError(errorMessage);
+    },
+    [],
+  );
+
   const handleSend = useCallback(async () => {
     try {
       const schema = yup.object().shape({
@@ -35,11 +45,11 @@ function Login(): JSX.Element {
 
       await schema.validate(data);
 
-      setError('');
+      resetError('');
 
-      dispatch(userSlice.actions.authenticated(true));
-    } catch (sendError: unknown) {
-      setError(sendError.errors[0]);
+      dispatch(userSlice.actions.setData({}));
+    } catch (yupError: unknown) {
+      setError((yupError as Error).erros[0]);
     }
   }, [data]);
 

src/pages/my-list/my-list.page.tsx

@@ -0,0 +1,11 @@
+
+
+function MyList() {
+  return (
+    <>
+
+    </>
+  );
+}
+
+export default MyList;

src/services/shows/shows.ts

@@ -0,0 +1,21 @@
+import axiosInstance from '../../modules/axios/axios';
+import { Props } from './shows.type';
+
+const showsService = ({ token }: Props) => {
+  const config = {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  };
+
+  const getList = () => axiosInstance.get('/shows', config);
+
+  const getMyList = () => axiosInstance.get('/list', config);
+
+  return {
+    getList,
+    getMyList,
+  };
+};
+
+export default showsService;