chore: show section for invalidated URL

truc9 · Dec 13, 2024 · f6a938c · f6a938c
1 parent 473ae18
commit f6a938c
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/frontend/src/screens/public/outstanding-report.tsx b/frontend/src/screens/public/outstanding-report.tsx
@@ -2,29 +2,53 @@ import { Table } from "@mantine/core";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import httpService from "../../common/httpservice";
 import DataTableSkeleton from "../../components/skeleton/data-table-skeleton";
 import { UnpaidModel } from "../../models/reports/unpaid";
 import Currency from "../../components/currency";
 import clsx from "clsx";
+import { useApi } from "../../hooks/useApi";
 
 export default function Page() {
+  const { get } = useApi();
   const [searchParams] = useSearchParams();
   const shareCode = searchParams.get("share-code");
-
-  const { isPending, data, isError, error } = useQuery({
+  const { isPending, data, isError } = useQuery({
+    retry: false,
     queryKey: ["getPublicUnpaidReport"],
     queryFn: () =>
-      httpService.get<UnpaidModel[]>(
-        `api/v1/public/reports/unpaid?shareCode=${shareCode}`,
-      ),
+      get<UnpaidModel[]>(`api/v1/public/reports/unpaid?shareCode=${shareCode}`),
   });
 
   const totalUnpaid = useMemo(() => {
     if (!data || data.length == 0) return 0;
     return data.map((e) => e.unpaidAmount).reduce((prev, cur) => (cur += prev));
   }, [data]);
 
+  //TODO: check 403 instead of isError
+  if (isError) {
+    return (
+      <div className="flex flex-col items-center text-center">
+        <iframe
+          src="https://giphy.com/embed/gj0QdZ9FgqGhOBNlFS"
+          width="378"
+          height="480"
+          frameBorder="0"
+          className="giphy-embed"
+          allowFullScreen
+        ></iframe>
+        <p>
+          <a href="https://giphy.com/gifs/lol-laugh-laughing-gj0QdZ9FgqGhOBNlFS">
+            via GIPHY
+          </a>
+        </p>
+        <h3 className="text-2xl font-bold text-violet-500">
+          Oops! This URL is invalidated! Please contact admin to publish a new
+          one.
+        </h3>
+      </div>
+    );
+  }
+
   return (
     <Table striped highlightOnHover withRowBorders={false}>
       <Table.Thead>