Merge pull request #100 from TechLabs-Berlin/backend

adds componentName to poses.json

backend/data/poses.json

@@ -1,14 +1,18 @@
 [
     {
-        "name": "Lunges"
+        "name": "Lunges",
+        "componentName": "Lunges"
     },
     {
-        "name": "Warrior"
+        "name": "Warrior",
+        "componentName": "Warrior"
     },
     {
-        "name": "Chair"
+        "name": "Chair",
+        "componentName": "Chair"
     },
     {
-        "name": "Curls"
+        "name": "Bicep Curls",
+        "componentName": "Curls"
     }
 ]

backend/routes/poses.js

@@ -10,6 +10,7 @@ router.get("/", (req, res) => {
         poses.push({
             id: pose.name,
             label: pose.name,
+            componentName: pose.componentName,
         });
     });
     res.send(poses);

frontend/src/components/BtnComponent/PosesButtonsGroup.js

@@ -1,69 +1,77 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import "./ButtonComponent.css";
-import WarriorComponent from "./WarriorComponent";
-import LungesComponent from "./LungesComponent";
-import CurlsComponent from "./CurlsComponent";
-import ChairComponent from "./ChairComponent";
 import ModalFeedback from "../05_update_video/ModalFeedback";
 
 function PosesButtonsGroup({ onButtonClicked, onModalClosed }) {
-  const [selectedPose, setSelectedPose] = useState(null);
-  const [poses, setPoses] = useState([]);
+    const [selectedPose, setSelectedPose] = useState(null);
+    const [poses, setPoses] = useState([]);
 
-  useEffect(() => {
-    axios.get("/poses").then((res) => {
-      setPoses(res.data);
-    });
-  }, []);
+    useEffect(() => {
+        axios.get("/poses").then((res) => {
+            setPoses(res.data);
+        });
+    }, []);
 
-  const handleButtonClick = (value) => {
-    setSelectedPose(value);
-    onButtonClicked(value);
-  };
+    const handleButtonClick = (value) => {
+        setSelectedPose(value);
+        onButtonClicked(value.id);
+    };
 
-  const resetStates = () => {
-    setSelectedPose(null);
-  };
+    const resetStates = () => {
+        setSelectedPose(null);
+    };
 
-  const renderPoseComponent = () => {
-    if (selectedPose === "Lunges") {
-      return <LungesComponent />;
-    } else if (selectedPose === "Warrior") {
-      return <WarriorComponent />;
-    } else if (selectedPose === "Curls") {
-      return <CurlsComponent />;
-    } else if (selectedPose === "Chair") {
-      return <ChairComponent />;
-    }
-  };
+    const renderPoseComponent = () => {
+        if (selectedPose) {
+            try {
+                const PoseComponent =
+                    require(`./${selectedPose.componentName}Component`).default;
+                return <PoseComponent />;
+            } catch (error) {
+                console.log(error);
+                return null;
+            }
+        }
+    };
 
-  const handleModalClosed = () => {
-    resetStates();
-    onModalClosed();
-  };
+    const handleModalClosed = () => {
+        resetStates();
+        onModalClosed();
+    };
 
-  return (
-    <div className="wrapper">
-      <div className="container">
-        <h2 className="title-h2">Choose an exercise</h2>
-        <div className="btn_container">
-          {poses.map((button) => (
-            <button
-              key={button.id}
-              onClick={() => handleButtonClick(button.id)}
-              className={selectedPose === button.id ? "active" : "inactive"}
-            >
-              {button.label}
-            </button>
-          ))}
-        </div>
-        {renderPoseComponent()}
+    const Buttons = () => {
+        return poses.map((pose) => {
+            const buttonStatus =
+                selectedPose && selectedPose.id === pose.id
+                    ? "active"
+                    : "inactive";
+
+            return (
+                <button
+                    key={pose.id}
+                    onClick={() => handleButtonClick(pose)}
+                    className={buttonStatus}
+                >
+                    {pose.label}
+                </button>
+            );
+        });
+    };
 
-        <ModalFeedback onModalClosed={handleModalClosed} />
-      </div>
-    </div>
-  );
+    return (
+        <div className="wrapper">
+            <div className="container">
+                <h2 className="title-h2">Choose an exercise</h2>
+                <div className="btn_container">
+                    <Buttons />
+                </div>
+                {renderPoseComponent()}
+
+                <ModalFeedback onModalClosed={handleModalClosed} />
+            </div>
+        </div>
+    );
 }
 
 export default PosesButtonsGroup;