From ae7e16d2a42473152a7fe62e2f8d3e089949c65b Mon Sep 17 00:00:00 2001
From: Andrey Oliveira <andreyq.oliveira@gmail.com>
Date: Sat, 8 Apr 2023 16:15:36 -0300
Subject: [PATCH 1/2] adds componentName to poses.json

---
 backend/data/poses.json                       |  12 +-
 backend/routes/poses.js                       |   1 +
 .../BtnComponent/PosesButtonsGroup.js         | 114 ++++++++++--------
 3 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/backend/data/poses.json b/backend/data/poses.json
index 3c8b031..159c6e3 100644
--- a/backend/data/poses.json
+++ b/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"
     }
 ]
diff --git a/backend/routes/poses.js b/backend/routes/poses.js
index fd4ed4f..535c287 100644
--- a/backend/routes/poses.js
+++ b/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);
diff --git a/frontend/src/components/BtnComponent/PosesButtonsGroup.js b/frontend/src/components/BtnComponent/PosesButtonsGroup.js
index 5ce703f..3e0b3b1 100644
--- a/frontend/src/components/BtnComponent/PosesButtonsGroup.js
+++ b/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);
+    };
 
-  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' pose") {
-      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;

From 0229f9d94857dd6015f9312a535afd77f56ce3c7 Mon Sep 17 00:00:00 2001
From: Andrey Oliveira <andreyq.oliveira@gmail.com>
Date: Sat, 8 Apr 2023 16:41:21 -0300
Subject: [PATCH 2/2] fixes the pose sent as object to flask server

---
 frontend/src/components/BtnComponent/PosesButtonsGroup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/BtnComponent/PosesButtonsGroup.js b/frontend/src/components/BtnComponent/PosesButtonsGroup.js
index 3e0b3b1..6cae348 100644
--- a/frontend/src/components/BtnComponent/PosesButtonsGroup.js
+++ b/frontend/src/components/BtnComponent/PosesButtonsGroup.js
@@ -15,7 +15,7 @@ function PosesButtonsGroup({ onButtonClicked, onModalClosed }) {
 
     const handleButtonClick = (value) => {
         setSelectedPose(value);
-        onButtonClicked(value);
+        onButtonClicked(value.id);
     };
 
     const resetStates = () => {