Staging -> Master

package.json

@@ -8,7 +8,7 @@
     "@rollbar/react": "^0.11.2",
     "@vis.gl/react-google-maps": "^1.1.0",
     "bootstrap": "^5.3.3",
-    "firebase": "^10.13.0",
+    "firebase": "^10.13.2",
     "nanoid": "^5.0.7",
     "posthog-js": "^1.155.4",
     "react": "^18.3.1",

src/components/statics/error.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Container, Card, Button } from "react-bootstrap";
+import { useRouteError } from "react-router-dom";
+
+interface ErrorPageProps {
+  onRetry?: () => void;
+}
+
+const GenericErrorPage: React.FC<ErrorPageProps> = ({ onRetry }) => {
+  const error = useRouteError() as Error;
+  const title = "An Error Occurred";
+  const message = "We are sorry, something went wrong.";
+
+  return (
+    <Container className="container-main">
+      <Card className="card-main">
+        <Card.Img
+          alt="Ministry Mapper logo"
+          className="mm-logo"
+          src="/android-chrome-192x192.png"
+        />
+        <Card.Body>
+          <Card.Title className="text-center">{title}</Card.Title>
+          <Card.Text className="text-center">{message}</Card.Text>
+          {error && (
+            <Card.Text className="text-center">
+              <small>{error.message}</small>
+            </Card.Text>
+          )}
+          {onRetry && (
+            <div className="text-center">
+              <Button onClick={onRetry}>Retry</Button>
+            </div>
+          )}
+        </Card.Body>
+      </Card>
+    </Container>
+  );
+};
+
+export default GenericErrorPage;

src/index.tsx

@@ -1,25 +1,16 @@
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import Main from "./pages/index";
-import { BrowserRouter } from "react-router-dom";
-import { StrictMode } from "react";
-import NiceModal from "@ebay/nice-modal-react";
-import RollbarMiddleware from "./components/middlewares/rollbar";
-import MapsMiddleware from "./components/middlewares/googlemap";
-import PostHogMiddleware from "./components/middlewares/posthog";
 
-const root = createRoot(document.getElementById("root") as HTMLElement);
-root.render(
-  <StrictMode>
-    <RollbarMiddleware>
-      <PostHogMiddleware>
-        <MapsMiddleware>
-          <NiceModal.Provider>
-            <BrowserRouter>
-              <Main />
-            </BrowserRouter>
-          </NiceModal.Provider>
-        </MapsMiddleware>
-      </PostHogMiddleware>
-    </RollbarMiddleware>
-  </StrictMode>
-);
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+  const root = createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <Main />
+    </StrictMode>
+  );
+} else {
+  console.error("Root element not found");
+}