-
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 challenge4 #89
base: master
Are you sure you want to change the base?
Mini challenge4 #89
Changes from all commits
c63e267
082c48f
ba3a6c3
b39a4c7
d13396e
3c08575
68d85fa
6f2c1dd
f32da79
337e8b5
470debb
2bebb2b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,3 +21,7 @@ | |
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
#netlify | ||
|
||
.netlify |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import React, { useEffect, useState } from 'react'; | ||
import LinkVideo from '../Link.element'; | ||
import { | ||
CardVideoDisplayerContainer, | ||
CardVideoContainer, | ||
CardVideoImage, | ||
CardVideoBottom, | ||
} from './CardVideo.elements'; | ||
|
||
export function CardVideo({ video, id }) { | ||
const urlVideo = `/watch?v=${id}`; | ||
|
||
return ( | ||
<> | ||
<LinkVideo to={urlVideo}> | ||
<CardVideoContainer> | ||
<CardVideoImage | ||
src={ | ||
video.snippet.thumbnails.high.url | ||
? video.snippet.thumbnails.high.url | ||
: video.snippet.thumbnails.default.url | ||
} | ||
/> | ||
<CardVideoBottom | ||
title={video.snippet.title} | ||
description={video.snippet.description} | ||
/> | ||
</CardVideoContainer> | ||
</LinkVideo> | ||
</> | ||
); | ||
} | ||
|
||
function CardVideoDisplayer({ videos }) { | ||
const [listVideos, setListVideo] = useState(); | ||
|
||
useEffect(() => { | ||
if (videos) { | ||
setListVideo( | ||
videos.map((video) => ( | ||
<CardVideo id={video.id.videoId} key={video.etag} video={video} /> | ||
)) | ||
); | ||
} | ||
}, [videos]); | ||
|
||
return ( | ||
<> | ||
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. Same comment here, you can remove |
||
<CardVideoDisplayerContainer>{listVideos}</CardVideoDisplayerContainer> | ||
</> | ||
); | ||
} | ||
|
||
export default CardVideoDisplayer; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
import React from 'react'; | ||
import styled from 'styled-components'; | ||
|
||
export const CardVideoDisplayerContainer = styled.div` | ||
display: flex; | ||
flex-wrap: wrap; | ||
position: absolute; | ||
justify-content: center; | ||
padding-bottom: 2rem; | ||
|
||
top: ${(props) => props.theme.navbar_height}; | ||
left: ${(props) => props.theme.sidemenu_width}; | ||
|
||
width: calc(100vw - ${(props) => props.theme.sidemenu_width}); | ||
`; | ||
|
||
export const CardVideoContainer = styled.div` | ||
width: calc((100vw - ${({ theme }) => theme.sidemenu_width}) / 1 - 4rem - 0.01px); | ||
aspect-ratio: 16/14; | ||
margin-top: 2rem; | ||
margin-left: 1rem; | ||
margin-right: 1rem; | ||
|
||
@media (min-width: 750px) { | ||
width: calc((100vw - ${({ theme }) => theme.sidemenu_width}) / 2 - 4rem - 0.01px); | ||
} | ||
|
||
@media (min-width: 1000px) { | ||
width: calc((100vw - ${({ theme }) => theme.sidemenu_width}) / 3 - 4rem - 0.01px); | ||
} | ||
|
||
&:hover { | ||
cursor: pointer; | ||
} | ||
`; | ||
|
||
export const CardVideoImage = styled.img` | ||
width: 100%; | ||
aspect-ratio: 16/9; | ||
height: auto; | ||
`; | ||
|
||
const CardVideoBottomContainer = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
aspect-ratio: 16/5; | ||
align-items: center; | ||
justify-content: center; | ||
`; | ||
|
||
const CardVideoTitle = styled.h2` | ||
color: ${(props) => props.theme.text_color}; | ||
font-size: 1.2rem; | ||
padding: 0.5rem 0.3rem; | ||
text-align: center; | ||
`; | ||
|
||
const CardVideoDescription = styled.p` | ||
color: ${(props) => props.theme.text_color}; | ||
|
||
padding-left: 0.5rem; | ||
padding-right: 0.5rem; | ||
padding-bottom: 0.5rem; | ||
font-size: 1rem; | ||
`; | ||
|
||
export function CardVideoBottom({ title, description }) { | ||
function trucateText(text) { | ||
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. It is better that this function lives outside the component the advantage of either of these options is that then the function would not be redefined with every render |
||
const maxLength = 50; | ||
return text.length <= maxLength ? text : `${text.substring(0, maxLength)}...`; | ||
} | ||
|
||
return ( | ||
<> | ||
<CardVideoBottomContainer> | ||
<CardVideoTitle>{title}</CardVideoTitle> | ||
<CardVideoDescription>{trucateText(description)}</CardVideoDescription> | ||
</CardVideoBottomContainer> | ||
</> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { render, screen } from '@testing-library/react'; | ||
import React from 'react'; | ||
import CardVideoDisplayer from './CardVideo.component'; | ||
|
||
describe('navbar', () => { | ||
beforeEach(() => { | ||
const videos = [ | ||
{ | ||
etag: 'sadlkjsakdljsa', | ||
snippet: { | ||
title: 'Wizeline', | ||
description: 'hlksjdakjskldja asjdaks', | ||
thumbnails: { | ||
high: { | ||
url: | ||
'https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s800-c-k-c0xffffffff-no-rj-mo', | ||
}, | ||
}, | ||
}, | ||
}, | ||
]; | ||
|
||
render(<CardVideoDisplayer videos={videos} />); | ||
}); | ||
|
||
test('should contains a title', () => { | ||
const title = screen.queryByText('Wizeline'); | ||
|
||
expect(title).toBeInTheDocument(); | ||
}); | ||
|
||
test('should contains a img', () => { | ||
const img = screen.queryByText('hlksjdakjskldja asjdaks'); | ||
|
||
expect(img).toBeInTheDocument(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default, CardVideo } from './CardVideo.component'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { createContext } from 'react'; | ||
|
||
const ThemeContext = createContext({}); | ||
|
||
export default ThemeContext; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import styled from 'styled-components'; | ||
import { Link } from 'react-router-dom'; | ||
|
||
const LinkVideo = styled(Link)` | ||
text-decoration: none; | ||
`; | ||
|
||
export default LinkVideo; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React, { createRef } from 'react'; | ||
import { useHistory } from 'react-router'; | ||
import { Nav, IconLogo, SearchBar, ProfileImg } from './Navbar.elements'; | ||
|
||
function Navbar() { | ||
const history = useHistory(); | ||
|
||
const inputRef = createRef(); | ||
|
||
const handleSubmit = (event) => { | ||
event.preventDefault(); | ||
history.push(`/?q=${inputRef.current.value}`); | ||
}; | ||
|
||
return ( | ||
<> | ||
<Nav> | ||
<IconLogo /> | ||
<SearchBar inputRef={inputRef} handleSubmit={handleSubmit} /> | ||
<ProfileImg src="https://bigosvaap.github.io/img/foca.webp" /> | ||
</Nav> | ||
</> | ||
); | ||
} | ||
|
||
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.
I think you can remove
<>
because<LinkVideo>
is wrapping everything else