From dc1d193a558094c133f18db02caaf19f67b97c89 Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Mon, 11 Dec 2023 16:05:15 +0000 Subject: [PATCH 1/5] refactor: import ol css styles once in App.jsx --- src/frontend/index.html | 7 ------- src/frontend/src/App.jsx | 1 + src/frontend/src/views/NewProjectDetails.jsx | 1 - src/frontend/src/views/ProjectDetails.jsx | 1 - src/frontend/src/views/Submissions.tsx | 1 - src/frontend/src/views/Tasks.tsx | 1 - 6 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/frontend/index.html b/src/frontend/index.html index 9e0c81828b..1c4c31ec82 100755 --- a/src/frontend/index.html +++ b/src/frontend/index.html @@ -6,13 +6,6 @@ - Field Mapping Tasking Manager diff --git a/src/frontend/src/App.jsx b/src/frontend/src/App.jsx index f707da9432..cbd33f5b91 100755 --- a/src/frontend/src/App.jsx +++ b/src/frontend/src/App.jsx @@ -6,6 +6,7 @@ import { Provider } from 'react-redux'; import routes from './routes'; import { PersistGate } from 'redux-persist/integration/react'; import './index.css'; +import 'ol/ol.css'; import 'react-loading-skeleton/dist/skeleton.css'; import * as Sentry from '@sentry/react'; import environment from './environment'; diff --git a/src/frontend/src/views/NewProjectDetails.jsx b/src/frontend/src/views/NewProjectDetails.jsx index 2f59ad4eea..dbfb93bb04 100644 --- a/src/frontend/src/views/NewProjectDetails.jsx +++ b/src/frontend/src/views/NewProjectDetails.jsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from 'react'; -import '../../node_modules/ol/ol.css'; import '../styles/home.scss'; import WindowDimension from '../hooks/WindowDimension'; import MapDescriptionComponents from '../components/MapDescriptionComponents'; diff --git a/src/frontend/src/views/ProjectDetails.jsx b/src/frontend/src/views/ProjectDetails.jsx index b809df7c31..dde433ab7b 100755 --- a/src/frontend/src/views/ProjectDetails.jsx +++ b/src/frontend/src/views/ProjectDetails.jsx @@ -1,5 +1,4 @@ import React, { useEffect, useRef, useState } from 'react'; -import '../../node_modules/ol/ol.css'; import '../styles/home.scss'; import WindowDimension from '../hooks/WindowDimension'; import MapDescriptionComponents from '../components/MapDescriptionComponents'; diff --git a/src/frontend/src/views/Submissions.tsx b/src/frontend/src/views/Submissions.tsx index 102c6d5d4b..8adb588691 100755 --- a/src/frontend/src/views/Submissions.tsx +++ b/src/frontend/src/views/Submissions.tsx @@ -1,6 +1,5 @@ import React, { useEffect } from 'react'; // import '../styles/home.css' -import '../../node_modules/ol/ol.css'; import CoreModules from '../shared/CoreModules'; // import { useLocation, useNavigate } from 'react-router-dom'; import Avatar from '../assets/images/avatar.png'; diff --git a/src/frontend/src/views/Tasks.tsx b/src/frontend/src/views/Tasks.tsx index 7188963c10..89faa8abd4 100644 --- a/src/frontend/src/views/Tasks.tsx +++ b/src/frontend/src/views/Tasks.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react'; // import '../styles/home.css' -import '../../node_modules/ol/ol.css'; import CoreModules from '../shared/CoreModules'; import AssetModules from '../shared/AssetModules'; // import { useLocation, useNavigate } from 'react-router-dom'; From 28227a3c699c8cfc94e3c915b3e72379edb77ad2 Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Mon, 11 Dec 2023 16:09:11 +0000 Subject: [PATCH 2/5] feat: add matomo tracking script --- src/frontend/index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/frontend/index.html b/src/frontend/index.html index 1c4c31ec82..e08d5c0f1b 100755 --- a/src/frontend/index.html +++ b/src/frontend/index.html @@ -2,16 +2,22 @@ - + + + Field Mapping Tasking Manager
+ // Matomo Tracking +
From 4ed3baf456945a538ece4bb2c9595f2bdb23e8d6 Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Mon, 11 Dec 2023 18:24:16 +0000 Subject: [PATCH 3/5] fix: only add matomo tracking in production --- src/frontend/index.html | 3 -- src/frontend/src/App.jsx | 68 ++++++++++++++++++++++++++++++---------- 2 files changed, 51 insertions(+), 20 deletions(-) diff --git a/src/frontend/index.html b/src/frontend/index.html index e08d5c0f1b..25b835965d 100755 --- a/src/frontend/index.html +++ b/src/frontend/index.html @@ -7,9 +7,6 @@ - Field Mapping Tasking Manager diff --git a/src/frontend/src/App.jsx b/src/frontend/src/App.jsx index cbd33f5b91..3454e0a114 100755 --- a/src/frontend/src/App.jsx +++ b/src/frontend/src/App.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom'; import { RouterProvider } from 'react-router-dom'; import { store, persistor } from './store/Store'; @@ -8,8 +8,6 @@ import { PersistGate } from 'redux-persist/integration/react'; import './index.css'; import 'ol/ol.css'; import 'react-loading-skeleton/dist/skeleton.css'; -import * as Sentry from '@sentry/react'; -import environment from './environment'; // Added Fix of Console Error of MUI Issue const consoleError = console.error; @@ -27,9 +25,16 @@ console.error = function filterWarnings(msg, ...args) { } }; -{ - import.meta.env.MODE !== 'development' - ? Sentry.init({ +const SentryInit = () => { + useEffect(() => { + if (import.meta.env.MODE === 'development') { + return; + } + console.log('Adding Sentry'); + + import('@sentry/react').then((Sentry) => { + // Init Sentry + Sentry.init({ dsn: import.meta.env.BASE_URL === 'fmtm.hotosm.org' ? 'https://35c80d0894e441f593c5ac5dfa1094a0@o68147.ingest.sentry.io/4505557311356928' @@ -46,18 +51,47 @@ console.error = function filterWarnings(msg, ...args) { // Session Replay replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. - }) - : null; -} + }); + }); + + return () => {}; + }, []); + + return null; // Renders nothing +}; + +// Matomo Tracking Component +const MatomoTrackingInit = () => { + useEffect(() => { + if (import.meta.env.MODE === 'development' && import.meta.env.BASE_URL !== 'fmtm.hotosm.org') { + return; + } + // Set matomo tracking id + window.site_id = 28; + + return () => {}; + }, []); + + return null; // Renders nothing +}; + +// Main App Component +const App = () => { + return ( + + + + + + + + ); +}; + +// Render the App component +ReactDOM.render(, document.getElementById('app')); -ReactDOM.render( - - - - - , - document.getElementById('app'), -); +// Register service worker if (import.meta.env.MODE === 'production') { if ('serviceWorker' in navigator) { window.addEventListener('load', () => { From c471bebf73f9de94b3157b56fe884de768511684 Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Mon, 11 Dec 2023 20:07:51 +0000 Subject: [PATCH 4/5] refactor: dynamically import mamoto tracking in prod only --- src/frontend/index.html | 4 --- src/frontend/src/App.jsx | 57 ++++++++++++++++++++++----------- src/frontend/src/environment.ts | 1 + 3 files changed, 40 insertions(+), 22 deletions(-) diff --git a/src/frontend/index.html b/src/frontend/index.html index 25b835965d..3cd0352ecd 100755 --- a/src/frontend/index.html +++ b/src/frontend/index.html @@ -6,15 +6,11 @@ - - Field Mapping Tasking Manager
- // Matomo Tracking -
diff --git a/src/frontend/src/App.jsx b/src/frontend/src/App.jsx index 3454e0a114..f0a2b05343 100755 --- a/src/frontend/src/App.jsx +++ b/src/frontend/src/App.jsx @@ -8,6 +8,7 @@ import { PersistGate } from 'redux-persist/integration/react'; import './index.css'; import 'ol/ol.css'; import 'react-loading-skeleton/dist/skeleton.css'; +import environment from './environment'; // Added Fix of Console Error of MUI Issue const consoleError = console.error; @@ -63,33 +64,53 @@ const SentryInit = () => { // Matomo Tracking Component const MatomoTrackingInit = () => { useEffect(() => { - if (import.meta.env.MODE === 'development' && import.meta.env.BASE_URL !== 'fmtm.hotosm.org') { + if (import.meta.env.MODE !== 'development' && import.meta.env.BASE_URL === 'fmtm.hotosm.org') { return; } // Set matomo tracking id - window.site_id = 28; + window.site_id = environment.mamotoTrackingId; - return () => {}; + // Create optout-form div for banner + const optoutDiv = document.createElement('div'); + optoutDiv.id = 'optout-form'; // Set an ID if needed + document.body.appendChild(optoutDiv); + + // Load CDN script + const script = document.createElement('script'); + script.src = 'https://cdn.hotosm.org/tracking-v3.js'; + document.body.appendChild(script); + // Manually trigger DOMContentLoaded, that script hooks + // https://github.com/hotosm/matomo-tracking/blob/9b95230cb5f0bf2a902f00379152f3af9204c641/tracking-v3.js#L125 + script.onload = () => { + optoutDiv.dispatchEvent( + new Event('DOMContentLoaded', { + bubbles: true, + cancelable: true, + }), + ); + }; + + // Cleanup on unmount + return () => { + document.body.removeChild(optoutDiv); + document.body.removeChild(script); + }; }, []); return null; // Renders nothing }; -// Main App Component -const App = () => { - return ( - - - - - - - - ); -}; - -// Render the App component -ReactDOM.render(, document.getElementById('app')); +// The main App render +ReactDOM.render( + + + + + + + , + document.getElementById('app'), +); // Register service worker if (import.meta.env.MODE === 'production') { diff --git a/src/frontend/src/environment.ts b/src/frontend/src/environment.ts index b4a4e02954..a24d0ec7f3 100755 --- a/src/frontend/src/environment.ts +++ b/src/frontend/src/environment.ts @@ -8,6 +8,7 @@ export default { const desimaal = (dec >>> 0).toString(2); return window.btoa(desimaal); }, + mamotoTrackingId: 28, tasksStatus: [ { label: 'READY', From 15d2f5b43ef2d7309d8abb872d301b6710c43e94 Mon Sep 17 00:00:00 2001 From: spwoodcock Date: Mon, 11 Dec 2023 20:16:30 +0000 Subject: [PATCH 5/5] refactor: invert conditions to trigger mamoto (single domain) --- src/frontend/src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/App.jsx b/src/frontend/src/App.jsx index f0a2b05343..cf116e3dcc 100755 --- a/src/frontend/src/App.jsx +++ b/src/frontend/src/App.jsx @@ -64,7 +64,7 @@ const SentryInit = () => { // Matomo Tracking Component const MatomoTrackingInit = () => { useEffect(() => { - if (import.meta.env.MODE !== 'development' && import.meta.env.BASE_URL === 'fmtm.hotosm.org') { + if (import.meta.env.MODE === 'development' || import.meta.env.BASE_URL !== 'fmtm.hotosm.org') { return; } // Set matomo tracking id