Skip to content

Commit

Permalink
refactor: loading state
Browse files Browse the repository at this point in the history
  • Loading branch information
@rharkor
rharkor committed Sep 18, 2024
1 parent eb73138 commit e44903b
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 51 deletions.
78 changes: 48 additions & 30 deletions packages/cli-app/src/app/plugins/content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { RouterOutputs } from "@/lib/trpc/utils"
import { getItemUID } from "@next-boilerplate/cli-helpers/stores"
import { Input } from "@nextui-org/input"
import { Link } from "@nextui-org/link"
import { Spinner } from "@nextui-org/spinner"

import { PluginsContentDr } from "./content.dr"
import Plugin from "./plugin"
Expand All @@ -39,8 +40,14 @@ export default function PluginsContent({

const sp = useSearchParams()

const storeName = useMemo(() => sp.get("storeName"), [sp])
const storeVersion = useMemo(() => sp.get("storeVersion"), [sp])
const storeName = useMemo(() => {
const storeName = sp.get("storeName")
return storeName ? decodeURIComponent(storeName) : null
}, [sp])
const storeVersion = useMemo(() => {
const storeVersion = sp.get("storeVersion")
return storeVersion ? decodeURIComponent(storeVersion) : null
}, [sp])

// Debounce search
useEffect(() => {
Expand All @@ -66,6 +73,18 @@ export default function PluginsContent({
}
)

// Do not set empty data to the cache
const [pluginsData, setPluginsData] = useState<TPlugins>(
ssrPlugins ?? {
plugins: [],
}
)
useEffect(() => {
if (plugins.data) {
setPluginsData(plugins.data)
}
}, [plugins.data])

const stores = trpc.stores.getStores.useQuery(undefined, {
initialData: ssrStores,
})
Expand Down Expand Up @@ -99,36 +118,35 @@ export default function PluginsContent({
</>
}
dictionary={dictionary}
actions={<Input value={search} onValueChange={setSearch} placeholder={dictionary.search} />}
actions={
<Input
value={search}
onValueChange={setSearch}
placeholder={dictionary.search}
endContent={
plugins.isLoading && (
<Spinner
classNames={{
wrapper: "!size-4",
}}
color="current"
size="sm"
/>
)
}
isDisabled={plugins.isLoading}
/>
}
/>
<ul className="flex flex-1 flex-col gap-2">
{plugins.isLoading
? [...Array(5)].map((_, i) => (
<Plugin
key={i}
plugin={{
name: "",
store: {
name: "",
version: "",
},
description: "",
sourcePath: "",
paths: [],
}}
dictionary={dictionary}
ssrConfiguration={ssrConfiguration}
isLoading
/>
))
: plugins.data?.plugins.map((plugin) => (
<Plugin
key={getItemUID(plugin)}
plugin={plugin}
dictionary={dictionary}
ssrConfiguration={ssrConfiguration}
/>
))}
{pluginsData.plugins.map((plugin) => (
<Plugin
key={getItemUID(plugin)}
plugin={plugin}
dictionary={dictionary}
ssrConfiguration={ssrConfiguration}
/>
))}
</ul>
</>
)
Expand Down
6 changes: 4 additions & 2 deletions packages/cli-app/src/app/plugins/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ export default async function Plugins() {

const headersStore = headers()
const url = new URL(headersStore.get("x-url") as string)
const storeName = url.searchParams.get("storeName")
const storeVersion = url.searchParams.get("storeVersion")
let storeName = url.searchParams.get("storeName")
if (storeName) storeName = decodeURIComponent(storeName)
let storeVersion = url.searchParams.get("storeVersion")
if (storeVersion) storeVersion = decodeURIComponent(storeVersion)

const ssrPlugins =
storeName && storeVersion
Expand Down
55 changes: 39 additions & 16 deletions packages/cli-app/src/app/templates/content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { RouterOutputs } from "@/lib/trpc/utils"
import { getItemUID } from "@next-boilerplate/cli-helpers/stores"
import { Input } from "@nextui-org/input"
import { Link } from "@nextui-org/link"
import { Spinner } from "@nextui-org/spinner"

import { TemplatesContentDr } from "./content.dr"

Expand All @@ -35,8 +36,14 @@ export default function TemplatesContent({

const sp = useSearchParams()

const storeName = useMemo(() => sp.get("storeName"), [sp])
const storeVersion = useMemo(() => sp.get("storeVersion"), [sp])
const storeName = useMemo(() => {
const storeName = sp.get("storeName")
return storeName ? decodeURIComponent(storeName) : null
}, [sp])
const storeVersion = useMemo(() => {
const storeVersion = sp.get("storeVersion")
return storeVersion ? decodeURIComponent(storeVersion) : null
}, [sp])

// Debounce search
useEffect(() => {
Expand Down Expand Up @@ -95,22 +102,38 @@ export default function TemplatesContent({
</>
}
dictionary={dictionary}
actions={<Input value={search} onValueChange={setSearch} placeholder={dictionary.search} />}
actions={
<Input
value={search}
onValueChange={setSearch}
placeholder={dictionary.search}
endContent={
templates.isLoading && (
<Spinner
classNames={{
wrapper: "!size-4",
}}
color="current"
size="sm"
/>
)
}
isDisabled={templates.isLoading}
/>
}
/>
<ul className="flex flex-1 flex-col gap-2">
{templates.isLoading
? [...Array(5)].map((_, i) => <ItemCard key={i} description="" id="" title="" isLoading />)
: templates.data?.templates.map((template) => (
<ItemCard
key={getItemUID(template)}
id={getItemUID(template)}
title={template.name}
subTitle={template.sourcePath}
description={template.description}
endContent={<BookDashed className="absolute right-2 top-2 size-4 text-primary" />}
href={`/templates/${encodeURIComponent(getItemUID(template))}`}
/>
))}
{templates.data?.templates.map((template) => (
<ItemCard
key={getItemUID(template)}
id={getItemUID(template)}
title={template.name}
subTitle={template.sourcePath}
description={template.description}
endContent={<BookDashed className="absolute right-2 top-2 size-4 text-primary" />}
href={`/templates/${encodeURIComponent(getItemUID(template))}`}
/>
))}
</ul>
</>
)
Expand Down
6 changes: 4 additions & 2 deletions packages/cli-app/src/app/templates/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ export default async function Templates() {

const headersStore = headers()
const url = new URL(headersStore.get("x-url") as string)
const storeName = url.searchParams.get("storeName")
const storeVersion = url.searchParams.get("storeVersion")
let storeName = url.searchParams.get("storeName")
if (storeName) storeName = decodeURIComponent(storeName)
let storeVersion = url.searchParams.get("storeVersion")
if (storeVersion) storeVersion = decodeURIComponent(storeVersion)

const ssrTemplates =
storeName && storeVersion
Expand Down
2 changes: 1 addition & 1 deletion packages/cli-app/src/components/choose-store.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function ChooseStore({
id={store.uid}
title={store.name}
description={dictionary.storeVersion + ": " + store.version}
href={`${lnk}?storeName=${store.name}&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" />}
/>
))}
Expand Down

0 comments on commit e44903b

Please sign in to comment.