Small refactoring

src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx

@@ -16,14 +16,13 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FaTerminal } from 'react-icons/fa';
-import { FaComputer, FaDesktop } from 'react-icons/fa6';
+import { FaComputer, FaDesktop, FaTerminal } from 'react-icons/fa6';
 import { buttonClasses, popoverClasses, selectClasses, textInputClasses } from 'styles';
 import type { GuacamoleClient } from 'types';
 import DebouncedGuacamoleClient from './DebouncedGuacamoleClient';
 import GuacamoleClientSettingsItem from './GuacamoleClientSettingsItem';
 
-const GuacamoleClients = () => {
+export function GuacamoleClients() {
 	const defaultGuacamoleClient: GuacamoleClient = {
 		id: undefined,
 		clientName: '',
@@ -73,127 +72,129 @@ const GuacamoleClients = () => {
 
 	return (
 		<Stack>
-			<AddItemModal
-				modalOpened={modalOpened}
-				handleClose={handleClose}
-				title={'Add a new Guacamole Client'}
-				body={
-					<form
-						onSubmit={form.onSubmit((values) => {
-							mutateAsync({
-								method: 'POST',
-								endpoint: endpoint,
-								body: { ...values, enabled: 1 },
-							});
-							handleClose();
-						})}
-					>
-						<Stack gap={0} w={'100%'} align='center'>
-							<Group w={'100%'} justify='center'>
-								<TextInput
-									key={form.key('clientName')}
-									{...form.getInputProps('clientName')}
-									label={'Client Name'}
-									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('clientIdentifier')}
-									{...form.getInputProps('clientIdentifier')}
-									label={'clientIdentifier'}
-									placeholder='eg. MzIAYwBteXNxbA'
-									className={textInputClasses.settingsItem}
-									classNames={textInputClasses}
-									withAsterisk
-									styles={
-										theme.textShadowsEnabled
-											? {
-													label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
-												}
-											: undefined
-									}
-								/>
-							</Group>
-							<Group w={'100%'} justify='center' pos={'relative'}>
-								<Select
-									key={form.key('type')}
-									{...form.getInputProps('type')}
-									label={'Type'}
-									className={selectClasses.settingsItem}
-									classNames={{
-										wrapper: selectClasses.menuSelectWrapper,
-										input: selectClasses.menuSelectInput,
-										label: selectClasses.menuSelectLabel,
-										options: selectClasses.menuSelectOptions,
-										option: selectClasses.menuSelectOption,
-										dropdown: selectClasses.dropdown,
-									}}
-									w={'45%'}
-									mt={'.75rem'}
-									limit={100}
-									placeholder='Client Type'
-									data={types.map((type) => {
-										return {
-											label: type,
-											value: type,
-										};
-									})}
-									comboboxProps={{
-										zIndex: 3000,
-									}}
-									styles={
-										theme.textShadowsEnabled
-											? {
-													label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
-												}
-											: undefined
-									}
-									renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
-										return (
-											<Group>
-												{item.option.value}
-												{item.option.value === 'SSH' && <FaTerminal />}
-												{item.option.value === 'RDP' && <FaComputer />}
-												{item.option.value === 'VNC' && <FaDesktop />}
-											</Group>
-										);
-									}}
-									searchable
-									maxDropdownHeight={175}
-									onDropdownOpen={() => setIsOpen(true)}
-									onDropdownClose={() => setIsOpen(false)}
-									withAsterisk
-								/>
-							</Group>
-							<Group mt={'1rem'}>
-								<Button
-									type='submit'
-									className={buttonClasses.saveButton}
-									classNames={buttonClasses}
-								>
-									Save
-								</Button>
-								<Button
-									className={buttonClasses.cancelButton}
-									classNames={buttonClasses}
-									onClick={handleClose}
-								>
-									Cancel
-								</Button>
-							</Group>
-						</Stack>
-					</form>
-				}
-			/>
+			{modalOpened && (
+				<AddItemModal
+					modalOpened={modalOpened}
+					handleClose={handleClose}
+					title={'Add a new Guacamole Client'}
+					body={
+						<form
+							onSubmit={form.onSubmit((values) => {
+								mutateAsync({
+									method: 'POST',
+									endpoint: endpoint,
+									body: { ...values, enabled: 1 },
+								});
+								handleClose();
+							})}
+						>
+							<Stack gap={0} w={'100%'} align='center'>
+								<Group w={'100%'} justify='center'>
+									<TextInput
+										key={form.key('clientName')}
+										{...form.getInputProps('clientName')}
+										label={'Client Name'}
+										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('clientIdentifier')}
+										{...form.getInputProps('clientIdentifier')}
+										label={'clientIdentifier'}
+										placeholder='eg. MzIAYwBteXNxbA'
+										className={textInputClasses.settingsItem}
+										classNames={textInputClasses}
+										withAsterisk
+										styles={
+											theme.textShadowsEnabled
+												? {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												: undefined
+										}
+									/>
+								</Group>
+								<Group w={'100%'} justify='center' pos={'relative'}>
+									<Select
+										key={form.key('type')}
+										{...form.getInputProps('type')}
+										label={'Type'}
+										className={selectClasses.settingsItem}
+										classNames={{
+											wrapper: selectClasses.menuSelectWrapper,
+											input: selectClasses.menuSelectInput,
+											label: selectClasses.menuSelectLabel,
+											options: selectClasses.menuSelectOptions,
+											option: selectClasses.menuSelectOption,
+											dropdown: selectClasses.dropdown,
+										}}
+										w={'45%'}
+										mt={'.75rem'}
+										limit={100}
+										placeholder='Client Type'
+										data={types.map((type) => {
+											return {
+												label: type,
+												value: type,
+											};
+										})}
+										comboboxProps={{
+											zIndex: 3000,
+										}}
+										styles={
+											theme.textShadowsEnabled
+												? {
+														label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+													}
+												: undefined
+										}
+										renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+											return (
+												<Group>
+													{item.option.value}
+													{item.option.value === 'SSH' && <FaTerminal />}
+													{item.option.value === 'RDP' && <FaComputer />}
+													{item.option.value === 'VNC' && <FaDesktop />}
+												</Group>
+											);
+										}}
+										searchable
+										maxDropdownHeight={175}
+										onDropdownOpen={() => setIsOpen(true)}
+										onDropdownClose={() => setIsOpen(false)}
+										withAsterisk
+									/>
+								</Group>
+								<Group mt={'1rem'}>
+									<Button
+										type='submit'
+										className={buttonClasses.saveButton}
+										classNames={buttonClasses}
+									>
+										Save
+									</Button>
+									<Button
+										className={buttonClasses.cancelButton}
+										classNames={buttonClasses}
+										onClick={handleClose}
+									>
+										Cancel
+									</Button>
+								</Group>
+							</Stack>
+						</form>
+					}
+				/>
+			)}
 			<SettingsHeader
 				setDragging={undefined}
 				openModal={openModal}
@@ -267,5 +268,4 @@ const GuacamoleClients = () => {
 			</Stack>
 		</Stack>
 	);
-};
-export default GuacamoleClients;
+}