PaquitoSoft

import routingConfig from './config/routing.js';
import Router from './components/shared/router/router.js';

const app = document.createElement('div');

app.innerHTML = `
	<div class="header clearfix">
		<h3 class="text-muted">
			<a href="/">Podcaster</a>
			<div class="spinner hidden">

PaquitoSoft

const Router = {

	setup({ mountingElement, routingConfig, loadingCallback }) {
		this.rootElement = mountingElement;
		this.routingConfig = routingConfig;
		this.loadingCallback = loadingCallback;

		// Listen to click events in the document
		// If an A tag was clicked, client-side navigate
		// to its link url

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: '',

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

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

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

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 { 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 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 { 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
    });