PNSPS-frontend-MaterialUI/src/components/I18nProvider.js

import { useState, useEffect, createContext } from 'react';
import { IntlProvider } from 'react-intl';
import enMessages from '../translations/en.json';
import cnMessages from '../translations/zh-CN.json';
import hkMessages from '../translations/zh-HK.json';

import { GET_COMBO, GET_CONTENT } from "utils/ApiPathConst";
import { get } from "utils/HttpUtils";

const LocaleContext = createContext();

export const I18nProvider = ({ children }) => {
    const systemMessages = {
        "en": enMessages,
        "zh": hkMessages,
        "zh-HK": hkMessages,
        "zh-CN": cnMessages
    };


    const [locale, setLocale] = useState('en'); // Default locale, you can change this as per your requirement
    const [messages, setMessages] = useState(systemMessages[locale]);

    const loadTermsAndConditions = () => {
        get({
            url: GET_CONTENT,
            onSuccess: (responseData) => {
                for (const key in responseData) {
                    const value = responseData[key];
                    enMessages[key] = value.en??"";
                    cnMessages[key] = value.cn??"";
                    hkMessages[key] = value.zh??"";
                } 
            }
        });


        get({
            url: GET_COMBO,
            onSuccess: (responseData) => {
                for (let i = 0; i < responseData.length; i++) {
                    let item = responseData[i];
                    enMessages[item.key] = item.en;
                    cnMessages[item.key] = item.cn;
                    hkMessages[item.key] = item.zh;
                }

            }
        });
    }

    useEffect(() => {
        loadTermsAndConditions();
        if (localStorage.getItem('locale') === null) {
            //no locale case
            localStorage.setItem('locale', 'en');
        }
        else {
            setLocale(localStorage.getItem('locale'));
        }
    }, []);

    useEffect(() => {
        // Load the messages for the selected locale
        const fetchMessages = async () => {
            setMessages(systemMessages[locale]);
        };

        fetchMessages();
    }, [locale]);

    return (
        <LocaleContext.Provider value={{ locale, setLocale }} >
            <IntlProvider locale={locale} messages={messages}>
                {children}
            </IntlProvider>
        </LocaleContext.Provider>
    );
}

export default LocaleContext;