From ceb281bdecdb1488dfee3fbefad139f6e4c6c4f2 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Mon, 23 Sep 2024 23:03:27 +0200
Subject: [PATCH] Fix style

---
 .../Availability/AvailabilityReservations.tsx       |  9 ++++++++-
 src/routes/dashboard/availabilities.css             | 13 +++++++++++++
 src/routes/dashboard/availabilities.tsx             | 12 +++++++-----
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/Availability/AvailabilityReservations.tsx b/src/components/Availability/AvailabilityReservations.tsx
index 6c53286..c796a30 100644
--- a/src/components/Availability/AvailabilityReservations.tsx
+++ b/src/components/Availability/AvailabilityReservations.tsx
@@ -6,10 +6,11 @@ import {
 } from "@codex-storage/marketplace-ui-components";
 import { classnames } from "../../utils/classnames";
 import "./AvailabilityReservations.css";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { CodexSdk } from "../../sdk/codex";
 import { Promises } from "../../utils/promises";
 import { CodexAvailability } from "@codex-storage/sdk-js";
+import { useEffect } from "react";
 
 type Props = {
   availability: CodexAvailability | null;
@@ -22,6 +23,8 @@ export function AvailabilityReservations({
   onClose,
   open,
 }: Props) {
+  const queryClient = useQueryClient();
+
   const { data } = useQuery({
     queryFn: () => {
       if (availability) {
@@ -35,6 +38,10 @@ export function AvailabilityReservations({
     queryKey: ["reservations"],
   });
 
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ["reservations"] });
+  }, [availability]);
+
   // TODO manage error
 
   if (!availability) {
diff --git a/src/routes/dashboard/availabilities.css b/src/routes/dashboard/availabilities.css
index 53eaff1..7bf0f11 100644
--- a/src/routes/dashboard/availabilities.css
+++ b/src/routes/dashboard/availabilities.css
@@ -14,6 +14,19 @@
   display: block;
 }
 
+.availabilities-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.availabilities-table {
+  order: 2;
+}
+
+.availabilities-space {
+  order: 1;
+}
+
 .availabilities-space .nodeSpaceAllocation-legendRow,
 .availabilities-space .nodeSpaceAllocation-barItem {
   transition: opacity 0.35s;
diff --git a/src/routes/dashboard/availabilities.tsx b/src/routes/dashboard/availabilities.tsx
index 41dd511..aa8e69f 100644
--- a/src/routes/dashboard/availabilities.tsx
+++ b/src/routes/dashboard/availabilities.tsx
@@ -54,11 +54,13 @@ export const Route = createFileRoute("/dashboard/availabilities")({
               <Spinner width="3rem" />
             </div>
           ) : (
-            <AvailabilitiesTable
-              // onEdit={onOpen}
-              availabilities={availabilities}
-              onReservationsShow={onReservationsShow}
-            />
+            <div className="availabilities-table">
+              <AvailabilitiesTable
+                // onEdit={onOpen}
+                availabilities={availabilities}
+                onReservationsShow={onReservationsShow}
+              />
+            </div>
           )}
 
           <div className="availabilities-space">