smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

State management

Browse Source
This commit is contained in:
Sean Edmunds
2025-05-02 14:50:14 -05:00
parent 16787969fc
commit 97a59d6a15
21 changed files with 525 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react';
import { popoverClasses, textInputClasses } from 'styles';
import type { WolClient } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import DebouncedWolClient from './DebouncedWolClient';
import WolClientSettingsItem from './WolClientSettingsItem';
@@ -36,6 +37,7 @@ const WolClientSettings = () => {
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const handleClose = () => {
setNewWolClient(defaultWolClient);
@@ -50,6 +52,9 @@ const WolClientSettings = () => {
),
);
}
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [wolClientsData, wolClientsIsFetched, debouncedSearch]);
return (
@@ -131,6 +136,8 @@ const WolClientSettings = () => {
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Clients...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack
mt={isMobile ? '9rem' : '6rem'}
@@ -139,30 +146,40 @@ const WolClientSettings = () => {
align='center'
>
<Grid columns={18} w={'75%'}>
{wolClients?.map((client: WolClient) => (
<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
<Popover
withArrow
withOverlay
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
>
<Popover.Target>
<Group
onClick={(e) => {
e.stopPropagation();
}}
justify='center'
>
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
</Popover.Dropdown>
</Popover>
{wolClients.length > 0 ? (
wolClients?.map((client: WolClient) => (
<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
<Popover
withArrow
withOverlay
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
>
<Popover.Target>
<Group
onClick={(e) => {
e.stopPropagation();
}}
justify='center'
>
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
</Popover.Dropdown>
</Popover>
</GridCol>
))
) : (
<GridCol
w={'100%'}
span={18}
style={{ display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</GridCol>
))}
)}
</Grid>
</Stack>
</Stack>