feat(webapp): show a message when select a language with an incomplet…

…e translation

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)
     }
   }
 

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',

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
     },
   ]
 }

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

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",

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",

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)