[Feat 177] : router and skeleton for ExercisePage & HomePage (#33)

* generate structure skeleton for ExercisePage and HomePage

* isolating route logic

frontend/src/main.tsx

@@ -1,35 +1,22 @@
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
 import "./i18n";
-
-import App from "./App.tsx";
-import SignUp from "./pages/SignUp";
+import router from "./routes";
 
 import "./index.css";
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <App />,
-  },
-  {
-    path: "/sign-up",
-    element: <SignUp />,
-  },
-]);
-
 const client = new ApolloClient({
-  uri: "http://localhost:4000",
-  cache: new InMemoryCache(),
+	uri: "http://localhost:4000",
+	cache: new InMemoryCache(),
 });
 
 // biome-ignore lint/style/noNonNullAssertion: <explanation>
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <ApolloProvider client={client}>
-      <RouterProvider router={router} />
-    </ApolloProvider>
-  </StrictMode>
+	<StrictMode>
+		<ApolloProvider client={client}>
+			<RouterProvider router={router} />
+		</ApolloProvider>
+	</StrictMode>,
 );

frontend/src/pages/HomePage/Views/HomePageView/Views/DashBoardHeaderView/index.tsx

@@ -0,0 +1,12 @@
+import "./DashBoardHeaderView.scss";
+
+// Existe seulement en phone
+const DashBoardHeaderView = () => {
+	return (
+		<div>
+			<p>DashBoardHeaderView</p>
+		</div>
+	);
+};
+
+export default DashBoardHeaderView;

frontend/src/pages/HomePage/Views/HomePageView/Views/ProgramListView/index.tsx

@@ -0,0 +1,11 @@
+import "./ProgramListView.scss";
+
+const ProgramListView = () => {
+	return (
+		<div>
+			<p>ProgramListView</p>
+		</div>
+	);
+};
+
+export default ProgramListView;

frontend/src/pages/HomePage/Views/HomePageView/Views/index.tsx

@@ -0,0 +1,2 @@
+export { default as DashBoardHeaderView } from "./DashBoardHeaderView";
+export { default as ProgramListView } from "./ProgramListView";

frontend/src/pages/HomePage/Views/HomePageView/index.tsx

@@ -0,0 +1,13 @@
+import { DashBoardHeaderView, ProgramListView } from "./Views";
+import "./HomePageView.scss";
+
+const HomePageView = () => {
+	return (
+		<div>
+			<DashBoardHeaderView />
+			<ProgramListView />
+		</div>
+	);
+};
+
+export default HomePageView;

frontend/src/pages/HomePage/Views/UserProfileView/Views/DashBoardView/index.tsx

@@ -0,0 +1,11 @@
+import "./DashBoardView.scss";
+
+const DashBoardView = () => {
+	return (
+		<div>
+			<p>DashBoardView</p>
+		</div>
+	);
+};
+
+export default DashBoardView;

frontend/src/pages/HomePage/Views/UserProfileView/Views/HistoryView/index.tsx

@@ -0,0 +1,11 @@
+import "./HistoryView.scss";
+
+const HistoryView = () => {
+	return (
+		<div>
+			<p>HistoryView</p>
+		</div>
+	);
+};
+
+export default HistoryView;

frontend/src/pages/HomePage/Views/UserProfileView/Views/index.tsx

@@ -0,0 +1,2 @@
+export { default as DashBoardView } from "./DashBoardView";
+export { default as HistoryView } from "./HistoryView";

frontend/src/pages/HomePage/Views/UserProfileView/index.tsx

@@ -0,0 +1,13 @@
+import { DashBoardView, HistoryView } from "./Views";
+import "./UserProfileView.scss";
+
+const UserProfileView = () => {
+	return (
+		<div>
+			<DashBoardView />
+			<HistoryView /> {/* apparait onClick et remplace DashBoardView */}
+		</div>
+	);
+};
+
+export default UserProfileView;

frontend/src/pages/HomePage/Views/index.tsx

@@ -0,0 +1,2 @@
+export { default as HomePageView } from "./HomePageView";
+export { default as UserProfileView } from "./UserProfileView";

frontend/src/pages/HomePage/index.tsx

@@ -0,0 +1,25 @@
+import { HomePageView, UserProfileView } from "./Views";
+import "./HomePage.scss";
+const HomePage = () => {
+	return (
+		<>
+			{/*if screen size = phone */}
+			<section>
+				<HomePageView />{" "}
+				{/* même URL mais on fait toggle entre les 2 vues HomePageView et UserProfilView */}
+				<UserProfileView />
+			</section>
+
+			{/*if screen size = desktop */}
+			<section>
+				<UserProfileView />{" "}
+				{/* colonne de gauche avec le dashboard de l'utilisateur toujours visible */}
+			</section>
+			<section>
+				<HomePageView /> {/* colonne de droite avec la liste des programmes*/}
+			</section>
+		</>
+	);
+};
+
+export default HomePage;

frontend/src/pages/ProgramPage/Views/CurrentExerciseView/index.tsx

@@ -0,0 +1,11 @@
+import "./CurrentExerciceView.scss";
+
+const CurrentExerciceView = () => {
+	return (
+		<div>
+			<p>CurrentExerciceView</p>
+		</div>
+	);
+};
+
+export default CurrentExerciceView;

frontend/src/pages/ProgramPage/Views/ExerciseListView/ExerciseListDesktopView/ExerciseListDesktopView.tsx

@@ -0,0 +1,13 @@
+import "./ExerciseListDesktopView.scss";
+
+const ExerciseListDesktopView = () => {
+	return (
+		<>
+			<div>
+				<p>ExerciseListDesktopView</p>
+			</div>
+		</>
+	);
+};
+
+export default ExerciseListDesktopView;

frontend/src/pages/ProgramPage/Views/ExerciseListView/ExerciseListMobileView/ExerciseListMobileView.tsx

@@ -0,0 +1,13 @@
+import "./ExerciseListMobileView.scss";
+
+const ExerciseListMobileView = () => {
+	return (
+		<>
+			<div>
+				<p>ExerciseListMobileView</p>
+			</div>
+		</>
+	);
+};
+
+export default ExerciseListMobileView;

frontend/src/pages/ProgramPage/Views/ExerciseListView/index.tsx

@@ -0,0 +1,20 @@
+import ExerciseListDesktopView from "./ExerciseListDesktopView/ExerciseListDesktopView";
+import ExerciseListMobileView from "./ExerciseListMobileView/ExerciseListMobileView";
+import "./ExerciseListView.scss";
+
+const ExerciseListView = () => {
+	return (
+		<>
+			{/* if phone size  */}
+			<div>
+				<ExerciseListMobileView />
+			</div>
+			{/* if desktop size  */}
+			<div>
+				<ExerciseListDesktopView />
+			</div>
+		</>
+	);
+};
+
+export default ExerciseListView;

frontend/src/pages/ProgramPage/Views/ExitProgramView/index.tsx

@@ -0,0 +1,11 @@
+import "./ExitProgramView.scss";
+
+const ExitProgramView = () => {
+	return (
+		<div>
+			<p>ExitProgramView</p>
+		</div>
+	);
+};
+
+export default ExitProgramView;

frontend/src/pages/ProgramPage/Views/FinishedProgramView/index.tsx

@@ -0,0 +1,11 @@
+import "./FinishedProgramView.scss";
+
+const FinishedProgramView = () => {
+	return (
+		<div>
+			<p>ExitProgramView</p>
+		</div>
+	);
+};
+
+export default FinishedProgramView;

frontend/src/pages/ProgramPage/Views/RestView/index.tsx

@@ -0,0 +1,10 @@
+import "./RestView.scss";
+const RestView = () => {
+	return (
+		<div>
+			<p>RestView</p>
+		</div>
+	);
+};
+
+export default RestView;

frontend/src/pages/ProgramPage/Views/StartProgramView/index.tsx

@@ -0,0 +1,12 @@
+import "./StartProgramView.scss";
+
+//EXISTE UNIQUEMENT EN VERSION DESKTOP (C'EST L'IMAGE AU CENTRE DU FRAME 'Exercice List - Desktop' + texte 'Démarre ta séance' + bouton 'Démarrer' SUR FIGMA)
+const StartProgramView = () => {
+	return (
+		<div>
+			<p>StartProgramView</p>
+		</div>
+	);
+};
+
+export default StartProgramView;

frontend/src/pages/ProgramPage/Views/index.tsx

@@ -0,0 +1,6 @@
+export { default as CurrentExerciceView } from "./CurrentExerciseView";
+export { default as ExerciseListView } from "./ExerciseListView";
+export { default as ExitProgramView } from "./ExitProgramView";
+export { default as FinishedProgramView } from "./FinishedProgramView";
+export { default as RestView } from "./RestView";
+export { default as StartProgramView } from "./StartProgramView";

frontend/src/pages/ProgramPage/index.tsx

@@ -0,0 +1,40 @@
+import {
+  CurrentExerciceView,
+  ExerciseListView,
+  ExitProgramView,
+  FinishedProgramView,
+  RestView,
+  StartProgramView,
+} from "./Views";
+import "./ProgramPage.scss";
+const ProgramPage = () => {
+  return (
+    <>
+      {/*if screen size = phone */}
+      <section>
+        <ExerciseListView />{" "}
+        {/* on fait défiler une à une les vues avec un state*/}
+        <CurrentExerciceView />
+        <RestView />
+        <ExitProgramView />
+        <FinishedProgramView />
+      </section>
+
+      {/*if screen size = desktop */}
+      <section>
+        <ExerciseListView />{" "}
+        {/* colonne de gauche de l'écran avec liste des exos reste visible tout le temps pendant le process*/}
+      </section>
+      <section>
+        <StartProgramView />
+        <CurrentExerciceView />{" "}
+        {/* colonne de droite de l'écran qui fait défiler les vues avec un state*/}
+        <RestView />
+        <ExitProgramView />
+        <FinishedProgramView />
+      </section>
+    </>
+  );
+};
+
+export default ProgramPage;

frontend/src/routes.tsx

@@ -0,0 +1,31 @@
+import { createBrowserRouter } from "react-router-dom";
+import App from "./App";
+import HomePage from "./pages/HomePage";
+import ProgramPage from "./pages/ProgramPage";
+import SignUp from "./pages/SignUp";
+
+const router = createBrowserRouter([
+	{
+		path: "/",
+		element: <App />,
+	},
+	{
+		path: "/sign-up",
+		element: <SignUp />,
+	},
+	{
+		path: "/program/:id",
+		element: <ProgramPage />,
+	},
+	{
+		path: "/home",
+		element: <HomePage />,
+	},
+	// Page 404 à faire
+	{
+		path: "*",
+		element: <div>404 - Page Not Found</div>,
+	},
+]);
+
+export default router;