fugly mugly

src/App.tsx

@@ -2,13 +2,28 @@ import { useState } from "react";
 import Exercises from "./components/Exercises";
 import Header from "./components/Header";
 import WorkoutSelector from "./components/WorkoutSelector";
-import { CurrentExerciseType } from "./types";
+import { CurrentExerciseType, ExerciseInfosType } from "./types";
 
+export enum Stat { Reps, Sets, Weight, Time, Steps, MaxHR, AvgHR, StepsPerMin };
 
-enum Stat { Reps, Sets, Weight, Time, Steps, MaxHR, AvgHR, StepsPerMin };
+export function statLength() {
+  return Object.keys(Stat).length / 2;
+}
+
+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]
+  }
+}
 
 function App() {
-  const [currentExercises, setExercises]: [CurrentExerciseType[], any] = useState([
+  const [currentExercises, setExercises] = useState<CurrentExerciseType[]>([
     {
       name: "Squat",
       stats: { "Weight": 10 }
@@ -28,15 +43,20 @@ function App() {
     {
       name: "Squat",
       stats: {}
-    }])
+    }]);
   }
 
   function addStat(addIndex: number) {
-    for (const checkStat in Stat) {
-      //console.log(checkStat, typeof (checkStat));
+    const l = statLength();
+    for (let i = 0; i < l; i++) {
+      if (currentExercises[addIndex].stats[Stat[i]] === undefined) {
+        var newExercises = [...currentExercises];
+        newExercises[addIndex].stats[Stat[i]] = null;
+        setExercises(newExercises);
+        return;
+      }
+
     }
-    console.log(currentExercises[addIndex].stats)
-    //setExercises([..])
   }
 
 

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 >
     );
 }

src/types.d.ts

@@ -1,4 +1,8 @@
 export type CurrentExerciseType = {
     name: string,
-    stats: { [stat: Stat]: any },
-};
+    stats: { [stat: string]: any },
+};
+
+export type ExerciseInfosType = {
+    [key: string]: { defaultStats: Stat[] }
+}