TriggerFrontend/src/pages/settings/components/WoL/WolClients.tsx

import { Button, Grid, GridCol, Group, Popover, Stack, TextInput } from '@mantine/core';
import { isNotEmpty, matches, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { popoverClasses, textInputClasses } from 'styles';
import type { WolClient } from 'types';
import DebouncedWolClient from './DebouncedWolClient';
import WolClientSettingsItem from './WolClientSettingsItem';

const WolClientSettings = () => {
	const defaultWolClient: WolClient = {
		id: undefined,
		hostname: '',
		macAddress: '',
	};
	const form = useForm({
		initialValues: defaultWolClient,
		validate: {
			hostname: isNotEmpty('Hostname is required'),
			macAddress: matches(
				/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
				'Invalid MAC Address',
			),
		},
	});
	const endpoint = 'api/wolClients';
	const { data: wolClientsData, isFetched: wolClientsIsFetched } = useQueryAPI({
		endpoint: endpoint,
	});
	const [wolClients, setWolClients] = useState<WolClient[]>([]);
	const { mutateAsync } = useMutationAPI();
	const { isMobile, theme } = useCommonHooks();
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const [searchValue, setSearchValue] = useState('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
	const [isOpen, setIsOpen] = useState(false);
	const [isLoading, setIsLoading] = useState(false);

	const handleClose = () => {
		closeModal();
		form.reset();
	};

	useEffect(() => {
		if (wolClientsData && wolClientsIsFetched) {
			setWolClients(
				wolClientsData.filter((a: WolClient) =>
					a.hostname.toLowerCase().includes(debouncedSearch.toLowerCase()),
				),
			);
		}
		if (debouncedSearch === searchValue) {
			setIsLoading(false);
		}
	}, [wolClientsData, wolClientsIsFetched, debouncedSearch]);

	return (
		<Stack>
			<AddItemModal
				modalOpened={modalOpened}
				handleClose={handleClose}
				title={'Add a new WoL Client'}
				body={
					<form
						onSubmit={form.onSubmit((values) => {
							mutateAsync({
								method: 'POST',
								endpoint: endpoint,
								body: values,
							});
							handleClose();
						})}
					>
						<Stack gap={0} w={'100%'} align='center'>
							<Group w={'100%'} justify='center'>
								<TextInput
									key={form.key('hostname')}
									{...form.getInputProps('hostname')}
									label={'Hostname'}
									placeholder='eg. Workstation'
									className={textInputClasses.settingsItem}
									classNames={textInputClasses}
									withAsterisk
									styles={
										theme.textShadowsEnabled
											? {
													label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
												}
											: undefined
									}
								/>
								<TextInput
									key={form.key('macAddress')}
									{...form.getInputProps('macAddress')}
									label={'MAC Address'}
									placeholder='eg. 00:00:00:00:00:00'
									className={textInputClasses.settingsItem}
									classNames={textInputClasses}
									withAsterisk
									styles={
										theme.textShadowsEnabled
											? {
													label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
												}
											: undefined
									}
								/>
							</Group>
							<Group mt={'1rem'}>
								<Button type='submit' color={'green'}>
									Save
								</Button>
								<Button
									color={'red'}
									styles={{ label: { color: 'black' } }}
									onClick={handleClose}
								>
									Cancel
								</Button>
							</Group>
						</Stack>
					</form>
				}
			/>
			<SettingsHeader
				setDragging={undefined}
				openModal={openModal}
				title={'WoL Clients'}
				tooltip={{
					title: 'Wake on Lan clients can be configured here.',
					highlightList: ['Clients', 'homepage'],
					description: 'Clients can be powered on from the settings button the homepage.',
				}}
				searchValue={searchValue}
				setSearchValue={setSearchValue}
				searchPlaceholder={'Search Clients...'}
				isLoading={isLoading}
				setIsLoading={setIsLoading}
			/>
			<Stack
				mt={isMobile ? '10rem' : '6rem'}
				mb={isMobile ? '6rem' : '1rem'}
				w={'100%'}
				align='center'
			>
				<Grid columns={18} w={'75%'}>
					{wolClients.length > 0 ? (
						wolClients?.map((client: WolClient) => (
							<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
								<Popover
									withArrow
									withOverlay
									trapFocus
									closeOnClickOutside={!isOpen}
									classNames={popoverClasses}
									middlewares={{ shift: { padding: 20 } }}
									position='bottom'
									offset={isMobile ? -100 : 0}
								>
									<Popover.Target>
										<Group justify='center'>
											<WolClientSettingsItem client={client} />
										</Group>
									</Popover.Target>
									<Popover.Dropdown w={isMobile ? '90%' : 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>
	);
};
export default WolClientSettings;