Trying to make EditMobility works

routes/(apps)/mobility/(_islands)/EditMobility.tsx

@@ -1,10 +1,20 @@
 import { useEffect, useState } from "preact/hooks";
 
-interface MobilityData {
-  id: number;
-  studentId: string;
+interface Student {
+  id: string;
   firstName: string;
   lastName: string;
+  promotionId: number;
+}
+
+interface Promotion {
+  id: number;
+  name: string;
+}
+
+interface Mobility {
+  id: number;
+  studentId: string;
   startDate: string | null;
   endDate: string | null;
   weeksCount: number | null;
@@ -14,12 +24,13 @@ interface MobilityData {
 }
 
 export default function EditMobility() {
-  const [mobilityData, setMobilityData] = useState<MobilityData[]>([]);
+  const [data, setData] = useState<{ promotions?: Promotion[]; students?: Student[]; mobilities?: Mobility[] } | null>(null);
+  const [error, setError] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
 
   useEffect(() => {
-    const fetchMobilityData = async () => {
-      console.log("EditMobility: Fetching mobility data...");
+    const fetchData = async () => {
+      console.log("EditMobility: Fetching data from API...");
       try {
         const response = await fetch("/mobility/api/insert_mobility");
         console.log("EditMobility: API response status:", response.status);
@@ -28,33 +39,54 @@ export default function EditMobility() {
           throw new Error(`Error fetching data: ${response.statusText}`);
         }
 
-        const data = await response.json();
-        console.log("EditMobility: Data fetched successfully:", data);
-        setMobilityData(data.mobilities || []);
+        const result = await response.json();
+        console.log("EditMobility: Data fetched successfully:", result);
+        setData(result);
       } catch (err) {
         console.error("EditMobility: Error fetching data:", err);
+        setError("Failed to load mobility data. Please try again later.");
       }
     };
 
-    fetchMobilityData();
+    fetchData();
   }, []);
 
+  const handleChange = (
+    studentId: string,
+    field: keyof Mobility,
+    value: string | number | null,
+  ) => {
+    if (!data) return;
+
+    setData((prevData) => {
+      if (!prevData) return null;
+
+      const updatedMobilities = prevData.mobilities?.map((mobility) => {
+        if (mobility.studentId === studentId) {
+          return { ...mobility, [field]: value };
+        }
+        return mobility;
+      }) || [];
+
+      return { ...prevData, mobilities: updatedMobilities };
+    });
+  };
+
   const handleSave = async () => {
-    console.log("EditMobility: Saving data...");
     setIsSaving(true);
 
     try {
       const response = await fetch("/mobility/api/insert_mobility", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ data: mobilityData }),
+        body: JSON.stringify({ data: data?.mobilities }),
       });
 
       console.log("EditMobility: Save response status:", response.status);
 
       if (response.ok) {
-        console.log("EditMobility: Data saved successfully.");
         alert("Data saved successfully!");
+        window.location.reload(); // Refresh the page to load updated data
       } else {
         throw new Error(`Failed to save data: ${response.statusText}`);
       }
@@ -66,128 +98,112 @@ export default function EditMobility() {
     }
   };
 
+  if (error) {
+    return <p className="error">{error}</p>;
+  }
+
+  if (!data?.promotions) {
+    return <p>Loading data...</p>;
+  }
+
   return (
-    <div>
-      <table>
-        <thead>
-          <tr>
-            <th>First Name</th>
-            <th>Last Name</th>
-            <th>Start Date</th>
-            <th>End Date</th>
-            <th>Weeks Count</th>
-            <th>Destination Country</th>
-            <th>Destination Name</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {mobilityData.map((mobility) => (
-            <tr key={mobility.id}>
-              <td>{mobility.firstName}</td>
-              <td>{mobility.lastName}</td>
-              <td>
-                <input
-                  type="date"
-                  value={mobility.startDate || ""}
-                  onChange={(e) =>
-                    setMobilityData((prev) =>
-                      prev.map((entry) =>
-                        entry.id === mobility.id
-                          ? { ...entry, startDate: e.target.value }
-                          : entry
-                      )
-                    )
-                  }
-                />
-              </td>
-              <td>
-                <input
-                  type="date"
-                  value={mobility.endDate || ""}
-                  onChange={(e) =>
-                    setMobilityData((prev) =>
-                      prev.map((entry) =>
-                        entry.id === mobility.id
-                          ? { ...entry, endDate: e.target.value }
-                          : entry
-                      )
-                    )
-                  }
-                />
-              </td>
-              <td>
-                <input
-                  type="number"
-                  value={mobility.weeksCount || ""}
-                  onChange={(e) =>
-                    setMobilityData((prev) =>
-                      prev.map((entry) =>
-                        entry.id === mobility.id
-                          ? { ...entry, weeksCount: Number(e.target.value) || null }
-                          : entry
-                      )
-                    )
-                  }
-                />
-              </td>
-              <td>
-                <input
-                  type="text"
-                  value={mobility.destinationCountry || ""}
-                  onChange={(e) =>
-                    setMobilityData((prev) =>
-                      prev.map((entry) =>
-                        entry.id === mobility.id
-                          ? { ...entry, destinationCountry: e.target.value }
-                          : entry
-                      )
-                    )
-                  }
-                />
-              </td>
-              <td>
-                <input
-                  type="text"
-                  value={mobility.destinationName || ""}
-                  onChange={(e) =>
-                    setMobilityData((prev) =>
-                      prev.map((entry) =>
-                        entry.id === mobility.id
-                          ? { ...entry, destinationName: e.target.value }
-                          : entry
-                      )
-                    )
-                  }
-                />
-              </td>
-              <td>
-                <select
-                  value={mobility.mobilityStatus}
-                  onChange={(e) =>
-                    setMobilityData((prev) =>
-                      prev.map((entry) =>
-                        entry.id === mobility.id
-                          ? { ...entry, mobilityStatus: e.target.value }
-                          : entry
-                      )
-                    )
-                  }
-                >
-                  <option value="N/A">N/A</option>
-                  <option value="Planned">Planned</option>
-                  <option value="In Progress">In Progress</option>
-                  <option value="Completed">Completed</option>
-                  <option value="Validated">Validated</option>
-                </select>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+    <section>
+      <h2>Edit Mobility</h2>
+      {data.promotions.map((promo) => (
+        <div key={promo.id}>
+          <h3>Promotion: {promo.name}</h3>
+          <table>
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>First Name</th>
+                <th>Last Name</th>
+                <th>Start Date</th>
+                <th>End Date</th>
+                <th>Weeks Count</th>
+                <th>Destination Country</th>
+                <th>Destination Name</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.students
+                ?.filter((student) => student.promotionId === promo.id)
+                .map((student) => {
+                  const mobility = data.mobilities?.find((mob) => mob.studentId === student.id) || {
+                    studentId: student.id,
+                    startDate: null,
+                    endDate: null,
+                    weeksCount: null,
+                    destinationCountry: null,
+                    destinationName: null,
+                    mobilityStatus: "N/A",
+                  };
+
+                  return (
+                    <tr key={student.id}>
+                      <td>{student.id}</td>
+                      <td>{student.firstName}</td>
+                      <td>{student.lastName}</td>
+                      <td>
+                        <input
+                          type="date"
+                          value={mobility.startDate || ""}
+                          onChange={(e) => handleChange(student.id, "startDate", e.target.value)}
+                        />
+                      </td>
+                      <td>
+                        <input
+                          type="date"
+                          value={mobility.endDate || ""}
+                          onChange={(e) => handleChange(student.id, "endDate", e.target.value)}
+                        />
+                      </td>
+                      <td>
+                        <input
+                          type="number"
+                          value={mobility.weeksCount || ""}
+                          onChange={(e) =>
+                            handleChange(student.id, "weeksCount", Number(e.target.value) || null)
+                          }
+                        />
+                      </td>
+                      <td>
+                        <input
+                          type="text"
+                          value={mobility.destinationCountry || ""}
+                          onChange={(e) => handleChange(student.id, "destinationCountry", e.target.value)}
+                        />
+                      </td>
+                      <td>
+                        <input
+                          type="text"
+                          value={mobility.destinationName || ""}
+                          onChange={(e) => handleChange(student.id, "destinationName", e.target.value)}
+                        />
+                      </td>
+                      <td>
+                        <select
+                          value={mobility.mobilityStatus}
+                          onChange={(e) => handleChange(student.id, "mobilityStatus", e.target.value)}
+                        >
+                          <option value="N/A">N/A</option>
+                          <option value="Planned">Planned</option>
+                          <option value="In Progress">In Progress</option>
+                          <option value="Completed">Completed</option>
+                          <option value="Validated">Validated</option>
+                        </select>
+                      </td>
+                    </tr>
+                  );
+                })}
+            </tbody>
+          </table>
+        </div>
+      ))}
       <button onClick={handleSave} disabled={isSaving}>
-        {isSaving ? "Saving..." : "Save Changes"}
+        {isSaving ? "Saving..." : "Confirm"}
       </button>
-    </div>
+    </section>
   );
 }