Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-18 20:09:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-508] Filter locations (#737)

Browse source 
Filter locations
This commit is contained in:
nikec 2023-04-21 16:51:48 +02:00 committed by GitHub
parent 469a3831dc
commit df0e24a56c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
interface/app/$libraryId/settings/library/locations/index.tsx
View file

@ -1,3 +1,5 @@
import { useMemo, useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';
import { useLibraryQuery } from '@sd/client';
import { SearchInput } from '@sd/ui';
import { Heading } from '../../Layout';
@ -7,6 +9,17 @@ import ListItem from './ListItem';
export const Component = () => {
const locations = useLibraryQuery(['locations.list']);
const [search, setSearch] = useState('');
const updateSearch = useDebouncedCallback(setSearch, 750);
const filteredLocations = useMemo(
() =>
locations.data?.filter((location) =>
location.name.toLowerCase().includes(search.toLowerCase())
),
[search]
);
return (
<>
<Heading
@ -14,13 +27,17 @@ export const Component = () => {
description="Manage your storage locations."
rightArea={
<div className="flex flex-row items-center space-x-5">
<SearchInput placeholder="Search locations" className="h-[33px]" />
<SearchInput
placeholder="Search locations"
className="h-[33px]"
onChange={(e) => updateSearch(e.target.value)}
/>
<AddLocationButton variant="accent" size="md" />
</div>
}
/>
<div className="grid space-y-2">
{locations.data?.map((location) => (
{filteredLocations?.map((location) => (
<ListItem key={location.id} location={location} />
))}
</div>