Merge pull request #1 from rslibed/t9n-updates

T9n updates to handle localization

package.json

@@ -3,7 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
- "@arcgis/core": "^4.17.0-next.20200915",
+ "@arcgis/core": "^4.18.1",
  "@esri/calcite-components": "^1.0.0-beta.42",
  "@reduxjs/toolkit": "^1.4.0",
  "@testing-library/jest-dom": "^4.2.4",
@@ -16,10 +16,11 @@
  "redux": "^4.0.5"
  },
  "scripts": {
- "start": "npm run copy && npm run copyIcons && react-scripts start",
- "build": "npm run copy && npm run copyIcons && react-scripts build",
+ "start": "npm run copy && npm run copyIcons && npm run copyT9n && react-scripts start",
+ "build": "npm run copy && npm run copyIcons && npm run copyT9n && react-scripts build",
  "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
  "copyIcons": "cp node_modules/@esri/calcite-components/dist/calcite/assets/*.json ./public/assets",
+ "copyT9n": "ncp ./src/t9n ./public/assets",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "bundle:report": "source-map-explorer build/**/*.js",

src/App.tsx

@@ -20,10 +20,6 @@ interface AppState {
 }
 
 class App extends Component<AppProps, AppState> {
- constructor(props: AppProps) {
- super(props);
- }
-
  render() {
  return (
  <div className="App">

src/Components/Modal/Modal.tsx

@@ -1,24 +1,38 @@
 import React, { Component } from "react";
+import { fetchMessageBundle } from "@arcgis/core/intl";
+import ModalT9n from "../../t9n/Modal/resources.json";
 
 interface ModalProps {}
 
 interface ModalState {
  open: boolean;
+ messages: typeof ModalT9n;
 }
 
 class Modal extends Component<ModalProps, ModalState> {
  constructor(props: ModalProps) {
  super(props);
  this.state = {
- open: true
+ open: true,
+ messages: null
  };
  }
 
+ async componentDidMount() {
+ const messages = await fetchMessageBundle(
+ `${process.env.PUBLIC_URL}/assets/Modal/resources`
+ );
+ this.setState({
+ messages
+ });
+ }
+
  render() {
+ const messages = this.state?.messages;
  return (
  <calcite-modal aria-labelledby="modal-title" active={this.state.open}>
  <h3 slot="header" id="modal-title">
- Welcome!
+ {messages?.welcome}
  </h3>
  <div slot="content">
  This ArcGIS Online Instant App example is built with the following:
@@ -41,7 +55,7 @@ class Modal extends Component<ModalProps, ModalState> {
  slot="primary"
  width="full"
  >
- Enter
+ {messages?.enter}
  </calcite-button>
  </calcite-modal>
  );

src/index.tsx

@@ -30,15 +30,26 @@ import { createStore } from "redux";
 import reducer from "./reducers/reducer";
 
 import {
- setPageLocale,
- setPageDirection
-} from "./ApplicationBase/support/domHelper";
+ registerMessageBundleLoader,
+ createJSONLoader,
+ setLocale
+} from "@arcgis/core/intl";
 
 (async function init(): Promise<void> {
  const base = (await createApplicationBase().load()) as ApplicationBase;
 
- setPageLocale(base.locale);
- setPageDirection(base.direction);
+ registerMessageBundleLoader(
+ createJSONLoader({
+ pattern: `${process.env.PUBLIC_URL}/`,
+ base: `${process.env.PUBLIC_URL}`,
+ location: new URL(
+ `${process.env.PUBLIC_URL}/assets/`,
+ window.location.href
+ )
+ })
+ );
+
+ setLocale(base.locale);
 
  const store = createStore(reducer, {
  base,

src/t9n/Modal/resources.json

@@ -0,0 +1,4 @@
+{
+ "welcome": "Welcome!",
+ "enter": "Enter"
+}

src/t9n/Modal/resources_en.json

@@ -0,0 +1,4 @@
+{
+ "welcome": "Welcome!",
+ "enter": "Enter"
+}

src/t9n/Modal/resources_fr.json

@@ -0,0 +1,4 @@
+{
+ "welcome": "Bienvenue!",
+ "enter": "Entrer"
+}