diff --git a/src/components/connect/ConnectSearchParams.js b/src/components/connect/ConnectSearchParams.js new file mode 100644 index 00000000..9eb94bae --- /dev/null +++ b/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 `${translation}` + } + return ( + { + navigator.clipboard.writeText(key) + toast.info(`Copied to clipboard: ${key}`) + }} + > + {translation} + + ) + } + history.removeParam('i18n_viz') + } + }, [i18nViz]) //eslint-disable-line + + return null +} + +export default ConnectSearchParams diff --git a/src/components/connect/connectRoutes.js b/src/components/connect/connectRoutes.js index b2af271c..006a146e 100644 --- a/src/components/connect/connectRoutes.js +++ b/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 = [ , + + /* + * 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 + */ + + + , ] export default connectRoutes diff --git a/src/utils/useAppHistory.js b/src/utils/useAppHistory.js index c79b77b5..0d988d0f 100644 --- a/src/utils/useAppHistory.js +++ b/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 } }