Styles, API calls, and more

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;