💄 Formatted Source Files via Prettier

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "useTabs": false
+}

package.json

@@ -35,7 +35,8 @@
     "build": "react-scripts build",
     "flow": "flow",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "format": "prettier src/**/** --write"
   },
   "devDependencies": {
     "@types/enzyme": "^3.1.14",
@@ -45,6 +46,7 @@
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "fetch-mock": "^7.2.2",
+    "prettier": "^1.19.1",
     "redux-mock-store": "^1.5.3"
   },
   "jest": {

src/actions/geoIp.js

@@ -1,21 +1,25 @@
 import 'cross-fetch/polyfill';
 
-import { FETCH_GEO_IP_ADDRESS_FAILURE, FETCH_GEO_IP_ADDRESS_REQUEST, FETCH_GEO_IP_ADDRESS_SUCCESS } from '../constants/geoIp';
+import {
+  FETCH_GEO_IP_ADDRESS_FAILURE,
+  FETCH_GEO_IP_ADDRESS_REQUEST,
+  FETCH_GEO_IP_ADDRESS_SUCCESS
+} from '../constants/geoIp';
 
 const fetchGeoIpRequest = () => {
   return {
     type: FETCH_GEO_IP_ADDRESS_REQUEST
   };
 };
 
-const fetchGeoIpSuccess = (body) => {
+const fetchGeoIpSuccess = body => {
   return {
     type: FETCH_GEO_IP_ADDRESS_SUCCESS,
     body
   };
 };
 
-const fetchGeoIpFailure = (ex) => {
+const fetchGeoIpFailure = ex => {
   return {
     type: FETCH_GEO_IP_ADDRESS_FAILURE,
     ex
@@ -28,7 +32,9 @@ export const fetchGeoIp = () => {
     try {
       let json;
       if (process.env.NODE_ENV !== 'development') {
-        const response = await fetch(`${process.env.REACT_APP_IP_STACK_BASE_URL}/check?access_key=${process.env.REACT_APP_IP_STACK_ACCESS_KEY}`);
+        const response = await fetch(
+          `${process.env.REACT_APP_IP_STACK_BASE_URL}/check?access_key=${process.env.REACT_APP_IP_STACK_ACCESS_KEY}`
+        );
         json = await response.json();
       } else {
         json = {
@@ -47,7 +53,7 @@ export const fetchGeoIp = () => {
       }
       dispatch(fetchGeoIpSuccess(json));
     } catch (ex) {
-      dispatch(fetchGeoIpFailure(ex))
+      dispatch(fetchGeoIpFailure(ex));
     }
   };
 };

src/actions/settings.js

@@ -1,6 +1,11 @@
-import { ADJUST_COMMENTARY_SPEED, PLAY_COMMENTARY_TOGGLE, MUTE_TOGGLE, RESET_COMMENTARY } from '../constants/settings';
+import {
+  ADJUST_COMMENTARY_SPEED,
+  PLAY_COMMENTARY_TOGGLE,
+  MUTE_TOGGLE,
+  RESET_COMMENTARY
+} from '../constants/settings';
 
-export const adjustCommentarySpeed = (speed) => {
+export const adjustCommentarySpeed = speed => {
   return {
     type: ADJUST_COMMENTARY_SPEED,
     speed
@@ -17,10 +22,10 @@ export const playToggle = () => {
   return {
     type: PLAY_COMMENTARY_TOGGLE
   };
-}
+};
 
 export const resetCommentary = () => {
   return {
     type: RESET_COMMENTARY
   };
-}
+};

src/actions/weather.js

@@ -1,6 +1,10 @@
 import 'cross-fetch/polyfill';
 
-import { FETCH_WEATHER_FORECAST_REQUEST, FETCH_WEATHER_FORECAST_SUCCESS, FETCH_WEATHER_FORECAST_FAILURE } from '../constants/weather';
+import {
+  FETCH_WEATHER_FORECAST_REQUEST,
+  FETCH_WEATHER_FORECAST_SUCCESS,
+  FETCH_WEATHER_FORECAST_FAILURE
+} from '../constants/weather';
 
 const fetchWeatherForecastRequest = (longitude, latitude) => {
   return {
@@ -10,44 +14,49 @@ const fetchWeatherForecastRequest = (longitude, latitude) => {
   };
 };
 
-const fetchWeatherForeacastSuccess = (body) => {
+const fetchWeatherForeacastSuccess = body => {
   return {
     type: FETCH_WEATHER_FORECAST_SUCCESS,
     body
   };
 };
 
-const fetchWeatherForecastFailure = (ex) => {
+const fetchWeatherForecastFailure = ex => {
   return {
     type: FETCH_WEATHER_FORECAST_FAILURE,
     ex
   };
-}
+};
 
 export const fetchWeatherForecast = (longitude, latitude) => {
   return async dispatch => {
     dispatch(fetchWeatherForecastRequest(longitude, latitude));
     try {
       let json;
       if (process.env.NODE_ENV !== 'development') {
-        const response = await fetch(`${process.env.REACT_APP_OPEN_WEATHER_MAP_BASE_URL}/data/2.5/weather?units=metric&lat=${latitude}&lon=${longitude}&APPID=${process.env.REACT_APP_OPEN_WEATHER_MAP_API_KEY}`);
+        const response = await fetch(
+          `${process.env.REACT_APP_OPEN_WEATHER_MAP_BASE_URL}/data/2.5/weather?units=metric&lat=${latitude}&lon=${longitude}&APPID=${process.env.REACT_APP_OPEN_WEATHER_MAP_API_KEY}`
+        );
         json = await response.json();
       } else {
         json = {
           coord: {
-            lon: 139, lat: 35
+            lon: 139,
+            lat: 35
           },
           sys: {
             country: 'JP',
             sunrise: 1369769524,
             sunset: 1369821049
           },
-          weather: [{
-            id: 804,
-            main: 'clouds',
-            description: 'overcast clouds',
-            icon: '04n'
-          }],
+          weather: [
+            {
+              id: 804,
+              main: 'clouds',
+              description: 'overcast clouds',
+              icon: '04n'
+            }
+          ],
           main: {
             temp: 21.5,
             humidity: 89,
@@ -75,5 +84,5 @@ export const fetchWeatherForecast = (longitude, latitude) => {
     } catch (ex) {
       dispatch(fetchWeatherForecastFailure(ex));
     }
-  }
+  };
 };

src/components/App.css

@@ -1,7 +1,8 @@
 @import url('https://fonts.googleapis.com/css?family=Ubuntu');
 
 body {
-  background: #18141A url(../media/images/stadium-background-x1.jpeg) no-repeat center center fixed;
+  background: #18141a url(../media/images/stadium-background-x1.jpeg) no-repeat
+    center center fixed;
   background-position: 50% 50%;
   background-size: cover;
   font-family: 'Ubuntu', sans-serif;

src/components/App.js

@@ -15,13 +15,13 @@ class App extends Component {
   static defaultProps = {
     clientIp: undefined,
     fetchForecast: undefined
-  }
+  };
 
   static propTypes = {
     clientIp: PropTypes.string,
     fetchGeoIp: PropTypes.func.isRequired,
     fetchForecast: PropTypes.func
-  }
+  };
 
   async componentDidMount() {
     const { fetchGeoIp } = this.props;
@@ -32,7 +32,11 @@ class App extends Component {
   async componentWillReceiveProps(nextProps) {
     const { clientIp } = this.props;
 
-    if (nextProps.clientIp && clientIp !== nextProps.clientIp && nextProps.fetchForecast) {
+    if (
+      nextProps.clientIp &&
+      clientIp !== nextProps.clientIp &&
+      nextProps.fetchForecast
+    ) {
       await nextProps.fetchForecast();
     }
   }

src/components/CMSpeedReadPlayer.js

@@ -56,7 +56,7 @@ class CMSpeedReadPlayer extends Component {
       <div className="CM-block CM-commentary-block">
         <p className="App-intro">
           <SpeedyReader
-            ref={(speedyReader) => this.speedyReader = speedyReader}
+            ref={speedyReader => (this.speedyReader = speedyReader)}
             autoPlay
             inputText={process.env.REACT_APP_COMMENTARY_TEXT}
             speed={speed * 35}

src/components/CommentaryControls.js

@@ -12,7 +12,13 @@ import { faRedo } from '@fortawesome/free-solid-svg-icons';
 library.add(faPlayCircle, faPauseCircle, faVolumeUp, faVolumeOff, faRedo);
 
 class CommentaryControls extends Component {
-  static commentarySpeeds = ['Very slow', 'Slow', 'Normal', 'Fast', 'Very Fast'];
+  static commentarySpeeds = [
+    'Very slow',
+    'Slow',
+    'Normal',
+    'Fast',
+    'Very Fast'
+  ];
 
   static defaultProps = {
     isPlaying: true
@@ -25,8 +31,8 @@ class CommentaryControls extends Component {
     muteToggle: PropTypes.func.isRequired,
     playToggle: PropTypes.func.isRequired,
     resetCommentary: PropTypes.func.isRequired,
-    speed: PropTypes.number.isRequired,
-  }
+    speed: PropTypes.number.isRequired
+  };
 
   constructor(props) {
     super(props);
@@ -44,47 +50,56 @@ class CommentaryControls extends Component {
       <div className="container">
         <div className="row justify-content-sm-center no-gutters">
           <div className="col-sm-auto col-xs-12">
-            <button id="playToggle" type="button" className="CM-btn btn btn-primary btn-block" onClick={this.onPlayToggleClick} title={isPlaying ? "Pause" : "Play"}>
-              {
-                !isPlaying &&
-                <FontAwesomeIcon icon={faPlayCircle} fixedWidth />
-              }
-              {
-                isPlaying &&
-                <FontAwesomeIcon icon={faPauseCircle} fixedWidth />
-              }
+            <button
+              id="playToggle"
+              type="button"
+              className="CM-btn btn btn-primary btn-block"
+              onClick={this.onPlayToggleClick}
+              title={isPlaying ? 'Pause' : 'Play'}
+            >
+              {!isPlaying && <FontAwesomeIcon icon={faPlayCircle} fixedWidth />}
+              {isPlaying && <FontAwesomeIcon icon={faPauseCircle} fixedWidth />}
             </button>
           </div>
           <div className="col-sm-auto col-xs-12">
-            <select id="commentary-speed" defaultValue={speed} className="form-control" title={`Commentary speed - ${commentarySpeed}`} onChange={this.onSpeedChange}>
-              {
-                CommentaryControls.commentarySpeeds.map((commentarySpeed, index) => {
+            <select
+              id="commentary-speed"
+              defaultValue={speed}
+              className="form-control"
+              title={`Commentary speed - ${commentarySpeed}`}
+              onChange={this.onSpeedChange}
+            >
+              {CommentaryControls.commentarySpeeds.map(
+                (commentarySpeed, index) => {
                   return (
-                    <option
-                      key={index}
-                      value={index + 1}
-                    >
+                    <option key={index} value={index + 1}>
                       {commentarySpeed}
                     </option>
                   );
-                })
-              }
+                }
+              )}
             </select>
           </div>
           <div className="col-sm-auto col-xs-12">
-            <button id="muteToggle" type="button" className="CM-btn btn btn-primary btn-block" onClick={this.onMuteToggleClick} title={isMuted ? "Unmute" : "Mute"}>
-              {
-                isMuted &&
-                <FontAwesomeIcon icon={faVolumeUp} fixedWidth />
-              }
-              {
-                !isMuted &&
-                <FontAwesomeIcon icon={faVolumeOff} fixedWidth />
-              }
+            <button
+              id="muteToggle"
+              type="button"
+              className="CM-btn btn btn-primary btn-block"
+              onClick={this.onMuteToggleClick}
+              title={isMuted ? 'Unmute' : 'Mute'}
+            >
+              {isMuted && <FontAwesomeIcon icon={faVolumeUp} fixedWidth />}
+              {!isMuted && <FontAwesomeIcon icon={faVolumeOff} fixedWidth />}
             </button>
           </div>
           <div className="col-sm-auto col-xs-12">
-            <button id="reset" type="button" className="CM-btn btn btn-primary btn-block" onClick={this.onResetClick} title="Reset">
+            <button
+              id="reset"
+              type="button"
+              className="CM-btn btn btn-primary btn-block"
+              onClick={this.onResetClick}
+              title="Reset"
+            >
               <FontAwesomeIcon icon={faRedo} fixedWidth />
             </button>
           </div>

src/components/Venue.js

@@ -2,12 +2,14 @@
 import React from 'react';
 import './Venue.css';
 
-const Venue = (props) => {
+const Venue = props => {
   const { name, location } = props;
   return (
     <div className="CM-venue-block">
       <p>
-        <span>{name ? name : "Unknown"}, {location ? location : "Unknown" }</span>
+        <span>
+          {name ? name : 'Unknown'}, {location ? location : 'Unknown'}
+        </span>
       </p>
     </div>
   );

src/components/VersionInfo.js

@@ -3,11 +3,7 @@ import React from 'react';
 import './VersionInfo.css';
 
 const VersionInfo = () => {
-  return (
-    <span>
-      Version - {process.env.REACT_APP_VERSION}
-    </span>
-  );
+  return <span>Version - {process.env.REACT_APP_VERSION}</span>;
 };
 
 export default VersionInfo;

src/components/Weather.js

@@ -2,16 +2,15 @@
 import React from 'react';
 import './Weather.css';
 
-const Weather = (props) => {
+const Weather = props => {
   const { forecast, temperature } = props;
 
   return (
     <span className="CM-weather-forecast">
       Weather - {forecast ? forecast : 'Unknown'}
-      {
-        (temperature !== undefined && temperature !== null) &&
+      {temperature !== undefined && temperature !== null && (
         <span>, {temperature}&deg;C</span>
-      }
+      )}
     </span>
   );
 };