feat: api 404 handling

frontend/e2e/redirect-to-amending-laws-page-and-test-content.spec.ts

@@ -45,4 +45,19 @@ test.describe("Redirect and start page content", () => {
       }),
     ).toBeVisible()
   })
+
+  test("should display a no data message when the API returns an empty array", async ({
+    page,
+  }) => {
+    await page.route("**/api/v1/announcements", (route) => {
+      route.fulfill({
+        status: 200,
+        body: JSON.stringify([]),
+      })
+    })
+
+    await page.goto("/")
+
+    await expect(page.getByText("Keine Verkündungen gefunden.")).toBeVisible()
+  })
 })

frontend/e2e/render-not-found-page.spec.ts

@@ -10,19 +10,4 @@ test.describe("404 Page", () => {
       page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
     ).toBeVisible()
   })
-
-  test(`should display 404 page when API response is 404`, async ({ page }) => {
-    await page.route("/api/v1/announcements", (route) => {
-      route.fulfill({
-        status: 404,
-        body: "Not Found",
-      })
-    })
-
-    await page.goto("/amending-laws")
-
-    await expect(
-      page.getByRole("heading", { name: /404 - Seite nicht gefunden/ }),
-    ).toBeVisible()
-  })
 })

frontend/src/services/apiService.spec.ts

@@ -60,25 +60,6 @@ describe("useApiFetch", () => {
     )
   })
 
-  it("redirects to the 404 page if the API returns a 404", async () => {
-    vi.spyOn(window, "fetch").mockResolvedValue(
-      new Response("{}", { status: 404 }),
-    )
-
-    const mockPush = vi.fn().mockResolvedValue({})
-    vi.doMock("@/router", () => ({ default: { push: mockPush } }))
-
-    const { useApiFetch } = await import("@/services/apiService")
-
-    useApiFetch("foo/bar")
-
-    await vi.waitFor(() =>
-      expect(mockPush).toHaveBeenCalledWith({ name: "NotFound" }),
-    )
-
-    vi.doUnmock("@/router")
-  })
-
   it("aborts the request if the URL is marked as invalid", async () => {
     const fetchSpy = vi
       .spyOn(window, "fetch")

frontend/src/services/apiService.ts

@@ -1,5 +1,4 @@
 import { getFallbackError } from "@/lib/errorResponseMapper"
-import routerInstance from "@/router"
 import { createFetch, UseFetchReturn } from "@vueuse/core"
 
 /**
@@ -59,15 +58,6 @@ export const useApiFetch = createFetch({
     },
 
     onFetchError(fetchContext) {
-      // We'll probably remove this again because we don't want a blanket
-      // redirect to 404 if anything goes wrong.
-      if (fetchContext.response?.status === 404 && routerInstance) {
-        routerInstance.push({ name: "NotFound" }).catch((err) => {
-          if (err.name !== "NavigationDuplicated") {
-            console.error("Failed to navigate to 404 page:", err)
-          }
-        })
-      }
       // this error is sometimes throws when previous requests are automatically aborted as
       // some of the data changed and refetch is true. It seems to only be throws when the request
       // is aborted before it was actually send.

frontend/src/views/amending-laws/AmendingLaws.view.vue

@@ -5,6 +5,7 @@ import { useGetAmendingLaws } from "@/services/announcementService"
 import { RouterLink } from "vue-router"
 import RisErrorCallout from "@/components/controls/RisErrorCallout.vue"
 import Button from "primevue/button"
+import Message from "primevue/message"
 
 const { isFetching, error, data: amendingLaws } = useGetAmendingLaws()
 </script>
@@ -22,6 +23,9 @@ const { isFetching, error, data: amendingLaws } = useGetAmendingLaws()
         <RisErrorCallout :error />
       </div>
       <RisLoadingSpinner v-if="isFetching" />
+      <div v-if="amendingLaws?.length === 0" class="w-1/2">
+        <Message severity="info">Keine Verkündungen gefunden.</Message>
+      </div>
       <div v-else class="flex flex-col gap-8">
         <RouterLink
           v-for="amendingLaw in amendingLaws"