From 806c733597d82f7ccdda653e184bd73ffb82bbb3 Mon Sep 17 00:00:00 2001 From: Rene Saarsoo Date: Sat, 21 Nov 2020 21:41:19 +0200 Subject: [PATCH] Apply Prettier to all the code --- .prettierrc | 4 +++ src/App.tsx | 43 +++++++++++++++++--------------- src/components/AppTitle.tsx | 7 ++++-- src/components/Bar.tsx | 16 ++++++------ src/components/CodeEditor.tsx | 8 +++--- src/components/Credits.tsx | 13 ++++------ src/components/ErrorMessage.tsx | 4 +-- src/components/WorkoutPlot.tsx | 12 ++++++--- src/components/WorkoutStats.tsx | 38 ++++++---------------------- src/components/ZwoOutput.tsx | 8 +++--- src/components/formatDuration.ts | 11 +++----- src/index.css | 8 +++--- src/index.tsx | 10 ++++---- 13 files changed, 82 insertions(+), 100 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..856eb3e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "printWidth": 120, + "trailingComma": "all" +} diff --git a/src/App.tsx b/src/App.tsx index ad90a4a..578b754 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,13 @@ -import React, { useState, useCallback } from 'react'; -import { WorkoutPlot } from './components/WorkoutPlot'; -import { WorkoutStats } from './components/WorkoutStats'; -import { parse, chunkRangeIntervals, Duration } from 'zwiftout'; -import { ErrorMessage } from './components/ErrorMessage'; -import styled from 'styled-components'; -import { CodeEditor } from './components/CodeEditor'; -import { ZwoOutput } from './components/ZwoOutput'; -import { AppTitle } from './components/AppTitle'; -import { Credits } from './components/Credits'; +import React, { useState, useCallback } from "react"; +import { WorkoutPlot } from "./components/WorkoutPlot"; +import { WorkoutStats } from "./components/WorkoutStats"; +import { parse, chunkRangeIntervals, Duration } from "zwiftout"; +import { ErrorMessage } from "./components/ErrorMessage"; +import styled from "styled-components"; +import { CodeEditor } from "./components/CodeEditor"; +import { ZwoOutput } from "./components/ZwoOutput"; +import { AppTitle } from "./components/AppTitle"; +import { Credits } from "./components/Credits"; const defaultWorkout = `Name: Sample workout Description: Try changing it, and see what happens below. @@ -37,16 +37,19 @@ export function App() { const [workout, setWorkout] = useState(parse(defaultWorkout)); const [error, setError] = useState(undefined); - const onChange = useCallback((value: string) => { - setText(value); - try { - setWorkout(parse(value)); - setError(undefined); - } catch (e) { - setError(e.message); - } - }, [setText, setWorkout, setError]); - + const onChange = useCallback( + (value: string) => { + setText(value); + try { + setWorkout(parse(value)); + setError(undefined); + } catch (e) { + setError(e.message); + } + }, + [setText, setWorkout, setError], + ); + return ( diff --git a/src/components/AppTitle.tsx b/src/components/AppTitle.tsx index ca8e244..7fca314 100644 --- a/src/components/AppTitle.tsx +++ b/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<{}> = () => ( - <Logo />Workout editor <Beta>beta</Beta> + + <Logo /> + Workout editor <Beta>beta</Beta> + ); diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx index 595e5e2..75f3203 100644 --- a/src/components/Bar.tsx +++ b/src/components/Bar.tsx @@ -10,13 +10,13 @@ export type BarProps = { }; const zoneColorsMap: Record = { - "free": "linear-gradient(to top, rgba(204,204,204,1), rgba(255,255,255,0))", - "Z1": "#7f7f7f", - "Z2": "#338cff", - "Z3": "#59bf59", - "Z4": "#ffcc3f", - "Z5": "#ff6639", - "Z6": "#ff330c", + free: "linear-gradient(to top, rgba(204,204,204,1), rgba(255,255,255,0))", + Z1: "#7f7f7f", + Z2: "#338cff", + Z3: "#59bf59", + Z4: "#ffcc3f", + Z5: "#ff6639", + Z6: "#ff330c", }; export const Bar = styled.div` @@ -26,7 +26,7 @@ export const Bar = styled.div` 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; `; diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx index f07e83b..cd05f72 100644 --- a/src/components/CodeEditor.tsx +++ b/src/components/CodeEditor.tsx @@ -1,5 +1,5 @@ -import Editor from 'react-simple-code-editor'; -import styled from 'styled-components'; +import Editor from "react-simple-code-editor"; +import styled from "styled-components"; const highlight = (code: string): string => { return code @@ -12,13 +12,13 @@ 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; border-radius: 3px; background: #fff; - + code.keyword { font-weight: bold; } diff --git a/src/components/Credits.tsx b/src/components/Credits.tsx index 2bd653f..7899805 100644 --- a/src/components/Credits.tsx +++ b/src/components/Credits.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import styled from 'styled-components'; +import React from "react"; +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<{}> = () => ( - Built by Rene Saarsoo. - · - Graphics inspired by What's on Zwift? -  · - Sweat provided by Zwift :-) + Built by Rene Saarsoo. · Graphics inspired by What's on Zwift? +  · Sweat provided by Zwift :-) -) \ No newline at end of file +); diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx index 00e9f1f..a376684 100644 --- a/src/components/ErrorMessage.tsx +++ b/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; @@ -7,4 +7,4 @@ export const ErrorMessage = styled.p` border: 2px solid red; padding: 5px; margin: 10px 0; -`; \ No newline at end of file +`; diff --git a/src/components/WorkoutPlot.tsx b/src/components/WorkoutPlot.tsx index d0d1cf3..9aee26a 100644 --- a/src/components/WorkoutPlot.tsx +++ b/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, - intensityPercentage: interval.intensity.value / maxIntensity.value * 100, + durationPercentage: (interval.duration.seconds / workoutDuration.seconds) * 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 ( - { intervals.map((interval) => toBarProps(interval, workoutDuration, maxIntensity)).map((props, i) => ()) } + {intervals + .map((interval) => toBarProps(interval, workoutDuration, maxIntensity)) + .map((props, i) => ( + + ))} ); -} +}; diff --git a/src/components/WorkoutStats.tsx b/src/components/WorkoutStats.tsx index 597ebb9..06be942 100644 --- a/src/components/WorkoutStats.tsx +++ b/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 => - `${Math.round(intensity.value * 100)}%`; +const formatIntensity = (intensity: Intensity): string => `${Math.round(intensity.value * 100)}%`; -const StatsLine: React.FC<{ label: string; value: string | number }> = ({ - label, - value, -}) => ( +const StatsLine: React.FC<{ label: string; value: string | number }> = ({ label, value }) => (
  • {label} {value}
    • @@ -42,14 +38,7 @@ const ZoneList = styled(List)` `; export const WorkoutStats: React.FC<{ workout: Workout }> = ({ workout }) => { - const { - totalDuration, - averageIntensity, - normalizedIntensity, - tss, - xp, - zones, - } = stats(workout); + const { totalDuration, averageIntensity, normalizedIntensity, tss, xp, zones } = stats(workout); return ( @@ -57,30 +46,17 @@ export const WorkoutStats: React.FC<{ workout: Workout }> = ({ workout }) => {
    Summary
    - - + + - +
    Zone distribution
    {zones.map((zone) => ( - + ))}
    diff --git a/src/components/ZwoOutput.tsx b/src/components/ZwoOutput.tsx index fc91335..1d8f8cf 100644 --- a/src/components/ZwoOutput.tsx +++ b/src/components/ZwoOutput.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import { Workout, generateZwo } from 'zwiftout'; -import styled from 'styled-components'; +import React from "react"; +import { Workout, generateZwo } from "zwiftout"; +import styled from "styled-components"; const Header = styled.h2` font-weight: normal; @@ -19,5 +19,5 @@ export const ZwoOutput: React.FC<{ workout: Workout }> = ({ workout }) => {
    Generated Zwift workout file (.zwo):
    {generateZwo(workout)} - ) + ); }; diff --git a/src/components/formatDuration.ts b/src/components/formatDuration.ts index fe9f780..78feee1 100644 --- a/src/components/formatDuration.ts +++ b/src/components/formatDuration.ts @@ -7,17 +7,14 @@ const splitDuration = (duration: Duration) => ({ }); export const formatDuration = (duration: Duration): string => { - const {hours, minutes, seconds} = splitDuration(duration); + 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 `-`; } }; diff --git a/src/index.css b/src/index.css index 0d508cf..02bc23e 100644 --- a/src/index.css +++ b/src/index.css @@ -2,14 +2,12 @@ body { margin: 0; padding: 40px; background-color: #f7f7f2; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/src/index.tsx b/src/index.tsx index 04a9dcd..64834dc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import { App } from './App'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import { App } from "./App"; ReactDOM.render( , - document.getElementById('root') + document.getElementById("root"), );