WorkoutIntervalInput had some issues due to calling the parent when rendering.
This was because the usage of the setWorkoutPart from the parent was not contained in useEffect.
This lead to warnings such as this:
WorkoutEditor.tsx:243 Warning: Cannot update a component (`WorkoutEditor`) while rendering a different component (`WorkoutIntervalInput`). To locate the bad setState() call inside `WorkoutIntervalInput`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Error Component Stack
at WorkoutIntervalInput (WorkoutIntervalInput.tsx:79:3)
at div (<anonymous>)
at chunk-XTFHVF2A.js?v=14ae4dba:1397:45
at ChakraComponent (chunk-XTFHVF2A.js?v=14ae4dba:8474:35)
at Draggable (react-beautiful-dnd.…?v=537c04d4:7953:39)
at ConnectFunction (react-beautiful-dnd.js?v=537c04d4:848:48)
at PrivateDraggable (react-beautiful-dnd.…?v=537c04d4:8242:26)
at PublicDraggable (react-beautiful-dnd.…?v=537c04d4:8250:32)
at DraggableItem (DraggableItem.tsx:10:33)
at div (<anonymous>)
at chunk-XTFHVF2A.js?v=14ae4dba:1397:45
at ChakraComponent (chunk-XTFHVF2A.js?v=14ae4dba:8474:35)
at chunk-OGF3B5P3.js?v=14ae4dba:342:5
at Droppable (react-beautiful-dnd.…?v=537c04d4:8261:49)
at ConnectFunction (react-beautiful-dnd.js?v=537c04d4:848:48)
at Provider (react-beautiful-dnd.js?v=537c04d4:678:20)
at App (react-beautiful-dnd.…?v=537c04d4:7082:25)
at ErrorBoundary2 (react-beautiful-dnd.…?v=537c04d4:1579:35)
at DragDropContext (react-beautiful-dnd.…?v=537c04d4:7202:19)
at DraggableList (DraggableList.tsx:8:33)
at div (<anonymous>)
at chunk-XTFHVF2A.js?v=14ae4dba:1397:45
at ChakraComponent (chunk-XTFHVF2A.js?v=14ae4dba:8474:35)
at chunk-OGF3B5P3.js?v=14ae4dba:342:5
at WorkoutEditor (WorkoutEditor.tsx:62:12)
Fixed by having the call in useEffect.
(That lead to a lot of rerenders, so add an if-check to just setTheWorkoutPart when it is actually changed)
Also removed the setWorkoutType from the actions, and just used the one from props
Not a React Expert, so it may be fixed in a better way. useMemo in the parent? IDK
WorkoutIntervalInput
had some issues due to calling the parent when rendering. This was because the usage of the setWorkoutPart from the parent was not contained in useEffect. This lead to warnings such as this:Fixed by having the call in useEffect. (That lead to a lot of rerenders, so add an if-check to just setTheWorkoutPart when it is actually changed)
Also removed the setWorkoutType from the actions, and just used the one from props
Not a React Expert, so it may be fixed in a better way. useMemo in the parent? IDK
Master (bug)
This pr (no warning :) )