fix(palette): searched items should belongs to own group

This commit is contained in:
Aslam H
2024-09-09 10:56:34 +07:00
parent 1c3ffcf92f
commit 94aac134ea

View File

@@ -1,5 +1,3 @@
"use client"
import * as React from "react" import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog" import * as DialogPrimitive from "@radix-ui/react-dialog"
import { Command } from "cmdk" import { Command } from "cmdk"
@@ -70,15 +68,6 @@ export function CommandPalette() {
[activePage, inputValue, bounce] [activePage, inputValue, bounce]
) )
const allCommands = React.useMemo(() => {
if (!commandGroups) return []
return Object.entries(commandGroups).map(([key, value]) => ({
heading: toTitleCase(key),
items: value.flatMap(subgroup => subgroup.items)
}))
}, [commandGroups])
const topics = React.useMemo( const topics = React.useMemo(
() => ({ () => ({
heading: "Topics", heading: "Topics",
@@ -126,14 +115,22 @@ export function CommandPalette() {
const searchRegex = searchSafeRegExp(inputValue) const searchRegex = searchSafeRegExp(inputValue)
if (activePage === "home") { if (activePage === "home") {
if (!inputValue) return commandGroups.home const filteredGroups = Object.entries(commandGroups)
.map(([key, groups]) => {
return groups.map(group => ({
heading: group.heading,
items: filterItems(group.items, searchRegex)
}))
})
.flat()
return [...allCommands, personalLinks, personalPages, topics] const additionalGroups = [
.map(group => ({ { heading: personalLinks.heading, items: filterItems(personalLinks.items, searchRegex) },
heading: group.heading, { heading: personalPages.heading, items: filterItems(personalPages.items, searchRegex) },
items: filterItems(group.items, searchRegex) { heading: topics.heading, items: filterItems(topics.items, searchRegex) }
})) ]
.filter(group => group.items.length > 0)
return [...filteredGroups, ...additionalGroups].filter(group => group.items.length > 0)
} }
switch (activePage) { switch (activePage) {
@@ -151,7 +148,7 @@ export function CommandPalette() {
})) }))
.filter(group => group.items.length > 0) .filter(group => group.items.length > 0)
} }
}, [inputValue, activePage, allCommands, personalLinks, personalPages, commandGroups, topics]) }, [inputValue, activePage, commandGroups, personalLinks, personalPages, topics])
const handleAction = React.useCallback( const handleAction = React.useCallback(
(action: CommandAction, payload?: any) => { (action: CommandAction, payload?: any) => {