fugly mugly

src/App.tsx

@@ -4,14 +4,20 @@ import Header from "./components/Header";
 import WorkoutSelector from "./components/WorkoutSelector";
 import { CurrentExerciseType, ExerciseInfosType } from "./types";
 
-enum Stat { Reps, Sets, Weight, Time, Steps, MaxHR, AvgHR, StepsPerMin };
+export enum Stat { Reps, Sets, Weight, Time, Steps, MaxHR, AvgHR, StepsPerMin };
 
-function statLength() {
+export function statLength() {
   return Object.keys(Stat).length / 2;
 }
 
-const exerciseInfos: ExerciseInfosType = {
-  Squat: {
+export const exerciseInfos: ExerciseInfosType = {
+  "Squat": {
+    defaultStats: [Stat.Reps, Stat.Sets, Stat.Weight]
+  },
+  "Deadlift": {
+    defaultStats: [Stat.Reps, Stat.Sets, Stat.Weight]
+  },
+  "Bench Press": {
     defaultStats: [Stat.Reps, Stat.Sets, Stat.Weight]
   }
 }
@@ -44,9 +50,9 @@ function App() {
     const l = statLength();
     for (let i = 0; i < l; i++) {
       if (currentExercises[addIndex].stats[Stat[i]] === undefined) {
-        currentExercises[addIndex].stats[Stat[i]] = null;
-        console.log(currentExercises);
-        setExercises(currentExercises);
+        var newExercises = [...currentExercises];
+        newExercises[addIndex].stats[Stat[i]] = null;
+        setExercises(newExercises);
         return;
       }
 

src/components/Exercise.tsx

@@ -1,10 +1,13 @@
+import { exerciseInfos } from "../App";
 import { CurrentExerciseType } from "../types";
 import InputStat from "./InputStat";
 
 function Exercise({ currentExercise, deleteCurrentExercise, addStat }: { currentExercise: CurrentExerciseType, deleteCurrentExercise: () => void, addStat: () => void }) {
     return (
         <div>
-            Exercise :<select></select>
+            Exercise :<select>
+                {Object.keys(exerciseInfos).map((exerciseName, index) => <option key={index} value={exerciseName}>{exerciseName}</option>)}
+            </select>
             {Object.entries(currentExercise.stats).map(([stat, value], index) => <InputStat key={index} stat={stat} />)}
             <button onClick={addStat}>Add Stat</button>
             <button onClick={deleteCurrentExercise}>Delete</button>

src/components/InputStat.tsx

@@ -1,7 +1,10 @@
+import { Stat, statLength } from "../App";
 function InputStat({ stat, statType }: { stat: string, statType?: string }) {
     return (
         <div>
-            <select>{stat}</select>: <input type={(statType === undefined ? 'number' : statType)} />
+            <select>
+                {Object.keys(Stat).filter((_, index) => index < statLength()).map((_, index) => <option key={index} value={Stat[index]}>{Stat[index]}</option>)}
+            </select>: <input type={(statType === undefined ? 'number' : statType)} />
         </div >
     );
 }