fixup bucket crash

app/api/storage/admin/r2/files/configs/route.ts

@@ -29,9 +29,7 @@ export async function GET(req: NextRequest) {
       channel: configs.s3_config_01.channel,
     });
   } catch (error) {
-    return NextResponse.json(
-      { error: "Error listing buckets" },
-      { status: 500 },
-    );
+    console.error("[Error]", error);
+    return NextResponse.json("Error listing buckets", { status: 500 });
   }
 }

components/file/index.tsx

@@ -75,7 +75,7 @@ export default function UserFileManager({ user, action }: FileListProps) {
   const [pageSize, setPageSize] = useState(20);
   const [displayType, setDisplayType] = useState<DisplayType>("List");
   const [showMutiCheckBox, setShowMutiCheckBox] = useState(false);
-  const [bucketInfo, setBucketInfo] = useState<BucketInfo>({
+  const [currentBucketInfo, setCurrentBucketInfo] = useState<BucketInfo>({
     bucket: "",
     custom_domain: "",
     prefix: "",
@@ -106,9 +106,13 @@ export default function UserFileManager({ user, action }: FileListProps) {
     { revalidateOnFocus: false },
   );
 
-  const { data: files, isLoading: isLoadingFiles } = useSWR<FileListData>(
-    bucketInfo.bucket
-      ? `${action}/r2/files?bucket=${bucketInfo.bucket}&page=${currentPage}&pageSize=${pageSize}&name=${searchParams.name}&fileSize=${searchParams.fileSize}&mimeType=${searchParams.mimeType}&status=${searchParams.status}`
+  const {
+    data: files,
+    isLoading: isLoadingFiles,
+    error,
+  } = useSWR<FileListData>(
+    currentBucketInfo.bucket
+      ? `${action}/r2/files?bucket=${currentBucketInfo.bucket}&page=${currentPage}&pageSize=${pageSize}&name=${searchParams.name}&fileSize=${searchParams.fileSize}&mimeType=${searchParams.mimeType}&status=${searchParams.status}`
       : null,
     fetcher,
     {
@@ -123,8 +127,13 @@ export default function UserFileManager({ user, action }: FileListProps) {
   );
 
   useEffect(() => {
-    if (r2Configs && r2Configs.buckets && r2Configs.buckets.length > 0) {
-      setBucketInfo({
+    if (
+      r2Configs &&
+      r2Configs.buckets &&
+      r2Configs.buckets.length > 0 &&
+      r2Configs.buckets[0].bucket
+    ) {
+      setCurrentBucketInfo({
         ...r2Configs.buckets[0],
         platform: r2Configs.platform,
         channel: r2Configs.channel,
@@ -136,7 +145,7 @@ export default function UserFileManager({ user, action }: FileListProps) {
   const handleRefresh = () => {
     setSelectedFiles([]);
     mutate(
-      `${action}/r2/files?bucket=${bucketInfo.bucket}&page=${currentPage}&pageSize=${pageSize}&name=${searchParams.name}&fileSize=${searchParams.fileSize}&mimeType=${searchParams.mimeType}&status=${searchParams.status}`,
+      `${action}/r2/files?bucket=${currentBucketInfo.bucket}&page=${currentPage}&pageSize=${pageSize}&name=${searchParams.name}&fileSize=${searchParams.fileSize}&mimeType=${searchParams.mimeType}&status=${searchParams.status}`,
       undefined,
     );
   };
@@ -145,8 +154,8 @@ export default function UserFileManager({ user, action }: FileListProps) {
     const newBucketInfo = r2Configs?.buckets?.find(
       (item) => item.bucket === bucket,
     );
-    setBucketInfo({
-      ...bucketInfo,
+    setCurrentBucketInfo({
+      ...currentBucketInfo,
       ...newBucketInfo,
     });
   };
@@ -169,7 +178,7 @@ export default function UserFileManager({ user, action }: FileListProps) {
             body: JSON.stringify({
               keys: selectedFiles.map((file) => file.path),
               ids: selectedFiles.map((file) => file.id),
-              bucket: bucketInfo.bucket,
+              bucket: currentBucketInfo.bucket,
             }),
           }),
           {
@@ -260,9 +269,10 @@ export default function UserFileManager({ user, action }: FileListProps) {
         ) : (
           r2Configs &&
           r2Configs.buckets &&
-          r2Configs.buckets.length > 0 && (
+          r2Configs.buckets.length > 0 &&
+          r2Configs.buckets[0].bucket && (
             <Select
-              value={bucketInfo.bucket}
+              value={currentBucketInfo.bucket}
               onValueChange={handleChangeBucket}
             >
               <SelectTrigger className="flex-1 sm:w-[120px] sm:flex-none">
@@ -289,15 +299,19 @@ export default function UserFileManager({ user, action }: FileListProps) {
           )
         )}
         {/* Uploader */}
-        {!isLoading && r2Configs && r2Configs.buckets?.length > 0 && (
-          <FileUploader
-            bucketInfo={bucketInfo}
-            action="/api/storage"
-            plan={plan}
-            userId={user.id}
-            onRefresh={handleRefresh}
-          />
-        )}
+        {!isLoading &&
+          r2Configs &&
+          r2Configs.buckets &&
+          r2Configs.buckets.length > 0 &&
+          r2Configs.buckets[0].bucket && (
+            <FileUploader
+              bucketInfo={currentBucketInfo}
+              action="/api/storage"
+              plan={plan}
+              userId={user.id}
+              onRefresh={handleRefresh}
+            />
+          )}
         {/* Muti Checkbox */}
         <div className="flex items-center">
           <Button
@@ -381,36 +395,55 @@ export default function UserFileManager({ user, action }: FileListProps) {
         </div>
       )}
 
-      {!isLoading && !r2Configs?.buckets?.length && (
+      {!isLoading && error && (
         <EmptyPlaceholder className="col-span-full mt-8 shadow-none">
-          <EmptyPlaceholder.Icon name="storage" />
+          <EmptyPlaceholder.Icon name="close" />
           <EmptyPlaceholder.Title>
-            {t("No buckets found")}
+            {t("Configuration Error")}
           </EmptyPlaceholder.Title>
           <EmptyPlaceholder.Description>
-            {t(
-              "The administrator has not configured the storage bucket, no file can be uploaded",
-            )}
+            {error.message}, Please check your bucket configuration and try
+            again
           </EmptyPlaceholder.Description>
         </EmptyPlaceholder>
       )}
 
-      {!isLoading && r2Configs?.buckets && r2Configs.buckets.length > 0 && (
-        <UserFileList
-          user={user}
-          files={files}
-          isLoading={isLoadingFiles}
-          view={displayType}
-          bucketInfo={bucketInfo}
-          action={action}
-          showMutiCheckBox={showMutiCheckBox}
-          selectedFiles={selectedFiles}
-          setSelectedFiles={setSelectedFiles}
-          onRefresh={handleRefresh}
-          onSelectAll={handleSelectAllFiles}
-          onDeleteAll={handleDeleteAllFiles}
-        />
-      )}
+      {!isLoading &&
+        !error &&
+        (!r2Configs?.buckets?.length || !r2Configs?.buckets?.[0].bucket) && (
+          <EmptyPlaceholder className="col-span-full mt-8 shadow-none">
+            <EmptyPlaceholder.Icon name="storage" />
+            <EmptyPlaceholder.Title>
+              {t("No buckets found")}
+            </EmptyPlaceholder.Title>
+            <EmptyPlaceholder.Description>
+              {t(
+                "The administrator has not configured the storage bucket, no file can be uploaded",
+              )}
+            </EmptyPlaceholder.Description>
+          </EmptyPlaceholder>
+        )}
+
+      {!isLoading &&
+        !error &&
+        r2Configs?.buckets &&
+        r2Configs.buckets.length > 0 &&
+        r2Configs?.buckets[0].bucket && (
+          <UserFileList
+            user={user}
+            files={files}
+            isLoading={isLoadingFiles}
+            view={displayType}
+            bucketInfo={currentBucketInfo}
+            action={action}
+            showMutiCheckBox={showMutiCheckBox}
+            selectedFiles={selectedFiles}
+            setSelectedFiles={setSelectedFiles}
+            onRefresh={handleRefresh}
+            onSelectAll={handleSelectAllFiles}
+            onDeleteAll={handleDeleteAllFiles}
+          />
+        )}
 
       {files && Math.ceil(files.total / pageSize) > 1 && (
         <PaginationWrapper

components/file/upload.tsx

@@ -82,15 +82,13 @@ export const FileUploader = ({
 
   return (
     <>
-      {!isOpen && (
-        <Button
-          className="flex h-9 items-center gap-1 text-nowrap"
-          onClick={() => setIsOpen(true)}
-        >
-          <Icons.cloudUpload className="size-5" />
-          {t("Upload Files")}
-        </Button>
-      )}
+      <Button
+        className="flex h-9 items-center gap-1 text-nowrap"
+        onClick={() => setIsOpen(true)}
+      >
+        <Icons.cloudUpload className="size-5" />
+        {t("Upload Files")}
+      </Button>
       {isOpen && (
         <Drawer open={isOpen} direction="right" onOpenChange={setIsOpen}>
           <DrawerContent className="h-screen w-full overflow-y-auto rounded-none sm:max-w-xl">

locales/en.json

@@ -215,7 +215,8 @@
     "storageHigh": "Storage space usage is high",
     "storageGood": "Storage space is sufficient",
     "items": "items",
-    "Total": "Total"
+    "Total": "Total",
+    "Configuration Error": "Configuration Error"
   },
   "Components": {
     "Dashboard": "Dashboard",

locales/zh.json

@@ -215,7 +215,8 @@
     "storageHigh": "存储空间使用较多",
     "storageGood": "存储空间充足",
     "items": "条",
-    "Total": "共"
+    "Total": "共",
+    "Configuration Error": "配置错误"
   },
   "Components": {
     "Dashboard": "用户面板",