Projects api call to set different values in table component

src/pages/concentrators/ConcentratorsPage.tsx

@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
+import { fetchProjects } from "./concentrators.api";
 
 /* ================= TYPES ================= */
 interface Concentrator {
@@ -27,21 +28,43 @@ export default function ConcentratorsPage() {
     project: "CESPT",
   };
 
-  // Lista de proyectos disponibles
+  const [allProjects, setAllProjects] = useState<string[]>([]);
-  const allProjects = ["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"];
+  const [loadingProjects, setLoadingProjects] = useState(true);
+
+  useEffect(() => {
+    const loadProjects = async () => {
+      try {
+        const projects = await fetchProjects();
+        setAllProjects(projects);
+      } catch (error) {
+        console.error('Error loading projects:', error);
+        setAllProjects(["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"]);
+      } finally {
+        setLoadingProjects(false);
+      }
+    };
+
+    loadProjects();
+  }, []);
 
   // Proyectos visibles según el usuario
-  const visibleProjects =
+  const visibleProjects = useMemo(() =>
     currentUser.role === "SUPER_ADMIN"
       ? allProjects
       : currentUser.project
       ? [currentUser.project]
-      : [];
+      : [],
-
+    [allProjects, currentUser.role, currentUser.project]
-  const [selectedProject, setSelectedProject] = useState(
-    visibleProjects[0] || ""
   );
 
+  const [selectedProject, setSelectedProject] = useState("");
+
+  useEffect(() => {
+    if (visibleProjects.length > 0 && !selectedProject) {
+      setSelectedProject(visibleProjects[0]);
+    }
+  }, [visibleProjects, selectedProject]);
+
   const [concentrators, setConcentrators] = useState<Concentrator[]>([
     {
       id: 1,
@@ -75,15 +98,15 @@ export default function ConcentratorsPage() {
   const [showModal, setShowModal] = useState(false);
   const [editingId, setEditingId] = useState<number | null>(null);
 
-  const emptyConcentrator: Omit<Concentrator, "id"> = {
+  const getEmptyConcentrator = (): Omit<Concentrator, "id"> => ({
     name: "",
     location: "",
     status: "ACTIVE",
     project: selectedProject,
     createdAt: new Date().toISOString().slice(0, 10),
-  };
+  });
 
-  const [form, setForm] = useState<Omit<Concentrator, "id">>(emptyConcentrator);
+  const [form, setForm] = useState<Omit<Concentrator, "id">>(getEmptyConcentrator());
 
   /* ================= CRUD ================= */
   const handleSave = () => {
@@ -99,7 +122,7 @@ export default function ConcentratorsPage() {
     }
     setShowModal(false);
     setEditingId(null);
-    setForm({ ...emptyConcentrator, project: selectedProject });
+    setForm({ ...getEmptyConcentrator(), project: selectedProject });
     setActiveConcentrator(null);
   };
 
@@ -132,12 +155,17 @@ export default function ConcentratorsPage() {
           value={selectedProject}
           onChange={(e) => setSelectedProject(e.target.value)}
           className="w-full border px-3 py-2 rounded"
+          disabled={loadingProjects}
         >
-          {visibleProjects.map((proj) => (
+          {loadingProjects ? (
-            <option key={proj} value={proj}>
+            <option>Loading projects...</option>
-              {proj}
+          ) : (
-            </option>
+            visibleProjects.map((proj) => (
-          ))}
+              <option key={proj} value={proj}>
+                {proj}
+              </option>
+            ))
+          )}
         </select>
       </div>
 
@@ -156,7 +184,7 @@ export default function ConcentratorsPage() {
           <div className="flex gap-3">
             <button
               onClick={() => {
-                setForm({ ...emptyConcentrator, project: selectedProject });
+                setForm({ ...getEmptyConcentrator(), project: selectedProject });
                 setEditingId(null);
                 setShowModal(true);
               }}

src/pages/concentrators/concentrators.api.ts

@@ -0,0 +1,102 @@
+interface ProjectRecord {
+  id: string;
+  fields: {
+    "Project ID": string;
+    "Area name": string;
+    "Device S/N": string;
+    "Device Name": string;
+    "Device Type": string;
+    "Device Status": string;
+    "Operator": string;
+    "Installed Time": string;
+    "Communication Time": string;
+    "Instruction Manual": string;
+  };
+}
+
+interface ProjectsResponse {
+  records: ProjectRecord[];
+  next?: string;
+  prev?: string;
+  nestedNext?: string;
+  nestedPrev?: string;
+}
+
+export const fetchProjects = async (): Promise<string[]> => {
+  try {
+    // const response = await fetch('/api/v3/data/ppfu31vhv5gf6i0/m05u6wpquvdbv3c/records');
+    // const data: ProjectsResponse = await response.json();
+
+    const dummyResponse: ProjectsResponse = {
+      records: [
+        {
+          id: "rec1",
+          fields: {
+            "Project ID": "1",
+            "Area name": "GRH (PADRE)",
+            "Device S/N": "SN001",
+            "Device Name": "Device 1",
+            "Device Type": "Type A",
+            "Device Status": "Active",
+            "Operator": "Op1",
+            "Installed Time": "2023-01-01",
+            "Communication Time": "2023-01-02",
+            "Instruction Manual": "Manual 1"
+          }
+        },
+        {
+          id: "rec2",
+          fields: {
+            "Project ID": "2",
+            "Area name": "CESPT",
+            "Device S/N": "SN002",
+            "Device Name": "Device 2",
+            "Device Type": "Type B",
+            "Device Status": "Active",
+            "Operator": "Op2",
+            "Installed Time": "2023-01-02",
+            "Communication Time": "2023-01-03",
+            "Instruction Manual": "Manual 2"
+          }
+        },
+        {
+          id: "rec3",
+          fields: {
+            "Project ID": "3",
+            "Area name": "Proyecto A",
+            "Device S/N": "SN003",
+            "Device Name": "Device 3",
+            "Device Type": "Type C",
+            "Device Status": "Inactive",
+            "Operator": "Op3",
+            "Installed Time": "2023-01-03",
+            "Communication Time": "2023-01-04",
+            "Instruction Manual": "Manual 3"
+          }
+        },
+        {
+          id: "rec4",
+          fields: {
+            "Project ID": "4",
+            "Area name": "Proyecto B",
+            "Device S/N": "SN004",
+            "Device Name": "Device 4",
+            "Device Type": "Type D",
+            "Device Status": "Active",
+            "Operator": "Op4",
+            "Installed Time": "2023-01-04",
+            "Communication Time": "2023-01-05",
+            "Instruction Manual": "Manual 4"
+          }
+        }
+      ]
+    };
+
+    const projectNames = [...new Set(dummyResponse.records.map(record => record.fields["Area name"]))];
+
+    return projectNames;
+  } catch (error) {
+    console.error('Error fetching projects:', error);
+    return ["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"];
+  }
+};