Styled Homepage

src/pages/settings/components/SearchProviders.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 type { MRT_TableOptions } from "mantine-react-table";
+import SearchProviderColumns from "../../../DataTable/columns/SearchProviderColumns";
+import { Stack } from "@mantine/core";
+const SearchProviderSettings = () => {
+    const endpoint = "api/providers";
+	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [providerData, setProviderData] = useState<any>([]);
+
+    const {mutateAsync: createRow, isPending: isCreatingRow} = useMutationAPI();
+    const {mutateAsync: editRow, isPending: isEditingRow} = useMutationAPI();
+
+    useEffect(() => {
+        if(isFetched) {
+            setProviderData(data);
+        }
+    })
+
+    const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        exitCreatingMode,
+      }) => {
+        
+        createRow({method: "POST", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Search provider created successfully");
+        })
+        exitCreatingMode();
+      };
+    const handleEditRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+        values,
+        table,
+      }) => {
+        editRow({method: "PATCH", endpoint: endpoint, body: values}).then(() => {
+            toast.success("Search provider updated successfully");
+        });
+        table.setEditingRow(null);
+      };
+
+	return (
+        <Stack>
+            <h2>Search Providers</h2>
+            <DataTable
+                tableName="Categories"
+                columns={SearchProviderColumns()}
+                tableData={providerData}
+                isFetching={isFetching}
+                isLoading={isLoading}
+                onCreatingRowSave={handleCreateRow}
+                onEditingRowSave={handleEditRow}
+            />
+        </Stack>
+    )
+};
+export default SearchProviderSettings;