[CI] Add linting option for frontend and enforce styling (#1565)

We now extend the default Eslint configuration and enforce styling with prettier for all of our frontend code.

1 files changed, 14 insertions, 8 deletions

diff --git a/web/src/components/TimerIcon.tsx b/web/src/components/TimerIcon.tsx
index 9a185f005..48d3510e0 100644
--- a/web/src/components/TimerIcon.tsx
+++ b/web/src/components/TimerIcon.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+
 import PieChartIcon from "./PieChartIcon";
 
 export interface Props {
@@ -16,21 +17,26 @@ const TimerIcon = function (props: Props) {
 
     useEffect(() => {
         // Get the current number of seconds to initialize timer.
-        const initialValue = (new Date().getTime() / 1000) % props.period / props.period * radius;
+        const initialValue = (((new Date().getTime() / 1000) % props.period) / props.period) * radius;
         setTimeProgress(initialValue);
 
         const interval = setInterval(() => {
-            const value = (new Date().getTime() / 1000) % props.period / props.period * radius;
+            const value = (((new Date().getTime() / 1000) % props.period) / props.period) * radius;
             setTimeProgress(value);
         }, 100);
         return () => clearInterval(interval);
     }, [props]);
 
     return (
-        <PieChartIcon width={props.width} height={props.height}
-            progress={timeProgress} maxProgress={radius}
-            backgroundColor={props.backgroundColor} color={props.color} />
-    )
-}
+        <PieChartIcon
+            width={props.width}
+            height={props.height}
+            progress={timeProgress}
+            maxProgress={radius}
+            backgroundColor={props.backgroundColor}
+            color={props.color}
+        />
+    );
+};
 
-export default TimerIcon
\ No newline at end of file
+export default TimerIcon;