Update examples

Author: alex35mil

examples/App.re

@@ -14,7 +14,7 @@ let make = () => {
 
   <ReactIntl.IntlProvider
     locale={locale->Locale.toString}
-    messages={locale->Locale.toMessages->ReactIntl.messagesArrayToDict}>
+    messages={locale->Locale.translations->Util.translationsToDict}>
     <Page locale setLocale={locale => locale->SetLocale->dispatch} />
   </ReactIntl.IntlProvider>;
 };

examples/Locale.re

@@ -1,5 +1,7 @@
-[@bs.module] external en: ReactIntl.jsonMessages = "./translations/en.json";
-[@bs.module] external ru: ReactIntl.jsonMessages = "./translations/ru.json";
+[@bs.module "./translations/en.json"]
+external en: array(ReactIntl.translation) = "default";
+[@bs.module "./translations/ru.json"]
+external ru: array(ReactIntl.translation) = "default";
 
 type locale =
   | En
@@ -12,7 +14,7 @@ let toString =
   | En => "en"
   | Ru => "ru";
 
-let toMessages =
+let translations =
   fun
   | En => en
   | Ru => ru;

examples/Page.re

@@ -17,17 +17,17 @@ let make = (~locale, ~setLocale) => {
       </button>
     </div>
     <div className="message">
-      <ReactIntl.DefinedMessage message=pageLocale##hello />
+      <ReactIntl.FormattedMessage id="page.hello" defaultMessage="Hello" />
       " "->React.string
-      <ReactIntl.DefinedMessage message=pageLocale##world />
+      <ReactIntl.FormattedMessage id="page.world" defaultMessage="World" />
     </div>
     <div>
-      <ReactIntl.DefinedMessage message=pageLocale##today />
+      ReactIntl.(intl->Intl.formatMessage(pageLocale##today)->React.string)
       " "->React.string
-      {intl.formatDate(Js.Date.make())->React.string}
+      ReactIntl.(intl->Intl.formatDate(Js.Date.make())->React.string)
       " (intl.formatDate)"->React.string
       <br />
-      <ReactIntl.DefinedMessage message=pageLocale##today />
+      ReactIntl.(intl->Intl.formatMessage(pageLocale##today)->React.string)
       " "->React.string
       <ReactIntl.FormattedDate value={Js.Date.make()} />
       " (FormattedDate)"->React.string

examples/Util.re

@@ -0,0 +1,22 @@
+let wrapUnicodeString = (input: string) => {j|$input|j};
+
+let wrapOptUnicodeString = (input: Js.nullable(string)) =>
+  switch (input->Js.Nullable.toOption) {
+  | Some(input) => input->wrapUnicodeString
+  | None => ""
+  };
+
+let translationsToDict = (translations: array(ReactIntl.translation)) => {
+  translations->Belt.Array.reduce(
+    Js.Dict.empty(),
+    (dict, message) => {
+      let unicodeMessage = message##message->wrapOptUnicodeString;
+      let unicodeDefaultMessage = message##defaultMessage->wrapUnicodeString;
+      dict->Js.Dict.set(
+        message##id,
+        unicodeMessage !== "" ? unicodeMessage : unicodeDefaultMessage,
+      );
+      dict;
+    },
+  );
+};

examples/index.re

@@ -1,7 +1,7 @@
-[@bs.module]
-external en: ReactIntl.localeData('t) = "react-intl/locale-data/en";
-[@bs.module]
-external ru: ReactIntl.localeData('t) = "react-intl/locale-data/ru";
+[@bs.module "react-intl/locale-data/en"]
+external en: ReactIntl.localeData('t) = "default";
+[@bs.module "react-intl/locale-data/ru"]
+external ru: ReactIntl.localeData('t) = "default";
 
 ReactIntl.addLocaleData(en);
 ReactIntl.addLocaleData(ru);