From 289452161f2f3cc8364b47b993d0d2a26f9ddb61 Mon Sep 17 00:00:00 2001
From: Duncan Robertson <duncan@kyan.com>
Date: Tue, 25 Aug 2020 13:10:29 +0100
Subject: [PATCH] Runnning prettier on updates

---
 frontend/src/components/controls/index.js     | 51 +++++++------------
 .../src/components/current-track/index.js     | 36 +++++++++----
 frontend/src/components/progress-bar/index.js |  4 +-
 frontend/src/components/settings/index.js     | 11 +---
 frontend/src/components/skip-buttons/index.js |  4 +-
 frontend/src/components/tracklist/index.js    | 21 +++-----
 .../src/components/volume-buttons/index.js    | 16 ++----
 frontend/src/dashboard/index.js               | 10 +---
 8 files changed, 64 insertions(+), 89 deletions(-)

diff --git a/frontend/src/components/controls/index.js b/frontend/src/components/controls/index.js
index f225b804..0607cad5 100644
--- 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/index.js b/frontend/src/components/current-track/index.js
index 219ec4dd..dd513e2b 100644
--- 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
index 38856eb6..6aa39f68 100644
--- 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
index 70d89dc0..6fc2addf 100644
--- 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
index a3f38782..65a75045 100644
--- 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
index 6623a75d..ead85ed8 100644
--- 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
index dc3b658f..2aba84f3 100644
--- 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>
   )
diff --git a/frontend/src/dashboard/index.js b/frontend/src/dashboard/index.js
index 6b16ed6f..9a242ef9 100644
--- a/frontend/src/dashboard/index.js
+++ b/frontend/src/dashboard/index.js
@@ -45,14 +45,8 @@ const Dashboard = props => {
             />
 
             <div className='c-header__actions'>
-              <SearchButton
-                onClick={onSearchClick}
-                disabled={disabled}
-              />
-              <VolumeButtons
-                disabled={disabled}
-                onVolumeChange={onVolumeChange}
-              />
+              <SearchButton onClick={onSearchClick} disabled={disabled} />
+              <VolumeButtons disabled={disabled} onVolumeChange={onVolumeChange} />
               <Settings />
             </div>
           </div>