Apply Prettier to all the code

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 120,
+  "trailingComma": "all"
+}

src/App.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback } from "react";
-import { WorkoutPlot } from './components/WorkoutPlot';
+import { WorkoutPlot } from "./components/WorkoutPlot";
-import { WorkoutStats } from './components/WorkoutStats';
+import { WorkoutStats } from "./components/WorkoutStats";
-import { parse, chunkRangeIntervals, Duration } from 'zwiftout';
+import { parse, chunkRangeIntervals, Duration } from "zwiftout";
-import { ErrorMessage } from './components/ErrorMessage';
+import { ErrorMessage } from "./components/ErrorMessage";
-import styled from 'styled-components';
+import styled from "styled-components";
-import { CodeEditor } from './components/CodeEditor';
+import { CodeEditor } from "./components/CodeEditor";
-import { ZwoOutput } from './components/ZwoOutput';
+import { ZwoOutput } from "./components/ZwoOutput";
-import { AppTitle } from './components/AppTitle';
+import { AppTitle } from "./components/AppTitle";
-import { Credits } from './components/Credits';
+import { Credits } from "./components/Credits";
 
 const defaultWorkout = `Name: Sample workout
 Description: Try changing it, and see what happens below.
@@ -37,7 +37,8 @@ export function App() {
   const [workout, setWorkout] = useState(parse(defaultWorkout));
   const [error, setError] = useState<string | undefined>(undefined);
 
-  const onChange = useCallback((value: string) => {
+  const onChange = useCallback(
+    (value: string) => {
       setText(value);
       try {
         setWorkout(parse(value));
@@ -45,7 +46,9 @@ export function App() {
       } catch (e) {
         setError(e.message);
       }
-  }, [setText, setWorkout, setError]);
+    },
+    [setText, setWorkout, setError],
+  );
 
   return (
     <AppContainer>

src/components/AppTitle.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import styled from "styled-components";
 import logo from "../logo.png";
 
@@ -21,5 +21,8 @@ const Beta = styled.span`
 `;
 
 export const AppTitle: React.FC<{}> = () => (
-  <Title><Logo />Workout editor <Beta>beta</Beta></Title>
+  <Title>
+    <Logo />
+    Workout editor <Beta>beta</Beta>
+  </Title>
 );

src/components/Bar.tsx

@@ -10,13 +10,13 @@ export type BarProps = {
 };
 
 const zoneColorsMap: Record<ZoneType, string> = {
-  "free": "linear-gradient(to top, rgba(204,204,204,1), rgba(255,255,255,0))",
+  free: "linear-gradient(to top, rgba(204,204,204,1), rgba(255,255,255,0))",
-  "Z1": "#7f7f7f",
+  Z1: "#7f7f7f",
-  "Z2": "#338cff",
+  Z2: "#338cff",
-  "Z3": "#59bf59",
+  Z3: "#59bf59",
-  "Z4": "#ffcc3f",
+  Z4: "#ffcc3f",
-  "Z5": "#ff6639",
+  Z5: "#ff6639",
-  "Z6": "#ff330c",
+  Z6: "#ff330c",
 };
 
 export const Bar = styled.div<BarProps>`
@@ -26,7 +26,7 @@ export const Bar = styled.div<BarProps>`
   margin-right: 0.1%;
   /* exclude 0.1% margin from bar width */
   width: ${(props) => props.durationPercentage - 0.1}%;
-  height: ${(props) => props.zone === "free" ? 100 : props.intensityPercentage}%;
+  height: ${(props) => (props.zone === "free" ? 100 : props.intensityPercentage)}%;
   background: ${(props) => zoneColorsMap[props.zone]};
   transition: width 0.1s, height 0.1s, background-color 0.1s;
 `;

src/components/CodeEditor.tsx

@@ -1,5 +1,5 @@
-import Editor from 'react-simple-code-editor';
+import Editor from "react-simple-code-editor";
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const highlight = (code: string): string => {
   return code
@@ -12,7 +12,7 @@ const highlight = (code: string): string => {
 };
 
 export const CodeEditor = styled(Editor).attrs({ padding: 10, highlight })`
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
   font-size: 14px;
   line-height: 1.3;
   border: 1px inset #bbb;

src/components/Credits.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const Text = styled.p`
   font-size: 12px;
@@ -12,10 +12,7 @@ const Text = styled.p`
 
 export const Credits: React.FC<{}> = () => (
   <Text>
-    Built by Rene Saarsoo.
+    Built by Rene Saarsoo. · Graphics inspired by <a href="https://whatsonzwift.com/workouts/">What's on Zwift?</a>
-    ·
+    &nbsp;· Sweat provided by <a href="https://zwift.com">Zwift</a> :-)
-    Graphics inspired by <a href="https://whatsonzwift.com/workouts/">What's on Zwift?</a>
-    &nbsp;·
-    Sweat provided by <a href="https://zwift.com">Zwift</a> :-)
   </Text>
-)
+);

src/components/ErrorMessage.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const ErrorMessage = styled.p`
   color: red;

src/components/WorkoutPlot.tsx

@@ -5,8 +5,8 @@ import { BarProps, Bar } from "./Bar";
 
 const toBarProps = (interval: Interval, workoutDuration: Duration, maxIntensity: Intensity): BarProps => ({
   zone: interval.intensity.zone,
-  durationPercentage: interval.duration.seconds / workoutDuration.seconds * 100,
+  durationPercentage: (interval.duration.seconds / workoutDuration.seconds) * 100,
-  intensityPercentage: interval.intensity.value / maxIntensity.value * 100,
+  intensityPercentage: (interval.intensity.value / maxIntensity.value) * 100,
 });
 
 const Plot = styled.div`
@@ -24,7 +24,11 @@ export const WorkoutPlot: React.FC<{ intervals: Interval[] }> = ({ intervals })
 
   return (
     <Plot>
-      { intervals.map((interval) => toBarProps(interval, workoutDuration, maxIntensity)).map((props, i) => (<Bar key={i} {...props} />)) }
+      {intervals
+        .map((interval) => toBarProps(interval, workoutDuration, maxIntensity))
+        .map((props, i) => (
+          <Bar key={i} {...props} />
+        ))}
     </Plot>
   );
-}
+};

src/components/WorkoutStats.tsx

@@ -3,13 +3,9 @@ import { stats, Workout, Intensity } from "zwiftout";
 import { formatDuration } from "./formatDuration";
 import styled from "styled-components";
 
-const formatIntensity = (intensity: Intensity): string =>
+const formatIntensity = (intensity: Intensity): string => `${Math.round(intensity.value * 100)}%`;
-  `${Math.round(intensity.value * 100)}%`;
 
-const StatsLine: React.FC<{ label: string; value: string | number }> = ({
+const StatsLine: React.FC<{ label: string; value: string | number }> = ({ label, value }) => (
-  label,
-  value,
-}) => (
   <li>
     <strong>{label}</strong> {value}
   </li>
@@ -42,14 +38,7 @@ const ZoneList = styled(List)`
 `;
 
 export const WorkoutStats: React.FC<{ workout: Workout }> = ({ workout }) => {
-  const {
+  const { totalDuration, averageIntensity, normalizedIntensity, tss, xp, zones } = stats(workout);
-    totalDuration,
-    averageIntensity,
-    normalizedIntensity,
-    tss,
-    xp,
-    zones,
-  } = stats(workout);
 
   return (
     <Container>
@@ -57,30 +46,17 @@ export const WorkoutStats: React.FC<{ workout: Workout }> = ({ workout }) => {
         <Header>Summary</Header>
         <List>
           <StatsLine label="Duration:" value={formatDuration(totalDuration)} />
-          <StatsLine
+          <StatsLine label="Average intensity:" value={formatIntensity(averageIntensity)} />
-            label="Average intensity:"
+          <StatsLine label="Normalized intensity:" value={formatIntensity(normalizedIntensity)} />
-            value={formatIntensity(averageIntensity)}
-          />
-          <StatsLine
-            label="Normalized intensity:"
-            value={formatIntensity(normalizedIntensity)}
-          />
           <StatsLine label="TSS:" value={Math.round(tss)} />
-          <StatsLine
+          <StatsLine label="Zwift XP:" value={`${xp} (like riding ${Math.ceil(xp / 20)} km)`} />
-            label="Zwift XP:"
-            value={`${xp} (like riding ${Math.ceil(xp / 20)} km)`}
-          />
         </List>
       </Section>
       <Section>
         <Header>Zone distribution</Header>
         <ZoneList>
           {zones.map((zone) => (
-            <StatsLine
+            <StatsLine key={zone.name} label={zone.name} value={formatDuration(zone.duration)} />
-              key={zone.name}
-              label={zone.name}
-              value={formatDuration(zone.duration)}
-            />
           ))}
         </ZoneList>
       </Section>

src/components/ZwoOutput.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { Workout, generateZwo } from 'zwiftout';
+import { Workout, generateZwo } from "zwiftout";
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const Header = styled.h2`
   font-weight: normal;
@@ -19,5 +19,5 @@ export const ZwoOutput: React.FC<{ workout: Workout }> = ({ workout }) => {
       <Header>Generated Zwift workout file (.zwo):</Header>
       <ZwoCode>{generateZwo(workout)}</ZwoCode>
     </div>
-  )
+  );
 };

src/components/formatDuration.ts

@@ -10,14 +10,11 @@ export const formatDuration = (duration: Duration): string => {
   const { hours, minutes, seconds } = splitDuration(duration);
   if (hours > 0) {
     return `${hours}h ${minutes}min`;
-  }
+  } else if (minutes > 0) {
-  else if (minutes > 0) {
     return `${minutes}min`;
-  }
+  } else if (seconds > 0) {
-  else if (seconds > 0) {
     return `${seconds}sec`;
-  }
+  } else {
-  else {
     return `-`;
   }
 };

src/index.css

@@ -2,14 +2,12 @@ body {
   margin: 0;
   padding: 40px;
   background-color: #f7f7f2;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    "Droid Sans", "Helvetica Neue", sans-serif;
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-    monospace;
 }

src/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import { App } from './App';
+import { App } from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root"),
 );