i10n provider for generic config

src/dashboardWebView/components/App.tsx

@@ -30,7 +30,7 @@ export interface IAppProps {
 export const App: React.FunctionComponent<IAppProps> = ({
   showWelcome
 }: React.PropsWithChildren<IAppProps>) => {
-  const { pages, settings, localeReady } = useMessages();
+  const { pages, settings } = useMessages();
   const view = useRecoilValue(DashboardViewSelector);
   const mode = useRecoilValue(ModeAtom);
   const [isDevMode, setIsDevMode] = useState(false);
@@ -70,7 +70,7 @@ export const App: React.FunctionComponent<IAppProps> = ({
     }
   }, []);
 
-  if (!settings || !localeReady) {
+  if (!settings) {
     return <Spinner />;
   }
 

src/dashboardWebView/hooks/useMessages.tsx

@@ -15,7 +15,6 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
 import { NavigationType } from '../models';
 import { GeneralCommands } from '../../constants';
-import * as l10n from '@vscode/l10n';
 
 export default function useMessages() {
   const [loading, setLoading] = useRecoilState(LoadingAtom);
@@ -25,7 +24,6 @@ export default function useMessages() {
   const [, setMode] = useRecoilState(ModeAtom);
   const [, setView] = useRecoilState(DashboardViewAtom);
   const [, setSearchReady] = useRecoilState(SearchReadyAtom);
-  const [localeReady, setLocaleReady] = useState<boolean>(false);
 
   const messageListener = (event: MessageEvent<EventData<any>>) => {
     const message = event.data;
@@ -61,12 +59,6 @@ export default function useMessages() {
       case GeneralCommands.toWebview.setMode:
         setMode(message.payload);
         break;
-      case GeneralCommands.toWebview.setLocalization:
-        l10n.config({
-          contents: message.payload
-        });
-        setLocaleReady(true);
-        break;
     }
   };
 
@@ -78,7 +70,6 @@ export default function useMessages() {
     Messenger.send(DashboardMessage.getTheme);
     Messenger.send(DashboardMessage.getData);
     Messenger.send(DashboardMessage.getMode);
-    Messenger.send(GeneralCommands.toVSCode.getLocalization);
 
     return () => {
       Messenger.unlisten(messageListener);
@@ -89,7 +80,6 @@ export default function useMessages() {
     loading,
     pages,
     viewData,
-    settings,
-    localeReady
+    settings
   };
 }

src/dashboardWebView/hooks/usePages.tsx

@@ -269,7 +269,6 @@ export default function usePages(pages: Page[]) {
 
     if (pages && pages.length > 0) {
       messageHandler.request<I18nConfig[]>(GeneralCommands.toVSCode.content.locales).then((config) => {
-        console.log('config', config);
         setLocales(config || []);
       });
     }

src/dashboardWebView/index.tsx

@@ -12,6 +12,7 @@ import { SettingsProvider } from './providers/SettingsProvider';
 import { CustomPanelViewResult } from '../models';
 import { Chatbot } from './components/Chatbot/Chatbot';
 import { updateCssVariables } from './utils';
+import { I10nProvider } from './providers/I10nProvider';
 
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;
@@ -50,7 +51,7 @@ export const routePaths: { [name: string]: string } = {
   settings: '/settings',
 };
 
-const mutationObserver = new MutationObserver((mutationsList, observer) => {
+const mutationObserver = new MutationObserver((_, __) => {
   updateCssVariables();
 });
 
@@ -88,17 +89,21 @@ if (elm) {
 
   if (type === 'preview') {
     render(
-      <SettingsProvider experimental={experimental === 'true'} version={version || ""}>
-        <Preview url={url} />
-      </SettingsProvider>, elm);
+      <I10nProvider>
+        <SettingsProvider experimental={experimental === 'true'} version={version || ""}>
+          <Preview url={url} />
+        </SettingsProvider>
+      </I10nProvider>, elm);
   } else if (type === 'chatbot') {
     render(
-      <SettingsProvider
-        aiUrl='https://frontmatter.codes'
-        experimental={experimental === 'true'}
-        version={version || ""}>
-        <Chatbot />
-      </SettingsProvider>, elm);
+      <I10nProvider>
+        <SettingsProvider
+          aiUrl='https://frontmatter.codes'
+          experimental={experimental === 'true'}
+          version={version || ""}>
+          <Chatbot />
+        </SettingsProvider>
+      </I10nProvider>, elm);
   } else {
     render(
       <RecoilRoot>
@@ -106,9 +111,11 @@ if (elm) {
           initialEntries={Object.keys(routePaths).map((key: string) => routePaths[key]) as string[]}
           initialIndex={1}
         >
-          <SettingsProvider experimental={experimental === 'true'} version={version || ""} webviewUrl={webviewUrl || ""}>
-            <App showWelcome={!!welcome} />
-          </SettingsProvider>
+          <I10nProvider>
+            <SettingsProvider experimental={experimental === 'true'} version={version || ""} webviewUrl={webviewUrl || ""}>
+              <App showWelcome={!!welcome} />
+            </SettingsProvider>
+          </I10nProvider>
         </MemoryRouter>
       </RecoilRoot>,
       elm

src/dashboardWebView/providers/I10nProvider.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { messageHandler } from '@estruyf/vscode/dist/client';
+import { GeneralCommands } from '../../constants';
+import * as l10n from '@vscode/l10n';
+
+interface I10nProviderProps { }
+
+const I10nContext = React.createContext<I10nProviderProps | undefined>(undefined);
+
+const I10nProvider: React.FunctionComponent<I10nProviderProps> = ({ children }: React.PropsWithChildren<I10nProviderProps>) => {
+  const [localeReady, setLocaleReady] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    messageHandler.request<any>(GeneralCommands.toVSCode.getLocalization).then((contents) => {
+      if (contents) {
+        l10n.config({
+          contents
+        });
+
+        setTimeout(() => {
+          setLocaleReady(true);
+        }, 0);
+      }
+    }).catch(() => {
+      setLocaleReady(false);
+      throw new Error('Error getting localization');
+    });
+  }, []);
+
+  return (
+    <I10nContext.Provider value={{}}>
+      {
+        localeReady && children
+      }
+    </I10nContext.Provider>
+  )
+};
+
+const useI10nContext = (): I10nProviderProps => {
+  const loadFunc = React.useContext(I10nContext);
+
+  if (loadFunc === undefined) {
+    throw new Error('useI10nContext must be used within the I10nProvider');
+  }
+
+  return loadFunc;
+};
+
+I10nContext.displayName = 'I10nContext';
+I10nProvider.displayName = 'I10nProvider';
+
+export { I10nProvider, useI10nContext };

src/listeners/dashboard/LocalizationListener.ts

@@ -12,7 +12,7 @@ export class LocalizationListener extends BaseListener {
   public static process(msg: PostMessageData) {
     switch (msg.command) {
       case GeneralCommands.toVSCode.getLocalization:
-        this.getLocalization();
+        this.getLocalization(msg.command, msg.requestId);
         break;
       case GeneralCommands.toVSCode.content.locales:
         this.getContentLocales(msg.command, msg.requestId);
@@ -20,10 +20,13 @@ export class LocalizationListener extends BaseListener {
     }
   }
 
-  public static async getLocalization() {
-    const fileContents = await getLocalizationFile();
+  public static async getLocalization(command: string, requestId?: string) {
+    if (!command || !requestId) {
+      return;
+    }
 
-    this.sendMsg(GeneralCommands.toWebview.setLocalization as any, fileContents);
+    const fileContents = await getLocalizationFile();
+    this.sendRequest(command as any, requestId, fileContents);
   }
 
   private static async getContentLocales(command: string, requestId?: string) {

src/listeners/panel/LocalizationListener.ts

@@ -11,14 +11,17 @@ export class LocalizationListener extends BaseListener {
   public static process(msg: PostMessageData) {
     switch (msg.command) {
       case GeneralCommands.toVSCode.getLocalization:
-        this.getLocalization();
+        this.getLocalization(msg.command, msg.requestId);
         break;
     }
   }
 
-  public static async getLocalization() {
-    const fileContents = await getLocalizationFile();
+  public static async getLocalization(command: string, requestId?: string) {
+    if (!command || !requestId) {
+      return;
+    }
 
-    this.sendMsg(GeneralCommands.toWebview.setLocalization as any, fileContents);
+    const fileContents = await getLocalizationFile();
+    this.sendRequest(command, requestId, fileContents);
   }
 }

src/panelWebView/ViewPanel.tsx

@@ -33,7 +33,6 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
     folderAndFiles,
     focusElm,
     unsetFocus,
-    localeReady,
     mode
   } = useMessages();
   const prevMediaSelection = usePrevious(mediaSelecting);
@@ -83,7 +82,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
     );
   }
 
-  if (loading && !localeReady) {
+  if (loading) {
     return <Spinner />;
   }
 

src/panelWebView/hooks/useMessages.tsx

@@ -10,13 +10,11 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
 import { useRecoilState } from 'recoil';
 import { PanelSettingsAtom } from '../state';
-import * as l10n from '@vscode/l10n';
 
 export default function useMessages() {
   const [metadata, setMetadata] = useState<any>({});
   const [settings, setSettings] = useRecoilState(PanelSettingsAtom);
   const [loading, setLoading] = useState<boolean>(false);
-  const [localeReady, setLocaleReady] = useState<boolean>(false);
   const [focusElm, setFocus] = useState<TagType | null>(null);
   const [folderAndFiles, setFolderAndFiles] = useState<FolderInfo[] | undefined>(undefined);
   const [mediaSelecting, setMediaSelecting] = useState<DashboardData | undefined>(undefined);
@@ -52,12 +50,6 @@ export default function useMessages() {
       case GeneralCommands.toWebview.setMode:
         setMode(message.payload);
         break;
-      case GeneralCommands.toWebview.setLocalization:
-        l10n.config({
-          contents: message.payload
-        })
-        setLocaleReady(true)
-        break;
     }
   };
 
@@ -99,7 +91,6 @@ export default function useMessages() {
     loading,
     mediaSelecting,
     mode,
-    localeReady,
     unsetFocus
   };
 }

src/panelWebView/index.tsx

@@ -17,6 +17,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-row.js';
 import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js';
 import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js';
 import '@bendera/vscode-webview-elements/dist/vscode-label.js';
+import { I10nProvider } from '../dashboardWebView/providers/I10nProvider';
 // import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
 
 // import '@vscode/webview-ui-toolkit/dist/esm/checkbox';
@@ -51,9 +52,11 @@ if (elm) {
   }
 
   render(
-    <RecoilRoot>
-      <ViewPanel />
-    </RecoilRoot>,
+    <I10nProvider>
+      <RecoilRoot>
+        <ViewPanel />
+      </RecoilRoot>
+    </I10nProvider>,
     elm
   );
 }