-
Notifications
You must be signed in to change notification settings - Fork 95
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mini challenge 5 #109
base: master
Are you sure you want to change the base?
Mini challenge 5 #109
Changes from all commits
4f12174
093be33
2138a81
60494f4
340122c
01eb9fe
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,13 +3,15 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom'; | |
|
||
import AuthProvider from '../../providers/Auth'; | ||
import HomePage from '../../pages/Home'; | ||
import FavoritesPage from '../../pages/Favorites'; | ||
import LoginPage from '../../pages/Login'; | ||
import NotFound from '../../pages/NotFound'; | ||
import SecretPage from '../../pages/Secret'; | ||
import Private from '../Private'; | ||
import Fortune from '../Fortune'; | ||
import Layout from '../Layout'; | ||
import { random } from '../../utils/fns'; | ||
import AppState from '../../context/State/state'; | ||
import VideoDetailsView from '../VideoDetailsView'; | ||
|
||
function App() { | ||
useLayoutEffect(() => { | ||
|
@@ -31,27 +33,38 @@ function App() { | |
}, []); | ||
|
||
return ( | ||
<BrowserRouter> | ||
<AuthProvider> | ||
<Layout> | ||
<Switch> | ||
<Route exact path="/"> | ||
<HomePage /> | ||
</Route> | ||
<Route exact path="/login"> | ||
<LoginPage /> | ||
</Route> | ||
<Private exact path="/secret"> | ||
<SecretPage /> | ||
</Private> | ||
<Route path="*"> | ||
<NotFound /> | ||
</Route> | ||
</Switch> | ||
<Fortune /> | ||
</Layout> | ||
</AuthProvider> | ||
</BrowserRouter> | ||
<AppState> | ||
<BrowserRouter> | ||
<AuthProvider> | ||
<Layout> | ||
<Switch> | ||
<Route exact path="/favorites"> | ||
<FavoritesPage /> | ||
</Route> | ||
<Route exact path="/favorites/:id"> | ||
<VideoDetailsView /> | ||
</Route> | ||
|
||
<Route exact path="/login"> | ||
<LoginPage /> | ||
</Route> | ||
<Private exact path="/secret"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think the secret can be removed |
||
<SecretPage /> | ||
</Private> | ||
<Route exact path="/:id"> | ||
<VideoDetailsView /> | ||
</Route> | ||
<Route exact path="/"> | ||
<HomePage /> | ||
</Route> | ||
<Route path="*"> | ||
<NotFound /> | ||
</Route> | ||
</Switch> | ||
</Layout> | ||
</AuthProvider> | ||
</BrowserRouter> | ||
</AppState> | ||
); | ||
} | ||
|
||
|
This file was deleted.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,39 @@ | ||
import React from 'react'; | ||
import React, { useState, useRef, useContext } from 'react'; | ||
import styled from 'styled-components'; | ||
|
||
import './Layout.styles.css'; | ||
import Navbar from '../Navbar'; | ||
import Menu from '../Menu'; | ||
import { useOnClickOutside } from '../../utils/hooks/useOnClickOutside'; | ||
import { StateContext } from '../../context/State/state'; | ||
|
||
// import './Layout.styles.css'; | ||
|
||
const Main = styled.main` | ||
width: 100vw; | ||
height: 100%; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
background-color: ${(props) => (props.mode ? '#303030' : '#ffffff')}; | ||
color: ${(props) => (props.mode ? '#ccc' : '#303030')}; | ||
`; | ||
|
||
function Layout({ children }) { | ||
return <main className="container">{children}</main>; | ||
const stateContext = useContext(StateContext); | ||
const { darkMode } = stateContext; | ||
const [open, setOpen] = useState(false); | ||
const node = useRef(); | ||
useOnClickOutside(node, () => setOpen(false)); | ||
return ( | ||
<Main className="container" mode={darkMode}> | ||
<Navbar open={open} setOpen={setOpen} /> | ||
<div ref={node}> | ||
<Menu open={open} setOpen={setOpen} /> | ||
</div> | ||
|
||
{children} | ||
</Main> | ||
); | ||
} | ||
|
||
export default Layout; |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import React, { useContext } from 'react'; | ||
import styled from 'styled-components'; | ||
import { useHistory } from 'react-router-dom'; | ||
|
||
import { StateContext } from '../../context/State/state'; | ||
|
||
const StyledMenu = styled.nav` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can move the styled components to another file |
||
display: flex; | ||
flex-direction: column; | ||
justify-content: flex-start; | ||
border: 3px solid ${(props) => (props.mode ? '#ffffff' : '#303030')}; | ||
height: 100vh; | ||
text-align: left; | ||
padding: 2rem; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
transition: transform 0.3s ease-in-out; | ||
transform: translateX(-100%); | ||
transform: ${({ open }) => (open ? 'translateX(0)' : 'translateX(-100%)')}; | ||
z-index: 2; | ||
background-color: ${(props) => (props.mode ? '#303030' : '#ffffff')}; | ||
color: ${(props) => (props.mode ? '#ccc' : '#303030')}; | ||
`; | ||
|
||
const Span = styled.span` | ||
cursor: pointer; | ||
`; | ||
|
||
const Menu = ({ open }) => { | ||
const stateContext = useContext(StateContext); | ||
const history = useHistory(); | ||
const { | ||
darkMode, | ||
video: { openedDetails }, | ||
toggleOpenedDetails, | ||
} = stateContext; | ||
|
||
return ( | ||
<StyledMenu mode={darkMode ? 1 : 0} open={open}> | ||
<Span | ||
onClick={() => { | ||
history.push('/'); | ||
if (openedDetails) { | ||
toggleOpenedDetails(openedDetails); | ||
} | ||
}} | ||
> | ||
HOME | ||
</Span> | ||
<Span | ||
onClick={() => { | ||
history.push('/favorites'); | ||
if (openedDetails) { | ||
toggleOpenedDetails(openedDetails); | ||
} | ||
}} | ||
> | ||
FAVORITES | ||
</Span> | ||
</StyledMenu> | ||
); | ||
}; | ||
|
||
export default Menu; |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,34 @@ | ||||||
/* eslint-disable no-multi-assign */ | ||||||
import React from 'react'; | ||||||
import { render, screen } from '@testing-library/react'; | ||||||
|
||||||
import Menu from './index'; | ||||||
|
||||||
import { ConfigProvider } from '../../context/State/state'; | ||||||
|
||||||
const valueContextMock = { | ||||||
darkMode: false, | ||||||
video: { | ||||||
openedDetails: false, | ||||||
}, | ||||||
}; | ||||||
|
||||||
beforeEach(() => { | ||||||
render( | ||||||
<ConfigProvider value={valueContextMock}> | ||||||
<Menu /> | ||||||
</ConfigProvider> | ||||||
); | ||||||
}); | ||||||
|
||||||
describe('Menu', () => { | ||||||
test('should render Home span', async () => { | ||||||
const spanLabel = screen.queryByText('HOME'); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
expect(spanLabel).toBeInTheDocument(); | ||||||
}); | ||||||
|
||||||
test('should render favorites span', async () => { | ||||||
const spanLabel = screen.queryByText('FAVORITES'); | ||||||
expect(spanLabel).toBeInTheDocument(); | ||||||
}); | ||||||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from './Menu.component'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import React, { useContext } from 'react'; | ||
import styled from 'styled-components'; | ||
|
||
import Profile from '../Profile'; | ||
import Toggle from '../Toggle'; | ||
|
||
import { StateContext } from '../../context/State/state'; | ||
import { useAuth } from '../../providers/Auth'; | ||
|
||
const Container = styled.div` | ||
display: flex; | ||
align-items: center; | ||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); | ||
width: 100vw; | ||
background-color: ${(props) => (props.mode ? '#556cd6' : '#1c5476')}; | ||
color: ${(props) => (props.mode ? '#ccc' : '#303030')}; | ||
`; | ||
|
||
const MenuBurger = styled.div` | ||
margin-right: 100px; | ||
margin-left: 24px; | ||
padding-top: 0; | ||
padding-bottom: 0; | ||
width: 30px; | ||
height: 30px; | ||
cursor: pointer; | ||
|
||
@media (max-width: 768px) { | ||
margin-right: 20px; | ||
margin-left: 12px; | ||
padding-top: 0; | ||
padding-bottom: 0; | ||
width: 30px; | ||
height: 30px; | ||
cursor: pointer; | ||
} | ||
`; | ||
|
||
const Search = styled.div` | ||
margin-right: auto; | ||
`; | ||
|
||
const SearchInput = styled.input` | ||
width: 100%; | ||
padding: 12px 20px; | ||
margin: 8px 0; | ||
box-sizing: border-box; | ||
height: 32.5px; | ||
|
||
&::placeholder { | ||
font-family: Arial, Helvetica, sans-serif; // <Thing> when hovered | ||
} | ||
`; | ||
|
||
const Navbar = ({ open, setOpen }) => { | ||
const stateContext = useContext(StateContext); | ||
const { authenticated } = useAuth(); | ||
const { handleSearch, darkMode } = stateContext; | ||
|
||
return ( | ||
<Container mode={darkMode ? 1 : 0}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Instead of doing this on every component where you need it, you can create a function and export it. If something change, you just need to change it in one place. Also, as the var is boolean, a better proper name would be |
||
{authenticated ? ( | ||
<> | ||
<MenuBurger onClick={() => setOpen(!open)}> | ||
<svg | ||
className="MuiSvgIcon-root" | ||
focusable="false" | ||
viewBox="0 0 24 24" | ||
aria-hidden="true" | ||
> | ||
<path fill="#ffffff" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /> | ||
</svg> | ||
</MenuBurger> | ||
<Search> | ||
<SearchInput type="search" placeholder="search..." onChange={handleSearch} /> | ||
</Search> | ||
<Toggle /> | ||
</> | ||
) : undefined} | ||
<Profile /> | ||
</Container> | ||
); | ||
}; | ||
|
||
export default Navbar; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This and the favorite details page should be private