Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

feat: menubar is not dependant on query params anymroe (#7399)

Browse Source 
Previously since query params were changing by global search, and
menubar was also altering them, they were conflicting. Menubar does not
need query params as state. So using search hook directly.
This commit is contained in:
Jaanus Sellin 2024-06-14 12:26:52 +03:00 committed by GitHub
parent 9b789ea5ef
commit 10d2a295c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/component/commandBar/CommandBar.tsx
View File

@ -16,7 +16,6 @@ import { useOnClickOutside } from 'hooks/useOnClickOutside';
import { useOnBlur } from 'hooks/useOnBlur'; import { useOnBlur } from 'hooks/useOnBlur';
import { RecentlyVisited } from './RecentlyVisited/RecentlyVisited'; import { RecentlyVisited } from './RecentlyVisited/RecentlyVisited';
import { useRecentlyVisited } from 'hooks/useRecentlyVisited'; import { useRecentlyVisited } from 'hooks/useRecentlyVisited';
import { useGlobalFeatureSearch } from '../feature/FeatureToggleList/useGlobalFeatureSearch';
import { import {
CommandResultGroup, CommandResultGroup,
type CommandResultGroupItem, type CommandResultGroupItem,
@ -25,6 +24,7 @@ import { PageSuggestions } from './PageSuggestions';
import { useRoutes } from 'component/layout/MainLayout/NavigationSidebar/useRoutes'; import { useRoutes } from 'component/layout/MainLayout/NavigationSidebar/useRoutes';
import { useAsyncDebounce } from 'react-table'; import { useAsyncDebounce } from 'react-table';
import useProjects from 'hooks/api/getters/useProjects/useProjects'; import useProjects from 'hooks/api/getters/useProjects/useProjects';
import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
export const CommandResultsPaper = styled(Paper)(({ theme }) => ({ export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
position: 'absolute', position: 'absolute',
@ -87,6 +87,7 @@ export const CommandBar = () => {
const searchInputRef = useRef<HTMLInputElement>(null); const searchInputRef = useRef<HTMLInputElement>(null);
const searchContainerRef = useRef<HTMLInputElement>(null); const searchContainerRef = useRef<HTMLInputElement>(null);
const [showSuggestions, setShowSuggestions] = useState(false); const [showSuggestions, setShowSuggestions] = useState(false);
const [searchString, setSearchString] = useState(undefined);
const [searchedProjects, setSearchedProjects] = useState< const [searchedProjects, setSearchedProjects] = useState<
CommandResultGroupItem[] CommandResultGroupItem[]
>([]); >([]);
@ -114,11 +115,14 @@ export const CommandBar = () => {
const [value, setValue] = useState<string>(''); const [value, setValue] = useState<string>('');
const { features, setTableState } = useGlobalFeatureSearch(3); const { features = [] } = useFeatureSearch({
query: searchString,
limit: '3',
});
const { projects } = useProjects(); const { projects } = useProjects();
const debouncedSetSearchState = useAsyncDebounce((query) => { const debouncedSetSearchState = useAsyncDebounce((query) => {
setTableState({ query }); setSearchString(query);
const filteredProjects = projects.filter((project) => const filteredProjects = projects.filter((project) =>
project.name.toLowerCase().includes(query.toLowerCase()), project.name.toLowerCase().includes(query.toLowerCase()),