Refactoring

client/coral-configure/components/ConfigureCommentStream.js

@@ -3,22 +3,21 @@ import {Button, Checkbox, TextField} from 'coral-ui';
 
 import styles from './ConfigureCommentStream.css';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
-const lang = new I18n(translations);
+import I18n from 'coral-i18n/modules/i18n/i18n';
+const lang = new I18n();
 
 export default ({handleChange, handleApply, changed, ...props}) => (
   <form onSubmit={handleApply}>
     <div className={styles.wrapper}>
       <div className={styles.container}>
-        <h3>{lang.t('configureCommentStream.title')}</h3>
-        <p>{lang.t('configureCommentStream.description')}</p>
+        <h3>{lang.t('configure.title')}</h3>
+        <p>{lang.t('configure.description')}</p>
         <Button
           type="submit"
           className={styles.apply}
           onChange={handleChange}
           cStyle={changed ? 'green' : 'darkGrey'} >
-          {lang.t('configureCommentStream.apply')}
+          {lang.t('configure.apply')}
         </Button>
       </div>
       <ul>
@@ -30,8 +29,8 @@ export default ({handleChange, handleApply, changed, ...props}) => (
             onChange={handleChange}
             defaultChecked={props.premod}
             info={{
-              title: lang.t('configureCommentStream.enablePremod'),
-              description: lang.t('configureCommentStream.enablePremodDescription')
+              title: lang.t('configure.enablePremod'),
+              description: lang.t('configure.enablePremodDescription')
             }} />
         </li>
         <li>
@@ -42,8 +41,8 @@ export default ({handleChange, handleApply, changed, ...props}) => (
             onChange={handleChange}
             defaultChecked={props.premodLinksEnable}
             info={{
-              title: lang.t('configureCommentStream.enablePremodLinks'),
-              description: lang.t('configureCommentStream.enablePremodLinksDescription')
+              title: lang.t('configure.enablePremodLinks'),
+              description: lang.t('configure.enablePremodLinksDescription')
             }} />
         </li>
         <li>
@@ -54,8 +53,8 @@ export default ({handleChange, handleApply, changed, ...props}) => (
             onChange={handleChange}
             defaultChecked={props.questionBoxEnable}
             info={{
-              title: lang.t('configureCommentStream.enableQuestionBox'),
-              description: lang.t('configureCommentStream.enableQuestionBoxDescription')
+              title: lang.t('configure.enableQuestionBox'),
+              description: lang.t('configure.enableQuestionBoxDescription')
             }} />
           <div className={`${props.questionBoxEnable ? null : styles.hidden}`} >
             <TextField
@@ -63,7 +62,7 @@ export default ({handleChange, handleApply, changed, ...props}) => (
               onChange={handleChange}
               rows={3}
               value={props.questionBoxContent}
-              label={lang.t('configureCommentStream.includeQuestionHere')}
+              label={lang.t('configure.includeQuestionHere')}
             />
           </div>
         </li>

client/coral-embed-stream/src/Embed.js

@@ -164,7 +164,7 @@ class Embed extends React.Component {
         <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count count={asset.totalCommentCount}/></Tab>
-            <Tab>{lang.t('myProfile')}</Tab>
+            <Tab>{lang.t('my_profile')}</Tab>
             <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
           {

client/coral-framework/components/RestrictedContent.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import styles from './RestrictedContent.css';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-framework/translations.json';
-const lang = new I18n(translations);
+import I18n from 'coral-i18n/modules/i18n/i18n';
+const lang = new I18n();
 
 export default ({children, restricted, message = lang.t('contentNotAvailable'), restrictedComp}) => {
   if (restricted) {

client/coral-framework/components/SuspendedAccount.js

@@ -1,9 +1,11 @@
 import React, {Component, PropTypes} from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-framework/translations.json';
-const lang = new I18n(translations);
+
+import I18n from 'coral-i18n/modules/i18n/i18n';
+const lang = new I18n();
+
 import styles from './RestrictedContent.css';
 import {Button} from 'coral-ui';
+
 import validate from '../helpers/validate';
 
 class SuspendedAccount extends Component {

client/coral-i18n/locales/en.yml

@@ -0,0 +1,63 @@
+---
+en:
+  framework:
+    profile: Profile
+    my_profile: My profile
+    successUpdateSettings: The changes you have made have been applied to the comment stream on this article
+    successNameUpdate: Your username has been updated
+    contentNotAvailable: This content is not available
+    bannedAccountMsg: Your account is currently suspended. This means that you cannot Like Report or write comments. Please contact us if you have any questions.
+    editName:
+      msg: Your account is currently suspended because your username has been deemed inappropriate. To restore your account please enter a new username. Please contact us if you have any questions.
+      label: New Username
+      button: Submit
+      error: Usernames can contain letters numbers and _ only
+    viewMoreComments: view more comments
+    showAllComments: Show all comments
+    viewReply: view reply
+    viewAllRepliesInitial: view all 0 replies
+    viewAllReplies: view 0 replies
+    newCount: View 0 new 1
+    comment: comment
+    comments: comments
+    commentIsIgnored: This comment is hidden because you ignored this user.
+  configure:
+    apply: Apply
+    title: Configure Comment Stream
+    description: As an admin you may customize the settings for the comment stream for this asset
+    enablePremod: Enable Premoderation
+    enablePremodDescription: Moderators must approve any comment before its published.
+    enablePremodLinks: Pre-Moderate Comments Containing Links
+    enablePremodLinksDescription: Moderators must approve any comment containing a link before its published.
+    enableQuestionBox: Ask readers a question
+    enableQuestionBoxDescription: This question will appear at the top of this comment stream. Ask readers about a certain issue in the article or pose discussion questions etc.
+    includeQuestionHere: Write your question here.
+  error:
+    emailNotVerified: Email address 0 not verified.
+    email: Not a valid E-Mail
+    password: Password must be at least 8 characters
+    username: Usernames can contain letters numbers and _ only
+    confirmPassword: Passwords don't match. Please check again
+    organizationName: Organization name must only contain letters or numbers.
+    emailPasswordError: Email and/or password combination incorrect.
+    EMAIL_REQUIRED: An email address is required
+    PASSWORD_REQUIRED: Must input a password
+    PASSWORD_LENGTH: Password is too short
+    EMAIL_IN_USE: Email address already in use
+    EMAIL_USERNAME_IN_USE: Email address or username already in use
+    USERNAME_IN_USE: Username already in use
+    USERNAME_REQUIRED: Must input a username
+    NO_SPECIAL_CHARACTERS: Usernames can contain letters numbers and _ only
+    PROFANITY_ERROR: Usernames must not contain profanity. Please contact the administrator if you believe this to be in error.
+    NOT_AUTHORIZED: Not authorized.
+    EDIT_USERNAME_NOT_AUTHORIZED: You do not have permission to update your username.
+
+  settings:
+    profile: Profile
+    userNoComment: You've never left a comment. Join the conversation!
+    allComments: All Comments
+    profileSettings: Profile Settings
+    myCommentHistory: My comment History
+    signIn: Sign in
+    toAccess:  to access Profile
+    fromSettingsPage: From the Profile Page you can see your comment history.

client/coral-i18n/locales/es.yml

@@ -0,0 +1,62 @@
+---
+es:
+  framework:
+    profile: Pérfil
+    my_profile: Mi pérfil
+    successUpdateSettings: La configuración de este articulo fue actualizada
+    successBioUpdate: Tu biografia fue actualizada
+    contentNotAvailable: El contenido no se encuentra disponible
+    bannedAccountMsg: Tu cuenta se encuentra suspendida. Esto significa que no puedes gustar marcar o escribir commentarios.
+    editName:
+      msg: Your account is currently suspended because your username has been deemed inappropriate. To restore your account please enter a new username. Please contact us if you have any questions.
+      label: New Username
+      button: Submit
+      error: Usernames can contain letters numbers and _ only
+    viewMoreComments: Ver commentarios más
+    viewReply: ver respuesta
+    viewAllRepliesInitial: ver todas las 0 respuestas
+    viewAllReplies: ver 0 respuestas
+    newCount: Ver 0 1 más
+    comment: commentario
+    comments: commentarios
+    commentIsIgnored: Este comentario está escondido porque has ignorado al usuario.
+    showAllComments: Mostrar todos los comentarios
+  configure:
+    apply: Aplicar
+    title: Configurar los comentarios
+    description: Como Administrador/a puedes modificar las opciones de los comentarios en este artículo
+    enablePremod: Activar Pre Moderación
+    enablePremodDescription: Los y las Moderadoras deben aprobar cualquier comentario antes de su publicación
+    enablePremodLinks: Pre-Moderar Comentarios que contienen Enlaces
+    enablePremodLinksDescription: Los y las moderadoras deben aprobar cualquier comentario que contengan enlaces antes de su publicación.
+    enableQuestionBox: Hacer una pregunta a los y las lectoras.
+    enableQuestionBoxDescription: Esta pregunta aparecera en la parte de arriba del hilo de comentarios.
+    includeQuestionHere: Escribir la pregunta aquí.
+  settings:
+    profile: Perfil
+    userNoComment: No has dejado aún ningún comentario. ¡Únete a la conversación!
+    allComments: Todos los comentarios
+    profileSettings: Configuración del perfil
+    myCommentHistory: Mi historial de comentarios
+    signIn: Entrar
+    toAccess: para acceder a al perfil
+    fromSettingsPage: Desde la página de configuración puedes ver tu historia de comentarios.
+  error:
+    emailNotVerified: E-mail 0 no verificado.
+    email: No es un e-mail válido
+    password: La contraseña debe tener por lo menos 8 caracteres
+    username: Los nombres pueden contener letras números y _
+    organizationName: El nombre de la organización debe contener letras y/o números.
+    confirmPassword: Las contraseñas no coinciden
+    emailPasswordError: E-mail y/o contraseña incorrecta.
+    EMAIL_REQUIRED: Se requiere un e-mail
+    PASSWORD_REQUIRED: Debe ingresar una contraseña
+    PASSWORD_LENGTH: La contraseña es muy corta
+    EMAIL_IN_USE: El e-mail se encuentra en uso
+    EMAIL_USERNAME_IN_USE: E-mail o Nombre en uso.
+    USERNAME_IN_USE: Nombre en uso.
+    USERNAME_REQUIRED: Debe ingresar un nombre
+    NO_SPECIAL_CHARACTERS: Los nombres pueden contener letras números y _
+    PROFANITY_ERROR: Los nombres no pueden contener blasfemias. Por favor contacte al o la administradora si cree que esto es un error
+    NOT_AUTHORIZED: Acción no autorizada.
+    EDIT_USERNAME_NOT_AUTHORIZED: No tiene permiso para editar el nombre de usuario.

client/coral-i18n/modules/i18n/i18n.js

@@ -3,6 +3,11 @@ import esTA from '../../../../node_modules/timeago.js/locales/es';
 import has from 'lodash/has';
 import get from 'lodash/get';
 
+// To Do
+// check on how to load the translations from YML file
+
+// Look at other i18n work in express/node
+
 /**
  * Default locales, this should be overriden by config file
  */
@@ -14,21 +19,27 @@ class i18n {
      * Register locales
      */
 
-    this.locales = {'en': 'en', 'es': 'es'};
+    this.locales = {'en': 'locales/en.yml', 'es': 'locales/es.yml'};
+
     timeago.register('es_ES', esTA);
     this.timeagoInstance = new timeago();
 
     /**
      * Load translations
      */
+    // To Do : get all the yml from locales
     let trans = translations || {en: {}};
 
     try {
       const locale = localStorage.getItem('locale') || navigator.language;
       localStorage.setItem('locale', locale);
+
       const lang = this.locales[locale.split('-')[0]] || 'en';
       this.translations = trans[lang];
+
     } catch (err) {
+
+      // To Do: get configuration for default translation
       this.translations = trans['en'];
     }
 
@@ -72,7 +83,9 @@ class i18n {
     this.timeago = (time) => {
       return this.timeagoInstance.format(new Date(time));
     };
+
   }
+
 }
 
 export default i18n;

client/coral-settings/components/NotLoggedIn.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import styles from './NotLoggedIn.css';
-import translations from '../translations';
-import I18n from 'coral-framework/modules/i18n/i18n';
-const lang = new I18n(translations);
+import I18n from 'coral-i18n/modules/i18n/i18n';
+
+const lang = new I18n();
 
 export default ({showSignInDialog}) => (
   <div className={styles.message}>

client/coral-settings/containers/ProfileContainer.js

@@ -1,7 +1,7 @@
 import {connect} from 'react-redux';
 import {compose} from 'react-apollo';
 import React, {Component} from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
+import I18n from 'coral-i18n/modules/i18n/i18n';
 import {bindActionCreators} from 'redux';
 
 import {myCommentHistory, myIgnoredUsers} from 'coral-framework/graphql/queries';
@@ -15,8 +15,7 @@ import CommentHistory from 'coral-plugin-history/CommentHistory';
 
 import {showSignInDialog, checkLogin} from 'coral-framework/actions/auth';
 
-import translations from '../translations';
-const lang = new I18n(translations);
+const lang = new I18n();
 
 class ProfileContainer extends Component {
   constructor (props) {