Minor - Mini-Challenge 1: Core Concepts and Styling #112
Conversation
|
|
||
| import { BlockElement, ContentWrapper, Description, VideoThumbnail } from './Content.styles'; | ||
|
|
||
| let data = require('../../mockdata/youtube-videos-mock.json'); |
There was a problem hiding this comment.
Question
Modificas data por algún otro valor?
En caso de no modificarse podríamos utilizar un const.
| function ContentComponent() { | ||
| console.log(data.items.lenght) | ||
| const element = data && data.items.map((item)=>( | ||
| <BlockElement> |
There was a problem hiding this comment.
Recommendation
Podríamos crear un componente presentacional que se encargue renderizar un solo video. De esta forma nos permitiría mantener una función especifica a cada componente.
There was a problem hiding this comment.
Como tip, evitemos que este nuevo componente reciba item, en cambio debería recibir cada una de las propiedades:
- title
- description
- thumbnail
- etc
| import HeaderComponent from '../Header.component'; | ||
|
|
||
| describe('Header Component', () => { | ||
| it('Should show HeaderComponent', () => { |
There was a problem hiding this comment.
Recommendation
Podemos utilizar it.todo para aquellos unit tests que no se encuentran implementados, de esta forma podremos ubicarlos facilmente en un futuro. Reference.
| import React from 'react'; | ||
|
|
||
| import { ButtonToggle, HeaderWrapper, Input, LogoLink, MenuToggle } from './Header.styles'; | ||
| // import InsideSessionLogo from '../../resources/logo.png'; // TODO: Uncomment when login is ready |
There was a problem hiding this comment.
Este comentario lo podemos eliminar antes de hacer el commit.
| let data = require('../../mockdata/youtube-videos-mock.json'); | ||
|
|
||
| function ContentComponent() { | ||
| console.log(data.items.lenght) |
| function HeaderComponent() { | ||
| return ( | ||
| <HeaderWrapper> | ||
| <Input type='text' placeholder="Wizleine" /> |
Acceptance Criteria
The header is rendered correctly.
A list of videos obtained from a mock file is displayed in the Home View.
CSS styles are applied correctly using the styled-components approach.
Bonus Points
No warnings or errors are logged in the browser console.
The UI is responsive