Merge pull request #318 from rimorin/chore/ph_keys

Optimised Posthog capturing

.husky/commit-msg

@@ -1,4 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
 npx --no -- commitlint --edit 

.husky/pre-commit

@@ -1,4 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
 npx lint-staged

package.json

@@ -6,26 +6,20 @@
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
     "@rollbar/react": "^0.11.2",
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.3",
-    "@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.1.0",
     "bootstrap": "^5.3.3",
-    "eslint": "^8.57.0",
-    "firebase": "^10.12.2",
+    "firebase": "^10.12.4",
     "nanoid": "^5.0.7",
-    "posthog-js": "^1.149.0",
+    "posthog-js": "^1.149.2",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.10.3",
+    "react-bootstrap": "^2.10.4",
     "react-bootstrap-range-slider": "^3.0.8",
     "react-calendar": "^5.0.0",
     "react-confirm-alert": "^3.0.6",
     "react-countdown": "^2.3.5",
     "react-dom": "^18.3.1",
     "react-password-checklist": "^1.6.0",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.25.1",
     "react-select": "^5.8.0",
     "rollbar": "^2.26.4"
   },
@@ -61,51 +55,57 @@
     ]
   },
   "devDependencies": {
+    "@types/node": "^20.14.12",
+    "@types/react": "^18.3.3",
+    "@types/react-calendar": "^3.9.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "eslint": "^8.57.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@eslint/js": "^9.5.0",
+    "@eslint/js": "^9.7.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-onboarding": "^8.1.11",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-interactions": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-onboarding": "^8.2.6",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^8.1.2",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.1.2",
+    "@storybook/manager-api": "^8.2.6",
     "@storybook/react": "^8.1.2",
-    "@storybook/react-vite": "^8.1.11",
+    "@storybook/react-vite": "^8.2.6",
     "@storybook/test-runner": "^0.18.2",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.1.2",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@storybook/theming": "^8.2.6",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "chromatic": "^11.5.4",
-    "eslint-plugin-react": "^7.34.3",
+    "chromatic": "^11.5.6",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.0.11",
+    "husky": "^9.1.1",
     "jest-worker": "^29.7.0",
-    "jsdom": "^24.1.0",
+    "jsdom": "^24.1.1",
     "lint-staged": "^15.2.7",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.77.6",
     "semantic-release": "^23.1.1",
     "sharp": "^0.33.4",
-    "storybook": "^8.1.11",
+    "storybook": "^8.2.6",
     "storybook-mock-date-decorator": "^1.0.2",
     "svgo": "^3.3.2",
-    "typescript": "^5.5.2",
-    "typescript-eslint": "^7.14.1",
-    "unplugin-turbo-console": "^1.8.9",
-    "vite": "^5.3.1",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^7.17.0",
+    "unplugin-turbo-console": "^1.9.11",
+    "vite": "^5.3.4",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-image-optimizer": "^1.1.8",
     "vite-plugin-svgr": "^4.2.0",

src/components/modal/updatestatus.tsx

@@ -174,8 +174,8 @@ const UpdateUnitStatus = NiceModal.create(
         const captureKey = PH_STATUS_KEYS[statusType] || PH_STATUS_KEYS.DEFAULT;
         posthog?.capture(captureKey, {
           mapId: postalCode,
-          updateData,
-          publisherName
+          publisherName,
+          ...updateData
         });
         modal.hide();
       } catch (error) {

src/pages/admin.tsx

@@ -91,8 +91,6 @@ import {
   DEFAULT_SELF_DESTRUCT_HOURS,
   LINK_TYPES,
   UNSUPPORTED_BROWSER_MSG,
-  RELOAD_INACTIVITY_DURATION,
-  RELOAD_CHECK_INTERVAL_MS,
   USER_ACCESS_LEVELS,
   TERRITORY_VIEW_WINDOW_WELCOME_TEXT,
   PIXELS_TILL_BK_TO_TOP_BUTTON_DISPLAY,
@@ -216,7 +214,6 @@ function Admin({ user }: adminProps) {
   const unsubscribers = useRef<Array<Unsubscribe>>([]);
   const congregationAccess = useRef<Record<string, number>>({});
   const loginUserClaims = useRef<IdTokenResult>();
-  const currentTime = useRef<number>(new Date().getTime());
 
   const [congregationCode, setCongregationCode] = useLocalStorage(
     "congregationCode",
@@ -884,19 +881,6 @@ function Admin({ user }: adminProps) {
     }
   }, []);
 
-  const refreshPage = () => {
-    const inactivityPeriod = new Date().getTime() - currentTime.current;
-    if (inactivityPeriod >= RELOAD_INACTIVITY_DURATION) {
-      window.location.reload();
-    } else {
-      setTimeout(refreshPage, RELOAD_CHECK_INTERVAL_MS);
-    }
-  };
-
-  const setActivityTime = () => {
-    currentTime.current = new Date().getTime();
-  };
-
   useEffect(() => {
     const fetchData = async () => {
       const userData = await user.getIdTokenResult(true);
@@ -940,18 +924,8 @@ function Admin({ user }: adminProps) {
       setShowBkTopButton(window.scrollY > PIXELS_TILL_BK_TO_TOP_BUTTON_DISPLAY);
     };
 
-    document.body.addEventListener("mousemove", setActivityTime);
-    document.body.addEventListener("keypress", setActivityTime);
-    document.body.addEventListener("touchstart", setActivityTime);
     window.addEventListener("scroll", handleScroll);
-    const timeoutId = setTimeout(refreshPage, RELOAD_CHECK_INTERVAL_MS);
-    return () => {
-      document.body.removeEventListener("mousemove", setActivityTime);
-      document.body.removeEventListener("keypress", setActivityTime);
-      document.body.removeEventListener("touchstart", setActivityTime);
-      window.removeEventListener("scroll", handleScroll);
-      clearTimeout(timeoutId);
-    };
+    return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
   useEffect(() => {

src/pages/slip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useCallback, useRef, lazy } from "react";
+import { useEffect, useState, useMemo, useCallback, lazy } from "react";
 import { ref, child, onValue, onChildRemoved, get } from "firebase/database";
 import { database } from "../firebase";
 import { Container, Nav, Navbar } from "react-bootstrap";
@@ -19,8 +19,6 @@ import Legend from "../components/navigation/legend";
 import Loader from "../components/statics/loader";
 import {
   DEFAULT_FLOOR_PADDING,
-  RELOAD_INACTIVITY_DURATION,
-  RELOAD_CHECK_INTERVAL_MS,
   TERRITORY_TYPES,
   USER_ACCESS_LEVELS,
   WIKI_CATEGORIES,
@@ -78,7 +76,6 @@ const Map = () => {
   const [territoryType, setTerritoryType] = useState<number>(
     TERRITORY_TYPES.PUBLIC
   );
-  const currentTime = useRef<number>(new Date().getTime());
   const rollbar = useRollbar();
   const posthog = usePostHog();
 
@@ -118,6 +115,7 @@ const Map = () => {
 
   useEffect(() => {
     if (!code || !id) return;
+    posthog?.identify(code);
     const getLinkData = async () => {
       const linkRef = ref(database, `links/${code}/${id}`);
       const linkSnapshot = await get(linkRef);
@@ -147,7 +145,6 @@ const Map = () => {
           }
         }
       });
-      posthog?.identify(code);
       if (isLinkExpired) {
         setIsLoading(false);
         posthog?.capture("expired_link", {
@@ -157,31 +154,7 @@ const Map = () => {
       }
       onChildRemoved(linkRef, () => window.location.reload());
     };
-
-    const refreshPage = () => {
-      const inactivityPeriod = new Date().getTime() - currentTime.current;
-      if (inactivityPeriod >= RELOAD_INACTIVITY_DURATION) {
-        window.location.reload();
-      } else {
-        setTimeout(refreshPage, RELOAD_CHECK_INTERVAL_MS);
-      }
-    };
     getLinkData();
-
-    const setActivityTime = () => {
-      currentTime.current = new Date().getTime();
-    };
-    document.body.addEventListener("mousemove", setActivityTime);
-    document.body.addEventListener("keypress", setActivityTime);
-    document.body.addEventListener("touchstart", setActivityTime);
-    const timeoutId = setTimeout(refreshPage, RELOAD_CHECK_INTERVAL_MS);
-
-    return () => {
-      document.body.removeEventListener("mousemove", setActivityTime);
-      document.body.removeEventListener("keypress", setActivityTime);
-      document.body.removeEventListener("touchstart", setActivityTime);
-      clearTimeout(timeoutId);
-    };
   }, [code, id]);
 
   useEffect(() => {

src/utils/constants.tsx

@@ -59,10 +59,6 @@ const DEFAULT_SELF_DESTRUCT_HOURS = 24;
 const MIN_PERCENTAGE_DISPLAY = 10;
 const FIREBASE_AUTH_UNAUTHORISED_MSG =
   "Client doesn't have permission to access the desired data.";
-// 5 secs
-const RELOAD_CHECK_INTERVAL_MS = 5000;
-// 10mins
-const RELOAD_INACTIVITY_DURATION = 600000;
 // 3 secs
 const FIREBASE_FUNCTION_TIMEOUT = 3000;
 
@@ -269,8 +265,6 @@ export {
   DEFAULT_FLOOR_PADDING,
   DEFAULT_SELF_DESTRUCT_HOURS,
   FIREBASE_AUTH_UNAUTHORISED_MSG,
-  RELOAD_CHECK_INTERVAL_MS,
-  RELOAD_INACTIVITY_DURATION,
   TERRITORY_VIEW_WINDOW_WELCOME_TEXT,
   NOT_HOME_STATUS_CODES,
   MIN_START_FLOOR,

vite.config.js

@@ -22,7 +22,8 @@ export default defineConfig(() => {
               "firebase/functions",
               "firebase/app-check"
             ],
-            gmaps: ["@vis.gl/react-google-maps"]
+            gmaps: ["@vis.gl/react-google-maps"],
+            posthog: ["posthog-js"]
           }
         },
         onwarn(warning, defaultHandler) {