Add useLocation hook and RestaurantCell component

floriaaan · Feb 9, 2024 · 3dc82df · 3dc82df
1 parent 5afb756
commit 3dc82df
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/apps/web/app/(normal)/account/orders/columns.tsx b/apps/web/app/(normal)/account/orders/columns.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useLocation } from "@/hooks";
 import { Status } from "@/types/global";
 import { Order } from "@/types/order";
 import { ColumnDef } from "@tanstack/react-table";
@@ -8,16 +9,12 @@ import { MdLink } from "react-icons/md";
 
 export const orders_columns: ColumnDef<Order>[] = [
   {
-    id: "restaurantId",
+    id: "",
     header: "",
     cell(props) {
       const restaurantId = props.getValue() as string;
       const { id } = props.row.original;
-      return (
-        <Link href={`/account/orders/${id}`} className="inline-flex items-center gap-1 hover:underline">
-          Commande au <b>{restaurantId}</b> <MdLink className="h-4 w-4 shrink-0" />
-        </Link>
-      );
+      return <RestaurantCell restaurantId={restaurantId} id={id} />;
     },
   },
   {
@@ -49,3 +46,14 @@ export const orders_columns: ColumnDef<Order>[] = [
     },
   },
 ];
+
+const RestaurantCell = ({ restaurantId, id }: { restaurantId: Order["restaurantId"]; id: Order["id"] }) => {
+  const { restaurants } = useLocation();
+  const restaurant = restaurants.find((r) => r.id === restaurantId);
+
+  return (
+    <Link href={`/account/orders/${id}`} className="inline-flex items-center gap-1 hover:underline">
+      Commande au <b>{restaurant?.name || restaurantId}</b> <MdLink className="h-4 w-4 shrink-0" />
+    </Link>
+  );
+};
diff --git a/apps/web/app/(normal)/checkout/callback/[id]/page.tsx b/apps/web/app/(normal)/checkout/callback/[id]/page.tsx
@@ -24,7 +24,7 @@ export default function CheckoutCallbackPage({ params }: PageProps) {
   const { user, session } = useAuth();
   const { isAuthenticated } = useBasket();
 
-  const { data: order } = useQuery<Order>({
+  const { data: order, isLoading } = useQuery<Order>({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: ["order", "payment", paymentId],
     queryFn: async () => {
@@ -46,6 +46,7 @@ export default function CheckoutCallbackPage({ params }: PageProps) {
     }
   };
 
+  if (isLoading) return <LargeComponentLoader />;
   if (!(isAuthenticated && user && session?.token)) return <NotLogged />;
   return (
     <>