Now each exercise from my routine has its own page

src/App.tsx

@@ -2,9 +2,16 @@ import React, { useEffect, useState, createContext } from "react";
 import django from "./Djangocircle.png";
 import "./App.css";
 import "./styles.scss";
+import "./assets/Styles/Page-exercise-details.scss";
 import "./assets/Styles/add-form-styles.scss";
 import { Navigation } from "./assets/components/Navigation";
-import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import {
+  BrowserRouter,
+  HashRouter,
+  Routes,
+  Route,
+  Link,
+} from "react-router-dom";
 import { AllExercises } from "./assets/components/AllExercises";
 import { MyExercises } from "./assets/components/MyExercises";
 import PersonalLinks from "./assets/components/Navigation/PersonalLinks";
@@ -216,7 +223,7 @@ function App() {
                 <Navigation />
 
                 <Routes>
-                  <Route path="*" element={<MyExercises />} />
+                  <Route path="/" element={<MyExercises />} />
                   <Route path="/all-exercises/" element={<AllExercises />} />
                   <Route
                     path={`/myexerciseDetails/:myExerciseID`}

src/assets/Styles/Page-exercise-details.scss

@@ -0,0 +1,49 @@
+.PageExerciseDetails-header {
+  display: flex;
+  padding-right: 30px;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  svg {
+    height: 25px;
+  }
+}
+
+.page-exercise {
+  margin-bottom: 25px;
+  display: flex;
+  flex-direction: column;
+  &__area1 {
+    display: flex;
+  }
+  &__area2 {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+    &__objective {
+      display: flex;
+      justify-content: center;
+      align-content: baseline;
+      p {
+        margin: 0 10px;
+      }
+      svg {
+        align-self: center;
+      }
+    }
+    &__sets {
+      display: flex;
+      gap: 10px;
+      flex-direction: column;
+      &__controls {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        &__moreOrLess {
+          display: flex;
+          gap: 5px;
+        }
+      }
+    }
+  }
+}

src/assets/components/My-list/Page-Exercise-Details/PageExerciseDetails.tsx

@@ -1,12 +1,19 @@
-import React, { useContext } from "react";
-import { useParams } from "react-router-dom";
+import React, { useContext, useState } from "react";
+import { Link, useParams, useNavigate } from "react-router-dom";
 import { RoutineContext } from "../../../../App";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHandPointLeft, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { CreateSetButton } from "../RoutinePage/item-myExercise/CreateSetButton";
+import { DeleteSetButton } from "../RoutinePage/item-myExercise/DeleteSetButton";
+import { ItemSet } from "../RoutinePage/item-myExercise/ItemSet";
+import { DeleteMyItemButton } from "../RoutinePage/item-myExercise/DeleteMyItemButton";
 
 interface Routines {
   routineID: string;
   isEditing: boolean;
   routineName: string;
   routineImage: string;
+  routineCompletion: number[];
   routineExercises: IExerciseInfo[];
 }
 
@@ -52,11 +59,176 @@ export const PageExerciseDetails = () => {
     });
   });
 
+  //Check if OBJECTIVE of the exercise is being edited or not
+  const [editObjective, setEditObjective] = useState(false);
+  //The objective Text used to make the replacing of the REAL state in the APP posible
+  const [objectiveTextState, setObjectiveTextState] = useState(
+    ExerciseFromRoutine?.objective
+  );
+
+  const handleObjective = () => {
+    setMyRoutines((prevRoutines: Routines[]) => {
+      const updatedRoutines = prevRoutines.map((routine) => {
+        if (routine.routineID === ExerciseFromRoutine?.routine) {
+          const updatedExercises = routine.routineExercises.map((exercise) => {
+            if (exercise.myExerciseID === ExerciseFromRoutine?.myExerciseID) {
+              return {
+                ...exercise,
+                objective: objectiveTextState,
+              } as IExerciseInfo;
+            }
+            return exercise;
+          });
+          return { ...routine, routineExercises: updatedExercises } as Routines;
+        }
+        return routine;
+      });
+      return updatedRoutines;
+    });
+    setEditObjective(false);
+  };
+
+  // Update the type in the corresponding exerciseItem from myRoutines
+  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newType = e.target.value;
+
+    // Update the type in the corresponding exerciseItem from myRoutines
+    setMyRoutines((prevRoutines) => {
+      const updatedRoutines = prevRoutines.map((routine) => {
+        if (routine.routineID === ExerciseFromRoutine?.routine) {
+          const updatedExercises = routine.routineExercises.map((exercise) => {
+            if (exercise.myExerciseID === ExerciseFromRoutine?.myExerciseID) {
+              return { ...exercise, type: newType };
+            }
+            return exercise;
+          });
+          return { ...routine, routineExercises: updatedExercises };
+        }
+        return routine;
+      });
+      return updatedRoutines;
+    });
+  };
+
+  const setsOFsameExercise = ExerciseFromRoutine?.sets || []; // Assuming 'sets' is an array of sets in IExerciseInfo
+
+  const navigate = useNavigate();
+  const goBack = () => {
+    navigate(-1);
+  };
+
   return (
     <>
       <div>
         <div className="main-exercises">
-          {ExerciseFromRoutine && <h2>{ExerciseFromRoutine.name}</h2>}
+          <div className="PageExerciseDetails-header">
+            <FontAwesomeIcon icon={faHandPointLeft} onClick={goBack} />
+            {ExerciseFromRoutine && <h2>{ExerciseFromRoutine.name}</h2>}
+          </div>
+
+          <div className="page-exercise">
+            {/* In area 2 we will explore the GENERAL details of the exercise */}
+            <div className="page-exercise__area1">
+              <div className="page-exercise__area1__image">
+                <img
+                  src={ExerciseFromRoutine?.linkImage}
+                  alt={ExerciseFromRoutine?.name}
+                />
+              </div>
+              <div className="page-exercise__area1__general-details"></div>
+            </div>
+            {/* In area 2 we will explore the routine part of the exercise */}
+            <form className="page-exercise__area2">
+              {/* Objective OR Objective edition input */}
+              <div className="page-exercise__area2__objective">
+                {editObjective ? (
+                  <>
+                    <input
+                      type="text"
+                      value={objectiveTextState}
+                      onChange={(e) => setObjectiveTextState(e.target.value)}
+                    />
+                    <FontAwesomeIcon
+                      icon={faEdit}
+                      onClick={() => handleObjective()}
+                    />
+                  </>
+                ) : ExerciseFromRoutine?.objective !== "" ? (
+                  <>
+                    {" "}
+                    <p>
+                      <b>Objective:</b> {ExerciseFromRoutine?.objective}{" "}
+                    </p>{" "}
+                    <FontAwesomeIcon
+                      icon={faEdit}
+                      onClick={() => setEditObjective(!editObjective)}
+                    />
+                  </>
+                ) : (
+                  <p>
+                    <b>Objective:</b> No objective set...{" "}
+                    <FontAwesomeIcon
+                      icon={faEdit}
+                      onClick={() => setEditObjective(!editObjective)}
+                    />
+                  </p>
+                )}
+              </div>
+              {/* SETS */}
+              <div className="page-exercise__area2__sets">
+                <div className="page-exercise__area2__sets__controls">
+                  <div className="page-exercise__area2__sets__controls__selectType">
+                    <select
+                      name="workout-type"
+                      id="workout-type"
+                      value={ExerciseFromRoutine?.type}
+                      onChange={handleTypeChange}
+                    >
+                      <option value="Cardio">Cardio</option>
+                      <option value="RPT">RPT</option>
+                      <option value="KRP">KRP</option>
+                      <option value="KDT">KDT</option>
+                      <option value="Stretch">Stretch</option>
+                    </select>
+                  </div>
+                  <div className="page-exercise__area2__sets__controls__moreOrLess">
+                    {ExerciseFromRoutine?.routine &&
+                      ExerciseFromRoutine?.myExerciseID && (
+                        <>
+                          <CreateSetButton
+                            exerciseID={ExerciseFromRoutine.myExerciseID}
+                            routineID={ExerciseFromRoutine.routine}
+                          />
+                          <DeleteSetButton
+                            exerciseID={ExerciseFromRoutine.myExerciseID}
+                            routineID={ExerciseFromRoutine.routine}
+                            exerciseItem={ExerciseFromRoutine}
+                          />
+                        </>
+                      )}
+                  </div>
+                </div>
+                <div className="page-exercise__area2__sets__sets">
+                  {ExerciseFromRoutine?.routine &&
+                    ExerciseFromRoutine?.myExerciseID &&
+                    setsOFsameExercise?.map((each, index) => (
+                      <ItemSet
+                        key={`item-set-${index}-${ExerciseFromRoutine?.myExerciseID}`}
+                        item={each}
+                        type={ExerciseFromRoutine?.type || ""}
+                        index={index}
+                        routineID={ExerciseFromRoutine?.routine || ""}
+                        exerciseID={ExerciseFromRoutine?.myExerciseID || ""}
+                      />
+                    ))}
+                </div>
+              </div>
+            </form>
+          </div>
+          <DeleteMyItemButton
+            exerciseItem={ExerciseFromRoutine}
+            routineID={ExerciseFromRoutine?.routine || ""}
+          />
         </div>
       </div>
     </>

src/assets/components/My-list/RoutinePage/RoutinePage.tsx

@@ -56,6 +56,9 @@ export const RoutinePage = () => {
 
   const allRoutineCompletion = TheRoutine?.routineCompletion;
 
+  //GET Current URL for going backwards button
+  const url = window.location.href;
+
   return (
     <div>
       <div className="main-exercises">

src/assets/components/My-list/RoutinePage/item-myExercise/DeleteMyItemButton.tsx

@@ -5,13 +5,16 @@ import { RoutineContext } from "../../../../../App";
 
 interface exerciseIT {
   routineID: string;
-  exerciseItem: {
-    myExerciseID: string;
-    routine: string;
+  exerciseItem?: {
     isEditing: boolean;
     name: string;
     muscles: string[];
     linkImage: string;
+    myExerciseID: string;
+    objective: string;
+    routine: string;
+    type: string;
+    sets: any[];
   };
 }
 
@@ -47,12 +50,17 @@ export const DeleteMyItemButton = (props: exerciseIT) => {
   };
 
   return (
-    <FontAwesomeIcon
-      icon={faTrash}
-      onClick={() =>
-        deleteMyExercise &&
-        deleteMyExercise(routineID, exerciseItem.myExerciseID)
-      }
-    />
+    <>
+      {exerciseItem && (
+        <button
+          onClick={() =>
+            deleteMyExercise &&
+            deleteMyExercise(routineID, exerciseItem.myExerciseID)
+          }
+        >
+          Delete from Routine <FontAwesomeIcon icon={faTrash} />
+        </button>
+      )}
+    </>
   );
 };