Application adding bugfix; consolidated Settings headers

src/pages/settings/components/Applications/Applications.tsx

@@ -7,7 +7,6 @@ import {
 	Grid,
 	GridCol,
 	Group,
-	Modal,
 	Popover,
 	Stack,
 	Text,
@@ -16,21 +15,15 @@ import {
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, modalClasses, textInputClasses } from 'styles';
+import { textInputClasses } from 'styles';
 import type { Application } from 'types';
+import AddItemModal from '../Shared/AddItemModal';
 import SettingsHeader from '../Shared/SettingsHeader';
 import AppSettingsItem from './AppSettingsItem';
 import DebouncedApplication from './DebouncedApplication';
 
 const ApplicationSettings = () => {
-	const endpoint = 'api/apps';
-	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
-		endpoint: endpoint,
-	});
-	const [applicationData, setApplicationData] = useState<Application[]>([]);
-	const [applicationList, setApplicationList] = useState<Application[]>([]);
-	const { theme, isMobile, modalStyle } = useCommonHooks();
-	const [newApplication, setNewApplication] = useState<Application>({
+	const defaultApplication: Application = {
 		id: null,
 		name: '',
 		url: '',
@@ -39,7 +32,16 @@ const ApplicationSettings = () => {
 		filterName: '',
 		index: 0,
 		enabled: 1,
+	};
+	const appsEndpoint = 'api/apps';
+	const appsOrderEndpoint = 'api/appsOrder';
+	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
+		endpoint: appsEndpoint,
 	});
+	const [applicationData, setApplicationData] = useState<Application[]>([]);
+	const [applicationList, setApplicationList] = useState<Application[]>([]);
+	const { theme, isMobile } = useCommonHooks();
+	const [newApplication, setNewApplication] = useState<Application>(defaultApplication);
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -74,6 +76,11 @@ const ApplicationSettings = () => {
 
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 
+	const handleClose = () => {
+		closeModal();
+		setNewApplication(defaultApplication);
+	};
+
 	useEffect(() => {
 		if (apps && !isAppsFetching) {
 			setApplicationData(
@@ -90,7 +97,7 @@ const ApplicationSettings = () => {
 		if (applicationList.length > 0 && applicationList !== applicationData) {
 			mutateAsync({
 				method: 'PATCH',
-				endpoint: 'api/applicationOrder',
+				endpoint: appsOrderEndpoint,
 				body: applicationList,
 			});
 		}
@@ -98,134 +105,116 @@ const ApplicationSettings = () => {
 
 	return (
 		<Stack w={'100%'}>
-			<Modal.Root
-				size={'60%'}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={modalOpened}
-				fullScreen={isMobile}
-				onClose={() => {
-					closeModal();
-				}}
-				style={modalStyle}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Add a new application</Modal.Title>
-						<Modal.CloseButton />
-					</Modal.Header>
-					<Modal.Body pb={'2rem'}>
-						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
-							<Stack gap={0} align='center'>
-								<Group justify='center'>
-									<TextInput
-										label={'Name'}
-										className={textInputClasses.settingsItem}
-										pt={16}
-										classNames={textInputClasses}
-										defaultValue={newApplication.name}
-										onChange={(event) => {
-											setNewApplication({
-												...newApplication,
-												name: event.target.value,
-											});
-										}}
-									/>
-									<TextInput
-										label={'Base URL'}
-										className={textInputClasses.settingsItem}
-										pt={16}
-										classNames={textInputClasses}
-										defaultValue={newApplication.baseUrl}
-										onChange={(event) => {
-											setNewApplication({
-												...newApplication,
-												baseUrl: event.target.value,
-											});
-										}}
-									/>
-								</Group>
-								<Group w={isMobile ? undefined : '60%'} justify='center'>
-									<TextInput
-										label={'URL'}
-										className={textInputClasses.settingsItem}
-										pt={16}
-										w={isMobile ? undefined : '91%'}
-										classNames={textInputClasses}
-										defaultValue={newApplication.url}
-										onChange={(event) => {
-											setNewApplication({
-												...newApplication,
-												url: event.target.value,
-											});
-										}}
-									/>
-								</Group>
-								<Group justify='center'>
-									<TextInput
-										label={'Icon'}
-										className={textInputClasses.settingsItem}
-										pt={16}
-										classNames={textInputClasses}
-										defaultValue={newApplication.icon}
-										onChange={(event) => {
-											setNewApplication({
-												...newApplication,
-												icon: event.target.value,
-											});
-										}}
-									/>
-									<TextInput
-										label={'Filter'}
-										className={textInputClasses.settingsItem}
-										pt={16}
-										classNames={textInputClasses}
-										defaultValue={newApplication.filterName}
-										onChange={(event) => {
-											setNewApplication({
-												...newApplication,
-												filterName: event.target.value,
-											});
-										}}
-									/>
-								</Group>
+			<AddItemModal
+				modalOpened={modalOpened}
+				handleClose={handleClose}
+				title={'Add a new application'}
+				body={
+					<Stack gap={0} align='center'>
+						<Group justify='center'>
+							<TextInput
+								label={'Name'}
+								className={textInputClasses.settingsItem}
+								pt={16}
+								classNames={textInputClasses}
+								defaultValue={newApplication.name}
+								onChange={(event) => {
+									setNewApplication({
+										...newApplication,
+										name: event.target.value,
+									});
+								}}
+							/>
+							<TextInput
+								label={'Base URL'}
+								className={textInputClasses.settingsItem}
+								pt={16}
+								classNames={textInputClasses}
+								defaultValue={newApplication.baseUrl}
+								onChange={(event) => {
+									setNewApplication({
+										...newApplication,
+										baseUrl: event.target.value,
+									});
+								}}
+							/>
+						</Group>
+						<Group w={isMobile ? undefined : '60%'} justify='center'>
+							<TextInput
+								label={'URL'}
+								className={textInputClasses.settingsItem}
+								pt={16}
+								w={isMobile ? undefined : '91%'}
+								classNames={textInputClasses}
+								defaultValue={newApplication.url}
+								onChange={(event) => {
+									setNewApplication({
+										...newApplication,
+										url: event.target.value,
+									});
+								}}
+							/>
+						</Group>
+						<Group justify='center'>
+							<TextInput
+								label={'Icon'}
+								className={textInputClasses.settingsItem}
+								pt={16}
+								classNames={textInputClasses}
+								defaultValue={newApplication.icon}
+								onChange={(event) => {
+									setNewApplication({
+										...newApplication,
+										icon: event.target.value,
+									});
+								}}
+							/>
+							<TextInput
+								label={'Filter'}
+								className={textInputClasses.settingsItem}
+								pt={16}
+								classNames={textInputClasses}
+								defaultValue={newApplication.filterName}
+								onChange={(event) => {
+									setNewApplication({
+										...newApplication,
+										filterName: event.target.value,
+									});
+								}}
+							/>
+						</Group>
 
-								<Divider color='black' my='lg' />
-								<Group pos={'absolute'} bottom={8}>
-									<Button
-										color={'green'}
-										styles={{ label: { color: 'black' } }}
-										onClick={() => {
-											if (newApplication) {
-												mutateAsync({
-													method: 'POST',
-													endpoint: endpoint,
-													body: newApplication,
-												});
-												closeModal();
-											}
-										}}
-									>
-										Save
-									</Button>
-									<Button
-										color={'red'}
-										styles={{ label: { color: 'black' } }}
-										onClick={() => {
-											closeModal();
-										}}
-									>
-										Cancel
-									</Button>
-								</Group>
-							</Stack>
-						</Card>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
+						<Divider color='black' my='lg' />
+						<Group pos={'absolute'} bottom={8}>
+							<Button
+								color={'green'}
+								styles={{ label: { color: 'black' } }}
+								onClick={() => {
+									if (newApplication) {
+										mutateAsync({
+											method: 'POST',
+											endpoint: appsEndpoint,
+											body: {
+												...newApplication,
+												index: applicationData.length,
+											},
+										}).then(handleClose);
+									}
+								}}
+							>
+								Save
+							</Button>
+							<Button
+								color={'red'}
+								styles={{ label: { color: 'black' } }}
+								onClick={handleClose}
+							>
+								Cancel
+							</Button>
+						</Group>
+					</Stack>
+				}
+			/>
 			<SettingsHeader
 				setDragging={setDragging}
 				openModal={openModal}

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -3,7 +3,6 @@ import {
 	Button,
 	Card,
 	Group,
-	Modal,
 	Stack,
 	Switch,
 	Text,
@@ -11,14 +10,15 @@ import {
 	Tooltip,
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
-import { IconTrash } from '@tabler/icons-react';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, modalClasses, textInputClasses } from 'styles';
+import { FiTrash } from 'react-icons/fi';
+import { cardClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
+import DeleteItemModal from '../Shared/DeleteItemModal';
 
 function DebouncedApplication({ application }: { application: Application }) {
-	const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
+	const { theme, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -39,65 +39,49 @@ function DebouncedApplication({ application }: { application: Application }) {
 	}, [update]);
 	return (
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
-			<Modal.Root
-				size={'60%'}
-				fullScreen={isMobile}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={modalOpened}
-				onClose={() => {
-					closeModal();
-				}}
-				style={modalStyle}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Delete Application</Modal.Title>
-						<Modal.CloseButton />
-					</Modal.Header>
-					<Modal.Body pb={'2rem'}>
-						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
-							<Text>Are you sure you want to delete this application?</Text>
-							<Text
-								style={{
-									fontWeight: 'bold',
-									fontSize: '20px',
-									padding: '8px',
-									margin: '8px',
-									borderRadius: '10px',
-									backgroundColor: 'var(--color-text-acc)',
-									color: 'var(--color-background)',
+			<DeleteItemModal
+				modalOpened={modalOpened}
+				handleClose={closeModal}
+				title='Delete Application'
+				body={
+					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+						<Text>Are you sure you want to delete this application?</Text>
+						<Text
+							style={{
+								fontWeight: 'bold',
+								fontSize: '20px',
+								padding: '8px',
+								margin: '8px',
+								borderRadius: '10px',
+								backgroundColor: 'var(--color-text-acc)',
+								color: 'var(--color-background)',
+							}}
+						>{`"${app.name}"`}</Text>
+						<Text c='red'>This action cannot be undone!</Text>
+						<Group pos={'absolute'} bottom={8}>
+							<Button
+								color={'red'}
+								styles={{ label: { color: 'black' } }}
+								onClick={() => {
+									handleDelete(app, 'api/apps');
+									closeModal();
 								}}
-							>{`"${app.name}"`}</Text>
-							<Text c='red'>This action cannot be undone!</Text>
-							<Group pos={'absolute'} bottom={8}>
-								<Button
-									color={'red'}
-									styles={{ label: { color: 'black' } }}
-									onClick={() => {
-										handleDelete(app, 'api/apps');
-										closeModal();
-									}}
-								>
-									Delete
-								</Button>
-								<Button
-									color={'grey'}
-									styles={{ label: { color: 'black' } }}
-									onClick={() => {
-										closeModal();
-									}}
-								>
-									Cancel
-								</Button>
-							</Group>
-						</Stack>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
+							>
+								Delete
+							</Button>
+							<Button
+								color={'grey'}
+								styles={{ label: { color: 'black' } }}
+								onClick={() => {
+									closeModal();
+								}}
+							>
+								Cancel
+							</Button>
+						</Group>
+					</Stack>
+				}
+			/>
 			<Tooltip
 				color={theme.primaryColor}
 				bd={`solid 1px ${theme.borderColor}`}
@@ -111,7 +95,7 @@ function DebouncedApplication({ application }: { application: Application }) {
 						openModal();
 					}}
 				>
-					<IconTrash />
+					<FiTrash />
 				</ActionIcon>
 			</Tooltip>
 			<Tooltip