Chinese translations and intl demo

package.json

@@ -62,6 +62,8 @@
     "ps-tree": "1.2.0",
     "react-beautiful-dnd": "10.1.1",
     "react-custom-scrollbars": "4.2.1",
+    "react-intl": "^2.8.0",
+    "react-intl-redux": "^2.1.0",
     "rimraf": "2.6.2",
     "yarn": "1.12.3"
   },

src/components/AppSettingsModal/AppSettingsModal.message.js

@@ -0,0 +1,62 @@
+// @flow
+import { defineMessages } from 'react-intl';
+
+const messages = {
+  main: {
+    title: {
+      id: 'appSettingsModal.main.title',
+      defaultMessage: 'Preferences',
+      description: 'Title for the whole "Preferences" part',
+    },
+    errorMessage: {
+      id: 'appSettingsModal.main.errorMessage',
+      defaultMessage: "Path doesn't exist.",
+      description: "Error message if project folder doesn't exist",
+    },
+    errorPrompt: {
+      id: 'appSettingsModal.main.errorPrompt',
+      defaultMessage:
+        'Please check your default project path or use the directory picker to select the path.',
+      description: "Prompt message if project folder doesn't exist",
+    },
+    save: {
+      id: 'appSettingsModal.main.save',
+      defaultMessage: 'Save',
+      description: 'Text for the save button',
+    },
+  },
+  general: {
+    title: {
+      id: 'appSettingsModal.general.title',
+      defaultMessage: 'General',
+      description: 'Title for the "General" part',
+    },
+    projectPath: {
+      id: 'appSettingsModal.general.projectPath',
+      defaultMessage: 'Default Project Path',
+      description: 'Title for "Default Project Path" under the "General" part',
+    },
+    projectType: {
+      id: 'appSettingsModal.general.projectType',
+      defaultMessage: 'Default Project Type',
+      description: 'Title for "Default Project Type" under the "General" part',
+    },
+  },
+  privacy: {
+    title: {
+      id: 'appSettingsModal.privacy.title',
+      defaultMessage: 'Privacy',
+      description: 'Title for the "Privacy" part',
+    },
+    enableUsageTracking: {
+      id: 'appSettingsModal.privacy.enableUsageTracking',
+      defaultMessage: 'Enable anonymous usage tracking',
+      description:
+        'Title for "Enable anonymous usage tracking" under the "privacy" part',
+    },
+  },
+};
+
+const definedMessages = defineMessages(messages);
+
+export default definedMessages;

src/components/ApplicationMenu/ApplicationMenu.js

@@ -8,6 +8,7 @@ import { shell, remote } from 'electron';
 
 import * as actions from '../../actions';
 import { GUPPY_REPO_URL } from '../../constants';
+import { LANGUAGE_CODES, LANGUAGE_CAPTIONS } from '../../locale/constants';
 import { IN_APP_FEEDBACK_URL } from '../../config/app';
 import {
   isMac,
@@ -23,22 +24,13 @@ import {
 } from '../../reducers/projects.reducer';
 import { getDevServerTaskForProjectId } from '../../reducers/tasks.reducer';
 import { getOnlineState } from '../../reducers/app-status.reducer';
-import { getLangauge } from './../../reducers/app-settings.reducer';
+import { getLanguage } from './../../reducers/intl.reducer';
 
 import type { Project, Task } from '../../types';
 import type { Dispatch } from '../../actions/types';
 
 const { app, process, Menu } = remote;
 
-// todo: find a better place for this constant
-const languageCaptions = {
-  en: 'English',
-  de: 'German',
-  ch: 'Chinese',
-};
-
-const languageCodes = ['en', 'de', 'ch'];
-
 type Props = {
   projects: Array<Project>,
   selectedProject: ?Project,
@@ -201,8 +193,8 @@ class ApplicationMenu extends Component<Props> {
           {
             id: 'language',
             label: isMac ? 'Language' : '&Language',
-            submenu: languageCodes.map(langCode => ({
-              label: languageCaptions[langCode],
+            submenu: LANGUAGE_CODES.map(langCode => ({
+              label: LANGUAGE_CAPTIONS[langCode],
               click: () => changeLanguage(langCode),
               type: language.startsWith(langCode) ? 'checkbox' : 'normal',
               checked: language.startsWith(langCode),
@@ -234,8 +226,8 @@ class ApplicationMenu extends Component<Props> {
           {
             id: 'language',
             label: isMac ? 'Language' : '&Language',
-            submenu: languageCodes.map(langCode => ({
-              label: languageCaptions[langCode],
+            submenu: LANGUAGE_CODES.map(langCode => ({
+              label: LANGUAGE_CAPTIONS[langCode],
               click: () => changeLanguage(langCode),
               type: language.startsWith(langCode) ? 'checkbox' : 'normal',
               checked: language.startsWith(langCode),
@@ -363,7 +355,7 @@ const mapStateToProps = state => {
     devServerTask,
     projects,
     isOnline: getOnlineState(state),
-    language: getLangauge(state),
+    language: getLanguage(state),
   };
 };