Post rebase fixes

kyan · Aug 25, 2020 · 7b9ceae · 7b9ceae
1 parent 2ad192e
commit 7b9ceae
Show file tree

Hide file tree

Showing 13 changed files with 253 additions and 122 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -27,15 +27,15 @@ jobs:
     - name: Build and test frontend
       run: |
         cd frontend
-        npm ci
+        npm install
         npm run build --if-present
         npm test -- --coverage
       env:
         CI: true
     - name: Build and test backend
       run: |
         cd backend
-        npm ci
+        npm install
         npm run build --if-present
         npm run test:ci
       env:

diff --git a/frontend/src/components/controls/index.js b/frontend/src/components/controls/index.js
@@ -7,39 +7,42 @@ import PropTypes from 'prop-types'
 import { Icon } from 'semantic-ui-react'
 import './styles.scss'
 
-const PlayButton = (props) => (
+const PlayButton = props => (
   <button
     onClick={props.onClick}
-    disabled={(props.state === MopidyApi.PLAYING || props.disabled)}
+    disabled={props.state === MopidyApi.PLAYING || props.disabled}
     className={classnames('c-button', {
-      'c-button--disabled': (props.state === MopidyApi.PLAYING || props.disabled),
-      'c-button--active': (props.state === MopidyApi.PLAYING)
+      'c-button--disabled': props.state === MopidyApi.PLAYING || props.disabled,
+      'c-button--active': props.state === MopidyApi.PLAYING
     })}
   >
     <Icon name='play' />
   </button>
 )
 
-const PauseButton = (props) => (
+const PauseButton = props => (
   <button
     onClick={props.onClick}
-    disabled={(props.state === MopidyApi.PAUSED || props.state === MopidyApi.STOPPED || props.disabled)}
+    disabled={
+      props.state === MopidyApi.PAUSED || props.state === MopidyApi.STOPPED || props.disabled
+    }
     className={classnames('c-button', {
-      'c-button--disabled': (props.state === MopidyApi.PAUSED || props.state === MopidyApi.STOPPED || props.disabled),
-      'c-button--active': (props.state === MopidyApi.PAUSED)
+      'c-button--disabled':
+        props.state === MopidyApi.PAUSED || props.state === MopidyApi.STOPPED || props.disabled,
+      'c-button--active': props.state === MopidyApi.PAUSED
     })}
   >
     <Icon name='pause' />
   </button>
 )
 
-const StopButton = (props) => (
+const StopButton = props => (
   <button
     onClick={props.onClick}
-    disabled={(props.state === MopidyApi.STOPPED || props.disabled)}
+    disabled={props.state === MopidyApi.STOPPED || props.disabled}
     className={classnames('c-button', {
-      'c-button--disabled': (props.state === MopidyApi.STOPPED || props.disabled),
-      'c-button--active': (props.state === MopidyApi.STOPPED)
+      'c-button--disabled': props.state === MopidyApi.STOPPED || props.disabled,
+      'c-button--active': props.state === MopidyApi.STOPPED
     })}
   >
     <Icon name='stop' />
@@ -52,26 +55,10 @@ const Controls = props => {
 
   return (
     <span className='c-controls'>
-      <SkipButtons
-        disabled={disabled}
-        onPrevious={onPrevious}
-        onNext={onNext}
-      />
-      <PlayButton
-        onClick={onPlay}
-        state={jukebox.playbackState}
-        disabled={disabled}
-      />
-      <PauseButton
-        onClick={onPause}
-        state={jukebox.playbackState}
-        disabled={disabled}
-      />
-      <StopButton
-        onClick={onStop}
-        state={jukebox.playbackState}
-        disabled={disabled}
-      />
+      <SkipButtons disabled={disabled} onPrevious={onPrevious} onNext={onNext} />
+      <PlayButton onClick={onPlay} state={jukebox.playbackState} disabled={disabled} />
+      <PauseButton onClick={onPause} state={jukebox.playbackState} disabled={disabled} />
+      <StopButton onClick={onStop} state={jukebox.playbackState} disabled={disabled} />
     </span>
   )
 }

diff --git a/frontend/src/components/current-track/__snapshots__/index.spec.js.snap b/frontend/src/components/current-track/__snapshots__/index.spec.js.snap
@@ -1463,7 +1463,7 @@ exports[`CurrentTrack render album renders track 1`] = `
                         <strong>
                           27 Jan 2020 @ 8:19 pm
                         </strong>
-                         -
+                         - 
                         Duncan Robertson
                       </ListDescription>
                     </ListContent>
@@ -1592,9 +1592,9 @@ exports[`CurrentTrack render album renders track 1`] = `
                         <strong>
                           27 Jan 2020 @ 8:20 pm
                         </strong>
-                         -
+                         - 
                         Duncan Robertson
-
+                         
                         <Label
                           circular={true}
                           size="mini"

diff --git a/frontend/src/components/current-track/index.js b/frontend/src/components/current-track/index.js
@@ -33,13 +33,22 @@ const spotifyLink = uri => {
 
 const AlbumDescription = props => {
   const year = ` (${props.album.year})`
-  return <p>{props.album.name}{year}</p>
+  return (
+    <p>
+      {props.album.name}
+      {year}
+    </p>
+  )
 }
 
 const noTrack = () => (
   <div className='c-nowPlaying'>
     <div>
-      <img className='c-nowPlaying__image' src={defaultImage} alt='Kyan Limited Edition Collectors Vinyl' />
+      <img
+        className='c-nowPlaying__image'
+        src={defaultImage}
+        alt='Kyan Limited Edition Collectors Vinyl'
+      />
       <div className='c-nowPlaying__trackInfo'>
         <h6>Now playing</h6>
         <h4>-</h4>
@@ -75,7 +84,7 @@ const AddLabel = props => {
   )
 }
 
-const PlayLabel = (props) => {
+const PlayLabel = props => {
   return (
     <div className='c-nowPlaying__metaItem'>
       <h6>Played</h6>
@@ -84,7 +93,7 @@ const PlayLabel = (props) => {
   )
 }
 
-const VoteLabel = (props) => {
+const VoteLabel = props => {
   return (
     <div className='c-nowPlaying__metaItem'>
       <h6>Votes</h6>
@@ -111,14 +120,16 @@ const CurrentTrack = props => {
         <img
           src={track.image || defaultImage}
           className='c-nowPlaying__image'
-          alt={(track.image ? track.name : 'Kyan Limited Edition Collectors Vinyl')}
+          alt={track.image ? track.name : 'Kyan Limited Edition Collectors Vinyl'}
         />
         <div className='c-nowPlaying__trackInfo'>
-          <div className='c-nowPlaying__rating'><TrackVotes metrics={track.metrics} /></div>
+          <div className='c-nowPlaying__rating'>
+            <TrackVotes metrics={track.metrics} />
+          </div>
           <h6>Now playing</h6>
-          <a className='h4' href={spotifyLink(track.uri)}
-            target='_blank'
-            rel='noopener noreferrer'>{track.name}</a>
+          <a className='h4' href={spotifyLink(track.uri)} target='_blank' rel='noopener noreferrer'>
+            {track.name}
+          </a>
           <p>{track.artist.name}</p>
           <AlbumDescription album={track.album} />
           <ProgressBar />
@@ -148,7 +159,12 @@ const CurrentTrack = props => {
         </div>
         <div className='c-nowPlaying__footer'>
           <AddedBy users={track.addedBy} />
-          <VotedBy size='mini' show={votes.length > 0} total={calcVoteAverage(votes)} votes={votes} />
+          <VotedBy
+            size='mini'
+            show={votes.length > 0}
+            total={calcVoteAverage(votes)}
+            votes={votes}
+          />
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/progress-bar/index.js b/frontend/src/components/progress-bar/index.js
@@ -12,7 +12,9 @@ const ProgressBar = () => {
   return (
     <div className='c-progressBar'>
       <span className='c-progressBar__trackLength'>{millisToMinutesAndSeconds(track.length)}</span>
-      <span className='c-progressBar__remainingTime'>{millisToMinutesAndSeconds(timer.remaining)}</span>
+      <span className='c-progressBar__remainingTime'>
+        {millisToMinutesAndSeconds(timer.remaining)}
+      </span>
       <Line percent={progressPercentage} strokeLinecap='square' />
     </div>
   )

diff --git a/frontend/src/components/settings/index.js b/frontend/src/components/settings/index.js
@@ -6,26 +6,19 @@ export const Settings = () => {
   const { googleUser, signIn, signOut } = useContext(GoogleAuthContext)
 
   let avatar = (
-    <button
-      onClick={() => signIn()}
-      className='c-button'
-    >
+    <button onClick={() => signIn()} className='c-button'>
       <Icon name='power off' />
     </button>
   )
   if (googleUser && googleUser.profileObj) {
     avatar = (
-      <button
-        onClick={() => signOut()}
-        className='c-button c-button--image'
-      >
+      <button onClick={() => signOut()} className='c-button c-button--image'>
         <img
           title={googleUser.profileObj.name}
           src={googleUser.profileObj.imageUrl}
           alt={googleUser.profileObj.name}
         />
       </button>
-
     )
   }
 

diff --git a/frontend/src/components/skip-buttons/index.js b/frontend/src/components/skip-buttons/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { Icon } from 'semantic-ui-react'
 
-const PreviousButton = (props) => (
+const PreviousButton = props => (
   <button
     onClick={props.onClick}
     disabled={props.disabled}
@@ -15,7 +15,7 @@ const PreviousButton = (props) => (
   </button>
 )
 
-const NextButton = (props) => (
+const NextButton = props => (
   <button
     onClick={props.onClick}
     disabled={props.disabled}

diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js
@@ -9,7 +9,7 @@ import VotedBy from 'components/voted-by'
 import RemoveTrack from 'components/remove-track'
 import './styles.scss'
 
-const TrackImage = (props) => (
+const TrackImage = props => (
   <Comment.Avatar
     src={props.src}
     className={classnames('c-tracklist__image', { 'c-tracklist__image--current': props.isCurrent })}
@@ -22,11 +22,9 @@ const ImageChooser = props => {
   return <TrackImage src={image} isCurrent={props.isCurrent} />
 }
 
-const TrackTitle = (props) => (
-  <span className='c-tracklist__title'>{props.name}</span>
-)
+const TrackTitle = props => <span className='c-tracklist__title'>{props.name}</span>
 
-const TrackInfo = (props) => (
+const TrackInfo = props => (
   <React.Fragment>
     <span className='c-tracklist__artist'>
       <Item as='a' className='track-search-link' onClick={props.onClick}>
@@ -94,16 +92,9 @@ const ListItems = props => {
         className={classnames('c-tracklist__item', { 'c-tracklist__item--current': isCurrent })}
         key={`${i}${track.uri}`}
       >
-        <ImageChooser
-          image={track.image}
-          isCurrent={isCurrent}
-        />
-        <div
-          className={classnames({ 'c-tracklist__info': !beenPlayed })}
-        >
-          <TrackTitle
-            name={track.name}
-          />
+        <ImageChooser image={track.image} isCurrent={isCurrent} />
+        <div className={classnames({ 'c-tracklist__info': !beenPlayed })}>
+          <TrackTitle name={track.name} />
           <TrackInfo
             artistName={track.artist.name}
             trackLength={track.length}

diff --git a/frontend/src/components/volume-buttons/index.js b/frontend/src/components/volume-buttons/index.js
@@ -27,7 +27,7 @@ const volumeDown = (volume, cb) => {
   }
 }
 
-const VolumeDownButton = (props) => (
+const VolumeDownButton = props => (
   <button
     onClick={volumeDown(props.volume, props.onChange)}
     disabled={props.disabled}
@@ -39,7 +39,7 @@ const VolumeDownButton = (props) => (
   </button>
 )
 
-const VolumeUpButton = (props) => (
+const VolumeUpButton = props => (
   <button
     onClick={volumeUp(props.volume, props.onChange)}
     disabled={props.disabled}
@@ -56,16 +56,8 @@ const VolumeButtons = ({ disabled, onVolumeChange }) => {
 
   return (
     <div className='c-volumeControls'>
-      <VolumeDownButton
-        volume={jukebox.volume}
-        onChange={onVolumeChange}
-        disabled={disabled}
-      />
-      <VolumeUpButton
-        volume={jukebox.volume}
-        onChange={onVolumeChange}
-        disabled={disabled}
-      />
+      <VolumeDownButton volume={jukebox.volume} onChange={onVolumeChange} disabled={disabled} />
+      <VolumeUpButton volume={jukebox.volume} onChange={onVolumeChange} disabled={disabled} />
       <div className='c-volumeControls__indicator'>{jukebox.volume}</div>
     </div>
   )