support ?i18n_viz=keys and ?i18n_viz=values

src/components/connect/ConnectSearchParams.js

@@ -0,0 +1,62 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+import i18n from 'i18next'
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+import { useAppHistory } from '../../utils/useAppHistory'
+
+const ConnectSearchParams = () => {
+  const location = useLocation()
+  const history = useAppHistory()
+  const searchParams = new URLSearchParams(location.search)
+  const i18nViz = searchParams.get('i18n_viz')
+
+  useEffect(() => {
+    if (i18nViz) {
+      const originalT = i18n.t.bind(i18n)
+      i18n.t = (key, options) => {
+        let translation = originalT(key, options)
+        if (
+          [
+            'type',
+            'glossary.address',
+            'locations.form.comments_subtext',
+          ].includes(key)
+        ) {
+          return `Localised text, key: ${key}, value: ${translation}`
+        }
+        if (i18nViz === 'keys') {
+          const x = translation
+          translation = key
+          key = x
+        }
+
+        if (key.endsWith('_html')) {
+          return `<span style="background-color: gold; cursor: pointer;" title="${key}" onclick="alert('Copied key for HTML element to clipboard: ${key}'); navigator.clipboard.writeText('${key}')">${translation}</span>`
+        }
+        return (
+          <span
+            style={{
+              backgroundColor: 'yellow',
+              position: 'relative',
+              cursor: 'pointer',
+            }}
+            title={key}
+            onClick={() => {
+              navigator.clipboard.writeText(key)
+              toast.info(`Copied to clipboard: ${key}`)
+            }}
+          >
+            {translation}
+          </span>
+        )
+      }
+      history.removeParam('i18n_viz')
+    }
+  }, [i18nViz]) //eslint-disable-line
+
+  return null
+}
+
+export default ConnectSearchParams

src/components/connect/connectRoutes.js

@@ -8,6 +8,7 @@ import ConnectNewLocation from './ConnectNewLocation'
 import ConnectOverscroll from './ConnectOverscroll'
 import ConnectPath from './ConnectPath'
 import ConnectReview from './ConnectReview'
+import ConnectSearchParams from './ConnectSearchParams'
 import ConnectTypes from './ConnectTypes'
 import DisconnectInitLocation from './DisconnectInitLocation'
 import DisconnectLocation from './DisconnectLocation'
@@ -201,6 +202,16 @@ const connectRoutes = [
   <Route key="disconnect-init-location" path={['/map', '/list']}>
     <DisconnectInitLocation />
   </Route>,
+
+  /*
+   * ConnectSearchParams
+   * why: ?i18n_viz=keys and ?i18n_viz=values should trigger translation mode
+   *
+   * action: monkeypatch the i18n function to add background, title, and click handler
+   */
+  <Route key="connect-search-params" path="*">
+    <ConnectSearchParams />
+  </Route>,
 ]
 
 export default connectRoutes

src/utils/useAppHistory.js

@@ -1,4 +1,4 @@
-import { useHistory } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 
 import { currentPathWithView, pathWithCurrentView } from './appUrl'
 
@@ -8,6 +8,7 @@ import { currentPathWithView, pathWithCurrentView } from './appUrl'
  */
 export const useAppHistory = () => {
   const history = useHistory()
+  const location = useLocation()
 
   const pushWithMapState = (to, state) => {
     let newTo
@@ -27,5 +28,13 @@ export const useAppHistory = () => {
     history.push(newUrl, state)
   }
 
-  return { ...history, push: pushWithMapState, changeView }
+  const removeParam = (paramName) => {
+    const searchParams = new URLSearchParams(location.search)
+    searchParams.delete(paramName)
+    const newSearch = searchParams.toString()
+    const newPath = `${location.pathname}${newSearch ? `?${newSearch}` : ''}`
+    history.replace(newPath)
+  }
+
+  return { ...history, push: pushWithMapState, changeView, removeParam }
 }