working frontend and backend

frontend/src/pages/Groups.jsx

@@ -0,0 +1,89 @@
+import CardContainer from "@/components/layout/CardContainer";
+import LoadingIcon from "@/components/LoadingIcon";
+
+import { useConfig } from "@/hooks/useConfig";
+import { useDataContext } from "@/hooks/useDataContext";
+
+import { DataProvider } from "@/context/DataContext";
+
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+const Groups = () => {
+    const { config, configLoading } = useConfig();
+
+    if (configLoading || !config) return <p className="text-center my-5"><LoadingIcon /></p>;
+
+    const replacedEndpoint = config.appConfig.endpoints.GET_GROUPS;
+    const reqConfig = {
+        baseUrl: `${config.appConfig.endpoints.DATA_URL}${replacedEndpoint}`,
+        devicesUrl: `${config.appConfig.endpoints.DATA_URL}${config.appConfig.endpoints.GET_GROUP_DEVICES}`,
+    };
+
+    return (
+        <DataProvider config={reqConfig}>
+            <GroupsContent config={reqConfig} />
+        </DataProvider>
+    );
+}
+
+const GroupsContent = ({ config }) => {
+    const { data, dataLoading, dataError, getData } = useDataContext();
+    const [devices, setDevices] = useState({});
+
+    useEffect(() => {
+        if (!data || data.length === 0) return;
+
+        const fetchDevices = async () => {
+            const results = {};
+
+            await Promise.all(data.map(async group => {
+                const endpoint = config.devicesUrl
+                    .replace(':groupId', group.groupId);
+
+                try {
+                    const res = await getData(endpoint);
+                    results[group.groupId] = res;
+                } catch (err) {
+                    console.error(`Error al obtener dispositivos de ${group.groupId}:`, err);
+                }
+            }));
+
+            setDevices(results);
+        };
+
+        fetchDevices();
+    }, [config.devicesUrl, data, getData]);
+
+    if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+    if (dataError) return <p className="text-center my-5">Error al cargar datos: {dataError}</p>;
+
+    return (
+        <CardContainer
+            links
+            text
+            cards={data.map(group => {
+                const groupDevices = devices[group.groupId]?.data;
+                const deviceCount = groupDevices?.length;
+
+                return {
+                    title: group.groupName,
+                    status: `ID: ${group.groupId}`,
+                    to: `/groups/${group.groupId}`,
+                    styleMode: "override",
+                    content: deviceCount != null
+                        ? (deviceCount === 1 ? "1 dispositivo" : `${deviceCount} dispositivos`)
+                        : "Cargando dispositivos...",
+                    className: "col-12 col-md-6 col-lg-4",
+                };
+            })}
+        />
+    );
+}
+GroupsContent.propTypes = {
+    config: PropTypes.shape({
+        devicesUrl: PropTypes.string.isRequired,
+    }).isRequired,
+};
+
+export default Groups;