Staging -> Master

.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "es2021": true
+    "es2021": true,
+    "node": true
   },
   "extends": [
     "eslint:recommended",

package.json

@@ -2,17 +2,19 @@
   "name": "ministry-mapper",
   "version": "1.25.6",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
     "@rollbar/react": "^0.11.2",
-    "@types/node": "^20.12.11",
+    "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
     "@types/react-calendar": "^3.9.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@vis.gl/react-google-maps": "^1.0.0",
     "bootstrap": "^5.3.3",
-    "firebase": "^10.11.1",
+    "eslint": "^8.56.0",
+    "firebase": "^10.12.1",
     "nanoid": "^5.0.7",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
@@ -24,8 +26,7 @@
     "react-password-checklist": "^1.6.0",
     "react-router-dom": "^6.23.1",
     "react-select": "^5.8.0",
-    "rollbar": "^2.26.4",
-    "web-vitals": "^3.5.2"
+    "rollbar": "^2.26.4"
   },
   "scripts": {
     "start": "vite",
@@ -61,48 +62,47 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@eslint/js": "^9.2.0",
+    "@eslint/js": "^9.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
-    "@storybook/addon-onboarding": "^8.0.10",
+    "@storybook/addon-essentials": "^8.1.2",
+    "@storybook/addon-interactions": "^8.1.2",
+    "@storybook/addon-links": "^8.1.2",
+    "@storybook/addon-onboarding": "^8.1.2",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.0.10",
+    "@storybook/blocks": "^8.1.2",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.0.10",
-    "@storybook/react": "^8.0.10",
-    "@storybook/react-vite": "^8.0.10",
-    "@storybook/test-runner": "^0.18.0",
+    "@storybook/manager-api": "^8.1.2",
+    "@storybook/react": "^8.1.2",
+    "@storybook/react-vite": "^8.1.2",
+    "@storybook/test-runner": "^0.18.1",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.10",
+    "@storybook/theming": "^8.1.2",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "chromatic": "^11.3.2",
-    "eslint": "^8.57.0",
+    "chromatic": "^11.4.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "jest-worker": "^29.7.0",
     "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.4",
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.1",
+    "sass": "^1.77.2",
     "semantic-release": "^23.1.1",
-    "sharp": "^0.33.3",
-    "storybook": "^8.0.10",
+    "sharp": "^0.33.4",
+    "storybook": "^8.1.2",
     "storybook-mock-date-decorator": "^1.0.2",
     "svgo": "^3.3.2",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^7.8.0",
+    "typescript-eslint": "^7.10.0",
     "unplugin-turbo-console": "^1.8.6",
     "vite": "^5.2.11",
     "vite-plugin-checker": "^0.6.4",

src/components/middlewares/googlemap.tsx

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+
+import { APIProvider } from "@vis.gl/react-google-maps";
+interface MapsMiddlewareProps {
+  children: ReactNode;
+}
+
+const MapsMiddleware: FC<MapsMiddlewareProps> = ({ children }) => {
+  const { VITE_GOOGLE_MAPS_API_KEY } = import.meta.env;
+  if (!VITE_GOOGLE_MAPS_API_KEY) {
+    return <div>Missing Google Maps API Key</div>;
+  }
+  return (
+    <APIProvider apiKey={VITE_GOOGLE_MAPS_API_KEY}>{children}</APIProvider>
+  );
+};
+
+export default MapsMiddleware;

src/components/middlewares/main.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+import { Container } from "react-bootstrap";
+import VersionDisplay from "../navigation/versiondisplay";
+interface MainMiddlewareProps {
+  children: ReactNode;
+}
+
+const MainMiddleware: FC<MainMiddlewareProps> = ({ children }) => {
+  return (
+    <Container className="pt-2" fluid>
+      {children}
+      <VersionDisplay />
+    </Container>
+  );
+};
+
+export default MainMiddleware;

src/components/middlewares/maintenance.tsx

@@ -0,0 +1,35 @@
+import { FC, useState, useEffect, ReactNode, Suspense, lazy } from "react";
+import { child, onValue, ref } from "firebase/database";
+import { database } from "../../firebase";
+import Loader from "../statics/loader";
+const MaintenanceMode = lazy(() => import("../statics/maintenance"));
+
+interface MaintenanceMiddlewareProps {
+  children: ReactNode;
+}
+
+const MaintenanceMiddleware: FC<MaintenanceMiddlewareProps> = ({
+  children
+}) => {
+  const [isMaintenance, setIsMaintenance] = useState<boolean>(false);
+
+  useEffect(() => {
+    const maintenanceReference = child(ref(database), `/maintenance`);
+    onValue(maintenanceReference, (snapshot) => {
+      if (snapshot.exists()) {
+        setIsMaintenance(snapshot.val());
+      }
+    });
+  }, []);
+
+  if (isMaintenance)
+    return (
+      <Suspense fallback={<Loader />}>
+        <MaintenanceMode />
+      </Suspense>
+    );
+
+  return <>{children}</>;
+};
+
+export default MaintenanceMiddleware;

src/components/middlewares/rollbar.tsx

@@ -0,0 +1,30 @@
+import { Provider } from "@rollbar/react";
+import { FC, ReactNode } from "react";
+
+interface RollbarProviderProps {
+  children: ReactNode;
+}
+
+const { VITE_ROLLBAR_ACCESS_TOKEN, VITE_ROLLBAR_ENVIRONMENT, VITE_VERSION } =
+  import.meta.env;
+
+const DEFEAULT_ROLLBAR_ENVIRONMENT = "staging";
+
+const rollbarConfig = {
+  accessToken: VITE_ROLLBAR_ACCESS_TOKEN,
+  payload: {
+    environment: VITE_ROLLBAR_ENVIRONMENT || DEFEAULT_ROLLBAR_ENVIRONMENT,
+    client: {
+      javascript: {
+        source_map_enabled: true,
+        code_version: VITE_VERSION
+      }
+    }
+  }
+};
+
+const RollbarMiddleware: FC<RollbarProviderProps> = ({ children }) => {
+  return <Provider config={rollbarConfig}>{children}</Provider>;
+};
+
+export default RollbarMiddleware;

src/components/modal/assignments.tsx

@@ -38,7 +38,7 @@ const GetAssignments = NiceModal.create(
     const isAssignOrPersonalAssignments = assignmentType && assignmentTerritory;
 
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>
             {isAssignOrPersonalAssignments

src/components/modal/changeaddname.tsx

@@ -42,7 +42,7 @@ const ChangeAddressName = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Change Address Name</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.CHANGE_ADDRESS_NAME} />

src/components/modal/changepassword.tsx

@@ -43,14 +43,14 @@ const ChangePassword = NiceModal.create(
         alert("Password updated.");
         modal.hide();
       } catch (error) {
-        errorHandler(errorMessage((error as FirebaseError).code), rollbar);
+        errorHandler(errorMessage(error as FirebaseError), rollbar);
       } finally {
         setIsSaving(false);
       }
     };
 
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Change Password</Modal.Title>
         </Modal.Header>

src/components/modal/changepostalcd.tsx

@@ -120,7 +120,7 @@ const ChangeAddressPostalCode = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Change {modalDescription}</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.CHANGE_TERRITORY_CODE} />

src/components/modal/changeterritorycd.tsx

@@ -55,7 +55,7 @@ const ChangeTerritoryCode = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Change Territory Code</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.CHANGE_TERRITORY_CODE} />

src/components/modal/changeterritoryname.tsx

@@ -46,7 +46,7 @@ const ChangeTerritoryName = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Change Territory Name</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.CHANGE_TERRITORY_NAME} />

src/components/modal/congoptions.tsx

@@ -214,7 +214,11 @@ const UpdateCongregationOptions = NiceModal.create(
     }, [currentCongregation]);
 
     return (
-      <Modal {...bootstrapDialog(modal)} dialogClassName="modal-lg">
+      <Modal
+        {...bootstrapDialog(modal)}
+        dialogClassName="modal-lg"
+        onHide={() => modal.remove()}
+      >
         <Form onSubmit={handleSubmitCongOptions}>
           <Modal.Header>
             <Modal.Title>Household Options</Modal.Title>

src/components/modal/congsettings.tsx

@@ -67,7 +67,7 @@ const UpdateCongregationSettings = NiceModal.create(
     };
 
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Form onSubmit={handleSubmitCongSettings}>
           <Modal.Header>
             <Modal.Title>Congregation Settings</Modal.Title>

src/components/modal/instructions.tsx

@@ -59,7 +59,7 @@ const UpdateAddressInstructions = NiceModal.create(
     };
 
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>{`Instructions on ${addressName}`}</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.UPDATE_INSTRUCTIONS} />

src/components/modal/inviteuser.tsx

@@ -64,13 +64,13 @@ const InviteUser = NiceModal.create(
         alert(`Granted ${roleDisplay} access to ${userEmail}.`);
         modal.hide();
       } catch (error) {
-        errorHandler(errorMessage((error as FirebaseError).code), rollbar);
+        errorHandler(errorMessage(error as FirebaseError), rollbar);
       } finally {
         setIsSaving(false);
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Invite User</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.INVITE_USER} />

src/components/modal/newprivateadd.tsx

@@ -123,7 +123,7 @@ const NewPrivateAddress = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Create Private Address</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.CREATE_PRIVATE_ADDRESS} />

src/components/modal/newpublicadd.tsx

@@ -127,7 +127,7 @@ const NewPublicAddress = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Create Public Address</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.CREATE_PUBLIC_ADDRESS} />

src/components/modal/newterritorycd.tsx

@@ -55,7 +55,7 @@ const NewTerritoryCode = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>Create New Territory</Modal.Title>
           <HelpButton link={WIKI_CATEGORIES.CREATE_TERRITORIES} />

src/components/modal/newunit.tsx

@@ -53,7 +53,7 @@ const NewUnit = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>
             {`Add ${

src/components/modal/profile.tsx

@@ -26,14 +26,14 @@ const GetProfile = NiceModal.create(({ user }: UpdateProfileModalProps) => {
       alert("Profile updated.");
       modal.hide();
     } catch (error) {
-      errorHandler(errorMessage((error as FirebaseError).code), rollbar);
+      errorHandler(errorMessage(error as FirebaseError), rollbar);
     } finally {
       setIsSaving(false);
     }
   };
 
   return (
-    <Modal {...bootstrapDialog(modal)}>
+    <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
       <Modal.Header>
         <Modal.Title>My Profile</Modal.Title>
       </Modal.Header>

src/components/modal/slipdetails.tsx

@@ -30,7 +30,7 @@ const ConfirmSlipDetails = NiceModal.create(
     };
 
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>
             {`Confirm ${

src/components/modal/updateaddfeedback.tsx

@@ -52,7 +52,7 @@ const UpdateAddressFeedback = NiceModal.create(
       }
     };
     return (
-      <Modal {...bootstrapDialog(modal)}>
+      <Modal {...bootstrapDialog(modal)} onHide={() => modal.remove()}>
         <Modal.Header>
           <Modal.Title>{`Feedback on ${name}`}</Modal.Title>
           <HelpButton link={helpLink} />