PaquitoSoft

O Grove 2019 Playlist

Parte 1

• Sálvese quien pueda - Vetusta Morla

• Copacabana - IZAL

• La revolución sexual - La casa azul

• Ave María - David Bisbal

• Shape of you - Ed Sheeran (Pedro)

• Just got paid - Sigala

• Shut up and dance - Walk the moon

PaquitoSoft

import React, { useState } from 'react';
import useExternalData from '../hooks/use-external-data';
import { getAllPodcasts } from '../api/podcaster';

import PodcastSummary from './product-summary';

function onFilterChangedFactory(originalPodcasts, updater) {
    return (event) => {
        const regExp = new RegExp(event.target.value, 'i');
        updater(

PaquitoSoft

import { useState, useEffect, useContext } from 'react';
import LoaderContext from '../contexts/loader-context';

export default function useExternalData(loader) {
    const [externalData, setExternalData] = useState({
        data: undefined,
        isLoading: true,
        error: undefined
    });

PaquitoSoft

import React from 'react';
import PodcastSummary from './product-summary';
import { getAllPodcasts } from '../api/podcaster';

import ExternalDataLoader from './external-data-loader';

class HomePage extends React.Component {

    constructor(props) {
        super(props);

PaquitoSoft

import React from 'react';
import { func } from 'prop-types';

import LoaderContext from '../contexts/loader-context';

class ExternalDataLoader extends React.Component {

    static contextType = LoaderContext;

    constructor(props) {

PaquitoSoft

import React from 'react';

import withExternalData from '../hocs/with-external-data';
import { getAllPodcasts } from '../api/podcaster';

import PodcastSummary from './product-summary';

class HomePage extends React.Component {

    constructor(props) {

PaquitoSoft

import React from 'react';

import LoaderContext from '../contexts/loader-context';

export default function withExternalData(WrappedComponent, loader) {
    return class extends React.Component {

        static contextType = LoaderContext;

        constructor(props) {

PaquitoSoft

export default function PodcastSummary(podcast) {
    return `
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 podcast-summary">
            <div class="box">
                <a href="/podcast/${podcast.id}">
                    <div class="box-icon">
                        <img src=${podcast.cover} alt=${podcast.name}>
                    </div>
                    <div class="info">
                        <h4 class="text-center">${podcast.name}</h4>

PaquitoSoft

class BasePage {

	constructor(data = {}) {
		this.state = data;
		// Create the main HTMLElement for this page so we can
		// attach DOMEvent listeners to it		
		this.$el = document.createElement('div');

		Object.keys(this.events || {}).forEach(key => {
			const [eventName, selector] = key.split('|');

PaquitoSoft

import { getAllPodcasts } from '../../api/podcaster.js';
import BasePage from '../shared/base-page/base-page.js';
import PodcastSummary from './podcast-summary.js';

class HomePage extends BasePage {

    constructor(podcasts = []) {
		// Call parent class with instance state 
        super({
			filter: '',