Format with prettier

src/components/ContentTypesBlock.tsx

@@ -34,20 +34,17 @@ const DAYS_TEXT = [
 
 const ShowBlockContainer = styled.div`
   display: flex;
-  ${(props: any) => props.size > 2 && 'flex-direction: column;'}
+  ${(props: any) => props.size > 2 && 'flex-direction: column;'};
 `;
 
 const sideBySideStyles = css`
   margin-right: 1em;
   width: 40%;
   max-width: 100px;
-
 `;
 
 const ShowCover = styled.div`
-  ${(props: any) => props.size <= 2 && sideBySideStyles}
-
-  & img {
+  ${(props: any) => props.size <= 2 && sideBySideStyles} & img {
     width: 100%;
     height: auto;
   }
@@ -61,7 +58,6 @@ const articleStyles = css`
   color: black;
 `;
 
-
 function renderArticle(props: IProps) {
   const article = props.block.object;
   return (

src/components/DevTool/index.js

@@ -10,7 +10,7 @@ const DevTools = createDevTools(
     defaultIsVisible={false}
   >
     <LogMonitor theme="tomorrow" />
-  </DockMonitor>
+  </DockMonitor>,
 );
 
 export default DevTools;

src/components/FullSchedule.tsx

@@ -45,7 +45,7 @@ class FullSchedule extends React.Component<IProps, any> {
         <ScheduleDayColumn className="Schedule__days" days={days} />
         <div
           className="Schedule__scroll-container"
-          ref={ref => {
+          ref={(ref) => {
             this.containerRef = ref;
           }}
         >

src/components/ImageHeader.tsx

@@ -35,10 +35,10 @@ const PatternImageContainer = styled.div`
   ${containerStyles}
   background-color: ${(props: any) => props.background};
   background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='${(
-    props: any
+    props: any,
   ) =>
     encodeURIComponent(
-      props.foreground
+      props.foreground,
     )}' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
 `;
 

src/components/LiveMinutesHigherOrder.tsx

@@ -30,7 +30,7 @@ export default (WrappedComponent: any) => {
     componentDidMount() {
       this.interval = setInterval(
         () => this.setState({ minutes: getMinutes() }),
-        10000
+        10000,
       );
     }
 

src/components/LoadableSpinner.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import Spinner from "./Spinner";
+import Spinner from './Spinner';
 
-export function LoadableSpinner(props: { error: Error, pastDelay: boolean }) {
+export function LoadableSpinner(props: { error: Error; pastDelay: boolean }) {
   if (props.error) {
     return <div>Error!</div>;
   } else if (props.pastDelay) {

src/components/MainNavigation/MainNavigation.stories.js

@@ -4,7 +4,7 @@ import MainNavigation from './index';
 import { MemoryRouter } from 'react-router';
 
 storiesOf('MainNavigation', module)
-  .addDecorator(story => (
+  .addDecorator((story) => (
     <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
   ))
   .add('', () => (

src/components/NowAndNext.tsx

@@ -41,5 +41,5 @@ export default connect(
   }),
   {
     playLive,
-  }
+  },
 )(NowAndNext);

src/components/Player.tsx

@@ -38,15 +38,15 @@ const Player: React.SFC<IProps> = (props: IProps) => {
             <PlayPauseButton
               isPlaying={player.userState}
               isLive={player.audioSourceType === 'live'}
-              onChange={state => props.playerUserStateChange(state)}
+              onChange={(state) => props.playerUserStateChange(state)}
             />
           </div>
           <Link className="Player__show-name" to={`/shows/${show.slug}`}>
             {show.name}
           </Link>
           <small>
             {formatTime(schedule.currentlyOnAir.startDate)}-{formatTime(
-              schedule.currentlyOnAir.endDate
+              schedule.currentlyOnAir.endDate,
             )}
           </small>
         </div>
@@ -74,5 +74,5 @@ export default connect(
   {
     playerUserStateChange,
     playerAudioStateChange,
-  }
+  },
 )(Player) as any;

src/components/PlayerAudio.tsx

@@ -56,15 +56,17 @@ class PlayerAudio extends React.Component<IProps, IState> {
 
     return (
       <audio
-        src={userState ?
-          (stream === 'live'
-            ? `http://uk2.internet-radio.com:30764/stream?nocache=${
-                this.state.cacheKey
-              }`
-            : stream) :  ''
+        src={
+          userState
+            ? stream === 'live'
+              ? `http://uk2.internet-radio.com:30764/stream?nocache=${
+                  this.state.cacheKey
+                }`
+              : stream
+            : ''
         }
         autoPlay
-        ref={ref => (this.audioEl = ref)}
+        ref={(ref) => (this.audioEl = ref)}
       />
     );
   }

src/components/ScheduleDayColumn.tsx

@@ -9,7 +9,7 @@ interface IProps {
 const ScheduleDayColumn: React.SFC<IProps> = (props: IProps) => {
   return (
     <div className={cx('ScheduleDayColumn', props.className)}>
-      {props.days.map(day => (
+      {props.days.map((day) => (
         <div className="ScheduleDayColumn__day" key={day}>
           {day}
         </div>

src/components/ScheduleTimeline.tsx

@@ -41,7 +41,7 @@ function ScheduleTimeline(props: IProps) {
         className="ScheduleTimeline__bookmark"
         style={{ left: props.calculateWidth(props.minutes) }}
       />
-      {hours.map(hour => (
+      {hours.map((hour) => (
         <div
           className="ScheduleTimeline__hour"
           key={hour}

src/components/ShowsGrid/ShowsGridItem.tsx

@@ -14,7 +14,7 @@ function ShowsGridItem({ show }: IProps) {
     <li
       className={cx(
         'ShowsGrid__item',
-        `ShowsGrid__item--tone-${getShowBrandTone(show)}`
+        `ShowsGrid__item--tone-${getShowBrandTone(show)}`,
       )}
     >
       <Link

src/components/ShowsGrid/index.tsx

@@ -16,7 +16,7 @@ function ShowsGrid({ shows, sortMethod }: IProps) {
     <ul className="ShowsGrid">
       {Object.keys(sortMethod === 'CATEGORY' ? showsByCategory : showsByLetter)
         .sort()
-        .map(groupKey => (
+        .map((groupKey) => (
           <li className="ShowsGrid__group">
             <h2>{groupKey}</h2>
             <ul className="ShowsGrid__grid">

src/components/TodaySchedule.tsx

@@ -47,7 +47,7 @@ class TodaySchedule extends React.Component<IProps> {
     return (
       <div
         className="Schedule__scroll-container"
-        ref={ref => {
+        ref={(ref) => {
           this.containerRef = ref;
         }}
       >

src/components/VolumeControl.tsx

@@ -14,7 +14,7 @@ function VolumeControl(props: IProps) {
         max="1"
         step="0.001"
         value={props.value}
-        onChange={e => {
+        onChange={(e) => {
           props.onChange(parseInt(e.target.value, 10));
         }}
       />

src/components/react-imgix.d.ts

@@ -1,5 +1,5 @@
 declare module 'react-imgix' {
-  function Imgix(props: any): any
+  function Imgix(props: any): any;
 
   export = Imgix;
 }

src/containers/App/index.tsx

@@ -8,72 +8,72 @@ import { Redirect } from 'react-router';
 import { loginRestoreAttempt } from '../../ducks/auth';
 import { scheduleLoaded, updateOnAirSlot } from '../../ducks/schedule';
 import { connect } from 'react-redux';
-import Loadable from 'react-loadable'
+import Loadable from 'react-loadable';
 import gql from 'graphql-tag';
 import { graphql } from 'react-apollo';
 import { compose } from 'redux';
-import { LoadableSpinner } from "../../components/LoadableSpinner";
-import {RootState} from "../../types";
-import {Show} from "../../utils/types";
+import { LoadableSpinner } from '../../components/LoadableSpinner';
+import { RootState } from '../../types';
+import { Show } from '../../utils/types';
 
 const LoadableShowPage = Loadable({
-  loader: () => import(/* webpackChunkName: "ShowBase" */'../ShowBase'),
+  loader: () => import(/* webpackChunkName: "ShowBase" */ '../ShowBase'),
   loading: LoadableSpinner,
 });
 
 const LoadableHome = Loadable({
-  loader: () => import(/* webpackChunkName: "Home" */'../Home'),
+  loader: () => import(/* webpackChunkName: "Home" */ '../Home'),
   loading: LoadableSpinner,
 });
 
 const LoadableSchedule = Loadable({
-  loader: () => import(/* webpackChunkName: "Schedule" */'../Schedule'),
+  loader: () => import(/* webpackChunkName: "Schedule" */ '../Schedule'),
   loading: LoadableSpinner,
 });
 
 const LoadableShows = Loadable({
-  loader: () => import(/* webpackChunkName: "Shows" */'../Shows') as any,
+  loader: () => import(/* webpackChunkName: "Shows" */ '../Shows') as any,
   loading: LoadableSpinner,
 });
 
 const LoadableWeAreURF = Loadable({
-  loader: () => import(/* webpackChunkName: "WeAreURF" */'../WeAreURF'),
+  loader: () => import(/* webpackChunkName: "WeAreURF" */ '../WeAreURF'),
   loading: LoadableSpinner,
 });
 
 const LoadableNotFound = Loadable({
-  loader: () => import(/* webpackChunkName: "NotFound" */'../NotFound/NotFound'),
+  loader: () =>
+    import(/* webpackChunkName: "NotFound" */ '../NotFound/NotFound'),
   loading: LoadableSpinner,
 });
 
 const LoadableArticle = Loadable({
-  loader: () => import(/* webpackChunkName: "Article" */'../Article'),
+  loader: () => import(/* webpackChunkName: "Article" */ '../Article'),
   loading: LoadableSpinner,
 });
 
 const LoadableEvent = Loadable({
-  loader: () => import(/* webpackChunkName: "Event" */'../Event'),
+  loader: () => import(/* webpackChunkName: "Event" */ '../Event'),
   loading: LoadableSpinner,
 });
 
 const LoadableNewsAndEvents = Loadable({
-  loader: () => import(/* webpackChunkName: "NewsAndEvents" */'../NewsAndEvents'),
+  loader: () =>
+    import(/* webpackChunkName: "NewsAndEvents" */ '../NewsAndEvents'),
   loading: LoadableSpinner,
 });
 
 const LoadableMembersApp = Loadable({
-  loader: () => import(/* webpackChunkName: "MembersApp" */'../members/MembersApp'),
+  loader: () =>
+    import(/* webpackChunkName: "MembersApp" */ '../members/MembersApp'),
   loading: LoadableSpinner,
 });
 
 const LoadableLogin = Loadable({
-  loader: () => import(/* webpackChunkName: "Loading" */'../members/Login'),
+  loader: () => import(/* webpackChunkName: "Loading" */ '../members/Login'),
   loading: LoadableSpinner,
 });
 
-
-
-
 interface IDispatchProps {
   loginRestoreAttempt(): void;
   updateOnAirSlot(): void;
@@ -111,8 +111,14 @@ class App extends React.Component<IProps> {
     return (
       <div>
         <Helmet
-          titleTemplate={isPlaying ? `${currentlyOnAirShow.emojiDescription} | %s | URF` : '%s | URF'}
-          defaultTitle={isPlaying ? `${currentlyOnAirShow.emojiDescription} | URF` : 'URF'}
+          titleTemplate={
+            isPlaying
+              ? `${currentlyOnAirShow.emojiDescription} | %s | URF`
+              : '%s | URF'
+          }
+          defaultTitle={
+            isPlaying ? `${currentlyOnAirShow.emojiDescription} | URF` : 'URF'
+          }
         />
         <Header />
         <div className="Page">
@@ -121,12 +127,20 @@ class App extends React.Component<IProps> {
             <Route path="/" exact component={LoadableHome} />
             <Route path="/schedule" exact component={LoadableSchedule} />
             <Route path="/shows" exact component={LoadableShows} />
-            <Route path="/news-events" exact component={LoadableNewsAndEvents} />
+            <Route
+              path="/news-events"
+              exact
+              component={LoadableNewsAndEvents}
+            />
             <Route path="/we-are-urf" exact component={LoadableWeAreURF} />
             <Route path="/shows/:showSlug" component={LoadableShowPage} />
             <Route path="/auth/login" component={LoadableLogin} exact />
             <Route path="/members" component={LoadableMembersApp} />
-            <Route path="/article/**-:articleId" component={LoadableArticle} exact />
+            <Route
+              path="/article/**-:articleId"
+              component={LoadableArticle}
+              exact
+            />
             <Route path="/event/**-:eventId" component={LoadableEvent} exact />
             <Redirect path="/article" to="/news-events" exact />
             <Route component={LoadableNotFound} />
@@ -175,13 +189,18 @@ const ScheduleQuery = gql`
 
 export default compose(
   withRouter,
-  connect((store: RootState) => ({
-    isPlaying: store.player.userState === true,
-    currentlyOnAirShow: store.schedule.currentlyOnAir ? store.schedule.currentlyOnAir.show : false,
-  }), {
-    loginRestoreAttempt,
-    scheduleLoaded,
-    updateOnAirSlot,
-  }),
-  graphql(ScheduleQuery)
+  connect(
+    (store: RootState) => ({
+      isPlaying: store.player.userState === true,
+      currentlyOnAirShow: store.schedule.currentlyOnAir
+        ? store.schedule.currentlyOnAir.show
+        : false,
+    }),
+    {
+      loginRestoreAttempt,
+      scheduleLoaded,
+      updateOnAirSlot,
+    },
+  ),
+  graphql(ScheduleQuery),
 )(App) as any;

src/containers/Article.tsx

@@ -7,14 +7,14 @@ import convert from 'htmr';
 import { elementMap } from '../components/Prose';
 import styled from 'react-emotion';
 import { ImageHeader } from '../components/ImageHeader';
-import Spinner from "../components/Spinner";
+import Spinner from '../components/Spinner';
 
 const Content = styled.div`
   font-weight: 400;
   max-width: 660px;
   line-height: 1.4;
   font-size: 1em;
-  
+
   & img {
     max-width: 100%;
     width: auto;