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