feat: add bucket browser

src/pages/buckets/manage/overview/overview-aliases.tsx

@@ -1,7 +1,6 @@
 import { Modal } from "react-daisyui";
 import { Plus } from "lucide-react";
 import Chips from "@/components/ui/chips";
-import { Bucket } from "../../types";
 import { useDisclosure } from "@/hooks/useDisclosure";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -13,12 +12,11 @@ import { handleError } from "@/lib/utils";
 import { InputField } from "@/components/ui/input";
 import { useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
+import { useBucketContext } from "../context";
 
-type Props = {
-  data?: Bucket;
-};
+const AliasesSection = () => {
+  const { bucket: data } = useBucketContext();
 
-const AliasesSection = ({ data }: Props) => {
   const queryClient = useQueryClient();
   const removeAlias = useRemoveAlias(data?.id, {
     onSuccess: () => {

src/pages/buckets/manage/overview/overview-quota.tsx

@@ -4,15 +4,13 @@ import { QuotaSchema, quotaSchema } from "../schema";
 import { useEffect } from "react";
 import { useDebounce } from "@/hooks/useDebounce";
 import { useUpdateBucket } from "../hooks";
-import { Bucket } from "../../types";
 import { InputField } from "@/components/ui/input";
 import { ToggleField } from "@/components/ui/toggle";
+import { useBucketContext } from "../context";
 
-type Props = {
-  data?: Bucket;
-};
+const QuotaSection = () => {
+  const { bucket: data } = useBucketContext();
 
-const QuotaSection = ({ data }: Props) => {
   const form = useForm<QuotaSchema>({
     resolver: zodResolver(quotaSchema),
   });
@@ -23,7 +21,7 @@ const QuotaSection = ({ data }: Props) => {
   const onChange = useDebounce((values: DeepPartial<QuotaSchema>) => {
     const { enabled } = values;
     const maxObjects = Number(values.maxObjects);
-    const maxSize = Math.round(Number(values.maxSize) * 1024 * 1024);
+    const maxSize = Math.round(Number(values.maxSize) * 1024 ** 3);
 
     const data = {
       maxObjects: enabled && maxObjects > 0 ? maxObjects : null,
@@ -37,9 +35,7 @@ const QuotaSection = ({ data }: Props) => {
     form.reset({
       enabled:
         data?.quotas?.maxSize != null || data?.quotas?.maxObjects != null,
-      maxSize: data?.quotas?.maxSize
-        ? data?.quotas?.maxSize / 1024 / 1024
-        : null,
+      maxSize: data?.quotas?.maxSize ? data?.quotas?.maxSize / 1024 ** 3 : null,
       maxObjects: data?.quotas?.maxObjects || null,
     });
 

src/pages/buckets/manage/overview/overview-tab.tsx

@@ -1,24 +1,22 @@
 import { Card } from "react-daisyui";
-import { useParams } from "react-router-dom";
-import { useBucket } from "../hooks";
 import { ChartPie, ChartScatter } from "lucide-react";
 import { readableBytes } from "@/lib/utils";
 import WebsiteAccessSection from "./overview-website-access";
 import AliasesSection from "./overview-aliases";
 import QuotaSection from "./overview-quota";
+import { useBucketContext } from "../context";
 
 const OverviewTab = () => {
-  const { id } = useParams();
-  const { data } = useBucket(id);
+  const { bucket: data } = useBucketContext();
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 items-start">
       <Card className="card-body gap-0 items-start order-2 md:order-1">
         <Card.Title>Summary</Card.Title>
 
-        <AliasesSection data={data} />
-        <WebsiteAccessSection data={data} />
-        <QuotaSection data={data} />
+        <AliasesSection />
+        <WebsiteAccessSection />
+        <QuotaSection />
       </Card>
 
       <Card className="card-body order-1 md:order-2">

src/pages/buckets/manage/overview/overview-website-access.tsx

@@ -7,20 +7,16 @@ import { useUpdateBucket } from "../hooks";
 import { useConfig } from "@/hooks/useConfig";
 import { Info, LinkIcon } from "lucide-react";
 import Button from "@/components/ui/button";
-import { Bucket } from "../../types";
 import { InputField } from "@/components/ui/input";
 import { ToggleField } from "@/components/ui/toggle";
+import { useBucketContext } from "../context";
 
-type Props = {
-  data?: Bucket;
-};
-
-const WebsiteAccessSection = ({ data }: Props) => {
+const WebsiteAccessSection = () => {
+  const { bucket: data, bucketName } = useBucketContext();
   const { data: config } = useConfig();
   const form = useForm<WebsiteConfigSchema>({
     resolver: zodResolver(websiteConfigSchema),
   });
-  const bucketName = data?.globalAliases[0] || "";
   const isEnabled = useWatch({ control: form.control, name: "websiteAccess" });
 
   const websitePort = config?.s3_web?.bind_addr?.split(":").pop() || "80";