This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: '', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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('|'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); |