From 965ee5de7bedbceb74c0a9cf4380a790538e7d83 Mon Sep 17 00:00:00 2001 From: Fabian Meyer <3982806+meyfa@users.noreply.github.com> Date: Mon, 8 Jul 2024 23:46:13 +0200 Subject: [PATCH] feat: Show a message when the job list is empty Fixes #11. The Jobs page would previously be completely empty (besides the heading) if there aren't any jobs. We now show a message there to inform the user that the emptiness is intentional, and that the page will refresh automatically once jobs arrive. Error handling is also added to the page. --- frontend/src/pages/Jobs.tsx | 41 +++++++++++++++++++++++++++++-------- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/Jobs.tsx b/frontend/src/pages/Jobs.tsx index 5b3a429..5504668 100644 --- a/frontend/src/pages/Jobs.tsx +++ b/frontend/src/pages/Jobs.tsx @@ -3,23 +3,46 @@ import { useApiSubscription } from '../api/subscription.js' import { api } from '../api/api.js' import { Heading } from '../components/Heading.js' import { JobPanel } from '../components/JobPanel.js' +import { ErrorMessage } from '../components/ErrorMessage.js' export const Jobs: FunctionComponent = () => { - const { loading, data: jobs } = useApiSubscription({ interval: 5_000 }, api.jobs) + const { loading, data: jobs, error } = useApiSubscription({ interval: 5_000 }, api.jobs) return (
Job History - {!loading - ? jobs?.map((job) => ( - - )) - : [...Array(8)].map((_, i) => ( - - )) - } + {error != null && ( + + Error loading jobs: {error.message} + + )} + {jobs != null && jobs.length === 0 && ( +

+ There are no previous jobs. Once a job is run, it will appear here automatically. +

+ )} + {jobs?.map((job) => ( + + ))} + {loading && [...Array(8)].map((_, i) => ( + + ))}
) }