rework on demand loading of show notes

Author: wesbos

components/Player.js

@@ -45,6 +45,7 @@ export default class Player extends React.Component {
 
   componentDidUpdate(prevProps, prevState) { //eslint-disable-line
     const { show } = this.props;
+    console.log({ player: show });
     const { currentTime, currentVolume, playbackRate } = this.state;
     if (show.number !== prevProps.show.number) {
       const lp = localStorage.getItem(`lastPlayed${show.number}`);
@@ -81,7 +82,7 @@ export default class Player extends React.Component {
     }
   }
 
-  timeUpdate = e => {
+  timeUpdate = (e) => {
     // console.log('Updating Time');
     const { show } = this.props;
     const { timeWasLoaded } = this.state;
@@ -102,7 +103,7 @@ export default class Player extends React.Component {
     }
   };
 
-  volumeUpdate = e => {
+  volumeUpdate = (e) => {
     const { timeWasLoaded } = this.state;
     // Check if the user already had a curent volume
     if (timeWasLoaded) {
@@ -114,7 +115,7 @@ export default class Player extends React.Component {
     }
   };
 
-  groupUpdates = e => {
+  groupUpdates = (e) => {
     this.timeUpdate(e);
     this.volumeUpdate(e);
   };
@@ -125,15 +126,15 @@ export default class Player extends React.Component {
     this.audio[method]();
   };
 
-  scrubTime = eventData =>
+  scrubTime = (eventData) =>
     (eventData.nativeEvent.offsetX / this.progress.offsetWidth) *
     this.audio.duration;
 
-  scrub = e => {
+  scrub = (e) => {
     this.audio.currentTime = this.scrubTime(e);
   };
 
-  seekTime = e => {
+  seekTime = (e) => {
     this.setState({
       tooltipPosition: e.nativeEvent.offsetX,
       tooltipTime: formatTime(this.scrubTime(e)),
@@ -146,7 +147,7 @@ export default class Player extends React.Component {
     onPlayPause(this.audio);
   };
 
-  volume = e => {
+  volume = (e) => {
     this.audio.volume = e.currentTarget.value;
     this.setState({
       currentVolume: `${e.currentTarget.value}`,
@@ -157,12 +158,12 @@ export default class Player extends React.Component {
     this.speed(0.25);
   };
 
-  speedDown = e => {
+  speedDown = (e) => {
     e.preventDefault();
     this.speed(-0.25);
   };
 
-  speed = change => {
+  speed = (change) => {
     const playbackRateMax = 2.5;
     const playbackRateMin = 0.75;
 
@@ -260,6 +261,7 @@ export default class Player extends React.Component {
           </div>
         </div>
         {/* eslint-disable */}
+
         <audio
           ref={audio => (this.audio = audio)}
           onPlay={this.playPause}

components/Show.js

@@ -7,13 +7,8 @@ import Bars from './bars';
 
 export default class Show extends React.Component {
   render() {
-    const {
-      show,
-      currentPlaying,
-      currentShow,
-      setCurrentPlaying,
-      isPlaying,
-    } = this.props;
+    const { show, currentPlaying, currentShow, setCurrentPlaying, isPlaying } =
+      this.props;
     return (
       <div
         className={`show ${
@@ -22,7 +17,6 @@ export default class Show extends React.Component {
       `}
       >
         <Link
-          shallow
           scroll={false}
           href="/show/[number]/[slug]"
           as={`/show/${show.displayNumber}/${slug(show.title)}`}

components/ShowList.js

@@ -10,7 +10,7 @@ const ShowList = ({
   isPlaying,
 }) => (
   <div className="showList">
-    {shows.map(show => (
+    {shows.map((show) => (
       <Show
         setCurrentPlaying={setCurrentPlaying}
         currentPlaying={currentPlaying}

lib/getShows.js

@@ -8,12 +8,12 @@ const readAFile = promisify(readFile);
 const readDirContents = promisify(readdir);
 const format = require('date-fns/format');
 
-const pad = num => `000${num}`.substr(-3);
+const pad = (num) => `000${num}`.substr(-3);
 
 let shows;
 
 const renderer = new marked.Renderer();
-renderer.link = function(href, title, text) {
+renderer.link = function (href, title, text) {
   return `<a rel="noopener noreferrer" target="_blank" href="${href}"> ${text}</a>`;
 };
 
@@ -24,17 +24,17 @@ const loadShows = async () => {
   }
 
   const showsDir = path.join(process.cwd(), 'shows');
-  const files = (await readDirContents(showsDir)).filter(file =>
+  const files = (await readDirContents(showsDir)).filter((file) =>
     file.endsWith('.md')
   );
 
-  const markdownPromises = files.map(file =>
+  const markdownPromises = files.map((file) =>
     readAFile(path.join(showsDir, file), 'utf-8')
   );
   const showMarkdown = await Promise.all(markdownPromises);
 
   shows = showMarkdown
-    .map(md => marked(md, { renderer })) // convert to markdown
+    .map((md) => marked(md, { renderer })) // convert to markdown
     .map((show, i) => {
       const { number } = show.meta;
 
@@ -54,13 +54,14 @@ const loadShows = async () => {
 
 async function getShowsList() {
   const showsForList = await getShows();
-  return showsForList.map(show => ({
+  return showsForList.map((show) => ({
     id: show.number,
     title: show.title,
     slug: show.slug,
     date: show.date,
     displayDate: show.displayDate,
     displayNumber: show.displayNumber,
+    url: show.url,
   }));
 }
 
@@ -70,13 +71,13 @@ async function getShows(filter) {
   const now = Date.now();
   return filter === 'all'
     ? showsForGetShows
-    : showsForGetShows.filter(show => show.date < now);
+    : showsForGetShows.filter((show) => show.date < now);
 }
 
 async function getShow(number) {
   const showsForGetShow = await loadShows();
   const show = showsForGetShow.find(
-    showItem => showItem.displayNumber === number
+    (showItem) => showItem.displayNumber === number
   );
   return show;
 }
@@ -112,5 +113,5 @@ module.exports = {
   getShows,
   getShow,
   getAllShowSickPicks,
-  getShowsList
+  getShowsList,
 };