Skip to content
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

Minor - Mini-Challenge 1: Core Concepts and Styling #112

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

Mortend223
Copy link

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


import { BlockElement, ContentWrapper, Description, VideoThumbnail } from './Content.styles';

let data = require('../../mockdata/youtube-videos-mock.json');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question
Modificas data por algún otro valor?

En caso de no modificarse podríamos utilizar un const.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

function ContentComponent() {
console.log(data.items.lenght)
const element = data && data.items.map((item)=>(
<BlockElement>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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', () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

function HeaderComponent() {
return (
<HeaderWrapper>
<Input type='text' placeholder="Wizleine" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aqui hay un pequeño typo en Wizeline

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants