feat: first version of the interface, integrate Tailwind CSS and update routing

- Add Tailwind CSS dependencies and configure Vite to use Tailwind - Implement routing with React Router for Landing and Dashboard pages - Remove unused App.css file and refactor App component to utilize new structure - Update global styles in index.css to incorporate Tailwind's utility classes
2026-04-23 09:49:38 +02:00
parent 4627d160e8
commit a07bd3146e
26 changed files with 1819 additions and 460 deletions
@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useState } from "react";
+import { useParams, Navigate } from "react-router-dom";
+import { toast } from "sonner";
+
+import { AppHeader } from "../components/layout/AppHeader";
+import { ResearcherCard } from "../components/dashboard/ResearcherCard";
+import { StatsRow } from "../components/dashboard/StatsRow";
+import { PublicationsTable } from "../components/dashboard/PublicationsTable";
+import { ExportDropdown } from "../components/dashboard/ExportDropdown";
+import { SyncButton } from "../components/dashboard/SyncButton";
+import {
+  downloadExport,
+  getExportUrl,
+  getPublications,
+  syncResearcher,
+  validateOrcid,
+} from "../services/api";
+import { isValidOrcid } from "../utils/orcid";
+
+const SUCCESS_FLASH_MS = 3000;
+
+/**
+ * Researcher detail page. Owns:
+ *   - Initial researcher lookup (validate + publications fetch on mount).
+ *   - Sync workflow (POST + refresh + success toast).
+ *   - Export workflow (download blob + success/error toast).
+ */
+export function DashboardPage() {
+  const { orcid } = useParams();
+
+  const [researcher, setResearcher] = useState(null);
+  const [publications, setPublications] = useState([]);
+  const [pubsLoading, setPubsLoading] = useState(true);
+  const [pubsError, setPubsError] = useState(null);
+
+  const [syncStatus, setSyncStatus] = useState("idle"); // idle | loading | success
+  const [exportingFormat, setExportingFormat] = useState(null);
+
+  const loadResearcher = useCallback(
+    async (signal) => {
+      try {
+        const data = await validateOrcid(orcid, { signal });
+        if (!signal?.aborted) setResearcher(data);
+      } catch (err) {
+        if (signal?.aborted) return;
+        toast.error("No se pudo cargar el investigador", {
+          description: err?.message ?? "Error desconocido.",
+        });
+      }
+    },
+    [orcid],
+  );
+
+  const loadPublications = useCallback(
+    async (signal) => {
+      setPubsLoading(true);
+      setPubsError(null);
+      try {
+        const data = await getPublications(orcid, { signal });
+        if (!signal?.aborted) setPublications(data);
+      } catch (err) {
+        if (signal?.aborted) return;
+        setPubsError(err);
+      } finally {
+        if (!signal?.aborted) setPubsLoading(false);
+      }
+    },
+    [orcid],
+  );
+
+  useEffect(() => {
+    if (!isValidOrcid(orcid)) return;
+    const ctrl = new AbortController();
+    loadResearcher(ctrl.signal);
+    loadPublications(ctrl.signal);
+    return () => ctrl.abort();
+  }, [orcid, loadResearcher, loadPublications]);
+
+  if (!isValidOrcid(orcid)) {
+    return <Navigate to="/" replace />;
+  }
+
+  async function handleSync() {
+    setSyncStatus("loading");
+    try {
+      const updated = await syncResearcher(orcid);
+      if (updated) setResearcher(updated);
+      await loadPublications();
+      setSyncStatus("success");
+      toast.success("Sincronización completada", {
+        description: "Las publicaciones se han actualizado desde ORCID.",
+      });
+      setTimeout(() => setSyncStatus("idle"), SUCCESS_FLASH_MS);
+    } catch (err) {
+      setSyncStatus("idle");
+      toast.error("Error al sincronizar con ORCID", {
+        description: err?.message ?? "Inténtalo de nuevo más tarde.",
+      });
+    }
+  }
+
+  async function handleExport(format) {
+    setExportingFormat(format);
+    try {
+      const { blob, url } = await downloadExport(orcid, format);
+      if (blob) {
+        const objectUrl = URL.createObjectURL(blob);
+        const anchor = document.createElement("a");
+        anchor.href = objectUrl;
+        anchor.download = `sword-${orcid}.${format}`;
+        document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+        URL.revokeObjectURL(objectUrl);
+      }
+      toast.success(`Exportación ${format.toUpperCase()} completada`, {
+        description: url ?? getExportUrl(orcid, format),
+      });
+    } catch (err) {
+      toast.error(`Error al exportar ${format.toUpperCase()}`, {
+        description: err?.message ?? "No se pudo generar el fichero.",
+      });
+    } finally {
+      setExportingFormat(null);
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col bg-surface-tertiary">
+      <AppHeader variant="dashboard" />
+
+      <div className="mx-auto w-full max-w-[1100px] px-5 py-7">
+        {researcher ? (
+          <ResearcherCard
+            researcher={researcher}
+            actions={
+              <>
+                <SyncButton onClick={handleSync} status={syncStatus} />
+                <ExportDropdown
+                  onExport={handleExport}
+                  exportingFormat={exportingFormat}
+                />
+              </>
+            }
+          />
+        ) : (
+          <ResearcherSkeleton />
+        )}
+
+        <StatsRow publications={publications} />
+
+        <PublicationsTable
+          publications={publications}
+          loading={pubsLoading}
+          error={pubsError}
+          onRetry={() => loadPublications()}
+        />
+
+        <footer className="mt-4 flex flex-wrap items-center justify-between gap-2 px-1">
+          <span className="text-xs text-ink-tertiary">
+            Datos obtenidos vía ORCID Public API v3.0
+          </span>
+          <div className="flex gap-4">
+            {["ORCID OAuth 2.0", "SWORD v2", "Dublin Core"].map((t) => (
+              <span key={t} className="text-xs text-ink-tertiary">
+                {t}
+              </span>
+            ))}
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+function ResearcherSkeleton() {
+  return (
+    <div className="mb-5 h-[120px] animate-pulse rounded-2xl border border-surface-border/60 bg-surface-primary" />
+  );
+}
+
+export default DashboardPage;