Mini - Challenge 5

src/components/App/App.component.jsx

@@ -1,55 +1,13 @@
-import React, { useState } from 'react';
-import { ThemeProvider, createGlobalStyle } from 'styled-components';
-import HomePage from '../../pages/Home';
+import React from 'react';
 import HeaderSection from '../../pages/Header/Header.page';
 import DataProvider from '../../states/provider';
-import Button from '../Button';
-import useFetchData from '../../states/useFetchData';
-import VideoPage from '../../pages/Video/Video.page';
-
-const lightTheme = {
-    bg: '#fff',
-    text: '#121212',
-};
-
-const darkTheme = {
-    bg: '#121212',
-    text: '#fff',
-};
-
-const GlobalStyles = createGlobalStyle`body{
-  color: ${(props) => props.theme.text};
-  background-color: ${(props) => props.theme.bg};
-  transition: 0.5s;
-}`;
+import Routes from '../Routes/Routes.component';
 
 function App() {
-    const [mode, setMode] = useState('light');
-    const [videoDetails, setVideoDetails] = useState();
-    const { setSearch, response } = useFetchData();
     return (
-        <DataProvider response={response}>
-            <ThemeProvider theme={mode === 'light' ? lightTheme : darkTheme}>
-                <GlobalStyles />
-                <Button
-                    id="change-theme"
-                    size="10px"
-                    onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-                >
-                    Change Theme
-                </Button>
-                <div id="home-section">
-                    <HeaderSection
-                        globalSetSearch={setSearch}
-                        videoDetails={setVideoDetails}
-                    />
-                    {videoDetails ? (
-                        <VideoPage video={videoDetails} selectVideo={setVideoDetails} />
-                    ) : (
-                        <HomePage selectVideo={setVideoDetails} />
-                    )}
-                </div>
-            </ThemeProvider>
+        <DataProvider>
+            <HeaderSection />
+            <Routes />
         </DataProvider>
     );
 }

src/components/Button/Button.jsx

@@ -2,10 +2,10 @@ import styled from 'styled-components';
 
 const Button = styled.button`
     background: transparent;
-    border: none;
+    border: 5px;
     font-size: ${(props) => props.size};
     cursor: pointer;
-    color: #919191;
+    color: #f0eeee;
 `;
 
 export default Button;

src/components/Card/Card.page.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useData } from '../../states/provider';
+import { ACTIONS } from '../../states/reducer';
+import Emoji from '../Emoji/Emoji';
+import Button from '../Button/Button';
+import Container, { Styled } from './Card.page.styled';
+
+function Card({ item }) {
+    const { videoId } = item.id;
+    const title = item?.snippet?.title ?? '';
+    const description = item?.snippet?.description ?? '';
+    const image = item?.snippet?.thumbnails?.default.url;
+    const width = item?.snippet?.thumbnails?.default?.width ?? 120;
+    const height = item?.snippet?.thumbnails?.default?.height ?? 90;
+    const { data, dispatch } = useData();
+
+    function toggleFavoriteVideo() {
+        dispatch({
+            type: data.favoriteVideoList.has(videoId)
+                ? ACTIONS.REMOVE_FROM_FAVORITES
+                : ACTIONS.ADD_TO_FAVORITES,
+            payload: { video: item },
+        });
+    }
+
+    function handleSelectVideo() {
+        const selectedVideo = item;
+
+        dispatch({
+            type: ACTIONS.CHANGE_SELECTED_VIDEO,
+            payload: {
+                selectedVideo,
+            },
+        });
+    }
+
+    return (
+        <Container>
+            <center>
+                {' '}
+                <Button size="2em" onClick={toggleFavoriteVideo}>
+                    <Emoji symbol={data.favoriteVideoList.has(videoId) ? '⭐' : '✰'} />
+                </Button>{' '}
+                <Styled.Link to="/detailedVideo" onClick={handleSelectVideo}>
+                    <h3>{title} </h3>
+                    <img src={image} alt={title} width={width} height={height} />
+                    <p> {description}</p>
+                </Styled.Link>
+            </center>
+        </Container>
+    );
+}
+
+export default Card;

src/components/Card/Card.page.styled.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const Container = styled.div`
+    width: 22%;
+    height: 20em;
+    border-style: solid;
+    margin: 1em;
+    border-radius: 1em;
+    display: flex;
+    justify-content: space-between;
+    float: left;
+    background-color: #d47b7b;
+    text-overflow: ellipsis;
+    overflow: hidden;
+`;
+
+const StyledLink = styled(Link)`
+    text-decoration: 'none';
+`;
+
+const Styled = {
+    Link: StyledLink,
+};
+
+export { Styled };
+export default Container;

src/components/Login/Login.component.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import Styled from './Login.styled';
+import { useData } from '../../states/provider';
+import { ACTIONS } from '../../states/reducer';
+
+function ModalLogin({ show }) {
+    const { data, dispatch } = useData();
+    const [userName, setUserName] = useState(undefined);
+    const [password, setPassword] = useState(undefined);
+    const [errorMessage, setErrorMessage] = useState(false);
+
+    function validateUserLogin() {
+        if (data.loginUser) {
+            show(false);
+        } else {
+            setErrorMessage('usuario Invalido');
+        }
+    }
+
+    function handlerLogin() {
+        console.log(data);
+        if (userName && userName.trim().length > 0) {
+            if (password && password.trim().length > 0) {
+                dispatch({
+                    type: ACTIONS.LOGIN,
+                    payload: { user: userName },
+                });
+
+                setTimeout(validateUserLogin, 300);
+            } else {
+                setErrorMessage('Please enter a password');
+            }
+        } else {
+            setErrorMessage('Please enter a username');
+        }
+    }
+
+    return (
+        <div>
+            {data.loginUser ? (
+                ''
+            ) : (
+                <Styled.ModalBackground>
+                    <Styled.ModalContent>
+                        <Styled.CloseButton onClick={() => show(false)}>
+                            &times;
+                        </Styled.CloseButton>
+                        <Styled.LoginForm>
+                            <Styled.FormLabel htmlFor="uname">
+                                <b>Username</b>
+                            </Styled.FormLabel>
+                            <Styled.Input
+                                type="text"
+                                placeholder="Wizeline"
+                                name="uname"
+                                required
+                                onChange={(event) => setUserName(event.target.value)}
+                            />
+
+                            <Styled.FormLabel htmlFor="psw">
+                                <b>Password</b>
+                            </Styled.FormLabel>
+                            <Styled.Input
+                                type="password"
+                                placeholder="Not Empty Password"
+                                name="psw"
+                                required
+                                onChange={(event) => setPassword(event.target.value)}
+                            />
+                            <span>{errorMessage || ''}</span>
+
+                            <Styled.LoginButton type="button" onClick={handlerLogin}>
+                                Login
+                            </Styled.LoginButton>
+                        </Styled.LoginForm>
+                    </Styled.ModalContent>
+                </Styled.ModalBackground>
+            )}
+        </div>
+    );
+}
+
+export default ModalLogin;

src/components/Login/Login.styled.js

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+const ModalBackground = styled.div`
+    display: block;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+`;
+
+const ModalContent = styled.div`
+    background-color: #2183d3;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 30%;
+    border-radius: 1em;
+    border-style: solid 5px;
+`;
+
+const CloseButton = styled.span`
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    &:hover,
+    &:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }
+`;
+
+const LoginForm = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+const FormLabel = styled.label`
+    margin: 10px 0;
+`;
+
+const Input = styled.input`
+    margin: 10px 0;
+    border-radius: 5px;
+    border: 1px solid black;
+    line-height: 1.5em;
+    padding: 5px;
+`;
+
+const LoginButton = styled.button`
+    border-radius: 5px;
+    border: 1px solid black;
+    padding: 10px;
+    margin: 10px 0;
+    cursor: pointer;
+`;
+
+const Styled = {
+    ModalBackground,
+    ModalContent,
+    CloseButton,
+    LoginForm,
+    FormLabel,
+    Input,
+    LoginButton,
+};
+
+export default Styled;

src/components/Login/index.js

@@ -0,0 +1 @@
+export { default } from './ModalLogin.component';

src/components/Routes/Routes.component.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import HomePage from '../../pages/Home/Home.page';
+import FavoritePage from '../../pages/Favorites/Favorite.page';
+import ErrorPage from '../../pages/Error/Error.page';
+import VideoPage from '../../pages/Video/Video.page';
+import VideoListPage from '../../pages/VideoList/VideoList.page';
+
+export default function Routes() {
+    return (
+        <>
+            <Switch>
+                <Route exact path="/" component={HomePage} />
+                <Route path="/home" component={VideoListPage} />
+                <Route path="/detailedVideo" component={VideoPage} />
+                <Route path="/favorite" component={FavoritePage} />
+                <Route path="/error" component={ErrorPage} />
+                <Route path="*" component={ErrorPage} />
+            </Switch>
+        </>
+    );
+}

src/components/Routes/index.js

@@ -0,0 +1 @@
+export { default } from './Routes.component';