SAP-samples / ui5-react-exercises-codejam

Material for SAP CodeJam events on UI5 Web Components for React. Step-by-step guide explaining how to build a frontend web application using UI5 Web Components for React.
Apache License 2.0
6 stars 2 forks source link

i18N Is not working #5

Open DIBYAJYOTINANDA opened 1 year ago

DIBYAJYOTINANDA commented 1 year ago
Hi Team, i have followed your code and try to replicate the i18N part in my own app and the code is not working as well as i checked i18n in your app is also not working
my app  

npx create-react-app my-app --template @ui5/cra-template-webcomponents-react

Index.js
------------------
//i18n setup code
import '@ui5/webcomponents/dist/Assets';
import '@ui5/webcomponents-fiori/dist/Assets';
import '@ui5/webcomponents-react/dist/Assets';
import { registerI18nLoader} from "@ui5/webcomponents-base/dist/i18nBundle.js";
import parseProperties from "@ui5/webcomponents-base/dist/PropertiesFileFormat.js";

const supportedLocales = ["en", "fr", "de", "es"];
supportedLocales.forEach(localeToRegister => {
    registerI18nLoader("myApp", localeToRegister, async (localeId) => {
        const props = await (await fetch(`./i18n/i18n_${localeId}.properties`)).text();
        return parseProperties(props);
    });
});

//i18n setup code end

Home.js
-------------------

import { useI18nBundle, spacing } from "@ui5/webcomponents-react-base";
const Home = (props) => {

  const i18nBundle = useI18nBundle("myApp");
  const EMP_BTN_TXT = i18nBundle.getText("tst");  // output is `tst`

return (
    <Fragment>
      <FlexBox
        justifyContent={FlexBoxJustifyContent.Center}
        wrap={FlexBoxWrap.Wrap}
        style={spacing.sapUiContentPadding}
      >
        <Button icon="employee" onClick={handleOnClick}>
          {EMP_BTN_TXT}
        </Button>
      </FlexBox>
    </Fragment>
  );
};

i18n
------
tst=Employee

please help

Regards, Dibyajyoti Nanda

MMoudy49 commented 1 year ago

Have you tried using parse from @ui5/webcomponents-base/dist/PropertiesFileFormat.js instead of parseProperties in your i18n setup code?