feat: show a button when no storage found (#210)

* feat: show a button when no storage found

* fix: remove unused imports and enhace check

Author: ILoveScratch2

src/components/Base.tsx

@@ -17,14 +17,15 @@ import {
   Icon,
 } from "@hope-ui/solid"
 import { SwitchColorMode } from "./SwitchColorMode"
-import { ComponentProps, For, mergeProps, Show } from "solid-js"
+import { ComponentProps, For, mergeProps, Show, JSXElement } from "solid-js"
 import { AiOutlineFullscreen, AiOutlineFullscreenExit } from "solid-icons/ai"
 import { hoverColor } from "~/utils"
 
 export const Error = (props: {
   msg: string
   disableColor?: boolean
   h?: string
+  actions?: JSXElement
 }) => {
   const merged = mergeProps(
     {
@@ -47,6 +48,11 @@ export const Error = (props: {
         >
           {props.msg}
         </Heading>
+        <Show when={props.actions}>
+          <Flex mt="$4" justifyContent="center">
+            {props.actions}
+          </Flex>
+        </Show>
         <Show when={!props.disableColor}>
           <Flex mt="$2" justifyContent="end">
             <SwitchColorMode />

src/lang/en/global.json

@@ -28,5 +28,6 @@
   "close": "Close",
   "no_support_now": "Not currently supported",
   "empty_input": "Please enter",
-  "name": "Name"
+  "name": "Name",
+  "go_to_storages": "Go to Storages"
 }

src/pages/home/Obj.tsx

@@ -1,4 +1,4 @@
-import { Text, useColorModeValue, VStack } from "@hope-ui/solid"
+import { Text, useColorModeValue, VStack, Button } from "@hope-ui/solid"
 import {
   createEffect,
   createMemo,
@@ -19,7 +19,9 @@ import {
   recordHistory,
   setPassword,
   /*layout,*/ State,
+  me,
 } from "~/store"
+import { UserMethods } from "~/types"
 
 const Folder = lazy(() => import("./folder/Folder"))
 const File = lazy(() => import("./file/File"))
@@ -33,7 +35,7 @@ export { objBoxRef }
 export const Obj = () => {
   const t = useT()
   const cardBg = useColorModeValue("white", "$neutral3")
-  const { pathname, searchParams, isShare } = useRouter()
+  const { pathname, searchParams, isShare, to } = useRouter()
   const { handlePathChange, refresh } = usePath()
   const pagination = getPagination()
   const page = createMemo(() => {
@@ -57,6 +59,23 @@ export const Obj = () => {
       await handlePathChange(pathname, page)
     }),
   )
+
+  const isStorageError = createMemo(() => {
+    const err = objStore.err
+    return (
+      err.includes("storage not found") || err.includes("please add a storage")
+    )
+  })
+
+  const shouldShowStorageButton = createMemo(() => {
+    return isStorageError() && UserMethods.is_admin(me())
+  })
+
+  const storageErrorActions = () => (
+    <Button colorScheme="accent" onClick={() => to("/@manage/storages")}>
+      {t("global.go_to_storages")}
+    </Button>
+  )
   return (
     <VStack
       ref={(el: HTMLDivElement) => setObjBoxRef(el)}
@@ -71,7 +90,13 @@ export const Obj = () => {
       <Suspense fallback={<FullLoading />}>
         <Switch>
           <Match when={objStore.err}>
-            <Error msg={objStore.err} disableColor />
+            <Error
+              msg={objStore.err}
+              disableColor
+              actions={
+                shouldShowStorageButton() ? storageErrorActions() : undefined
+              }
+            />
           </Match>
           <Match
             when={[State.FetchingObj, State.FetchingObjs].includes(