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")({