From 950bab92264197d453fc8b60d31f0bc52ad0691c Mon Sep 17 00:00:00 2001
From: Morten Kolstad <morten.kolstad@bekk.no>
Date: Thu, 17 Oct 2024 21:19:27 +0200
Subject: [PATCH 1/2] Move changing-parent state behind useEffect

Current setup created React warnings due to setState in rendering
---
 .../WorkoutMenu/WorkoutIntervalInput.tsx      | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/frontend/src/components/WorkoutMenu/WorkoutIntervalInput.tsx b/apps/frontend/src/components/WorkoutMenu/WorkoutIntervalInput.tsx
index 6068b0a4..3b6ce975 100644
--- a/apps/frontend/src/components/WorkoutMenu/WorkoutIntervalInput.tsx
+++ b/apps/frontend/src/components/WorkoutMenu/WorkoutIntervalInput.tsx
@@ -83,17 +83,6 @@ export const WorkoutIntervalInput = ({
   ftp,
   isLastWorkoutPart,
 }: Props) => {
-  const updateWorkout = (
-    data: Data,
-    setWorkoutPart: (part: WorkoutPart) => void
-  ) => {
-    setWorkoutPart({
-      duration: data.seconds,
-      targetPower: data.power,
-      type: data.type,
-    });
-    return data;
-  };
   const reducer = (currentData: Data, action: DataAction): Data => {
     switch (action.type) {
       case 'UPDATE_TIME': {
@@ -109,7 +98,7 @@ export const WorkoutIntervalInput = ({
           seconds: duration,
         };
 
-        return updateWorkout(updatedData, action.setWorkoutPart);
+        return updatedData;
       }
 
       case 'UPDATE_TIME_SECONDS':
@@ -137,7 +126,7 @@ export const WorkoutIntervalInput = ({
           power: ftpPercentFromWatt(parsed, ftp),
         };
 
-        return updateWorkout(updatedData, action.setWorkoutPart);
+        return updatedData;
       }
 
       case 'UPDATE_POWER_PERCENT': {
@@ -159,7 +148,7 @@ export const WorkoutIntervalInput = ({
           power: parsed,
         };
 
-        return updateWorkout(updatedData, action.setWorkoutPart);
+        return updatedData;
       }
       case 'FTP_UPDATED': {
         return {
@@ -197,6 +186,19 @@ export const WorkoutIntervalInput = ({
     type: 'steady',
   });
 
+  React.useEffect(() => {
+    if (
+      workoutPart.duration !== data.seconds ||
+      workoutPart.targetPower !== data.power
+    ) {
+      setWorkoutPart({
+        duration: data.seconds,
+        targetPower: data.power,
+        type: data.type,
+      });
+    }
+  }, [data, setWorkoutPart]);
+
   const durationIsInvalid = false;
   const powerIsInvalid = data.power < 0;
 

From ebd049c0082f8df16c2295675493ef3718267578 Mon Sep 17 00:00:00 2001
From: Morten Kolstad <morten.kolstad@bekk.no>
Date: Thu, 17 Oct 2024 21:19:57 +0200
Subject: [PATCH 2/2] Just use setWorkoutPart from props

---
 .../components/WorkoutMenu/WorkoutIntervalInput.tsx   | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/apps/frontend/src/components/WorkoutMenu/WorkoutIntervalInput.tsx b/apps/frontend/src/components/WorkoutMenu/WorkoutIntervalInput.tsx
index 3b6ce975..e8a1913b 100644
--- a/apps/frontend/src/components/WorkoutMenu/WorkoutIntervalInput.tsx
+++ b/apps/frontend/src/components/WorkoutMenu/WorkoutIntervalInput.tsx
@@ -27,28 +27,23 @@ interface Data {
 interface UpdateTimeSeconds {
   type: 'UPDATE_TIME_SECONDS';
   value: string;
-  setWorkoutPart: (workoutPart: WorkoutPart) => void;
 }
 interface UpdateTimeMinutes {
   type: 'UPDATE_TIME_MINUTES';
   value: string;
-  setWorkoutPart: (workoutPart: WorkoutPart) => void;
 }
 interface UpdateTime {
   type: 'UPDATE_TIME';
-  setWorkoutPart: (workoutPart: WorkoutPart) => void;
 }
 interface UpdatePowerWatt {
   type: 'UPDATE_POWER_WATT';
   value: string;
   ftp: number;
-  setWorkoutPart: (workoutPart: WorkoutPart) => void;
 }
 interface UpdatePowerPercent {
   type: 'UPDATE_POWER_PERCENT';
   value: string;
   ftp: number;
-  setWorkoutPart: (workoutPart: WorkoutPart) => void;
 }
 
 interface FtpUpdated {
@@ -217,13 +212,11 @@ export const WorkoutIntervalInput = ({
               dispatchDataUpdate({
                 type: 'UPDATE_TIME_MINUTES',
                 value: e.target.value,
-                setWorkoutPart,
               })
             }
             onBlur={() =>
               dispatchDataUpdate({
                 type: 'UPDATE_TIME',
-                setWorkoutPart,
               })
             }
           />
@@ -240,13 +233,11 @@ export const WorkoutIntervalInput = ({
               dispatchDataUpdate({
                 type: 'UPDATE_TIME_SECONDS',
                 value: e.target.value,
-                setWorkoutPart,
               });
             }}
             onBlur={() =>
               dispatchDataUpdate({
                 type: 'UPDATE_TIME',
-                setWorkoutPart,
               })
             }
           />
@@ -269,7 +260,6 @@ export const WorkoutIntervalInput = ({
                 type: 'UPDATE_POWER_WATT',
                 value: e.target.value,
                 ftp,
-                setWorkoutPart,
               });
             }}
           />
@@ -287,7 +277,6 @@ export const WorkoutIntervalInput = ({
                 type: 'UPDATE_POWER_PERCENT',
                 value: e.target.value,
                 ftp,
-                setWorkoutPart,
               });
             }}
           />