From 0defd3c9d98161a79533788596f1b5a0c7f6e91d Mon Sep 17 00:00:00 2001
From: rharkor <louis@huort.com>
Date: Wed, 18 Sep 2024 10:41:42 +0200
Subject: [PATCH] fix: store

---
 packages/cli-app/src/api/stores/queries.ts    |  4 +-
 packages/cli-app/src/api/stores/schemas.ts    |  1 +
 packages/cli-app/src/app/plugins/content.tsx  | 19 +++++--
 .../cli-app/src/app/templates/content.tsx     | 35 +++++++++++--
 .../cli-app/src/components/choose-store.tsx   | 49 +++++++++++++------
 5 files changed, 83 insertions(+), 25 deletions(-)

diff --git a/packages/cli-app/src/api/stores/queries.ts b/packages/cli-app/src/api/stores/queries.ts
index bb66c708..9b56c7d0 100644
--- a/packages/cli-app/src/api/stores/queries.ts
+++ b/packages/cli-app/src/api/stores/queries.ts
@@ -9,10 +9,10 @@ import { getStores } from "@next-boilerplate/cli-helpers/stores-helpers"
 import { getStoresRequestSchema, getStoresResponseSchema } from "./schemas"
 
 export const getStoresQuery = async ({
-  input: { onlyInstalled },
+  input: { onlyInstalled, search },
 }: apiInputFromSchema<typeof getStoresRequestSchema>) => {
   try {
-    let stores = await getStores({ assetsDirectory })
+    let stores = await getStores({ assetsDirectory, search })
     const configuration = await getConfiguration()
 
     // Filter to get stores that are already in the configuration
diff --git a/packages/cli-app/src/api/stores/schemas.ts b/packages/cli-app/src/api/stores/schemas.ts
index 016db710..f3379164 100644
--- a/packages/cli-app/src/api/stores/schemas.ts
+++ b/packages/cli-app/src/api/stores/schemas.ts
@@ -4,6 +4,7 @@ import { fullStoreSchema, storeConfigSchema } from "@next-boilerplate/cli-helper
 
 export const getStoresRequestSchema = () =>
   z.object({
+    search: z.string().optional(),
     onlyInstalled: z.boolean().optional(),
   })
 
diff --git a/packages/cli-app/src/app/plugins/content.tsx b/packages/cli-app/src/app/plugins/content.tsx
index 99ed49e6..6aec7fee 100644
--- a/packages/cli-app/src/app/plugins/content.tsx
+++ b/packages/cli-app/src/app/plugins/content.tsx
@@ -10,6 +10,7 @@ import Header from "@/components/ui/header"
 import { TDictionary } from "@/lib/langs"
 import { trpc } from "@/lib/trpc/client"
 import { RouterOutputs } from "@/lib/trpc/utils"
+import { cn } from "@/lib/utils"
 import { getItemUID } from "@next-boilerplate/cli-helpers/stores"
 import { Input } from "@nextui-org/input"
 import { Link } from "@nextui-org/link"
@@ -86,17 +87,24 @@ export default function PluginsContent({
   }, [plugins.data])
 
   const stores = trpc.stores.getStores.useQuery(
-    { onlyInstalled: true },
+    { onlyInstalled: true, search: _search },
     {
-      initialData: ssrStores,
+      initialData: isInitialFilter ? ssrStores : undefined,
     }
   )
 
+  const [storesData, setStoresData] = useState(ssrStores)
+  useEffect(() => {
+    if (stores.data) {
+      setStoresData(stores.data)
+    }
+  }, [stores.data])
+
   if (!storeName || !storeVersion) {
     return (
       <ChooseStore
         dictionary={dictionary}
-        stores={stores.data}
+        stores={storesData}
         isLoading={stores.isLoading}
         search={search}
         setSearch={setSearch}
@@ -137,7 +145,10 @@ export default function PluginsContent({
                 />
               )
             }
-            isDisabled={plugins.isLoading}
+            className={cn("w-64", {
+              "opacity-50": plugins.isLoading,
+            })}
+            isReadOnly={plugins.isLoading}
           />
         }
       />
diff --git a/packages/cli-app/src/app/templates/content.tsx b/packages/cli-app/src/app/templates/content.tsx
index 4ea5ea4b..5ebe639b 100644
--- a/packages/cli-app/src/app/templates/content.tsx
+++ b/packages/cli-app/src/app/templates/content.tsx
@@ -11,6 +11,7 @@ import ItemCard from "@/components/ui/item-card"
 import { TDictionary } from "@/lib/langs"
 import { trpc } from "@/lib/trpc/client"
 import { RouterOutputs } from "@/lib/trpc/utils"
+import { cn } from "@/lib/utils"
 import { getItemUID } from "@next-boilerplate/cli-helpers/stores"
 import { Input } from "@nextui-org/input"
 import { Link } from "@nextui-org/link"
@@ -18,6 +19,8 @@ import { Spinner } from "@nextui-org/spinner"
 
 import { TemplatesContentDr } from "./content.dr"
 
+type TTemplates = RouterOutputs["templates"]["getTemplates"]
+
 export default function TemplatesContent({
   initialStoreName,
   initialStoreVersion,
@@ -69,18 +72,37 @@ export default function TemplatesContent({
     }
   )
 
+  // Do not set empty data to the cache
+  const [templatesData, setTemplatesData] = useState<TTemplates>(
+    ssrTemplates ?? {
+      templates: [],
+    }
+  )
+  useEffect(() => {
+    if (templates.data) {
+      setTemplatesData(templates.data)
+    }
+  }, [templates.data])
+
   const stores = trpc.stores.getStores.useQuery(
-    { onlyInstalled: true },
+    { onlyInstalled: true, search: _search },
     {
-      initialData: ssrStores,
+      initialData: isInitialFilter ? ssrStores : undefined,
     }
   )
 
+  const [storesData, setStoresData] = useState(ssrStores)
+  useEffect(() => {
+    if (stores.data) {
+      setStoresData(stores.data)
+    }
+  }, [stores.data])
+
   if (!storeName || !storeVersion) {
     return (
       <ChooseStore
         dictionary={dictionary}
-        stores={stores.data}
+        stores={storesData}
         isLoading={stores.isLoading}
         search={search}
         setSearch={setSearch}
@@ -121,12 +143,15 @@ export default function TemplatesContent({
                 />
               )
             }
-            isDisabled={templates.isLoading}
+            className={cn("w-64", {
+              "opacity-50": templates.isLoading,
+            })}
+            isReadOnly={templates.isLoading}
           />
         }
       />
       <ul className="flex flex-1 flex-col gap-2">
-        {templates.data?.templates.map((template) => (
+        {templatesData.templates.map((template) => (
           <ItemCard
             key={getItemUID(template)}
             id={getItemUID(template)}
diff --git a/packages/cli-app/src/components/choose-store.tsx b/packages/cli-app/src/components/choose-store.tsx
index 5005422a..ef741cd2 100644
--- a/packages/cli-app/src/components/choose-store.tsx
+++ b/packages/cli-app/src/components/choose-store.tsx
@@ -2,7 +2,9 @@ import { Store } from "lucide-react"
 
 import { TDictionary } from "@/lib/langs"
 import { RouterOutputs } from "@/lib/trpc/utils"
+import { cn } from "@/lib/utils"
 import { Input } from "@nextui-org/input"
+import { Spinner } from "@nextui-org/spinner"
 
 import Header from "./ui/header"
 import ItemCard from "./ui/item-card"
@@ -17,7 +19,7 @@ export default function ChooseStore({
   lnk,
 }: {
   dictionary: TDictionary<typeof ChooseStoreDr>
-  stores: RouterOutputs["stores"]["getStores"] | undefined
+  stores: RouterOutputs["stores"]["getStores"]
   isLoading: boolean
   search: string
   setSearch: (search: string) => void
@@ -28,21 +30,40 @@ export default function ChooseStore({
       <Header
         title={dictionary.selectStore}
         dictionary={dictionary}
-        actions={<Input value={search} onValueChange={setSearch} placeholder={dictionary.search} />}
+        actions={
+          <Input
+            value={search}
+            onValueChange={setSearch}
+            placeholder={dictionary.search}
+            endContent={
+              isLoading && (
+                <Spinner
+                  classNames={{
+                    wrapper: "!size-4",
+                  }}
+                  color="current"
+                  size="sm"
+                />
+              )
+            }
+            className={cn("w-64", {
+              "opacity-50": isLoading,
+            })}
+            isReadOnly={isLoading}
+          />
+        }
       />
       <ul className="flex flex-1 flex-col gap-2">
-        {isLoading
-          ? [...Array(5)].map((_, i) => <ItemCard key={i} isLoading id="" title="" description="" />)
-          : stores?.stores.map((store) => (
-              <ItemCard
-                key={store.uid}
-                id={store.uid}
-                title={store.name}
-                description={dictionary.storeVersion + ": " + store.version}
-                href={`${lnk}?storeName=${encodeURIComponent(store.name)}&storeVersion=${encodeURIComponent(store.version)}`}
-                endContent={<Store className="absolute right-2 top-2 size-4 text-primary" />}
-              />
-            ))}
+        {stores.stores.map((store) => (
+          <ItemCard
+            key={store.uid}
+            id={store.uid}
+            title={store.name}
+            description={dictionary.storeVersion + ": " + store.version}
+            href={`${lnk}?storeName=${encodeURIComponent(store.name)}&storeVersion=${encodeURIComponent(store.version)}`}
+            endContent={<Store className="absolute right-2 top-2 size-4 text-primary" />}
+          />
+        ))}
       </ul>
     </>
   )