cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(i18n): localize discovery and accounts

Browse Source
This commit is contained in:
cesnimda
2026-08-29 22:01:26 +02:00
parent 457f0601c0
commit f89e37bb4f
7 changed files with 195 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/views/ConnectedAccountsPage.tsx
+5 -3
View File
@@ -4,18 +4,20 @@ import { Box, Button, Paper, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import EmailProviderConnections from "../components/EmailProviderConnections";
import { useI18n } from "../i18n/I18nProvider";
export default function ConnectedAccountsPage() {
const navigate = useNavigate();
const { t } = useI18n();
return (
<Box sx={{ display: "grid", gap: 2 }}>
<Paper sx={{ p: 2.5, borderRadius: 4, boxShadow: "0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
<Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>Connected accounts</Typography>
<Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>{t("connectedAccounts")}</Typography>
<Typography sx={{ color: "text.secondary", maxWidth: 720 }}>
Connect the inboxes Jobbjakt may use to identify recruiter correspondence. Connecting an inbox never sends a message on your behalf.
{t("connectedAccountsBody")}
</Typography>
<Button sx={{ mt: 1 }} onClick={() => navigate("/settings")}>Back to settings</Button>
<Button sx={{ mt: 1 }} onClick={() => navigate("/settings")}>{t("connectedAccountsBack")}</Button>
</Paper>
<EmailProviderConnections />
</Box>
job-tracker-ui/src/views/JobDiscoveryPage.tsx
+25 -23
View File
@@ -4,6 +4,7 @@ import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add";
import { useNavigate } from "react-router-dom";
import { api } from "../api";
import { useI18n } from "../i18n/I18nProvider";
type DiscoveredJob = {
id: string;
@@ -20,11 +21,11 @@ type DiscoveredJob = {
countryCode: string;
};
const formatDate = (value?: string) => value ? new Date(value).toLocaleDateString() : null;
type SortOrder = "updated" | "deadline" | "title";
export default function JobDiscoveryPage() {
const navigate = useNavigate();
const { language, t } = useI18n();
const [query, setQuery] = useState("");
const [location, setLocation] = useState("");
const [jobs, setJobs] = useState<DiscoveredJob[]>([]);
@@ -39,7 +40,7 @@ export default function JobDiscoveryPage() {
try {
const response = await api.get<DiscoveredJob[]>("/job-discovery/search", { params: { q: nextQuery || undefined, location: nextLocation || undefined } });
setJobs(response.data ?? []);
} catch { setError("NAV job discovery is temporarily unavailable."); }
} catch { setError(t("jobDiscoveryUnavailable")); }
finally { setLoading(false); }
};
@@ -57,26 +58,27 @@ export default function JobDiscoveryPage() {
}
return new Date(right.modifiedAt || 0).getTime() - new Date(left.modifiedAt || 0).getTime();
}), [jobs, sortOrder]);
const formatDate = (value?: string) => value ? new Date(value).toLocaleDateString(language === "nb" ? "nb-NO" : "en") : null;
return (
<Stack spacing={3}>
<Box component="form" onSubmit={search} sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "2fr 1fr auto" }, gap: 1.5 }}>
<TextField label="Role or company" value={query} onChange={(event) => setQuery(event.target.value)} />
<TextField label="Municipality" value={location} onChange={(event) => setLocation(event.target.value)} />
<Button type="submit" variant="contained" startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <SearchIcon />} disabled={loading}>Search NAV</Button>
<TextField label={t("jobDiscoveryRoleCompany")} value={query} onChange={(event) => setQuery(event.target.value)} />
<TextField label={t("jobDiscoveryMunicipality")} value={location} onChange={(event) => setLocation(event.target.value)} />
<Button type="submit" variant="contained" startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <SearchIcon />} disabled={loading}>{t("jobDiscoverySearchNav")}</Button>
</Box>
<Alert severity="info" variant="outlined" sx={{ color: "text.primary", "& .MuiAlert-icon": { color: "info.main" } }}>Official Norwegian vacancies from NAV. FINN, Indeed and LinkedIn jobs can still be captured by URL.</Alert>
{error ? <Alert severity="error" variant="outlined" sx={{ color: "text.primary" }} action={<Button color="inherit" onClick={() => void runSearch(lastSearch.query, lastSearch.location)} disabled={loading}>Retry</Button>}>{error}</Alert> : null}
{!loading && !hasSearched ? <Typography color="text.secondary">Search recent active vacancies by role, company, or municipality.</Typography> : null}
{!loading && hasSearched && !error && jobs.length === 0 ? <Alert severity="info" variant="outlined" sx={{ color: "text.primary" }}>No active vacancies matched this search. Try a broader role, company, or municipality.</Alert> : null}
{loading ? <Typography role="status" color="text.secondary">Searching NAV vacancies…</Typography> : null}
<Alert severity="info" variant="outlined" sx={{ color: "text.primary", "& .MuiAlert-icon": { color: "info.main" } }}>{t("jobDiscoverySourceHelp")}</Alert>
{error ? <Alert severity="error" variant="outlined" sx={{ color: "text.primary" }} action={<Button color="inherit" onClick={() => void runSearch(lastSearch.query, lastSearch.location)} disabled={loading}>{t("retry")}</Button>}>{error}</Alert> : null}
{!loading && !hasSearched ? <Typography color="text.secondary">{t("jobDiscoveryGuidance")}</Typography> : null}
{!loading && hasSearched && !error && jobs.length === 0 ? <Alert severity="info" variant="outlined" sx={{ color: "text.primary" }}>{t("jobDiscoveryNoResults")}</Alert> : null}
{loading ? <Typography role="status" color="text.secondary">{t("jobDiscoverySearching")}</Typography> : null}
{jobs.length > 0 ? (
<Box sx={{ display: "flex", gap: 2, alignItems: { xs: "stretch", sm: "center" }, justifyContent: "space-between", flexDirection: { xs: "column", sm: "row" } }}>
<Typography role="status">{jobs.length} {jobs.length === 1 ? "vacancy" : "vacancies"} found</Typography>
<TextField select size="small" label="Sort results" value={sortOrder} onChange={(event) => setSortOrder(event.target.value as SortOrder)} sx={{ minWidth: 190 }}>
<MenuItem value="updated">Recently updated</MenuItem>
<MenuItem value="deadline">Deadline soonest</MenuItem>
<MenuItem value="title">Title A–Z</MenuItem>
<Typography role="status">{t(jobs.length === 1 ? "jobDiscoveryResultOne" : "jobDiscoveryResultMany", { count: jobs.length })}</Typography>
<TextField select size="small" label={t("jobDiscoverySort")} value={sortOrder} onChange={(event) => setSortOrder(event.target.value as SortOrder)} sx={{ minWidth: 190 }}>
<MenuItem value="updated">{t("jobDiscoverySortUpdated")}</MenuItem>
<MenuItem value="deadline">{t("jobDiscoverySortDeadline")}</MenuItem>
<MenuItem value="title">{t("jobDiscoverySortTitle")}</MenuItem>
</TextField>
</Box>
) : null}
@@ -86,20 +88,20 @@ export default function JobDiscoveryPage() {
<CardContent>
<Chip label={job.sourceName || job.source.toUpperCase()} size="small" color="primary" variant="outlined" sx={{ mb: 1 }} />
<Typography variant="h6" sx={{ fontWeight: 800 }}>{job.title}</Typography>
<Typography color="text.secondary">{[job.company, job.location || "Location not provided"].filter(Boolean).join(" · ")}</Typography>
<Typography color="text.secondary">{[job.company, job.location || t("jobDiscoveryLocationMissing")].filter(Boolean).join(" · ")}</Typography>
<Stack spacing={0.25} sx={{ mt: 1 }}>
<Typography variant="caption" color="text.secondary">
{job.acquisitionType === "searched" ? "Searched listing" : "Source type unavailable"}
{formatDate(job.retrievedAt) ? ` · Retrieved ${formatDate(job.retrievedAt)}` : ""}
{job.acquisitionType === "searched" ? t("jobDiscoverySearchedListing") : t("jobDiscoverySourceTypeMissing")}
{formatDate(job.retrievedAt) ? ` · ${t("jobDiscoveryRetrieved", { date: formatDate(job.retrievedAt) ?? "" })}` : ""}
</Typography>
{formatDate(job.modifiedAt) ? <Typography variant="caption" color="text.secondary">Listing updated {formatDate(job.modifiedAt)}</Typography> : null}
{formatDate(job.deadline) ? <Typography variant="body2" color="text.primary">Application deadline: {formatDate(job.deadline)}</Typography> : null}
<Typography variant="caption" color="text.secondary">Work arrangement not provided by this source</Typography>
{formatDate(job.modifiedAt) ? <Typography variant="caption" color="text.secondary">{t("jobDiscoveryListingUpdated", { date: formatDate(job.modifiedAt) ?? "" })}</Typography> : null}
{formatDate(job.deadline) ? <Typography variant="body2" color="text.primary">{t("jobDiscoveryDeadline", { date: formatDate(job.deadline) ?? "" })}</Typography> : null}
<Typography variant="caption" color="text.secondary">{t("jobDiscoveryWorkArrangementMissing")}</Typography>
</Stack>
</CardContent>
<CardActions sx={{ mt: "auto" }}>
<Button href={job.url} target="_blank" rel="noreferrer">View listing</Button>
<Button startIcon={<AddIcon />} onClick={() => navigate("/jobs?add=" + encodeURIComponent(job.url))}>Save to tracker</Button>
<Button href={job.url} target="_blank" rel="noreferrer">{t("jobDiscoveryViewListing")}</Button>
<Button startIcon={<AddIcon />} onClick={() => navigate("/jobs?add=" + encodeURIComponent(job.url))}>{t("jobDiscoverySaveTracker")}</Button>
</CardActions>
</Card>
))}