refactor: improve error handling

Author: seandreassen

messages/en.json

@@ -332,6 +332,7 @@
           "update": "Update",
           "unregister": "Unregister",
           "signIn": "Sign in",
+          "signInDescription": "Sign in to register for shifts",
           "registerSuccess": "Registered shift successfully",
           "updateSuccess": "Updated shift successfully",
           "unregisterSuccess": "Unregistered from shift successfully"
@@ -341,7 +342,8 @@
     "api": {
       "day": "Invalid day",
       "timeslot": "Invalid timeslot",
-      "recurring": "Invalid value for recurring"
+      "recurring": "Invalid value for recurring",
+      "fetchShiftsFailed": "Failed to fetch shifts"
     }
   },
   "events": {

messages/no.json

@@ -187,7 +187,7 @@
     "account": {
       "title": "Konto",
       "updateAccount": "Oppdater konto",
-      "updateAccountFailed": "Failed to update account",
+      "updateAccountFailed": "Kunne ikke oppdatere konto",
       "updateAccountSuccess": "Konto oppdatert",
       "email": {
         "label": "E-post",
@@ -332,6 +332,7 @@
           "update": "Oppdater",
           "unregister": "Avregistrer",
           "signIn": "Logg inn",
+          "signInDescription": "Logg inn for å registrere vakt",
           "registerSuccess": "Vakt registrert",
           "updateSuccess": "Vakt oppdatert",
           "unregisterSuccess": "Vakt avregistrert"
@@ -341,7 +342,8 @@
     "api": {
       "day": "Ugyldig dag",
       "timeslot": "Ugyldig tidsrom",
-      "recurring": "Ugyldig verdi for gjentagende"
+      "recurring": "Ugyldig verdi for gjentagende",
+      "fetchShiftsFailed": "Kunne ikke hente vakter"
     }
   },
   "events": {

src/components/shift-schedule/MemberList.tsx

@@ -1,18 +1,17 @@
 import { SkillIcon } from '@/components/skills/SkillIcon';
-import type { Member } from '@/server/api/routers';
+import type { RouterOutputs } from '@/lib/api/client';
+import { useTranslations } from 'next-intl';
 
 type MemberListProps = {
-  t: {
-    empty: string;
-  };
-  members: Member[];
+  members: RouterOutputs['shiftSchedule']['fetchShifts'][number]['members'];
 };
 
-function MemberList({ t, members }: MemberListProps) {
+function MemberList({ members }: MemberListProps) {
+  const t = useTranslations('shiftSchedule.table.cell.dialog');
   return (
     <>
       {members.length === 0 ? (
-        <p className='leading-tight'>{t.empty}</p>
+        <p className='leading-tight'>{t('empty')}</p>
       ) : (
         <div>
           {members?.map((member) => (

src/components/shift-schedule/RegisterShiftForm.tsx

@@ -117,7 +117,12 @@ function RegisterShiftForm({
           </form.AppForm>
         </form>
       ) : (
-        <Link variant='default' size='default' href='/auth'>
+        <Link
+          variant='default'
+          size='default'
+          href='/auth'
+          title={t('signInDescription')}
+        >
           {t('signIn')}
         </Link>
       )}

src/components/shift-schedule/ScheduleCellDialog.tsx

@@ -47,12 +47,7 @@ function ScheduleCellDialog({
         </ResponsiveDialogDescription>
       </ResponsiveDialogHeader>
       <div className='flex justify-between gap-8 px-1.5 pb-1.5'>
-        <MemberList
-          t={{
-            empty: t('empty'),
-          }}
-          members={members}
-        />
+        <MemberList members={members} />
         <RegisterShiftForm
           day={day}
           timeslot={timeslot}

src/server/api/routers/shiftSchedule.ts

@@ -11,6 +11,7 @@ import {
   registerShiftSchema,
   unregisterShiftSchema,
 } from '@/validations/shiftSchedule/registerShiftSchema';
+import { TRPCError } from '@trpc/server';
 import { endOfWeek } from 'date-fns';
 import { and, eq, gte, isNull, or, sql } from 'drizzle-orm';
 
@@ -46,7 +47,14 @@ const shiftScheduleRouter = createRouter({
       .leftJoin(userSkills, eq(users.id, userSkills.userId))
       .leftJoin(skills, eq(userSkills.skillId, skills.id))
       .where(or(isNull(shifts.endDate), gte(shifts.endDate, new Date())))
-      .groupBy(shifts.day, shifts.timeslot, shifts.endDate, users.id);
+      .groupBy(shifts.day, shifts.timeslot, shifts.endDate, users.id)
+      .catch(() => {
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+          message: ctx.t('shiftSchedule.api.fetchShiftsFailed'),
+          cause: { toast: 'error' },
+        });
+      });
 
     const returnShifts: Shift[] = [];
     for (const day of days) {