feature: show song debuts

[#237]
alxndr · Nov 11, 2021 · ac0088c · ac0088c
1 parent 47a2e26
commit ac0088c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/src/components/setlist.js b/src/components/setlist.js
@@ -1,6 +1,7 @@
 import React from 'react'
-import {filter, find, groupWith, propEq} from 'ramda'
+import {filter, find, groupWith, partition, propEq} from 'ramda'
 import classnames from 'classnames'
+import {Tooltip} from 'react-tippy'
 
 import Segue from './segue'
 //import BustOutBadge from './bust_out_badge'
@@ -13,6 +14,7 @@ import './setlist.css'
 import 'react-tippy/dist/tippy.css'
 
 const findById = (id) => find(propEq('id', id))
+const filterBySongId = (id) => filter(propEq('song_id', id))
 
 function SetlistEntry({performanceData, songData, segues, teases, previousUrl}) {
   const displayName = songData.title
@@ -26,7 +28,11 @@ function SetlistEntry({performanceData, songData, segues, teases, previousUrl})
     {' '}
     {performanceData.variation || false}
     {segueData && <Segue {...segueData} />}
-    {/*<TimePlayedBadge prevPerf={Number(performanceData.prev_perfid)} nextPerf={Number(performanceData.next_perfid)} />*/}
+    {performanceData.isDebut && <Tooltip title="first time played" trigger="mouseenter focus click">
+      <span className="setlist__track__badge setlist__track__badge--ftp" aria-label="notes" role="img">🆕
+        <span className="hidden">first time played</span>
+      </span>
+    </Tooltip>}
     {/*<BustOutBadge showgap={Number(performanceData.showgap)} />*/}
     {performanceData.notes && <PerfNote notes={performanceData.notes} />}
     {teasesArray.length ? <TeasesNote list={teasesArray} /> : false}
@@ -42,6 +48,9 @@ export default function Setlist(props) {
     teases,
     isEncore,
     which,
+    showId,
+    allSets,
+    allShows,
     previousUrl
   } = props
   if (!(performances && songs && segues && teases)) {
@@ -59,15 +68,23 @@ export default function Setlist(props) {
   if (!teases.length) {
     return <p>Uh oh, no teases found...</p>
   }
+  const showIdInt = Number(showId)
   const groupedBySuite = groupWith(
     (a, b) => a.suite && a.suite === b.suite,
     setlist.map((perfId) => {
       const performanceData = findById(perfId)(performances)
       const songData = findById(performanceData.song_id)(songs)
+      const allPerfsOfThisSong = filterBySongId(songData.id)(performances)
+      const setsForAllPerfsOfThisSong = allPerfsOfThisSong.map(perfData => allSets.find(set => set.setlist.split(':').includes(perfData.id)))
+      const showsForThoseSets = setsForAllPerfsOfThisSong.map(setData => allShows.find(show => [show.soundcheck, show.set1, show.set2, show.set3, show.encore1, show.encore2].includes(setData.id)))
+      const [earlierShows] = partition(showData => Number(showData.id) < showIdInt, showsForThoseSets)
       return {
         suite: songData.suite,
         songData,
-        performanceData,
+        performanceData: {
+          ...performanceData,
+          isDebut: !earlierShows.length,
+        },
       }
     })
   )

diff --git a/src/templates/show.js b/src/templates/show.js
@@ -41,17 +41,18 @@ function Guests({guests}) {
   return false
 }
 
-function Set({show, which, isEncore = false, sets, performances, segues, teases, songs, previousUrl}) {
+function Set({show, shows, which, isEncore = false, sets, performances, segues, teases, songs, previousUrl}) {
   const what = which === 'soundcheck'
     ? 'soundcheck'
     : `${isEncore ? 'encore' : 'set'}${which}`
   const setId = show[what]
-  if (!setId || !sets || !sets.length) {
+  if (!setId || !(sets?.length)) {
     return false
   }
   const setData = find(propEq('id', setId))(sets)
   const setlist = normalizeSetlist(setData.setlist)
   return <Setlist
+    showId={show.id}
     isEncore={isEncore}
     which={which}
     key={setData.id}
@@ -60,6 +61,8 @@ function Set({show, which, isEncore = false, sets, performances, segues, teases,
     segues={segues}
     songs={songs}
     teases={teases}
+    allSets={sets}
+    allShows={shows}
     previousUrl={previousUrl}
   />
 }
@@ -99,6 +102,15 @@ export const query = graphql`
       location
       name
     }
+    allShowsCsv { nodes {
+      id
+      encore1
+      encore2
+      set1
+      set2
+      set3
+      soundcheck
+    }}
     allSetsCsv { nodes {
       id
       setlist
@@ -155,6 +167,7 @@ export default function Show({
     allSeguesCsv: {nodes: segues},
     allSongsCsv: {nodes: songs},
     allTeasesCsv: {nodes: teases},
+    allShowsCsv: {nodes: shows},
   },
   location
 }) {
@@ -198,6 +211,7 @@ export default function Show({
       songs={songs}
       key={`set${which}`}
       previousUrl={location?.state?.previousUrl}
+      shows={shows}
     />
   ), [])
   const encores = [1, 2].reduce((encores, which) => encores.concat(
@@ -212,17 +226,19 @@ export default function Show({
       songs={songs}
       key={`encore${which}`}
       previousUrl={location?.state?.previousUrl}
+      shows={shows}
     />
   ), [])
 
   const linksArray = links.split(/\s+/)
 
   const guestsDescription = showGuests.length
-    ? `with ${showGuests.map((guest) => guest.name).join(' and ')}`
+    ? `with ${showGuests.map(({name}) => name).join(' and ')}`
     : ''
   const seoDescription = `Setlist and recordings of Joe Russo's Almost Dead ${guestsDescription} ${date} at ${event ? `${event}, ` : ``}${venue.name} (${venue.location}) including song segues, teases, and show notes`
   const imageSrcs = filter(isImage)(linksArray)
 
+  const showId = Number(show.id)
   return <Layout className="showpage">
     <SEO
       title={`JRAD ${tagline}`}
@@ -257,6 +273,7 @@ export default function Show({
           teases={teases}
           songs={songs}
           previousUrl={location?.state?.previousUrl}
+          shows={shows}
         />}
       {setlist.length ? setlist : <p>Uh oh, no sets found.</p>}
       {encores.length && encores}
@@ -267,8 +284,8 @@ export default function Show({
     </section>
     <ShowRecordings recordings={showRecordings} date={date} />
     <nav className="showpage__nav">
-      {Number(show.id) > 1 && <a href={`/show/${Number(show.id) - 1}`} className="showpage__nav__prev" title="previous show">Prior show</a>}
-      {Number(show.id) < Number(lastShowId) && <a href={`/show/${Number(show.id) + 1}`} className="showpage__nav__next" title="following show">Next show</a>}
+      {showId > 1 && <a href={`/show/${showId - 1}`} className="showpage__nav__prev" title="previous show">Prior show</a>}
+      {showId < Number(lastShowId) && <a href={`/show/${showId + 1}`} className="showpage__nav__next" title="following show">Next show</a>}
     </nav>
   </Layout>
 }