DO NOT MERGE THIS TO MASTER

Quick hack to try out the translations API.
zooniverse · Sep 4, 2017 · 8ca48ec · 8ca48ec
1 parent 328493a
commit 8ca48ec
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 10 deletions.
diff --git a/app/pages/project/home/metadata.jsx b/app/pages/project/home/metadata.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router';
 import TalkStatus from './talk-status';
 
+import translations from '../translations';
+
 class ProjectMetadataStat extends React.Component {
   render() {
     return (
@@ -73,7 +75,7 @@ export default class ProjectMetadata extends React.Component {
       <div className="project-home-page__container">
         <div className="project-metadata">
           <Link to={statsLink}>
-            <span>{project.display_name}{' '}Statistics</span>
+            <span>{translations.strings.project.title || project.display_name}{' '}Statistics</span>
           </Link>
 
           {this.renderStatus()}

diff --git a/app/pages/project/home/project-home.jsx b/app/pages/project/home/project-home.jsx
@@ -8,6 +8,8 @@ import ProjectMetadata from './metadata';
 import ProjectHomeWorkflowButtons from './home-workflow-buttons';
 import TalkStatus from './talk-status';
 
+import translations from '../translations';
+
 const ProjectHomePage = (props) => {
   const avatarSrc = props.researcherAvatar || '/assets/simple-avatar.png';
   const renderTalkSubjectsPreview = props.talkSubjects.length > 2;
@@ -19,7 +21,7 @@ const ProjectHomePage = (props) => {
           <FinishedBanner project={props.project} />
         </div>)}
 
-      <div className="project-home-page__description">{props.project.description}</div>
+      <div className="project-home-page__description">{translations.strings.project.description || props.project.description}</div>
 
       <ProjectHomeWorkflowButtons
         activeWorkflows={props.activeWorkflows}
@@ -69,9 +71,9 @@ const ProjectHomePage = (props) => {
           </div>)}
 
         <div className="project-home-page__about-text">
-          <h4>About {props.project.display_name}</h4>
+          <h4>About {translations.strings.project.title || props.project.display_name}</h4>
           {props.project.introduction &&
-            <Markdown project={props.project}>{props.project.introduction}</Markdown>}
+            <Markdown project={props.project}>{translations.strings.project.introduction || props.project.introduction}</Markdown>}
         </div>
       </div>
     </div>

diff --git a/app/pages/project/home/talk-status.jsx b/app/pages/project/home/talk-status.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { sugarApiClient } from 'panoptes-client/lib/sugar';
 import { Link } from 'react-router';
 
+import translations from '../translations';
+
 export default class TalkStatus extends React.Component {
 
   constructor() {
@@ -31,7 +33,7 @@ export default class TalkStatus extends React.Component {
     return (
       <div className="project-home-page__talk-stat">
         <span>
-          <strong>{this.state.activeUsers}</strong> {peopleAmount} talking about <strong>{this.props.project.display_name}
+          <strong>{this.state.activeUsers}</strong> {peopleAmount} talking about <strong>{translations.strings.project.title || this.props.project.display_name}
           </strong> right now.
         </span>
         <Link to={`/projects/${this.props.project.slug}/talk`} className="join-in standard-button">Join in</Link>

diff --git a/app/pages/project/index.cjsx b/app/pages/project/index.cjsx
@@ -5,6 +5,7 @@ apiClient = require 'panoptes-client/lib/api-client'
 counterpart = require 'counterpart'
 isAdmin = require '../../lib/is-admin'
 ProjectPage = require './project-page'
+translations = require('./translations').default
 
 counterpart.registerTranslations 'en',
   loading: '(Loading)'
@@ -122,7 +123,8 @@ ProjectPageController = React.createClass
             awaitProjectAvatar,
             awaitProjectCompleteness,
             awaitProjectRoles,
-            awaitPreferences
+            awaitPreferences,
+            translations.load('project', project.id, 'es')
           ]).then(([background, owner, pages, projectAvatar, projectIsComplete, projectRoles, preferences]) =>
               @setState({ background, owner, pages, projectAvatar, projectIsComplete, projectRoles, preferences })
               @getSelectedWorkflow(project, preferences)

diff --git a/app/pages/project/project-page.cjsx b/app/pages/project/project-page.cjsx
@@ -7,7 +7,8 @@ Translate = require 'react-translate-component'
 Thumbnail = require('../../components/thumbnail').default
 classnames = require 'classnames'
 PotentialFieldGuide = require './potential-field-guide'
-`import SOCIAL_ICONS from '../../lib/social-icons'`
+`import SOCIAL_ICONS from '../../lib/social-icons';`
+translations = require('./translations').default
 
 counterpart.registerTranslations 'en',
   project:
@@ -89,10 +90,10 @@ ProjectPage = React.createClass
     if betaApproved
       <div>
         <p>Under Review</p>
-        {@props.project.display_name}
+        {translations.strings.project.title || @props.project.display_name}
       </div>
     else
-      @props.project.display_name
+      translations.strings.project.title || @props.project.display_name
 
   render: ->
     rearrangedLinks = @props.project.urls.sort (a, b) => a.path? & !b.path? ? 1 : 0
@@ -129,7 +130,7 @@ ProjectPage = React.createClass
           <a href={@props.project.redirect} className="tabbed-content-tab" target="_blank">
             {if @props.projectAvatar?
               <Thumbnail src={@props.projectAvatar.src} className="avatar" width={AVATAR_SIZE} height={AVATAR_SIZE} />}
-            Visit {@props.project.display_name}
+            Visit {translations.strings.project.title || @props.project.display_name}
           </a>
         else
           <IndexLink to="#{projectPath}" activeClassName="active" className={avatarClasses} onClick={logClick?.bind this, 'project.nav.home'}>

diff --git a/app/pages/project/translations.js b/app/pages/project/translations.js
@@ -0,0 +1,24 @@
+import apiClient from 'panoptes-client/lib/api-client';
+
+const translations = {
+  strings: {},
+  load: (translated_type, translated_id, language) => {
+    delete translations.strings[translated_type];
+    return apiClient
+      .type('translations')
+      .get({ translated_type, translated_id, language })
+      .then(([translation]) => {
+        translations.strings[translated_type] = translation.strings;
+      })
+      .catch(error => {
+        console.log(error.status);
+        switch (error.status) {
+          case 404:
+            translations.strings[translated_type] = {};
+            break;
+        }
+      });
+  }
+};
+
+export default translations;