Improve empty state

src/components/Availability/AvailabilitiesTable.tsx

@@ -4,17 +4,18 @@ import { PrettyBytes } from "../../utils/bytes";
 import { AvailabilityActionsCell } from "./AvailabilityActionsCell";
 import { CodexAvailability } from "@codex-storage/sdk-js/async";
 import { Times } from "../../utils/times";
+import { useState } from "react";
+import { AvailabilityReservations } from "./AvailabilityReservations";
 
 type Props = {
   // onEdit: () => void;
   availabilities: CodexAvailability[];
-  onReservationsShow: (availability: CodexAvailability) => void;
 };
 
-export function AvailabilitiesTable({
-  availabilities,
-  onReservationsShow,
-}: Props) {
+export function AvailabilitiesTable({ availabilities }: Props) {
+  const [availability, setAvailability] = useState<CodexAvailability | null>(
+    null
+  );
   const headers = [
     "id",
     "total size",
@@ -24,6 +25,10 @@ export function AvailabilitiesTable({
     "actions",
   ];
 
+  const onReservationsShow = (a: CodexAvailability) => setAvailability(a);
+
+  const onReservationsClose = () => setAvailability(null);
+
   const cells =
     availabilities.map((a) => {
       return [
@@ -39,5 +44,13 @@ export function AvailabilitiesTable({
       ];
     }) || [];
 
-  return <Table headers={headers} cells={cells} />;
+  return (
+    <>
+      <Table headers={headers} cells={cells} />
+      <AvailabilityReservations
+        availability={availability}
+        onClose={onReservationsClose}
+        open={!!availability}></AvailabilityReservations>
+    </>
+  );
 }

src/components/Availability/AvailabilityReservations.css

@@ -1,37 +1,3 @@
-.reservations {
-  transition: transform 0.15s;
-  max-width: 800px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  opacity: 0;
-  z-index: -1;
-  max-height: 100%;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%) scale(0);
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--codex-background);
-  padding: 1.5rem;
-  border-radius: var(--codex-border-radius);
-}
-
-.reservations--open {
-  transform: translate(-50%, -50%) scale(1);
-}
-
-.reservations--open {
-  opacity: 1;
-  z-index: 10;
-}
-
-.reservations-buttons {
-  margin-top: 1rem;
-  display: flex;
-  justify-content: center;
-}
-
 .reservations-title {
   margin-left: auto;
   margin-right: auto;

src/components/Availability/AvailabilityReservations.tsx

@@ -1,24 +1,19 @@
 import {
-  Backdrop,
-  Button,
   EmptyPlaceholder,
   Modal,
-  Placeholder,
   SpaceAllocation,
   Spinner,
 } from "@codex-storage/marketplace-ui-components";
-import { classnames } from "../../utils/classnames";
 import "./AvailabilityReservations.css";
 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";
-import { ErrorIcon } from "../ErrorIcon/ErrorIcon";
 import { ErrorPlaceholder } from "../ErrorPlaceholder/ErrorPlaceholder";
 
 type Props = {
-  availability: CodexAvailability;
+  availability: CodexAvailability | null;
   open: boolean;
   onClose: () => unknown;
 };
@@ -41,16 +36,27 @@ export function AvailabilityReservations({
     isPending,
     error,
   } = useQuery({
-    queryFn: () => {
-      return CodexSdk.marketplace
-        .reservations(availability?.id)
-        .then((s) => Promises.rejectOnError(s));
-    },
+    queryFn: () =>
+      CodexSdk.marketplace
+        .reservations(availability!.id)
+        .then((s) => Promises.rejectOnError(s)),
     queryKey: ["reservations"],
     retry: 0,
     staleTime: 0,
+    initialData: [],
+    enabled: !!availability,
   });
 
+  if (!availability) {
+    return (
+      <Modal onClose={onClose} open={open}>
+        <ErrorPlaceholder
+          subtitle="The availability does not exist"
+          error={error}></ErrorPlaceholder>
+      </Modal>
+    );
+  }
+
   if (isPending) {
     return (
       <Modal onClose={onClose} open={open}>
@@ -85,22 +91,13 @@ export function AvailabilityReservations({
 
   return (
     <Modal open={open} onClose={onClose}>
-      <div
-        className={classnames(["reservations"], ["reservations--open", open])}>
-        <b className="reservations-title">Availability reservations</b>
-
-        {isEmpty ? (
-          <EmptyPlaceholder
-            title="No reservation"
-            message="You don't have any reservation yet."></EmptyPlaceholder>
-        ) : (
-          <SpaceAllocation data={spaceData} />
-        )}
-
-        <div className="reservations-buttons">
-          <Button label={"Close"} variant="outline" onClick={onClose} />
-        </div>
-      </div>
+      {isEmpty ? (
+        <EmptyPlaceholder
+          title="No reservation"
+          message="You don't have any reservation yet."></EmptyPlaceholder>
+      ) : (
+        <SpaceAllocation data={spaceData} />
+      )}
     </Modal>
   );
 }

src/components/Availailibities/Availabilities.tsx

@@ -23,9 +23,6 @@ const defaultSpace = {
 
 export function Availabilities() {
   {
-    const [availabilitySelected, setAvailabilitySelected] =
-      useState<CodexAvailability | null>(null);
-
     // Error will be catched in ErrorBounday
     const { data: availabilities = [], isPending } = useQuery({
       queryFn: () =>
@@ -48,11 +45,6 @@ export function Availabilities() {
       staleTime: 24 * 60 * 60 * 1000,
     });
 
-    const onReservationsShow = (a: CodexAvailability) =>
-      setAvailabilitySelected(a);
-
-    const onReservationsClose = () => setAvailabilitySelected(null);
-
     const allocation = availabilities
       .map((a) => ({
         title: Strings.shortId(a.id),
@@ -62,13 +54,6 @@ export function Availabilities() {
 
     return (
       <div className="container">
-        {availabilitySelected && (
-          <AvailabilityReservations
-            availability={availabilitySelected}
-            onClose={onReservationsClose}
-            open={!!availabilitySelected}></AvailabilityReservations>
-        )}
-
         <div className="availabilities-content">
           {isPending ? (
             <div className="purchases-loader">
@@ -79,7 +64,6 @@ export function Availabilities() {
               <AvailabilitiesTable
                 // onEdit={onOpen}
                 availabilities={availabilities}
-                onReservationsShow={onReservationsShow}
               />
             </div>
           )}