From 80f8ec2bd9b56d87ef24ca4d9b71f2df214e6313 Mon Sep 17 00:00:00 2001
From: GalvinGao <me@galvingao.com>
Date: Mon, 20 Feb 2023 20:15:44 -0500
Subject: [PATCH] fix: i18n key value

---
 src/mixins/I18n.js | 13 +++++++------
 src/utils/i18n.js  | 43 +++++++++++--------------------------------
 2 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/src/mixins/I18n.js b/src/mixins/I18n.js
index 578f4a96..bbe60ce8 100644
--- a/src/mixins/I18n.js
+++ b/src/mixins/I18n.js
@@ -1,14 +1,15 @@
 import dayjs from 'dayjs'
 import Console from '@/utils/Console'
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import helmet from "@/utils/helmet";
-import { service } from '../utils/service';
+import {service} from '../utils/service';
 import i18n from '../i18n';
+import {transformMessages} from "@/utils/i18n";
 
 const fetchWithTimeout = (url, options, timeout = 5000) => {
   const controller = new AbortController();
   const id = setTimeout(() => controller.abort(), timeout);
-  return fetch(url, { ...options, signal: controller.signal }).finally(() => clearTimeout(id));
+  return fetch(url, {...options, signal: controller.signal}).finally(() => clearTimeout(id));
 };
 
 const fetchTranslations = async (languageKey) => {
@@ -33,7 +34,7 @@ const languageMapping = {
   ko: "ko_KR",
 }
 
-function changeLocale (localeId, save) {
+function changeLocale(localeId, save) {
   dayjs.locale(localeId);
   Console.info("i18n", "locale:", localeId, "| saving to vuex:", save);
   if (save) this.$store.commit("settings/changeLocale", localeId);
@@ -55,7 +56,7 @@ export function loadLanguageAsync(lang) {
   changeLocale.bind(this)(lang, false);
 
   return fetchTranslations(mappedLang).then((messages) => {
-    const transformedMessages = Object.freeze(messages);
+    const transformedMessages = Object.freeze(transformMessages(messages));
     Console.info("i18n", "loaded", lang, "translations:", transformedMessages);
     i18n.setLocaleMessage(lang, transformedMessages);
     loadedLanguages.push(mappedLang);
@@ -66,7 +67,7 @@ export function loadLanguageAsync(lang) {
 
 export default {
   methods: {
-    async changeLocale (localeId, save = true) {
+    async changeLocale(localeId, save = true) {
       await loadLanguageAsync.bind(this)(localeId)
 
       changeLocale.bind(this)(localeId, save);
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index b9c4fba1..a5107a79 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -1,44 +1,23 @@
-
-
 // messages are in the form of Record<string, string>.
 // if the key of the message contains `path1.path2`, it should be converted to a corresponding object
-// similarly, if the key of the message contains `path1.path2[number]`, it should be converted to a corresponding object with an array
-// e.g. { 'path1.path2': 'value', 'path1.path3[0]': 'value1', 'path1.path3[1]': 'value2' } should be converted to { path1: { path2: 'value', path3: ['value1', 'value2'] } }
-export function transformMessages (messages) {
+// e.g. { 'path1.path2': 'value', 'path1.path3': 'value' } => { path1: { path2: 'value', path3: 'value' } }
+export function transformMessages(messages) {
   const transformedMessages = {};
-  Object.keys(messages).forEach((key) => {
+  for (const key in messages) {
     const path = key.split('.');
+    const value = messages[key];
     let current = transformedMessages;
     for (let i = 0; i < path.length; i++) {
-      const pathPart = path[i];
-      if (pathPart.endsWith(']')) {
-        // array
-        const arrayPath = pathPart.split('[');
-        const arrayName = arrayPath[0];
-        const arrayIndex = parseInt(arrayPath[1].replace(']', ''));
-        if (!current[arrayName]) {
-          current[arrayName] = [];
-        }
-        if (i === path.length - 1) { // last part of the path
-          current[arrayName][arrayIndex] = messages[key] || undefined;
-        } else {
-          if (!current[arrayName][arrayIndex]) {
-            current[arrayName][arrayIndex] = {};
-          }
-          current = current[arrayName][arrayIndex];
-        }
+      const pathKey = path[i];
+      if (i === path.length - 1) {
+        current[pathKey] = value;
       } else {
-        // object
-        if (i === path.length - 1) { // last part
-          current[pathPart] = messages[key] || undefined
-        } else {
-          if (!current[pathPart]) {
-            current[pathPart] = {};
-          }
-          current = current[pathPart];
+        if (!current[pathKey]) {
+          current[pathKey] = {};
         }
+        current = current[pathKey];
       }
     }
-  });
+  }
   return transformedMessages;
 }