✨ Highlight missing localizations

nest_frontend/LocalizationStrings.js

@@ -9,7 +9,7 @@
  * "{number} km radius"
  * ```
  */
-const LOCALIZATION = {
+export default {
     // 🇮🇹
     it: {
         appName: "N.E.S.T.",

nest_frontend/components/providers/GlobalLanguage.js

@@ -1,7 +1,8 @@
-import React from "react"
+import React, { useCallback } from "react"
 import useLocalStorageState from "../../hooks/useLocalStorageState"
 import ContextLanguage from "../../contexts/ContextLanguage"
 import LocalizationStrings from "../../LocalizationStrings"
+import Style from "./GlobalLanguage.module.css"
 
 
 /**
@@ -16,7 +17,29 @@ import LocalizationStrings from "../../LocalizationStrings"
 export default function GlobalLanguage({ children }) {
     const [lang, setLang] = useLocalStorageState("language", "it")
 
-    const strings = LocalizationStrings[lang]
+    const getString = useCallback(
+        (target, name) => {
+            const languageStrings = LocalizationStrings[lang]
+            const defaultStrings = LocalizationStrings["it"]
+
+            if(languageStrings.hasOwnProperty(name)) {
+                return languageStrings[name]
+            }
+            else if(defaultStrings.hasOwnProperty(name)) {
+                console.warn("Missing ", lang, " localization for string ", name)
+                return <i className={Style.MissingLocalization}>{defaultStrings[name]}</i>
+
+            }
+            else {
+                console.warn("Missing string ", name)
+                return <i className={Style.MissingString}>MISSING STRING</i>
+            }
+        },
+        [lang]
+    )
+
+    const strings = new Proxy({}, {get: getString})
+
 
     return (
         <ContextLanguage.Provider value={{ lang, setLang, strings }}>

nest_frontend/components/providers/GlobalLanguage.module.css

@@ -0,0 +1,10 @@
+.MissingLocalization {
+    background-color: darkorange;
+    color: white;
+}
+
+.MissingString {
+    background-color: red;
+    color: white;
+    font-weight: bold;
+}