Styles, API calls, and more

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;