admin_lsac 1.2.8 → 1.2.9

package/dist/App.js

@@ -5,8 +5,8 @@ var react_1 = require("@chakra-ui/react");
 var react_router_dom_1 = require("react-router-dom");
 var Page_1 = require("./components/Page");
 var Page_2 = require("./components/Page");
-function AdminPanel(_a) {
+function App(_a) {
     var pages = _a.pages, basePath = _a.basePath;
-    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pages.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/").concat((0, Page_2.pageToUrl)(page)), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: page, basePath: basePath }) })); }), pages[0] ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/*"), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath }) })) : null] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pages.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/").concat((0, Page_2.pageToUrl)(page)), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001" }) })); }), pages[0] ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/*"), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001" }) })) : null] }) }) }));
 }
-exports.default = AdminPanel;
+exports.default = App;

package/dist/cjs/App.js

@@ -5,8 +5,8 @@ var react_1 = require("@chakra-ui/react");
 var react_router_dom_1 = require("react-router-dom");
 var Page_1 = require("./components/Page");
 var Page_2 = require("./components/Page");
-function AdminPanel(_a) {
+function App(_a) {
     var pages = _a.pages, basePath = _a.basePath;
-    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pages.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/").concat((0, Page_2.pageToUrl)(page)), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: page, basePath: basePath }) })); }), pages[0] ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/*"), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath }) })) : null] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [pages.map(function (page) { return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/").concat((0, Page_2.pageToUrl)(page)), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001" }) })); }), pages[0] ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "".concat(basePath, "/*"), element: (0, jsx_runtime_1.jsx)(Page_1.AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001" }) })) : null] }) }) }));
 }
-exports.default = AdminPanel;
+exports.default = App;

package/dist/cjs/components/Page.js

@@ -15,6 +15,8 @@ var material_react_table_1 = require("material-react-table");
 var export_to_csv_1 = require("export-to-csv");
 var sweetalert2_1 = __importDefault(require("sweetalert2"));
 var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var socket_io_client_1 = require("socket.io-client");
+var websockets_1 = require("../utils/websockets");
 function pageToUrl(page) {
     return "".concat(page.name.toLowerCase().replace(" ", "_"));
 }
@@ -63,17 +65,31 @@ function exportToCSV(data, filename) {
 }
 function AdminPage(_a) {
     var _b;
-    var pages = _a.pages, selectedPage = _a.selectedPage, basePath = _a.basePath;
-    var _c = (0, react_3.useDisclosure)(), isOpen = _c.isOpen, onOpen = _c.onOpen, onClose = _c.onClose;
-    var _d = (0, react_1.useState)({}), selectedAction = _d[0], setSelectedAction = _d[1];
-    var _e = (0, react_1.useState)([]), data = _e[0], setData = _e[1];
-    var _f = (0, react_1.useState)([]), displayData = _f[0], setDisplayData = _f[1];
-    var _g = (0, react_1.useState)(), rowId = _g[0], setRowId = _g[1];
+    var pages = _a.pages, selectedPage = _a.selectedPage, basePath = _a.basePath, _c = _a.apiURL, apiURL = _c === void 0 ? '' : _c;
+    var _d = (0, react_3.useDisclosure)(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
+    var _e = (0, react_1.useState)({}), selectedAction = _e[0], setSelectedAction = _e[1];
+    var _f = (0, react_1.useState)([]), data = _f[0], setData = _f[1];
+    var _g = (0, react_1.useState)([]), displayData = _g[0], setDisplayData = _g[1];
+    var _h = (0, react_1.useState)(), rowId = _h[0], setRowId = _h[1];
+    var _j = (0, react_1.useState)(false), refetch = _j[0], setRefetch = _j[1];
+    var _k = (0, react_1.useState)(socket_io_client_1.io), socket = _k[0], setSocket = _k[1];
+    (0, websockets_1.newSocket)(setSocket, apiURL);
     (0, react_1.useEffect)(function () {
         selectedPage.getRequest().then(function (resArray) {
             setData(resArray);
+            setRefetch(false);
         });
-    }, []);
+    }, [refetch]); // Do not remove 'refetch' from here !!!
+    (0, react_1.useEffect)(function () {
+        socket.on("updateData", function (message) {
+            console.log("Message emitted from socket: " + message);
+            setRefetch(true);
+            var rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
+            if (rowActionsMenu) {
+                rowActionsMenu.remove();
+            }
+        });
+    }, [socket, selectedPage]);
     (0, react_1.useEffect)(function () {
         setDisplayData(data.map(function (table_data) {
             return selectedPage.tableFields.map(function (field) { return field.access(table_data); });
@@ -98,7 +114,6 @@ function AdminPage(_a) {
                     } }) }), (0, jsx_runtime_1.jsxs)(react_3.Modal, { size: "6xl", isOpen: isOpen, onClose: onClose, children: [(0, jsx_runtime_1.jsx)(react_3.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_3.ModalContent, { children: [(0, jsx_runtime_1.jsx)(react_3.ModalHeader, { children: selectedAction.name }), (0, jsx_runtime_1.jsx)(react_3.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_3.ModalBody, { children: [selectedAction.fields && ((_b = selectedAction.fields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ((0, jsx_runtime_1.jsx)(GenericForm_1.GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : ((0, jsx_runtime_1.jsx)(react_3.Button, { colorScheme: "blue", mr: 3, onClick: function () {
                                             selectedAction.onSubmit(rowId);
                                             onClose();
-                                            window.location.reload();
                                         }, children: "Confirm Action" })), (0, jsx_runtime_1.jsx)(react_3.Button, { colorScheme: "red", mr: 3, onClick: onClose, children: "Close" })] })] })] })] }));
 }
 exports.AdminPage = AdminPage;

package/dist/cjs/index.js

@@ -9,9 +9,9 @@ var client_1 = __importDefault(require("react-dom/client"));
 require("./index.css");
 var App_1 = __importDefault(require("./App"));
 var reportWebVitals_1 = __importDefault(require("./reportWebVitals"));
-var event_1 = require("./pages/event");
+var schema_config_1 = require("./schema/schema.config");
 var root = client_1.default.createRoot(document.getElementById("root"));
-root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App_1.default, { pages: [event_1.event], basePath: "" }) }));
+root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App_1.default, { pages: schema_config_1.pages, basePath: "" }) }));
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

package/dist/cjs/utils/websockets.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.newSocket = void 0;
+var socket_io_client_1 = __importDefault(require("socket.io-client"));
+var react_1 = require("react");
+var Socket = function (setSocket, apiURL) {
+    (0, react_1.useEffect)(function () {
+        var socketRef = (0, socket_io_client_1.default)(apiURL, {
+            transports: ["websocket"],
+        });
+        setSocket(socketRef);
+        return function () {
+            socketRef.removeAllListeners();
+            socketRef.disconnect();
+        };
+    }, []);
+};
+var newSocket = function (setSocket, apiURL) { return Socket(setSocket, apiURL); };
+exports.newSocket = newSocket;

package/dist/components/Page.js

@@ -15,6 +15,8 @@ var material_react_table_1 = require("material-react-table");
 var export_to_csv_1 = require("export-to-csv");
 var sweetalert2_1 = __importDefault(require("sweetalert2"));
 var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+var socket_io_client_1 = require("socket.io-client");
+var websockets_1 = require("../utils/websockets");
 function pageToUrl(page) {
     return "".concat(page.name.toLowerCase().replace(" ", "_"));
 }
@@ -63,17 +65,31 @@ function exportToCSV(data, filename) {
 }
 function AdminPage(_a) {
     var _b;
-    var pages = _a.pages, selectedPage = _a.selectedPage, basePath = _a.basePath;
-    var _c = (0, react_3.useDisclosure)(), isOpen = _c.isOpen, onOpen = _c.onOpen, onClose = _c.onClose;
-    var _d = (0, react_1.useState)({}), selectedAction = _d[0], setSelectedAction = _d[1];
-    var _e = (0, react_1.useState)([]), data = _e[0], setData = _e[1];
-    var _f = (0, react_1.useState)([]), displayData = _f[0], setDisplayData = _f[1];
-    var _g = (0, react_1.useState)(), rowId = _g[0], setRowId = _g[1];
+    var pages = _a.pages, selectedPage = _a.selectedPage, basePath = _a.basePath, _c = _a.apiURL, apiURL = _c === void 0 ? '' : _c;
+    var _d = (0, react_3.useDisclosure)(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
+    var _e = (0, react_1.useState)({}), selectedAction = _e[0], setSelectedAction = _e[1];
+    var _f = (0, react_1.useState)([]), data = _f[0], setData = _f[1];
+    var _g = (0, react_1.useState)([]), displayData = _g[0], setDisplayData = _g[1];
+    var _h = (0, react_1.useState)(), rowId = _h[0], setRowId = _h[1];
+    var _j = (0, react_1.useState)(false), refetch = _j[0], setRefetch = _j[1];
+    var _k = (0, react_1.useState)(socket_io_client_1.io), socket = _k[0], setSocket = _k[1];
+    (0, websockets_1.newSocket)(setSocket, apiURL);
     (0, react_1.useEffect)(function () {
         selectedPage.getRequest().then(function (resArray) {
             setData(resArray);
+            setRefetch(false);
         });
-    }, []);
+    }, [refetch]); // Do not remove 'refetch' from here !!!
+    (0, react_1.useEffect)(function () {
+        socket.on("updateData", function (message) {
+            console.log("Message emitted from socket: " + message);
+            setRefetch(true);
+            var rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
+            if (rowActionsMenu) {
+                rowActionsMenu.remove();
+            }
+        });
+    }, [socket, selectedPage]);
     (0, react_1.useEffect)(function () {
         setDisplayData(data.map(function (table_data) {
             return selectedPage.tableFields.map(function (field) { return field.access(table_data); });
@@ -98,7 +114,6 @@ function AdminPage(_a) {
                     } }) }), (0, jsx_runtime_1.jsxs)(react_3.Modal, { size: "6xl", isOpen: isOpen, onClose: onClose, children: [(0, jsx_runtime_1.jsx)(react_3.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_3.ModalContent, { children: [(0, jsx_runtime_1.jsx)(react_3.ModalHeader, { children: selectedAction.name }), (0, jsx_runtime_1.jsx)(react_3.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_3.ModalBody, { children: [selectedAction.fields && ((_b = selectedAction.fields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ((0, jsx_runtime_1.jsx)(GenericForm_1.GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : ((0, jsx_runtime_1.jsx)(react_3.Button, { colorScheme: "blue", mr: 3, onClick: function () {
                                             selectedAction.onSubmit(rowId);
                                             onClose();
-                                            window.location.reload();
                                         }, children: "Confirm Action" })), (0, jsx_runtime_1.jsx)(react_3.Button, { colorScheme: "red", mr: 3, onClick: onClose, children: "Close" })] })] })] })] }));
 }
 exports.AdminPage = AdminPage;

package/dist/esm/App.js

@@ -3,8 +3,8 @@ import { ChakraProvider } from "@chakra-ui/react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { AdminPage } from "./components/Page";
 import { pageToUrl } from "./components/Page";
-function AdminPanel(_a) {
+function App(_a) {
     var pages = _a.pages, basePath = _a.basePath;
-    return (_jsx(ChakraProvider, { children: _jsx(BrowserRouter, { children: _jsxs(Routes, { children: [pages.map(function (page) { return (_jsx(Route, { path: "".concat(basePath, "/").concat(pageToUrl(page)), element: _jsx(AdminPage, { pages: pages, selectedPage: page, basePath: basePath }) })); }), pages[0] ? (_jsx(Route, { path: "".concat(basePath, "/*"), element: _jsx(AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath }) })) : null] }) }) }));
+    return (_jsx(ChakraProvider, { children: _jsx(BrowserRouter, { children: _jsxs(Routes, { children: [pages.map(function (page) { return (_jsx(Route, { path: "".concat(basePath, "/").concat(pageToUrl(page)), element: _jsx(AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001" }) })); }), pages[0] ? (_jsx(Route, { path: "".concat(basePath, "/*"), element: _jsx(AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001" }) })) : null] }) }) }));
 }
-export default AdminPanel;
+export default App;

package/dist/esm/components/Page.js

@@ -9,6 +9,8 @@ import { MaterialReactTable } from "material-react-table";
 import { mkConfig, generateCsv, download } from "export-to-csv";
 import Swal from "sweetalert2";
 import MenuItem from "@mui/material/MenuItem";
+import { io } from "socket.io-client";
+import { newSocket } from "../utils/websockets";
 export function pageToUrl(page) {
     return "".concat(page.name.toLowerCase().replace(" ", "_"));
 }
@@ -56,17 +58,31 @@ function exportToCSV(data, filename) {
 }
 export function AdminPage(_a) {
     var _b;
-    var pages = _a.pages, selectedPage = _a.selectedPage, basePath = _a.basePath;
-    var _c = useDisclosure(), isOpen = _c.isOpen, onOpen = _c.onOpen, onClose = _c.onClose;
-    var _d = useState({}), selectedAction = _d[0], setSelectedAction = _d[1];
-    var _e = useState([]), data = _e[0], setData = _e[1];
-    var _f = useState([]), displayData = _f[0], setDisplayData = _f[1];
-    var _g = useState(), rowId = _g[0], setRowId = _g[1];
+    var pages = _a.pages, selectedPage = _a.selectedPage, basePath = _a.basePath, _c = _a.apiURL, apiURL = _c === void 0 ? '' : _c;
+    var _d = useDisclosure(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
+    var _e = useState({}), selectedAction = _e[0], setSelectedAction = _e[1];
+    var _f = useState([]), data = _f[0], setData = _f[1];
+    var _g = useState([]), displayData = _g[0], setDisplayData = _g[1];
+    var _h = useState(), rowId = _h[0], setRowId = _h[1];
+    var _j = useState(false), refetch = _j[0], setRefetch = _j[1];
+    var _k = useState(io), socket = _k[0], setSocket = _k[1];
+    newSocket(setSocket, apiURL);
     useEffect(function () {
         selectedPage.getRequest().then(function (resArray) {
             setData(resArray);
+            setRefetch(false);
         });
-    }, []);
+    }, [refetch]); // Do not remove 'refetch' from here !!!
+    useEffect(function () {
+        socket.on("updateData", function (message) {
+            console.log("Message emitted from socket: " + message);
+            setRefetch(true);
+            var rowActionsMenu = document.querySelector(".MuiPaper-root.MuiPopover-paper.MuiMenu-paper");
+            if (rowActionsMenu) {
+                rowActionsMenu.remove();
+            }
+        });
+    }, [socket, selectedPage]);
     useEffect(function () {
         setDisplayData(data.map(function (table_data) {
             return selectedPage.tableFields.map(function (field) { return field.access(table_data); });
@@ -91,6 +107,5 @@ export function AdminPage(_a) {
                     } }) }), _jsxs(Modal, { size: "6xl", isOpen: isOpen, onClose: onClose, children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: selectedAction.name }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { children: [selectedAction.fields && ((_b = selectedAction.fields) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (_jsx(GenericForm, { action: selectedAction, onClose: onClose, rowId: rowId })) : (_jsx(Button, { colorScheme: "blue", mr: 3, onClick: function () {
                                             selectedAction.onSubmit(rowId);
                                             onClose();
-                                            window.location.reload();
                                         }, children: "Confirm Action" })), _jsx(Button, { colorScheme: "red", mr: 3, onClick: onClose, children: "Close" })] })] })] })] }));
 }

package/dist/esm/index.js

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import AdminPanel from "./App";
+import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { event } from "./pages/event";
+import { pages } from "./schema/schema.config";
 var root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(_jsx(React.StrictMode, { children: _jsx(AdminPanel, { pages: [event], basePath: "" }) }));
+root.render(_jsx(React.StrictMode, { children: _jsx(App, { pages: pages, basePath: "" }) }));
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

package/dist/esm/utils/websockets.js

@@ -0,0 +1,15 @@
+import io from "socket.io-client";
+import { useEffect } from "react";
+var Socket = function (setSocket, apiURL) {
+    useEffect(function () {
+        var socketRef = io(apiURL, {
+            transports: ["websocket"],
+        });
+        setSocket(socketRef);
+        return function () {
+            socketRef.removeAllListeners();
+            socketRef.disconnect();
+        };
+    }, []);
+};
+export var newSocket = function (setSocket, apiURL) { return Socket(setSocket, apiURL); };

package/dist/index.js

@@ -9,9 +9,9 @@ var client_1 = __importDefault(require("react-dom/client"));
 require("./index.css");
 var App_1 = __importDefault(require("./App"));
 var reportWebVitals_1 = __importDefault(require("./reportWebVitals"));
-var event_1 = require("./pages/event");
+var schema_config_1 = require("./schema/schema.config");
 var root = client_1.default.createRoot(document.getElementById("root"));
-root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App_1.default, { pages: [event_1.event], basePath: "" }) }));
+root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App_1.default, { pages: schema_config_1.pages, basePath: "" }) }));
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

package/dist/utils/websockets.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.newSocket = void 0;
+var socket_io_client_1 = __importDefault(require("socket.io-client"));
+var react_1 = require("react");
+var Socket = function (setSocket, apiURL) {
+    (0, react_1.useEffect)(function () {
+        var socketRef = (0, socket_io_client_1.default)(apiURL, {
+            transports: ["websocket"],
+        });
+        setSocket(socketRef);
+        return function () {
+            socketRef.removeAllListeners();
+            socketRef.disconnect();
+        };
+    }, []);
+};
+var newSocket = function (setSocket, apiURL) { return Socket(setSocket, apiURL); };
+exports.newSocket = newSocket;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin_lsac",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Generic Admin Panel created for storing events' data",
   "private": false,
   "dependencies": {
@@ -30,6 +30,7 @@
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
     "react-table": "^7.8.0",
+    "socket.io-client": "^4.7.5",
     "sweetalert2": "^11.6.13",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",

package/src/App.tsx

@@ -1,110 +1,50 @@
-import { ChakraProvider } from "@chakra-ui/react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { AdminPage } from "./components/Page";
-import { pageToUrl } from "./components/Page";
-import * as React from "react";
-
-interface TableField {
-  name: string;
-  access: (obj: any) => string | number | React.ReactElement;
-}
-
-interface SimpleField {
-  name: string;
-  label: string;
-  type: "string" | "number" | "file";
-  validationSchema: any;
-}
-
-interface Option {
-  value: string | number | boolean;
-  display: string;
-}
-
-interface DropdownField {
-  name: string;
-  label: string;
-  type: "dropdown";
-  options?: Option[] | undefined;
-  getOptions: () => Promise<Option[]>;
-}
-
-interface ObjectField {
-  name: string;
-  label: string;
-  type: "object";
-  fields: FormField[];
-}
-
-interface ArrayField {
-  name: string;
-  label: string;
-  type: "array";
-  element: Exclude<FormField, ArrayField>;
-}
-
-type FormField = SimpleField | DropdownField | ObjectField | ArrayField;
-
-interface Action {
-  name: string;
-  fields?: FormField[];
-  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
-}
-
-interface RowAction {
-  name: string;
-  fields?: FormField[];
-  initialise: (obj: any) => any;
-  onSubmit: (obj1: any, obj2?: any) => Promise<any>;
-}
-
-interface PageSchema {
-  name: string;
-  actions: Action[];
-  rowActions: RowAction[];
-  getRequest: () => Promise<any[]>;
-  tableFields: TableField[];
-}
-
-function AdminPanel({
-  pages,
-  basePath,
-}: {
-  pages: PageSchema[];
-  basePath: string;
-}) {
-  return (
-    <ChakraProvider>
-      <BrowserRouter>
-        <Routes>
-          {pages.map((page) => (
-            <Route
-              path={`${basePath}/${pageToUrl(page)}`}
-              element={
-                <AdminPage
-                  pages={pages}
-                  selectedPage={page}
-                  basePath={basePath}
-                />
-              }
-            />
-          ))}
-          {pages[0] ? (
-            <Route
-              path={`${basePath}/*`}
-              element={
-                <AdminPage
-                  pages={pages}
-                  selectedPage={pages[0]}
-                  basePath={basePath}
-                />
-              }
-            />
-          ) : null}
-        </Routes>
-      </BrowserRouter>
-    </ChakraProvider>
-  );
-}
-
-export default AdminPanel;
+import { ChakraProvider } from "@chakra-ui/react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { AdminPage } from "./components/Page";
+import { pageToUrl } from "./components/Page";
+import { PageSchema } from "./schema/schema";
+
+function App({
+  pages,
+  basePath,
+}: {
+  pages: PageSchema[];
+  basePath: string;
+}) {
+  return (
+    <ChakraProvider>
+      <BrowserRouter>
+        <Routes>
+          {pages.map((page) => (
+            <Route
+              path={`${basePath}/${pageToUrl(page)}`}
+              element={
+                <AdminPage
+                  pages={pages}
+                  selectedPage={page}
+                  basePath={basePath}
+                  apiURL="http://localhost:3001"
+                />
+              }
+            />
+          ))}
+          {pages[0] ? (
+            <Route
+              path={`${basePath}/*`}
+              element={
+                <AdminPage
+                  pages={pages}
+                  selectedPage={pages[0]}
+                  basePath={basePath}
+                  apiURL="http://localhost:3001"
+                />
+              }
+            />
+          ) : null}
+        </Routes>
+      </BrowserRouter>
+    </ChakraProvider>
+  );
+}
+
+export default App;