refactor, security updates, cv extraction upgrades

job-tracker-ui/src/components/RemindersView.tsx

@@ -1,13 +1,15 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { Box, Button, Chip, Divider, Paper, Typography } from "@mui/material";
 
 import { api } from "../api";
+import ViewStateNotice from "./ViewStateNotice";
 import { JobApplication } from "../types";
 import { buildWorkflowPath, getReminderGroup, getWorkflowAction } from "../jobWorkflowSignals";
 import { useToast } from "../toast";
 import { useI18n } from "../i18n/I18nProvider";
+import { useViewResource } from "../hooks/useViewResource";
 
 type ReminderGroups = {
   missingCv: JobApplication[];
@@ -41,26 +43,27 @@ function ReminderSection({ title, items, onOpen, onSetFollowUp }: { title: strin
         });
 
         return (
-        <Paper key={j.id} sx={{ p: 1.5, display: "grid", gridTemplateColumns: "1fr auto", gap: 1, alignItems: "center" }}>
-          <Box>
-            <Typography sx={{ fontWeight: 900, lineHeight: 1.25 }}>
-              {j.company?.name ?? ""} <span style={{ fontWeight: 700, opacity: 0.7 }}>•</span> {j.jobTitle}
-            </Typography>
-            <Box sx={{ display: "flex", gap: 1, mt: 0.5, flexWrap: "wrap" }}>
-              {j.needsFollowUp ? <Chip size="small" color="warning" label={t("remindersFollowUpLabel")} /> : null}
-              {(j.workflowSignal?.reason ?? j.followUpReason) ? <Chip size="small" label={j.workflowSignal?.reason ?? j.followUpReason} variant="outlined" /> : null}
-              {j.followUpAt ? <Chip size="small" label={t("remindersFollowUpDate", { date: new Date(j.followUpAt).toLocaleDateString() })} variant="outlined" /> : null}
-              <Chip size="small" label={j.status} variant="outlined" />
+          <Paper key={j.id} sx={{ p: 1.5, display: "grid", gridTemplateColumns: "1fr auto", gap: 1, alignItems: "center" }}>
+            <Box>
+              <Typography sx={{ fontWeight: 900, lineHeight: 1.25 }}>
+                {j.company?.name ?? ""} <span style={{ fontWeight: 700, opacity: 0.7 }}>•</span> {j.jobTitle}
+              </Typography>
+              <Box sx={{ display: "flex", gap: 1, mt: 0.5, flexWrap: "wrap" }}>
+                {j.needsFollowUp ? <Chip size="small" color="warning" label={t("remindersFollowUpLabel")} /> : null}
+                {(j.workflowSignal?.reason ?? j.followUpReason) ? <Chip size="small" label={j.workflowSignal?.reason ?? j.followUpReason} variant="outlined" /> : null}
+                {j.followUpAt ? <Chip size="small" label={t("remindersFollowUpDate", { date: new Date(j.followUpAt).toLocaleDateString() })} variant="outlined" /> : null}
+                <Chip size="small" label={j.status} variant="outlined" />
+              </Box>
             </Box>
-          </Box>
-          <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", justifyContent: "flex-end" }}>
-            <Button size="small" variant="outlined" onClick={() => onOpen(j)}>{action?.label ?? t("remindersOpen")}</Button>
-            <Button size="small" variant="outlined" onClick={() => onSetFollowUp(j.id, 3)}>+3d</Button>
-            <Button size="small" variant="outlined" onClick={() => onSetFollowUp(j.id, 7)}>+7d</Button>
-            <Button size="small" onClick={() => onSetFollowUp(j.id, null)}>{t("remindersClear")}</Button>
-          </Box>
-        </Paper>
-      )})}
+            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", justifyContent: "flex-end" }}>
+              <Button size="small" variant="outlined" onClick={() => onOpen(j)}>{action?.label ?? t("remindersOpen")}</Button>
+              <Button size="small" variant="outlined" onClick={() => onSetFollowUp(j.id, 3)}>+3d</Button>
+              <Button size="small" variant="outlined" onClick={() => onSetFollowUp(j.id, 7)}>+7d</Button>
+              <Button size="small" onClick={() => onSetFollowUp(j.id, null)}>{t("remindersClear")}</Button>
+            </Box>
+          </Paper>
+        );
+      })}
     </Box>
   );
 }
@@ -69,17 +72,20 @@ export default function RemindersView() {
   const navigate = useNavigate();
   const { toast } = useToast();
   const { t } = useI18n();
-  const [items, setItems] = useState<JobApplication[]>([]);
 
-  const load = async () => {
-    const res = await api.get<JobApplication[]>("/jobapplications/reminders", { params: { upcomingDays: 14 } });
-    setItems(res.data);
-  };
-
-  useEffect(() => {
-    void load();
-  }, []);
+  const remindersResource = useViewResource(
+    async () => {
+      const res = await api.get<JobApplication[]>("/jobapplications/reminders", { params: { upcomingDays: 14 } });
+      return Array.isArray(res.data) ? res.data : [];
+    },
+    {
+      initialData: [],
+      errorMessage: "Unable to load reminders right now.",
+      deps: [],
+    },
+  );
 
+  const items = remindersResource.data;
   const grouped = useMemo(() => groupItems(items), [items]);
 
   const openJob = (job: JobApplication) => {
@@ -91,7 +97,7 @@ export default function RemindersView() {
       const d = daysFromNow === null ? null : new Date(Date.now() + daysFromNow * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
       await api.patch(`/jobapplications/${id}/followup`, { followUpAt: d });
       toast(daysFromNow === null ? t("remindersFollowUpCleared") : t("remindersFollowUpSet"), "success");
-      await load();
+      await remindersResource.reload();
     } catch {
       toast(t("remindersFollowUpFailed"), "error");
     }
@@ -104,14 +110,24 @@ export default function RemindersView() {
         {t("remindersSubtitle")}
       </Typography>
 
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-        <ReminderSection title={t("remindersMissingTailoredCv")} items={grouped.missingCv} onOpen={openJob} onSetFollowUp={setFollowUp} />
-        <ReminderSection title={t("remindersMissingInterviewPrep")} items={grouped.missingInterviewNotes} onOpen={openJob} onSetFollowUp={setFollowUp} />
-        <ReminderSection title={t("remindersFollowUpDue")} items={grouped.overdueFollowUp} onOpen={openJob} onSetFollowUp={setFollowUp} />
-        <ReminderSection title={t("remindersOther")} items={grouped.other} onOpen={openJob} onSetFollowUp={setFollowUp} />
+      <ViewStateNotice
+        loading={remindersResource.loading}
+        error={remindersResource.error}
+        title="Unable to load reminders"
+        description="The reminders view cannot reach the API right now."
+        onRetry={remindersResource.reload}
+      />
 
-        {items.length === 0 ? <Typography sx={{ color: "text.secondary", textAlign: "center", py: 3 }}>{t("remindersNothing")}</Typography> : null}
-      </Box>
+      {!remindersResource.loading && !remindersResource.error ? (
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          <ReminderSection title={t("remindersMissingTailoredCv")} items={grouped.missingCv} onOpen={openJob} onSetFollowUp={setFollowUp} />
+          <ReminderSection title={t("remindersMissingInterviewPrep")} items={grouped.missingInterviewNotes} onOpen={openJob} onSetFollowUp={setFollowUp} />
+          <ReminderSection title={t("remindersFollowUpDue")} items={grouped.overdueFollowUp} onOpen={openJob} onSetFollowUp={setFollowUp} />
+          <ReminderSection title={t("remindersOther")} items={grouped.other} onOpen={openJob} onSetFollowUp={setFollowUp} />
+
+          {items.length === 0 ? <Typography sx={{ color: "text.secondary", textAlign: "center", py: 3 }}>{t("remindersNothing")}</Typography> : null}
+        </Box>
+      ) : null}
 
       <Divider sx={{ my: 2 }} />
       <Typography variant="caption" sx={{ color: "text.secondary" }}>