Adds interface for localized push notifications

- This is somewhat different from parse.com and probably more efficient

Author: flovilmart

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Fix: Updating array of Dates now keeps it's type (was changing to array of ISO strings, issue #590), thanks to [David Riha](https://github.com/rihadavid)
 * Fix: NaN displayed when filter input is empty or negative number (#749), thanks to [Miguel Serrrano](https://github.com/miguel-s)
 * Fix: Addresses issue related to displaying iOS alert object containing title and body keys (#539), thanks to [Robert Martin del Campo](https://github.com/repertus)
+* Feature: Adds support for localized push notifications if server version is high enough, thanks to [Florent Vilmart](https://github.com/flovilmart)
 
 ### 1.1.0
 

README.md

@@ -359,6 +359,27 @@ You can give read only access to a user on a per-app basis:
 
 With this configuration, user1 will have read only access to `myAppId1` and read/write access to `myAppId2`.
 
+## Configuring Localized Push Notifications
+
+With the latest version of the dashboard, it is possible to send localized messages for push notifications.
+You can provide a list of locales or languages you want to support for your dashboard users.
+
+```json
+{
+  "apps": [
+    {
+      "serverURL": "http://localhost:1337/parse",
+      "appId": "myAppId",
+      "masterKey": "myMasterKey",
+      "appName": "My Parse Server App",
+      "iconName": "MyAppIcon.png",
+      "supportedPushLocales": ["en", "ru", "fr"]
+    }
+  ],
+  "iconsFolder": "icons"
+}
+```
+
 ## Run with Docker
 
 It is easy to use it with Docker. First build the image:

src/dashboard/Push/PushNew.react.js

@@ -159,28 +159,23 @@ export default class PushNew extends DashboardView {
       this.setState({ pushAudiencesFetched :true });
     });
 
-    let {xhr, promise} = this.context.currentApp.isLocalizationAvailable();
-    this.xhrs.push(xhr);
-    promise.then(({ available }) => {
-      if (available) {
-        this.setState({ isLocalizationAvailable : true });
-        let {xhr, promise} = this.context.currentApp.fetchPushLocales();
-        this.xhrs.push(xhr);
-        promise.then(({ options }) => {
-          let filteredLocales = options.filter((locale) => {
-            if (locale === '' || locale === undefined) {
-              return false;
-            }
-            return true;
-          });
-          this.setState({
-            locales: filteredLocales,
-            availableLocales: filteredLocales
-          });
-        }).always(() => {
-          this.setState({ loadingLocale: false });
-        });
-      }
+    const available = this.context.currentApp.isLocalizationAvailable();
+    if (available) {
+      const locales = this.context.currentApp.fetchPushLocales();
+      let filteredLocales = locales.filter((locale) => {
+        if (locale === '' || locale === undefined) {
+          return false;
+        }
+        return true;
+      });
+      this.setState({
+        isLocalizationAvailable: true,
+        locales: filteredLocales,
+        availableLocales: filteredLocales
+      });
+    }
+    this.setState({
+      loadingLocale: false
     });
   }
 
@@ -203,6 +198,15 @@ export default class PushNew extends DashboardView {
     }
 
     const push_time = extractPushTime(changes);
+
+    // Gather the translations, and inject into the payload
+    Object.keys(changes).forEach((key) => {
+      if (key.indexOf('translation[') === 0) {
+        const locale = key.slice(12, key.length - 1);
+        payload[`alert-${locale}`] = changes[key];
+      }
+    });
+
     let body = {
       data: payload,
       where: changes.target || new Parse.Query(Parse.Installation),
@@ -530,16 +534,6 @@ export default class PushNew extends DashboardView {
             setField('translation_enable', value || null);
           }} />} />
       );
-      if (fields.translation_enable) {
-        translationSegment.push(
-          <SliderWrap key='warning' direction={Directions.DOWN} expanded={fields.translation_enable} block={true}>
-            <div className={styles.warning}>
-              <span>In some cases a locale may not be available for a user, either because they are running an earlier version of the SDK or their client has sent up an invalid locale. In those cases, they will receive the default message.</span>
-              <a target='_blank' style={{ paddingLeft: '5px' }}href={getSiteDomain() + TRANSLATE_MORE_INFO_URL}>More info.</a>
-            </div>
-          </SliderWrap>
-        );
-      }
       if (fields.translation_enable) {
         //locales change based on existing selection
 
@@ -759,14 +753,9 @@ export default class PushNew extends DashboardView {
       // localized message is empty
       if (changes.translation_enable) {
         this.state.localizedMessages.forEach((message) => {
-          if (changes.data_type === 'json') {
-            if (!isValidJSON(message.value)) {
-              invalidInputMessages.push(<span key='invalid-json'>Your <strong>message for {message.locale}</strong> is not valid JSON.</span>);
-            }
-          } else if (!message.value || message.value.trim() === '') {
+          if (!message.value || message.value.trim() === '') {
             emptyInputMessages.push(`message for ${message.locale} locale`);
           }
-
         });
       }
 

src/lib/ParseApp.js

@@ -39,6 +39,7 @@ export default class ParseApp {
     serverInfo,
     production,
     iconName,
+    supportedPushLocales,
   }) {
     this.name = appName;
     this.createdAt = created_at ? new Date(created_at) : new Date();
@@ -59,6 +60,7 @@ export default class ParseApp {
     this.serverURL = serverURL;
     this.serverInfo = serverInfo;
     this.icon = iconName;
+    this.supportedPushLocales = supportedPushLocales;
 
     this.settings = {
       fields: {},
@@ -404,13 +406,11 @@ export default class ParseApp {
   }
 
   isLocalizationAvailable() {
-    let path = '/apps/' + this.slug + '/is_localization_available';
-    return AJAX.abortableGet(path);
+    return this.serverInfo.features.push.localization === true;
   }
 
   fetchPushLocales() {
-    let path = '/apps/' + this.slug + '/installation_column_options?column=localeIdentifier';
-    return AJAX.abortableGet(path);
+    return this.supportedPushLocales;
   }
 
   fetchPushLocaleDeviceCount(audienceId, where, locales) {