From 0bbdd8ce92d537f1fa9ce4fabfad6022cc914e1a Mon Sep 17 00:00:00 2001 From: Fernanda Ramos Date: Tue, 6 Apr 2021 04:28:50 -0500 Subject: [PATCH 1/2] [update] - App router and code changes --- src/components/App/App.component.jsx | 55 +++++++------- src/components/NavBar/index.jsx | 28 +++---- src/components/SearchInput/index.jsx | 6 +- src/components/SideMenu/index.jsx | 8 +- src/components/VideoCard/index.jsx | 10 +-- src/components/VideoGrid/index.jsx | 8 +- src/components/VideosListElement/index.jsx | 6 +- src/pages/Favorites/Favorites.page.jsx | 20 +++++ src/pages/Favorites/index.js | 1 + src/pages/Favorites/styled.js | 14 ++++ src/pages/Home/Home.page.jsx | 6 +- src/pages/VideoDetail/VideoDetail.page.jsx | 85 ++++++++++++++++++++-- src/state/GlobalContext.jsx | 9 +++ src/state/GlobalReducer.jsx | 13 ++++ src/state/SearchWordContext.jsx | 8 -- src/state/SearchWordReducer.js | 10 --- src/state/ThemeContext.jsx | 8 -- src/state/ThemeReducer.js | 10 --- 18 files changed, 199 insertions(+), 106 deletions(-) create mode 100644 src/pages/Favorites/Favorites.page.jsx create mode 100644 src/pages/Favorites/index.js create mode 100644 src/pages/Favorites/styled.js create mode 100644 src/state/GlobalContext.jsx create mode 100644 src/state/GlobalReducer.jsx delete mode 100644 src/state/SearchWordContext.jsx delete mode 100644 src/state/SearchWordReducer.js delete mode 100644 src/state/ThemeContext.jsx delete mode 100644 src/state/ThemeReducer.js diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx index c96a88431..24c683223 100644 --- a/src/components/App/App.component.jsx +++ b/src/components/App/App.component.jsx @@ -7,18 +7,16 @@ import Layout from '../Layout'; import HomePage from '../../pages/Home'; import LoginPage from '../../pages/Login'; import VideoDetailPage from '../../pages/VideoDetail'; +import FavoritesPage from '../../pages/Favorites'; import NotFound from '../../pages/NotFound'; -import SearchWordContext from '../../state/SearchWordContext'; -import SearchWordReducer from '../../state/SearchWordReducer'; -import ThemeContext from '../../state/ThemeContext'; -import ThemeReducer from '../../state/ThemeReducer'; +import GlobalContext from '../../state/GlobalContext'; +import GlobalReducer from '../../state/GlobalReducer'; +import Private from '../Private'; export default function App() { const [videos, setVideos] = React.useState([]); - const [state, dispatch] = useReducer(SearchWordReducer, { + const [state, dispatch] = useReducer(GlobalReducer, { word: 'Wizeline', - }); - const [stateTheme, dispatchTheme] = useReducer(ThemeReducer, { theme: { navBar: '#3fc7cb', content: 'white', @@ -29,27 +27,28 @@ export default function App() { return ( - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx index 4bbcc4d2c..9e3fe6068 100644 --- a/src/components/NavBar/index.jsx +++ b/src/components/NavBar/index.jsx @@ -12,15 +12,13 @@ import { NavElementsWrapper, } from './styled'; import { fetchVideos } from '../../lib/youTubeApi'; -import SearchWordContext from '../../state/SearchWordContext'; -import ThemeContext from '../../state/ThemeContext'; +import GlobalContext from '../../state/GlobalContext'; const Navbar = ({ setVideos }) => { const [checked, setChecked] = React.useState(false); const [open, setOpen] = React.useState(false); - const { state } = useContext(SearchWordContext); - const { stateTheme, dispatchTheme } = useContext(ThemeContext); - const { theme } = stateTheme; + const { state, dispatch } = useContext(GlobalContext); + const { theme } = state; React.useEffect(() => { fetchVideos(state.word).then((videosData) => { @@ -31,21 +29,25 @@ const Navbar = ({ setVideos }) => { const changeHandler = () => { setChecked(!checked); if (!checked) { - dispatchTheme({ + dispatch({ type: 'SET_THEME', payload: { - navBar: '#556cd6', - content: '#303030', - text: 'white', + theme: { + navBar: '#556cd6', + content: '#303030', + text: 'white', + }, }, }); } else { - dispatchTheme({ + dispatch({ type: 'SET_THEME', payload: { - navBar: '#3fc7cb', - content: 'white', - text: 'black', + theme: { + navBar: '#3fc7cb', + content: 'white', + text: 'black', + }, }, }); } diff --git a/src/components/SearchInput/index.jsx b/src/components/SearchInput/index.jsx index 14bb9e99e..3a0f38cc8 100644 --- a/src/components/SearchInput/index.jsx +++ b/src/components/SearchInput/index.jsx @@ -1,17 +1,17 @@ import React, { useContext } from 'react'; import { useHistory } from 'react-router'; import { Input } from './styled'; -import SearchWordContext from '../../state/SearchWordContext'; +import GlobalContext from '../../state/GlobalContext'; const SearchInput = () => { - const { state, dispatch } = useContext(SearchWordContext); + const { state, dispatch } = useContext(GlobalContext); const [searchWord, setSearchWord] = React.useState(state.word); const history = useHistory(); const triggerChange = () => { dispatch({ type: 'SET_WORD', - payload: searchWord, + payload: { word: searchWord }, }); history.push('/'); diff --git a/src/components/SideMenu/index.jsx b/src/components/SideMenu/index.jsx index a190ff35a..0dacf97be 100644 --- a/src/components/SideMenu/index.jsx +++ b/src/components/SideMenu/index.jsx @@ -3,15 +3,15 @@ import { Link } from 'react-router-dom'; import { AUTH_STORAGE_KEY } from '../../utils/constants'; import { storage } from '../../utils/storage'; import { LinkText, ContainerMenu, SideMen, CloseBtn, Links, CloseIcon } from './styled'; -import ThemeContext from '../../state/ThemeContext'; +import GlobalContext from '../../state/GlobalContext'; const SideMenu = ({ open, setOpen }) => { const isLogged = storage.get(AUTH_STORAGE_KEY); - const { stateTheme } = useContext(ThemeContext); - const { theme } = stateTheme; + const { state } = useContext(GlobalContext); + const { theme } = state; const favorites = ( - setOpen(!open)}> + setOpen(!open)}> ⭐️ diff --git a/src/components/VideoCard/index.jsx b/src/components/VideoCard/index.jsx index 0d06f5f41..756e5424a 100644 --- a/src/components/VideoCard/index.jsx +++ b/src/components/VideoCard/index.jsx @@ -1,15 +1,15 @@ import React, { useContext } from 'react'; import { Link } from 'react-router-dom'; import { Card, CardImg, CardContent, CardTitle, CardDescription } from './styled'; -import ThemeContext from '../../state/ThemeContext'; +import GlobalContext from '../../state/GlobalContext'; -const VideoCard = ({ video }) => { +const VideoCard = ({ video, videos }) => { const { snippet, id } = video; - const { stateTheme } = useContext(ThemeContext); - const { theme } = stateTheme; + const { state } = useContext(GlobalContext); + const { theme } = state; return ( - + diff --git a/src/components/VideoGrid/index.jsx b/src/components/VideoGrid/index.jsx index a9bca1e02..99117e146 100644 --- a/src/components/VideoGrid/index.jsx +++ b/src/components/VideoGrid/index.jsx @@ -1,11 +1,11 @@ import React, { useContext } from 'react'; import VideoCard from '../VideoCard'; import { Grid, Row, Col } from './styled'; -import ThemeContext from '../../state/ThemeContext'; +import GlobalContext from '../../state/GlobalContext'; const VideoGrid = ({ videos }) => { - const { stateTheme } = useContext(ThemeContext); - const { theme } = stateTheme; + const { state } = useContext(GlobalContext); + const { theme } = state; return ( @@ -13,7 +13,7 @@ const VideoGrid = ({ videos }) => { {videos.map((video) => video.id.videoId ? ( - + ) : ( '' diff --git a/src/components/VideosListElement/index.jsx b/src/components/VideosListElement/index.jsx index c3951f278..52f4f6066 100644 --- a/src/components/VideosListElement/index.jsx +++ b/src/components/VideosListElement/index.jsx @@ -1,10 +1,10 @@ import React, { useContext } from 'react'; import { ListElement, Image, Detail, Description } from './styled'; -import ThemeContext from '../../state/ThemeContext'; +import GlobalContext from '../../state/GlobalContext'; const VideosListElement = ({ snippet }) => { - const { stateTheme } = useContext(ThemeContext); - const { theme } = stateTheme; + const { state } = useContext(GlobalContext); + const { theme } = state; return ( diff --git a/src/pages/Favorites/Favorites.page.jsx b/src/pages/Favorites/Favorites.page.jsx new file mode 100644 index 000000000..11756ab6b --- /dev/null +++ b/src/pages/Favorites/Favorites.page.jsx @@ -0,0 +1,20 @@ +import React, { useContext } from 'react'; +import { storage } from '../../utils/storage'; +import VideoGrid from '../../components/VideoGrid'; +import { Favorites } from './styled'; +import GlobalContext from '../../state/GlobalContext'; + +function FavoritesPage() { + const { state } = useContext(GlobalContext); + const { theme } = state; + const videos = storage.get('favoriteList'); + + return ( +
+ Favorites + +
+ ); +} + +export default FavoritesPage; diff --git a/src/pages/Favorites/index.js b/src/pages/Favorites/index.js new file mode 100644 index 000000000..ddb7677c3 --- /dev/null +++ b/src/pages/Favorites/index.js @@ -0,0 +1 @@ +export { default } from './Favorites.page'; diff --git a/src/pages/Favorites/styled.js b/src/pages/Favorites/styled.js new file mode 100644 index 000000000..814030d7f --- /dev/null +++ b/src/pages/Favorites/styled.js @@ -0,0 +1,14 @@ +import styled from 'styled-components'; + +const Favorites = styled.div` + color: ${({ theme }) => theme.text}; + flex-wrap: wrap; + align-content: center; + width: 100%; + text-align: -webkit-center; + padding-top: 30px; + font-size: 40px; + background-color: ${({ theme }) => theme.content}; +`; + +export { Favorites }; diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx index db6000379..52ca64225 100644 --- a/src/pages/Home/Home.page.jsx +++ b/src/pages/Home/Home.page.jsx @@ -1,11 +1,11 @@ import React, { useContext } from 'react'; import VideoGrid from '../../components/VideoGrid'; import { Welcome } from './styled'; -import ThemeContext from '../../state/ThemeContext'; +import GlobalContext from '../../state/GlobalContext'; function HomePage({ videos }) { - const { stateTheme } = useContext(ThemeContext); - const { theme } = stateTheme; + const { state } = useContext(GlobalContext); + const { theme } = state; return (
diff --git a/src/pages/VideoDetail/VideoDetail.page.jsx b/src/pages/VideoDetail/VideoDetail.page.jsx index a81abbc38..048c79d44 100644 --- a/src/pages/VideoDetail/VideoDetail.page.jsx +++ b/src/pages/VideoDetail/VideoDetail.page.jsx @@ -12,20 +12,91 @@ import { VideoDescription, AddFavorites, } from './styled'; -import ThemeContext from '../../state/ThemeContext'; +import GlobalContext from '../../state/GlobalContext'; -function VideoDetailPage({ videos }) { +function VideoDetailPage() { const isLogged = storage.get(AUTH_STORAGE_KEY); const history = useHistory(); const [video, setVideo] = React.useState(history.location.state.video); - const [vids, setVideos] = React.useState(videos); + const [vids, setVideos] = React.useState(history.location.state.videos); + const [favorite, setFavorite] = React.useState(false); const { snippet, id } = video; - const { stateTheme } = useContext(ThemeContext); - const { theme } = stateTheme; - const addFavorites = AGREGAR A FAVORITOS; + const { state } = useContext(GlobalContext); + const { theme } = state; + let favoritesList = storage.get('favoriteList'); + + const addToFavorites = () => { + if (favoritesList === null) { + favoritesList = []; + } + const index = favoritesList.findIndex( + (element) => element.id.videoId === video.id.videoId + ); + if (index === -1) { + favoritesList.push(video); + } + storage.set('favoriteList', favoritesList); + setFavorite(true); + }; + + const removeFromFavorites = () => { + const index = favoritesList.findIndex( + (element) => element.id.videoId === video.id.videoId + ); + if (index !== -1) { + favoritesList.splice(index, 1); + storage.set('favoriteList', favoritesList); + } + setFavorite(false); + }; + + const addFavorites = ( + { + addToFavorites(); + }} + > + AGREGAR A FAVORITOS + + ); + + const removeFavorites = ( + { + removeFromFavorites(); + }} + > + REMOVER DE FAVORITOS + + ); + + const isFavorite = () => { + if (favoritesList !== null) { + const index = favoritesList.findIndex( + (element) => element.id.videoId === video.id.videoId + ); + if (index !== -1) { + setFavorite(true); + } else { + setFavorite(false); + } + } else { + setFavorite(false); + } + }; + + const show = () => { + if (favorite) { + return removeFavorites; + } + return addFavorites; + }; React.useEffect(() => { setVideo(video); + isFavorite(); }, [video]); return ( @@ -41,7 +112,7 @@ function VideoDetailPage({ videos }) {

{snippet.title}

{snippet.description}

- {isLogged ? addFavorites : ''} + {isLogged ? show() : ''} diff --git a/src/state/GlobalContext.jsx b/src/state/GlobalContext.jsx new file mode 100644 index 000000000..de029e4b1 --- /dev/null +++ b/src/state/GlobalContext.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +const GlobalContext = React.createContext({ + searchWord: '', + theme: {}, + dispatch: () => {}, +}); + +export default GlobalContext; diff --git a/src/state/GlobalReducer.jsx b/src/state/GlobalReducer.jsx new file mode 100644 index 000000000..cb2279193 --- /dev/null +++ b/src/state/GlobalReducer.jsx @@ -0,0 +1,13 @@ +const GlobalReducer = (state, action) => { + console.log('EL STATE ', state); + switch (action.type) { + case 'SET_THEME': + return { ...state, theme: action.payload.theme }; + case 'SET_WORD': + return { ...state, word: action.payload }; + default: + return state; + } +}; + +export default GlobalReducer; diff --git a/src/state/SearchWordContext.jsx b/src/state/SearchWordContext.jsx deleted file mode 100644 index cdb37841f..000000000 --- a/src/state/SearchWordContext.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; - -const SearchWordContext = React.createContext({ - state: '', - dispatch: () => {}, -}); - -export default SearchWordContext; diff --git a/src/state/SearchWordReducer.js b/src/state/SearchWordReducer.js deleted file mode 100644 index e374a90bc..000000000 --- a/src/state/SearchWordReducer.js +++ /dev/null @@ -1,10 +0,0 @@ -const SearchWordReducer = (state, action) => { - switch (action.type) { - case 'SET_WORD': - return { ...state, word: action.payload }; - default: - return state; - } -}; - -export default SearchWordReducer; diff --git a/src/state/ThemeContext.jsx b/src/state/ThemeContext.jsx deleted file mode 100644 index 83e8085ce..000000000 --- a/src/state/ThemeContext.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; - -const ThemeContext = React.createContext({ - theme: {}, - dispatchTheme: () => {}, -}); - -export default ThemeContext; diff --git a/src/state/ThemeReducer.js b/src/state/ThemeReducer.js deleted file mode 100644 index b8ec9574a..000000000 --- a/src/state/ThemeReducer.js +++ /dev/null @@ -1,10 +0,0 @@ -const ThemeReducer = (stateTheme, action) => { - switch (action.type) { - case 'SET_THEME': - return { ...stateTheme, theme: action.payload }; - default: - return stateTheme; - } -}; - -export default ThemeReducer; From c611915c75b591dcff7f356e63a356fff149c440 Mon Sep 17 00:00:00 2001 From: Fernanda Ramos Date: Tue, 6 Apr 2021 05:02:56 -0500 Subject: [PATCH 2/2] [update] library update --- package-lock.json | 18 ------------------ package.json | 1 - src/components/Account/index.jsx | 2 ++ src/components/Account/styled.js | 3 +-- src/components/NavBar/index.jsx | 4 +++- src/components/NavBar/styled.js | 7 +++---- src/components/SideMenu/index.jsx | 2 +- src/components/SideMenu/styled.js | 6 +++--- src/img/user.svg | 16 ++++++++++++++++ 9 files changed, 29 insertions(+), 30 deletions(-) create mode 100644 src/img/user.svg diff --git a/package-lock.json b/package-lock.json index 601fbc9a2..893517d4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1689,24 +1689,6 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, - "@styled-icons/material-outlined": { - "version": "10.28.0", - "resolved": "https://registry.npmjs.org/@styled-icons/material-outlined/-/material-outlined-10.28.0.tgz", - "integrity": "sha512-TXCYrBeR5YXDziNMDAO6ZpKVjWvWaWmhBvF/vTvL6sME5zazk9sToyRJ6i/+DZGNH8wD7+635e8hkZAYPp++/A==", - "requires": { - "@babel/runtime": "^7.12.13", - "@styled-icons/styled-icon": "^10.6.0" - } - }, - "@styled-icons/styled-icon": { - "version": "10.6.3", - "resolved": "https://registry.npmjs.org/@styled-icons/styled-icon/-/styled-icon-10.6.3.tgz", - "integrity": "sha512-/A95L3peioLoWFiy+/eKRhoQ9r/oRrN/qzbSX4hXU1nGP2rUXcX3LWUhoBNAOp9Rw38ucc/4ralY427UUNtcGQ==", - "requires": { - "@babel/runtime": "^7.10.5", - "@emotion/is-prop-valid": "^0.8.7" - } - }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", diff --git a/package.json b/package.json index f97f488e4..5f4539bfc 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,6 @@ "version": "0.1.0", "private": true, "dependencies": { - "@styled-icons/material-outlined": "^10.28.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^10.4.9", "@testing-library/user-event": "^12.1.3", diff --git a/src/components/Account/index.jsx b/src/components/Account/index.jsx index 629f176d8..d1ebcd44a 100644 --- a/src/components/Account/index.jsx +++ b/src/components/Account/index.jsx @@ -4,6 +4,7 @@ import { AccountIcon, Dropdown, Button } from './styled'; import { AUTH_STORAGE_KEY } from '../../utils/constants'; import { storage } from '../../utils/storage'; import { useAuth } from '../../providers/Auth'; +import user from '../../img/user.svg'; const Account = () => { const { logout } = useAuth(); @@ -19,6 +20,7 @@ const Account = () => { return (
{ setOpenDrop(!openDrop); }} diff --git a/src/components/Account/styled.js b/src/components/Account/styled.js index 6e5872457..e3646ac5e 100644 --- a/src/components/Account/styled.js +++ b/src/components/Account/styled.js @@ -1,7 +1,6 @@ import styled from 'styled-components'; -import { AccountCircle } from '@styled-icons/material-outlined/AccountCircle'; -const AccountIcon = styled(AccountCircle)` +const AccountIcon = styled.img` color: white; width: 50px; height: 50px; diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx index 9e3fe6068..297f18b4a 100644 --- a/src/components/NavBar/index.jsx +++ b/src/components/NavBar/index.jsx @@ -57,7 +57,9 @@ const Navbar = ({ setVideos }) => {