Styles, API calls, and more

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;