From 527349688f812a23c6b811d18e4d4e83460283c0 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Fri, 24 Nov 2023 11:56:44 -0600 Subject: [PATCH] feat(webapp): show a message when select a language with an incomplete translation --- webapp/src/components/Header/index.js | 5 ++- webapp/src/config/general.js | 1 + webapp/src/context/state.context.js | 24 ++++++++++++++ .../customHooks/useAlertTranslationState.js | 31 +++++++++++++++++++ webapp/src/language/ko/ko.json | 3 +- webapp/src/language/zh/zh.json | 3 +- webapp/src/layouts/Dashboard.js | 6 ++++ 7 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 webapp/src/hooks/customHooks/useAlertTranslationState.js diff --git a/webapp/src/components/Header/index.js b/webapp/src/components/Header/index.js index 0bd583af6..92ef2ea9e 100644 --- a/webapp/src/components/Header/index.js +++ b/webapp/src/components/Header/index.js @@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next' import LocaleLink from 'components/LocaleLink' import ToggleColorMode from 'components/ToggleColorMode' import { generalConfig } from '../../config' +import useAlertTranslationState from '../../hooks/customHooks/useAlertTranslationState' import AntelopeLogoSvg from './AntelopeLogo' import styles from './styles' @@ -49,6 +50,7 @@ const LanguageMenu = () => { const [anchorMenu, setAnchorMenu] = useState(null) const { i18n } = useTranslation('translations') const location = useLocation() + const [,{ showAlertMessage }] = useAlertTranslationState() const toggleMenu = (event) => { setAnchorMenu(event.currentTarget) @@ -57,8 +59,9 @@ const LanguageMenu = () => { const closeMenu = (language) => { setAnchorMenu(null) - if (typeof language === 'string') { + if (typeof language === 'string' && language !== i18n.language) { i18n.changeLanguage(language) + showAlertMessage(language, true) } } diff --git a/webapp/src/config/general.js b/webapp/src/config/general.js index 786802b5d..95cb700f7 100644 --- a/webapp/src/config/general.js +++ b/webapp/src/config/general.js @@ -33,6 +33,7 @@ export const healthLights = Object.freeze({ export const defaultLanguage = 'en' export const languageResources = resources export const languages = Object.keys(resources) +export const languagesInProgress = ['ko','zh'] export const languagesLabels = { 'es': 'Español', 'en': 'English', diff --git a/webapp/src/context/state.context.js b/webapp/src/context/state.context.js index 226e4268f..6895dfc8b 100644 --- a/webapp/src/context/state.context.js +++ b/webapp/src/context/state.context.js @@ -99,6 +99,19 @@ const sharedStateReducer = (state, action) => { } } + case 'updateTranslationAlertsState': { + return { + ...state, + translationinProgress: { + ...state.translationinProgress, + isAlertShown: { + ...state.translationinProgress.isAlertShown, + [action.payload]: true + } + }, + } + } + default: { throw new Error(`Unsupported action type: ${action.type}`) } @@ -122,6 +135,9 @@ const initialValue = { tps: new Array(30).fill({ blocks: [], transactions: 0 }), tpb: new Array(60).fill({ blocks: [], transactions: 0 }), tpsWaitingBlock: null, + translationinProgress: { + isAlertShown: {} + } } export const SharedStateProvider = ({ ...props }) => { @@ -315,6 +331,13 @@ export const useSharedState = () => { scheduleInterval = null } + const updateTranslationAlertsState = language => { + dispatch({ + type: 'updateTranslationAlertsState', + payload: language, + }) + } + return [ state, { @@ -327,6 +350,7 @@ export const useSharedState = () => { stopTrackingInfo, startTrackingInfo, startTrackingProducerSchedule, + updateTranslationAlertsState }, ] } diff --git a/webapp/src/hooks/customHooks/useAlertTranslationState.js b/webapp/src/hooks/customHooks/useAlertTranslationState.js new file mode 100644 index 000000000..8fb48d8a8 --- /dev/null +++ b/webapp/src/hooks/customHooks/useAlertTranslationState.js @@ -0,0 +1,31 @@ +import { useTranslation } from 'react-i18next' + +import { useSharedState } from '../../context/state.context' +import { useSnackbarMessageState } from '../../context/snackbar-message.context' +import { generalConfig } from '../../config' + +const useAlertTranslationState = () => { + const [{ translationinProgress }, { updateTranslationAlertsState }] = + useSharedState() + const [, { showMessage }] = useSnackbarMessageState() + const { t } = useTranslation('') + + const showAlertMessage = (language, ignoreStatus = false) => { + if (!generalConfig.languagesInProgress.includes(language)) return + if (!ignoreStatus && translationinProgress?.isAlertShown[language]) return + + showMessage({ + type: 'info', + content: t('translationInProgress'), + anchorOrigin: { + vertical: 'top', + horizontal: 'center', + } + }) + updateTranslationAlertsState(language) + } + + return [{}, { showAlertMessage }] +} + +export default useAlertTranslationState diff --git a/webapp/src/language/ko/ko.json b/webapp/src/language/ko/ko.json index fa99dca2c..478ae87b8 100644 --- a/webapp/src/language/ko/ko.json +++ b/webapp/src/language/ko/ko.json @@ -50,7 +50,8 @@ "secondsAgo": "Seconds Ago", "metaTitle": "Antelope Tools network monitors real-time infrastructure data for multiple Antelope and EOSIO chains.", "metaDescription": "Antelope Tools Dashboard is a network monitor featuring real-time data on block producer nodes and blockchain infrastructure for multiple Antelope and EOSIO chains.", - "goBack": "Go Back" + "goBack": "Go Back", + "translationInProgress": "This translation is in progress, if you find an error please let us know." }, "routes": { "/>sidebar": "Dashboard", diff --git a/webapp/src/language/zh/zh.json b/webapp/src/language/zh/zh.json index fa99dca2c..478ae87b8 100644 --- a/webapp/src/language/zh/zh.json +++ b/webapp/src/language/zh/zh.json @@ -50,7 +50,8 @@ "secondsAgo": "Seconds Ago", "metaTitle": "Antelope Tools network monitors real-time infrastructure data for multiple Antelope and EOSIO chains.", "metaDescription": "Antelope Tools Dashboard is a network monitor featuring real-time data on block producer nodes and blockchain infrastructure for multiple Antelope and EOSIO chains.", - "goBack": "Go Back" + "goBack": "Go Back", + "translationInProgress": "This translation is in progress, if you find an error please let us know." }, "routes": { "/>sidebar": "Dashboard", diff --git a/webapp/src/layouts/Dashboard.js b/webapp/src/layouts/Dashboard.js index 875e2a58c..631e785cc 100644 --- a/webapp/src/layouts/Dashboard.js +++ b/webapp/src/layouts/Dashboard.js @@ -24,6 +24,7 @@ import { getLanguageFromPath, removeLanguageFromPath, } from 'utils/url-localization' +import useAlertTranslationState from '../hooks/customHooks/useAlertTranslationState' import styles from './styles' @@ -55,6 +56,7 @@ const Dashboard = ({ children }) => { const location = useLocation() const [lacchain] = useSharedState() const [routeName, setRouteName] = useState(INIT_VALUES) + const [,{ showAlertMessage }] = useAlertTranslationState() const navigate = useNavigate() @@ -91,6 +93,10 @@ const Dashboard = ({ children }) => { } } + if(generalConfig.languagesInProgress.includes(selectedLanguage)) { + showAlertMessage(selectedLanguage) + } + const route = routes.find(route => route.useParams ? removeParam(route.path) === removeParam(path)