Working empty version

2024-08-28 17:06:37 -05:00
parent 7990f164d6
commit 18db0c17ff
18 changed files with 198 additions and 238 deletions
--- a/src/pages/homepage/Homepage.tsx
+++ b/src/pages/homepage/Homepage.tsx
@@ -13,9 +13,13 @@ import { useLocalStorage } from '@mantine/hooks';
 export default function Homepage({ theme }: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
-	const [contentType, setContentType] = useLocalStorage<any>({
-		key: 'contenttype',
-		defaultValue: 'All',
+	const [appFilter, setAppFilter] = useLocalStorage<[any]>({
+		key: 'appFilter',
+		defaultValue: ['All'],
+	});
+	const [bookmarkFilter, setBookmarkFilter] = useLocalStorage<[any]>({
+		key: 'bookmarkFilter',
+		defaultValue: ['All'],
 	});
 	function date() {
 		const currentDate = new Date();
@@ -33,18 +37,18 @@ export default function Homepage({ theme }: any) {
 		const greet = Math.floor(currentTime.getHours() / 6);
 		const easterEggChance = Math.floor(Math.random() * 100);
 		let timeBased: any = [];
-		let easterEggs: any = [];
+		let customGreetings: any = [];
 		for (const l of list) {
-			if (l.easteregg === 'N') {
+			if (l.customGreeting === 0) {
 				timeBased = timeBased.concat(l);
 			} else {
-				easterEggs = easterEggs.concat(l);
+				customGreetings = customGreetings.concat(l);
 			}
 		}
-		if (easterEggChance > 10 || easterEggs.length === 0) {
+		if (easterEggChance > 10 || customGreetings.length === 0) {
 			return timeBased[greet].message;
 		}
-		return easterEggs[Math.floor(Math.random() * easterEggs.length)].message;
+		return customGreetings[Math.floor(Math.random() * customGreetings.length)].message;
 	}

 	useEffect(() => {
@@ -57,12 +61,14 @@ export default function Homepage({ theme }: any) {
 		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search />
 			<Header date={date()} greet={displayedGreeting} />
-			<Applications contentType={contentType} />
-			<Bookmarks contentType={contentType} />
+			<Applications contentType={appFilter} />
+			<Bookmarks contentType={bookmarkFilter} />
 			<SettingsButton
 				theme={theme}
-				contentType={contentType}
-				setContentType={setContentType}
+				setAppFilter={setAppFilter}
+				appFilter={appFilter}
+				setBookmarkFilter={setBookmarkFilter}
+				bookmarkFilter={bookmarkFilter}
 			/>
 		</Stack>
 	);
--- a/src/pages/homepage/components/Applications.tsx
+++ b/src/pages/homepage/components/Applications.tsx
@@ -13,38 +13,45 @@ function Applications({ contentType }: any) {
 		}
 	}, [isFetching]);
 	return (
-		<Stack id='apps' style={{ gap: 0 }}>
-			<Text className={texts.sectionTitle} classNames={texts}>
-				Applications
-			</Text>
-			<Stack
-				style={{
-					background: 'var(--color-background)',
-					gap: '.25rem',
-					backgroundSize: 'cover',
-					borderBottom: '0px solid',
-					display: 'grid',
-					gridColumnGap: '5px',
-					gridRowGap: '5px',
-					gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
-					gridTemplateRows: '64px',
-					paddingBottom: 'var(--module-spacing)',
-				}}
-			>
-				{applications?.map((item: any) => {
-					if (item.category === contentType || contentType === 'All')
-						return (
-							<AppItem
-								key={item.name}
-								name={item.name}
-								url={item.url}
-								icon={item.icon}
-								category={item.category}
-							/>
-						);
-				})}
-			</Stack>
-		</Stack>
+		<>
+			{applications.length > 0 && (
+				<Stack id='apps' style={{ gap: 0 }}>
+					<Text className={texts.sectionTitle} classNames={texts}>
+						Applications
+					</Text>
+					<Stack
+						style={{
+							background: 'var(--color-background)',
+							gap: '.25rem',
+							backgroundSize: 'cover',
+							borderBottom: '0px solid',
+							display: 'grid',
+							gridColumnGap: '5px',
+							gridRowGap: '5px',
+							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
+							gridTemplateRows: '64px',
+							paddingBottom: 'var(--module-spacing)',
+						}}
+					>
+						{applications?.map((application: any) => {
+							if (
+								contentType.includes(application.filterName) ||
+								contentType.includes('All')
+							)
+								return (
+									<AppItem
+										key={application.name}
+										name={application.name}
+										url={application.url}
+										icon={application.icon}
+										category={application.category}
+									/>
+								);
+						})}
+					</Stack>
+				</Stack>
+			)}
+		</>
 	);
 }

--- a/src/pages/homepage/components/Bookmarks.tsx
+++ b/src/pages/homepage/components/Bookmarks.tsx
@@ -20,7 +20,6 @@ function Links({ contentType }: any) {
 			setCategories(groupData);
 		}
 	}, [linksIsFetched, groupsIsFetched]);
-
 	return (
 		<>
 			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
@@ -39,13 +38,16 @@ function Links({ contentType }: any) {
 						}}
 					>
 						{categories.map((category: any) => {
-							if (category.column_filter === contentType || contentType === 'All') {
+							if (
+								contentType.includes(category.filterName) ||
+								contentType.includes('All')
+							) {
 								return (
 									<LinkGroups
 										key={category.id}
-										category={category.category_name}
+										category={category.categoryName}
 										links={bookmarks.filter(
-											(bookmark: any) => bookmark.category === category.category_index,
+											(bookmark: any) => bookmark.category === category.categoryName,
 										)}
 									/>
 								);
--- a/src/pages/homepage/components/MessageInfo.jsx
+++ b/src/pages/homepage/components/MessageInfo.jsx
@@ -22,7 +22,7 @@ function MessageInfo() {
 							group={index + 1}
 							index={greeting.index}
 							greeting={greeting.message}
-							easterEgg={greeting.easteregg}
+							easterEgg={greeting.customGreeting}
 						/>
 					))}
 				</div>
--- a/src/pages/homepage/components/Search.tsx
+++ b/src/pages/homepage/components/Search.tsx
@@ -63,6 +63,7 @@ export default function Search() {
 			}}
 		>
 			<TextInput
+				autoFocus
 				className={textInputClasses.search}
 				classNames={textInputClasses}
 				spellCheck='true'
--- a/src/pages/homepage/components/SettingsButton.tsx
+++ b/src/pages/homepage/components/SettingsButton.tsx
@@ -1,4 +1,4 @@
-import { Button, Menu, NavLink, Select } from '@mantine/core';
+import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
 import { useQueryAPI } from '../../../hooks/useAPI';
@@ -7,7 +7,13 @@ import menu from '../../../styles/Menu.module.css';
 import navLink from '../../../styles/NavLink.module.css';
 import selectClasses from '../../../styles/Select.module.css';

-function SettingsButton({ contentType, setContentType, theme }: any) {
+function SettingsButton({
+	appFilter,
+	setAppFilter,
+	bookmarkFilter,
+	setBookmarkFilter,
+	theme,
+}: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);

@@ -15,7 +21,7 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
 		if (data) {
 			const list: [any] =
 				data.map((category: any) => {
-					return { value: category.category, label: category.category };
+					return { value: category.filterName, label: category.filterName };
 				}) || [];
 			list.unshift({ value: 'All', label: 'All' });
 			setCategories(list);
@@ -57,13 +63,24 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
 						classNames={navLink}
 					/>
 				</NavLink>
-				<Select
-					label='Homepage Filter'
+				<MultiSelect
+					label='App Filter'
 					data={categories ?? []}
-					defaultValue={contentType}
+					defaultValue={appFilter}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						setContentType(data);
+						setAppFilter(data);
+					}}
+					classNames={selectClasses}
+					comboboxProps={{ withinPortal: false }}
+				/>
+				<MultiSelect
+					label='Bookmark Filter'
+					data={categories ?? []}
+					defaultValue={bookmarkFilter}
+					withCheckIcon={false}
+					onChange={(data: any) => {
+						setBookmarkFilter(data);
 					}}
 					classNames={selectClasses}
 					comboboxProps={{ withinPortal: false }}
--- a/src/pages/settings/components/Bookmarks.tsx
+++ b/src/pages/settings/components/Bookmarks.tsx
@@ -11,9 +11,9 @@ const BookmarkSettings = () => {
 	});
 	const {
 		data: groupData,
-		isFetching: groupDataisFetching,
-		isLoading: groupDataisLoading,
-		isFetched: groupDataisFetched,
+		isFetching: groupDataIsFetching,
+		isLoading: groupDataIsLoading,
+		isFetched: groupDataIsFetched,
 	} = useQueryAPI({ endpoint: 'api/categories' });
 	const [bookmarkData, setBookmarkData] = useState<any>([]);
 	const [groups, setGroups] = useState([]);
@@ -26,15 +26,14 @@ const BookmarkSettings = () => {
 	});

 	useEffect(() => {
-		if (groupDataisFetched) {
-			const groupList = groupData.map((category: any) => {
-				return category.category_name;
+		if (groupData) {
+			const groupList = groupData?.map((category: any) => {
+				return category.categoryName;
 			});
 			setGroups(groupList);
 			setFullyFetched(true);
 		}
-	}, [groupDataisFetched]);
-
+	}, [groupData]);
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -42,11 +41,12 @@ const BookmarkSettings = () => {
 			</Text>
 			<DataTable
 				tableName='Applications'
-				columns={BookmarkColumns(groups, groupData)}
+				columns={BookmarkColumns(groups)}
 				tableData={bookmarkData}
 				isFetching={isFetching}
 				isLoading={isLoading}
 				endpoint={endpoint}
+				grouping='category'
 			/>
 		</Stack>
 	);
--- a/src/pages/settings/components/Personalization.tsx
+++ b/src/pages/settings/components/Personalization.tsx
@@ -5,7 +5,7 @@ import PersonalizationColumns from '../../../DataTable/columns/PersonalizationCo
 import { useQueryAPI } from '../../../hooks/useAPI';
 import { textClasses } from '../../../styles';
 const PersonalizationSettings = () => {
-	const endpoint = 'api/personaldata';
+	const endpoint = 'api/personalData';
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});
--- a/src/pages/settings/components/ThemeModalContent.tsx
+++ b/src/pages/settings/components/ThemeModalContent.tsx
@@ -22,7 +22,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					}}
 				>
 					<Icon
-						style={{ color: previewTheme.theme.colortextpri }}
+						style={{ color: previewTheme.theme.primary }}
 						icon={'mdi:check'}
 						height={32}
 						width={32}
@@ -43,7 +43,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							fontSize: 11,
 							fontStyle: 'normal',
-							color: previewTheme.theme.colortextpri,
+							color: previewTheme.theme.primary,
 							fontFamily:
 								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 							margin: 0,
@@ -56,7 +56,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							fontSize: 11,
 							fontStyle: 'italic',
-							color: previewTheme.theme.colortextacc,
+							color: previewTheme.theme.accent,
 							fontFamily:
 								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 							margin: 0,
@@ -73,14 +73,14 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 		<Stack
 			style={{
 				width: '100%',
-				backgroundColor: selectedTheme.colorbackground,
+				backgroundColor: selectedTheme.backgroundColor,
 				borderRadius: '10px',
 			}}
 		>
 			<Group
 				justify='center'
 				style={{
-					color: selectedTheme.colortextpri,
+					color: selectedTheme.primary,
 					paddingTop: '1rem',
 				}}
 			>
@@ -97,14 +97,14 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					textTransform: 'uppercase',
 					marginTop: '20px',
 					marginBottom: '20px',
-					color: selectedTheme.colortextpri,
+					color: selectedTheme.primary,
 				}}
 			>
 				Applications
 			</Text>
 			<Stack
 				style={{
-					background: selectedTheme.colorbackground,
+					background: selectedTheme.backgroundColor,
 					gap: '.25rem',
 					backgroundSize: 'cover',
 					borderBottom: '0px solid',
@@ -134,7 +134,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					textTransform: 'uppercase',
 					marginTop: '20px',
 					marginBottom: '20px',
-					color: selectedTheme.colortextpri,
+					color: selectedTheme.primary,
 				}}
 			>
 				Bookmarks
@@ -166,7 +166,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							height: '10px',
 							width: 'auto',
-							color: selectedTheme.colortextacc,
+							color: selectedTheme.accent,
 							textTransform: 'uppercase',
 							marginTop: '20px',
 							marginBottom: '20px',
@@ -179,7 +179,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.colortextpri,
+							color: selectedTheme.primary,
 						}}
 						component='a'
 					>
@@ -190,7 +190,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.colortextpri,
+							color: selectedTheme.primary,
 						}}
 						component='a'
 					>
@@ -213,7 +213,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							height: '10px',
 							width: 'auto',
-							color: selectedTheme.colortextacc,
+							color: selectedTheme.accent,
 							textTransform: 'uppercase',
 							marginTop: '20px',
 							marginBottom: '20px',
@@ -226,7 +226,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.colortextpri,
+							color: selectedTheme.primary,
 						}}
 						component='a'
 					>
@@ -237,7 +237,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.colortextpri,
+							color: selectedTheme.primary,
 						}}
 						component='a'
 					>
--- a/src/pages/settings/components/Themes.tsx
+++ b/src/pages/settings/components/Themes.tsx
@@ -123,11 +123,11 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('primary');
 											openPicker();
-											setColorValue(selectedTheme.colortextpri);
+											setColorValue(selectedTheme.primary);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colortextpri}
+										color={selectedTheme.primary}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
@@ -137,11 +137,11 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('accent');
 											openPicker();
-											setColorValue(selectedTheme.colortextacc);
+											setColorValue(selectedTheme.accent);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colortextacc}
+										color={selectedTheme.accent}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
@@ -151,11 +151,11 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('background');
 											openPicker();
-											setColorValue(selectedTheme.colorbackground);
+											setColorValue(selectedTheme.backgroundColor);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colorbackground}
+										color={selectedTheme.backgroundColor}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
@@ -165,11 +165,11 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('border');
 											openPicker();
-											setColorValue(selectedTheme.colorborder);
+											setColorValue(selectedTheme.border);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colorborder}
+										color={selectedTheme.border}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
@@ -179,31 +179,34 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('searchbackground');
 											openPicker();
-											setColorValue(selectedTheme.colorsearchbackground);
+											setColorValue(selectedTheme.searchColor);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colorsearchbackground}
+										color={selectedTheme.searchColor}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
 								<Group c={'black'} justify='space-between'>
-								<TextInput
-									label='Background Image Path'
-									value={selectedTheme.imagebackground}
-									onChange={(e) =>
-										setSelectedTheme({ ...selectedTheme, imagebackground: e.target.value })
-									}
-									styles={{
-										label: {
-											color: 'black',
-										},
-										input: {
-											color: 'black',
-											backgroundColor: 'white',
-										},
-									}}
-								/>
+									<TextInput
+										label='Background Image Path'
+										value={selectedTheme.backgroundImage}
+										onChange={(e) =>
+											setSelectedTheme({
+												...selectedTheme,
+												backgroundImage: e.target.value,
+											})
+										}
+										styles={{
+											label: {
+												color: 'black',
+											},
+											input: {
+												color: 'black',
+												backgroundColor: 'white',
+											},
+										}}
+									/>
 								</Group>
 							</Stack>
 							<Stack h={'100%'} w={'50%'} align='center' justify='center'>
@@ -220,31 +223,31 @@ function ThemesSettings({ theme }: any) {
 															case 'primary':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colortextpri: colorValue,
+																	primary: colorValue,
 																});
 																break;
 															case 'accent':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colortextacc: colorValue,
+																	accent: colorValue,
 																});
 																break;
 															case 'background':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colorbackground: colorValue,
+																	backgroundColor: colorValue,
 																});
 																break;
 															case 'border':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colorborder: colorValue,
+																	border: colorValue,
 																});
 																break;
 															case 'searchbackground':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colorsearchbackground: colorValue,
+																	searchColor: colorValue,
 																});
 																break;
 														}
@@ -295,12 +298,12 @@ function ThemesSettings({ theme }: any) {
 							setSelectedTheme({
 								id: undefined,
 								name: 'default',
-								imagebackground: 'none',
-								colorbackground: '#EEEEEE',
-								colorsearchbackground: '#00000033',
-								colortextpri: '#222222',
-								colortextacc: '#5c5c5c',
-								colorborder: '#5c5c5c',
+								backgroundImage: 'none',
+								backgroundColor: '#EEEEEE',
+								searchColor: '#00000033',
+								primary: '#222222',
+								accent: '#5c5c5c',
+								border: '#5c5c5c',
 							});
 							open();
 						}}
@@ -316,9 +319,9 @@ function ThemesSettings({ theme }: any) {
 									w={'100%'}
 									h={'75px'}
 									style={{
-										backgroundColor: theme.colorbackground,
-										border: `solid ${theme.colorborder}`,
-										color: theme.colortextpri,
+										backgroundColor: theme.backgroundColor,
+										border: `solid ${theme.border}`,
+										color: theme.primary,
 									}}
 									data-theme={theme.name}
 									onClick={() => {
@@ -337,11 +340,11 @@ function ThemesSettings({ theme }: any) {
 									>
 										<FiEdit />
 									</ActionIcon>
-									<ColorSwatch color={theme.colorbackground} />
-									<ColorSwatch color={theme.colorsearchbackground} />
-									<ColorSwatch color={theme.colortextpri} />
-									<ColorSwatch color={theme.colortextacc} />
-									<ColorSwatch color={theme.colorborder} />
+									<ColorSwatch color={theme.backgroundColor} />
+									<ColorSwatch color={theme.searchColor} />
+									<ColorSwatch color={theme.primary} />
+									<ColorSwatch color={theme.accent} />
+									<ColorSwatch color={theme.border} />

 									<ActionIcon
 										className={actionIconClasses.editButton}