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/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}