integration api immersion

src/App.tsx

@@ -2,9 +2,9 @@ import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Navigation from "./component/Navigation/Navigation";
 import Dashboard from "./pages/Dashboard";
-import Practicals from "./pages/Practicals";
+import Immersions from "./pages/Immersions";
 import Instances from "./pages/Instances";
-import Practical from "./pages/Practical";
+import Immersion from "./pages/Immersion";
 import LoginPage from "./pages/Login";
 import PageTest from "./pages/PageTest";
 import CreateTp from "./pages/admin/CreateTp";
@@ -21,8 +21,8 @@ function App() {
       <Navigation>
         <Routes>
           <Route path="/" element={<Dashboard />} />
-          <Route path="/tps" element={<Practicals />} />
-          <Route path="/tps/:id" element={<Practical />} />
+          <Route path="/immersion" element={<Immersions />} />
+          <Route path="/immersion/:id" element={<Immersion />} />
           <Route path="/instances" element={<Instances />} />
           <Route path="/profile" element={<PageTest />} />
           <Route path="/login" element={<LoginPage />} />

src/component/Navigation/Navigation.tsx

@@ -183,8 +183,8 @@ const Navigation: React.FC<NavigationProps> = ({
                 <li>
                   <div>
                     <DocumentTextIcon className="size-6" />
-                    <Link to="/tps" onClick={toggleDrawer}>
-                      TPs
+                    <Link to="/immersion" onClick={toggleDrawer}>
+                      Immersions
                     </Link>
                   </div>
                 </li>

src/pages/Immersion.tsx

@@ -3,11 +3,11 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { toast } from "react-toastify";
-import { Tp } from "../type/TpType";
+import { Ji } from "../type/JiType";
 
-function Practical() {
+function Immersion() {
   const { id } = useParams();
-  const [tp, setTp] = useState<Tp>();
+  const [ji, setJi] = useState<Ji>();
 
   const copyText = (copy: string) => {
     navigator.clipboard.writeText(copy);
@@ -18,24 +18,24 @@ function Practical() {
   };
 
   useEffect(() => {
-    axios.get(`/api/tps/${id}`).then((res) => {
-      setTp(res.data);
+    axios.get(`/api/ji/${id}`).then((res) => {
+      setJi(res.data);
     });
   }, [id]);
 
   return (
     <>
-      {tp && (
+      {ji && (
         <>
-          <h1 className="text-3xl font-bold mb-2 ms-10">{tp.name}</h1>
+          <h1 className="text-3xl font-bold mb-2 ms-10">{ji.name}</h1>
           <div className="px-6">
             <div className="flex flex-col lg:flex-row">
               <div className="lg:w-2/3 p-4">
                 <div className="w-full h-[80vh] bg-gray-200 rounded-lg overflow-hidden mb-4">
                   <iframe
-                    src={tp.pdfLink}
+                    src={ji.pdfLink}
                     className="w-full h-full"
-                    title={`${tp.name} PDF`}
+                    title={`${ji.name} PDF`}
                   ></iframe>
                 </div>
               </div>
@@ -46,7 +46,7 @@ function Practical() {
                     Information
                   </h2>
                   <ul className="space-y-4">
-                    <li>{tp.description}</li>
+                    <li>{ji.description}</li>
                     <li className="flex justify-between">
                       <span>Duration:</span>
                       <span className="font-medium">2 hours</span>
@@ -74,9 +74,9 @@ function Practical() {
                       <span>SSH:</span>
                       <div
                         className="flex gap-2 items-center"
-                        onClick={() => copyText(tp.ssh)}
+                        onClick={() => copyText(ji.ssh)}
                       >
-                        <span className="font-medium">{tp.ssh}</span>
+                        <span className="font-medium">{ji.ssh}</span>
                         <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
                           <ClipboardIcon className="size-6" />
                         </div>
@@ -86,9 +86,9 @@ function Practical() {
                       <span>Port:</span>
                       <div
                         className="flex gap-2 items-center"
-                        onClick={() => copyText(tp.port)}
+                        onClick={() => copyText(ji.port)}
                       >
-                        <span className="font-medium">{tp.port}</span>
+                        <span className="font-medium">{ji.port}</span>
                         <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
                           <ClipboardIcon className="size-6" />
                         </div>
@@ -98,9 +98,9 @@ function Practical() {
                       <span>Password:</span>
                       <div
                         className="flex gap-2 items-center"
-                        onClick={() => copyText(tp.pwd)}
+                        onClick={() => copyText(ji.pwd)}
                       >
-                        <span className="font-normal">{tp.pwd}</span>
+                        <span className="font-normal">{ji.pwd}</span>
                         <div className="h-8 w-8 hover:bg-base-100 align-middle cursor-pointer flex items-center justify-center rounded">
                           <ClipboardIcon className="size-6" />
                         </div>
@@ -109,7 +109,7 @@ function Practical() {
                   </ul>
                 </div>
                 <a
-                  href={tp.pdfLink}
+                  href={ji.pdfLink}
                   target="_blank"
                   className="card w-full bg-base-200 shadow-md hover:shadow-lg transition-shadow rounded-lg mt-6"
                 >
@@ -132,4 +132,4 @@ function Practical() {
   );
 }
 
-export default Practical;
+export default Immersion;

src/pages/Immersions.tsx

@@ -1,32 +1,32 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { Link } from "react-router-dom";
-import { Tp } from "../type/TpType";
+import { Ji } from "../type/JiType";
 
-function Practicals() {
-  const [tps, setTps] = useState([]);
+function Immersions() {
+  const [jis, setJis] = useState([]);
 
   useEffect(() => {
-    axios.get("/api/tps").then((res) => {
-      setTps(res.data);
+    axios.get("/api/ji/listall").then((res) => {
+      setJis(res.data);
     });
   }, []);
 
   return (
     <div className="container mx-auto py-10">
-      <h1 className="text-3xl font-bold mb-6 text-center">Your TPs</h1>
+      <h1 className="text-3xl font-bold mb-6 text-center">Journees d immersion - Activities</h1>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {tps.map((practical: Tp) => (
+        {jis.map((ji: Ji) => (
           <div
-            key={practical.id}
+            key={ji.id}
             className="card card-compact bg-base-200 shadow-lg p-4"
           >
             <div className="card-body">
-              <h2 className="card-title">{practical.name}</h2>
-              <p>{practical.description}</p>
+              <h2 className="card-title">{ji.name}</h2>
+              <p>{ji.description}</p>
               <div className="card-actions justify-end">
-                <Link to={`/tps/${practical.id}`} className="btn btn-primary">
-                  Learn More
+                <Link to={`/immersion/${ji.id}`} className="btn btn-primary">
+                  Open activity
                 </Link>
               </div>
             </div>
@@ -37,4 +37,4 @@ function Practicals() {
   );
 }
 
-export default Practicals;
+export default Immersions;