Styles, API calls, and more

src/pages/homepage/Homepage.tsx

@@ -1,5 +1,4 @@
 import { Stack } from '@mantine/core';
-import { useEffect, useState } from 'react';
 import stackClasses from '../../styles/Stack.module.css';
 import {useQueryAPI} from '../../hooks/useAPI';
 import Search from './components/Search';
@@ -9,6 +8,7 @@ import Bookmarks from './components/Bookmarks';
 import SettingsButton from './components/SettingsButton';
 import { useAtom } from 'jotai';
 import { HomepageFilters } from '../../contexts/HomepageFilters';
+import { useEffect, useState } from 'react';
 
 
 export default function Homepage() {

src/pages/homepage/components/AppItem.tsx

@@ -35,9 +35,10 @@ function AppItem({ url, icon, name }: any) {
 					gap: 0,
 				}}
 			>
-				<Text className={texts.appName}>{name}</Text>
+				<Text className={texts.appName} classNames={texts}>{name}</Text>
 				<Text
 					className={texts.appUrl}
+					classNames={texts}
 					style={{
 						textDecoration: textDecoration,
 					}}

src/pages/homepage/components/Applications.tsx

@@ -16,10 +16,10 @@ function Applications() {
 
 	return (
 		<Stack id='apps' style={{ gap: 0 }}>
-			<Text className={texts.sectionTitle}>Applications</Text>
+			<Text className={texts.sectionTitle} classNames={texts}>Applications</Text>
 			<Stack
 				style={{
-					// background: 'var(--color-background)',
+					background: 'var(--color-background)',
 					gap: '.25rem',
 					backgroundSize: 'cover',
 					borderBottom: '0px solid',

src/pages/homepage/components/Bookmarks.tsx

@@ -25,7 +25,7 @@ function Links() {
 		<>
 			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
 				<Stack id='links' style={{ gap: 0 }}>
-					<Text className={texts.sectionTitle}>Bookmarks</Text>
+					<Text className={texts.sectionTitle} classNames={texts}>Bookmarks</Text>
 					<Stack
 						style={{
 							display: 'grid',

src/pages/homepage/components/LinkGroups.tsx

@@ -11,7 +11,7 @@ function LinkGroups({ links, category }: any) {
 				lineHeight: '1.5rem',
 			}}
 		>
-			<Text className={texts.linkCategory}>{category}</Text>
+			<Text className={texts.linkCategory} classNames={texts}>{category}</Text>
 			{links?.map((link: any) => (
 				<LinkItem key={link.name} link={link} />
 			))}

src/pages/homepage/components/LinkItem.tsx

@@ -3,7 +3,7 @@ import texts from '../../../styles/Text.module.css';
 
 function LinkItem({ link }: any) {
 	return (
-		<Text className={texts.linkItem} component='a' href={link.url}>
+		<Text className={texts.linkItem} classNames={texts} component='a' href={link.url}>
 			{link.name}
 		</Text>
 	);

src/pages/homepage/components/SettingsButton.tsx

@@ -24,7 +24,9 @@ function SettingsButton() {
 	
 	useEffect(() => {
 		if(data) {
-			setCategories(data.map((category: any) => {return {value: category.category, label: category.category}}));
+			let list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
+			list.unshift({value: 'All', label: 'All'});
+			setCategories(list);
 		}
 	}, [data, isFetched]);
 
@@ -41,7 +43,9 @@ function SettingsButton() {
 			withArrow
 			shadow='md'
 			position='top'
-			classNames={menu}
+			classNames={{
+				dropdown: menu.dropdown
+			}}
 			styles={{
 				dropdown: {
 					backgroundColor: 'var(--color-background)',
@@ -49,7 +53,7 @@ function SettingsButton() {
 			}}
 		>
 			<Menu.Target>
-				<Button className={button.settingsButton}>
+				<Button className={button.settingsButton} classNames={button}>
 					<FiMenu />
 				</Button>
 			</Menu.Target>

src/pages/settings/Settings.tsx

@@ -0,0 +1,38 @@
+import { ActionIcon, Group, Stack, Tabs } from "@mantine/core";
+import tabClasses from '../../styles/Tabs.module.css';
+import Personalization from "./components/Personalization";
+import { FiArrowLeftCircle } from "react-icons/fi";
+import { actionIconClasses } from "../../styles";
+import Messages from "./components/Messages";
+import Applications from "./components/Applications";
+import Bookmarks from "./components/Bookmarks";
+
+function Settings() {
+	return (
+        <Stack h={'100vh'} px={'2rem'}>
+            <Group gap={0} >
+                <ActionIcon className={actionIconClasses.backButton} classNames={actionIconClasses} component="a" href="/trigger"><FiArrowLeftCircle/></ActionIcon>
+                <h1>Settings</h1>
+            </Group>
+            <Tabs keepMounted orientation="vertical" defaultValue={'personalization'} className={tabClasses.settingsTabs} classNames={tabClasses}>
+                <Tabs.List>
+                    <Tabs.Tab value="personalization">Personal Info</Tabs.Tab>
+                    <Tabs.Tab value="messages">Messages</Tabs.Tab>
+                    <Tabs.Tab value="applications">Applications</Tabs.Tab>
+                    <Tabs.Tab value="bookmarksCategories">Bookmark Categories</Tabs.Tab>
+                    <Tabs.Tab value="bookmarks">Bookmarks</Tabs.Tab>
+                    <Tabs.Tab value="themes">Themes</Tabs.Tab>
+                    <Tabs.Tab value="providers">Search Providers</Tabs.Tab>
+                </Tabs.List>
+                <Tabs.Panel value="personalization"><Personalization/></Tabs.Panel>
+                <Tabs.Panel value="messages"><Messages/></Tabs.Panel>
+                <Tabs.Panel value="applications"><Applications/></Tabs.Panel>
+                <Tabs.Panel value="bookmarksCategories">Bookmark Categories</Tabs.Panel>
+                <Tabs.Panel value="bookmarks"><Bookmarks/></Tabs.Panel>
+                <Tabs.Panel value="themes">Themes</Tabs.Panel>
+                <Tabs.Panel value="providers">Search Providers</Tabs.Panel>
+            </Tabs>
+        </Stack>
+	);
+}
+export default Settings;

src/pages/settings/components/Applications.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { DataTable } from "../../../DataTable/DataTable";
+import { toast } from "react-toastify";
+import { MRT_TableOptions } from "mantine-react-table";
+import ApplicationColumns from "../../../DataTable/columns/ApplicationColumns";
+import { Stack } from "@mantine/core";
+const ApplicationSettings = () => {
+    const endpoint = "api/apps";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [applicationData, setApplicationData] = useState<any>([]);
+
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setApplicationData(data);
+        }
+    })
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Application created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Application updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <Stack>
+            <h2>Applications</h2>
+            <DataTable
+                tableName="Applications"
+                columns={ApplicationColumns()}
+                tableData={applicationData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default ApplicationSettings;

src/pages/settings/components/Bookmarks.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { DataTable } from "../../../DataTable/DataTable";
+import { toast } from "react-toastify";
+import { MRT_TableOptions } from "mantine-react-table";
+import { Stack } from "@mantine/core";
+import BookmarkColumns from "../../../DataTable/columns/BookmarkColumns";
+const BookmarkSettings = () => {
+    const endpoint = "api/links";
+    const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const {
+		data: groupData,
+		isFetching: groupDataisFetching,
+		isLoading: groupDataisLoading,
+		isFetched: groupDataisFetched,
+	} = useQueryAPI({ endpoint: "api/categories" });
+	const [bookmarkData, setBookmarkData] = useState<any>([]);
+    const [groups, setGroups] = useState([]);
+    const [fullyFetched, setFullyFetched] = useState(false);
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setBookmarkData(data);
+        }
+    })
+
+	useEffect(() => {
+		if (groupDataisFetched) {
+			let groupList = groupData.map((category: any) => {
+				return category.category_name;
+			});
+			setGroups(groupList);
+			setFullyFetched(true);
+		}
+	}, [groupDataisFetched]);
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Application created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Application updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <Stack>
+            <h2>Bookmarks</h2>
+            <DataTable
+                tableName="Applications"
+                columns={BookmarkColumns(groups, groupData)}
+                tableData={bookmarkData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default BookmarkSettings;

src/pages/settings/components/Messages.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { DataTable } from "../../../DataTable/DataTable";
+import { toast } from "react-toastify";
+import { MRT_TableOptions } from "mantine-react-table";
+import MessagesColumns from "../../../DataTable/columns/MessagesColumns";
+import { Stack } from "@mantine/core";
+const MessageSettings = () => {
+    const endpoint = "api/messages";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [messageData, setMessageData] = useState<any>([]);
+
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setMessageData(data);
+        }
+    })
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Message created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Message updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <Stack>
+            <h2>Messages</h2>
+            <DataTable
+                tableName="Messages"
+                columns={MessagesColumns()}
+                tableData={messageData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default MessageSettings;

src/pages/settings/components/Personalization.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import {useMutationAPI, useQueryAPI} from "../../../hooks/useAPI";
+import { DataTable } from "../../../DataTable/DataTable";
+import PersonalizationColumns from "../../../DataTable/columns/PersonalizationColumns";
+import { toast } from "react-toastify";
+import { MRT_TableOptions } from "mantine-react-table";
+const PersonalizationSettings = () => {
+    const endpoint = "api/personaldata";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [personalData, setPersonalData] = useState<any>([]);
+
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setPersonalData(data);
+        }
+    })
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Personalization created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Personalization updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <>
+            <h2>Personalization</h2>
+            <DataTable
+                tableName="Personalization"
+                columns={PersonalizationColumns()}
+                tableData={personalData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </>
+    )
+};
+export default PersonalizationSettings;