Merge pull request #229 from CaptainFact/staging

Release 0.8.16

.babelrc

@@ -1,10 +1,12 @@
 {
-  "presets": ["es2015", "react"],
+  "presets": [
+    "es2015",
+    "react"
+  ],
   "plugins": [
     "transform-decorators-legacy",
     "transform-runtime",
     "transform-class-properties",
-    "transform-object-rest-spread",
-    ["inline-json-import", {}]
+    "transform-object-rest-spread"
   ]
-}
+}

.eslintrc.yml

@@ -60,6 +60,10 @@ rules:
       specialLink: ['To']
   jsx-a11y/alt-text: ['warn']
   jsx-a11y/label-has-for: ['warn']
+  jsx-a11y/label-has-associated-control:
+    - warn
+    - controlComponents:
+      - "Field"
   jsx-a11y/click-events-have-key-events: ['warn']
   jsx-a11y/no-static-element-interactions: ['warn']
   jsx-a11y/media-has-caption: ['warn']

Dockerfile

@@ -1,12 +1,12 @@
 # CaptainFact frontend container
 # You must attach a volume containing cert.pem + privkey.pem at /etc/nginx/cert/
-FROM betree/centos-nginx-nodejs-sass:latest
+FROM betree/centos-nginx-nodejs:latest
 MAINTAINER Benjamin Piouffle <[email protected]>
 
 WORKDIR /opt/app
 
 # Cache dependencies
-COPY package.json .
+COPY package.json package-lock.json ./
 RUN npm install
 
 # Build project

README.md

@@ -6,6 +6,7 @@
 <a href="./LICENSE"><img src="https://img.shields.io/github/license/CaptainFact/captain-fact-frontend.svg" alt="AGPL3"></a>
 <a href="https://travis-ci.org/CaptainFact/captain-fact-frontend"><img src="https://travis-ci.org/CaptainFact/captain-fact-frontend.svg?branch=travis-configuration" alt="Build Status" /></a>
 <a href='https://coveralls.io/github/CaptainFact/captain-fact-frontend?branch=master'><img src='https://coveralls.io/repos/github/CaptainFact/captain-fact-frontend/badge.svg?branch=master' alt='Coverage Status' /></a>
+<a href='https://greenkeeper.io/'><img src='https://badges.greenkeeper.io/CaptainFact/captain-fact-frontend.svg' alt='Greenkeeper badge' /></a>
 </p>
 <hr/>
 <p align="center">
@@ -21,12 +22,14 @@ If you're already have the API running locally, a simple `npm install && npm sta
 should be enough. Otherwise follow the procedure below:
 
 * Install (if you don't have them):
-  * [Docker](https://docs.docker.com/install/) (to start the API easily)
+  * [Docker](https://docs.docker.com/install/) 
+    and [docker-compose](https://docs.docker.com/compose/install/)
+    (to start the API easily)
   * NodeJS, ideally using [asdf](https://github.com/asdf-vm/asdf) with `NODEJS_CHECK_SIGNATURES=no asdf install`
   * App dependencies: `npm install`
 
 * Run:
-  * `./dev/start_api.sh` - Start the API (with an Elixir console attached)
+  * `docker-compose up` - Start the API
   * `npm start` - Start the frontend
   * `npm run test` - run all unit tests
 

app/components/App/LanguageSelector.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Map } from 'immutable'
 import classNames from 'classnames'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 
 import { Icon } from '../Utils/Icon'
 
@@ -11,7 +11,7 @@ const defaultLocales = new Map({
   fr: 'Français'
 })
 
-@translate() // Force waiting for translations to be loaded
+@withNamespaces() // Force waiting for translations to be loaded
 export default class LanguageSelector extends React.PureComponent {
   render() {
     const sizeClass = this.props.size ? `is-${this.props.size}` : null

app/components/App/Sidebar.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 import classNames from 'classnames'
 import capitalize from 'voca/capitalize'
 
@@ -24,7 +24,7 @@ import Button from '../Utils/Button'
   isLoadingUser: state.CurrentUser.isLoading,
   sidebarExpended: state.UserPreferences.sidebarExpended
 }), {logout, toggleSidebar, closeSidebar})
-@translate('main')
+@withNamespaces('main')
 export default class Sidebar extends React.PureComponent {
   constructor(props) {
     super(props)

app/components/Comments/CommentActions.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 
 import OwnCommentActions from './OwnCommentActions'
 import OtherCommentActions from './OtherCommentActions'
@@ -44,4 +44,4 @@ const CommentActions = ({
   </nav>
 )
 
-export default translate('videoDebate')(CommentActions)
+export default withNamespaces('videoDebate')(CommentActions)

app/components/Comments/CommentDisplay.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 import { change } from 'redux-form'
 import classNames from 'classnames'
 
@@ -28,7 +28,7 @@ import { CommentsList } from './CommentsList'
   replies: state.VideoDebate.comments.replies.get(comment.id),
   isFlagged: state.VideoDebate.comments.myFlags.has(comment.id)
 }), {addModal, deleteComment, flagComment, commentVote, change, flashErrorUnauthenticated})
-@translate('main')
+@withNamespaces('main')
 export class CommentDisplay extends React.PureComponent {
   constructor(props) {
     super(props)

app/components/Comments/CommentForm.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { Field, reduxForm, getFormValues } from 'redux-form'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 import isURL from 'validator/lib/isURL'
 import { withRouter } from 'react-router'
 
@@ -47,7 +47,7 @@ const validate = ({ source, text }) => {
   }
 }, {postComment, flashErrorUnauthenticated})
 @reduxForm({form: 'commentForm', validate})
-@translate('videoDebate')
+@withNamespaces('videoDebate')
 @withRouter
 export class CommentForm extends React.Component {
   state = { isCollapsed: true }

app/components/Comments/CommentHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import  { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 
 import { USER_PICTURE_SMALL } from '../../constants'
 import UserPicture from '../Users/UserPicture'
@@ -24,4 +24,4 @@ const CommentHeader = ({t, comment: {user, inserted_at}, withoutActions}) => (
   </div>
 )
 
-export default translate('main')(CommentHeader)
+export default withNamespaces('main')(CommentHeader)

app/components/Comments/CommentsListExpender.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 
 import Button from '../Utils/Button'
 
 
-const CommentsListExpender = ({t, onClick, nesting, count}) => (
+const CommentsListExpender = ({ t, onClick, nesting, count }) => (
   <div className="comments-expender">
     <Button onClick={onClick}>
       {t('comment.loadMore', {
@@ -15,4 +15,4 @@ const CommentsListExpender = ({t, onClick, nesting, count}) => (
   </div>
 )
 
-export default translate('videoDebate')(CommentsListExpender)
+export default withNamespaces('videoDebate')(CommentsListExpender)

app/components/Comments/IconModerationPending.jsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 
 import { Icon } from '../Utils/Icon'
 
 
-const IconModerationPending = ({t}) => (
+const IconModerationPending = ({ t }) => (
   <Icon
     className="reported"
     name="ban"
     title={t('pending')}
   />
 )
 
-export default translate('moderation')(IconModerationPending)
+export default withNamespaces('moderation')(IconModerationPending)

app/components/Comments/ModalDeleteComment.jsx

@@ -1,21 +1,22 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 
 import { CommentDisplay } from './CommentDisplay'
 import ModalConfirmDelete from '../Modal/ModalConfirmDelete'
 
 
-const ModalDeleteComment = ({handleAbort, comment, replies, t, ...otherProps}) => (
+const ModalDeleteComment = ({ handleAbort, comment, replies, t, ...otherProps }) => (
   <ModalConfirmDelete
     handleAbort={handleAbort}
-    title={t('comment.deleteThread', {count: replies && replies.size + 1})}
-    content={(<CommentDisplay comment={comment} withoutActions/>)}
+    title={t('comment.deleteThread', { count: replies && replies.size + 1 })}
+    content={(<CommentDisplay comment={comment} withoutActions />)}
     {...otherProps}
   />
 )
 
 export default
 connect((state, props) => ({
-  replies: state.VideoDebate.comments.replies.get(props.comment.id)})
-)(translate('videoDebate')(ModalDeleteComment))
+  replies: state.VideoDebate.comments.replies.get(props.comment.id)
+})
+)(withNamespaces('videoDebate')(ModalDeleteComment))

app/components/Comments/ModalFlag.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 import { formValueSelector } from 'redux-form'
 
 import FlagForm from './FlagForm'
@@ -11,14 +11,13 @@ import HttpApi from '../../API/http_api'
 const flagFormValueSelector = formValueSelector('flagForm')
 
 @connect(state => ({selectedReason: flagFormValueSelector(state, 'reason')}))
-@translate('videoDebate')
+@withNamespaces('videoDebate')
 export default class ModalFlag extends React.PureComponent {
   state = {isLoading: true, flagsAvailable: 0, error: null}
 
   componentDidMount() {
     HttpApi.get('users/me/available_flags')
-      .then(({flags_available}) =>
-        this.setState({isLoading: false, flagsAvailable: flags_available})
+      .then(({flags_available}) => this.setState({isLoading: false, flagsAvailable: flags_available})
       )
       .catch(e => this.setState({isLoading: false, error: e}))
   }

app/components/Comments/OtherCommentActions.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 import classNames from 'classnames'
 
 import CommentAction from './CommentAction'
 import ReputationGuard from '../Utils/ReputationGuard'
 import { MIN_REPUTATION_FLAG } from '../../constants'
 
 
-const OtherCommentActions = ({t, isFlagged, handleReply, handleFlag}) => (
+const OtherCommentActions = ({ t, isFlagged, handleReply, handleFlag }) => (
   <React.Fragment>
     <CommentAction
       title={t('actions.reply')}
@@ -16,7 +16,7 @@ const OtherCommentActions = ({t, isFlagged, handleReply, handleFlag}) => (
     />
     <ReputationGuard requiredRep={MIN_REPUTATION_FLAG}>
       <CommentAction
-        className={classNames('action-report', {selected: isFlagged})}
+        className={classNames('action-report', { selected: isFlagged })}
         title={isFlagged ? t('actions.flagged') : t('misc.flags')}
         iconName="flag"
         onClick={handleFlag}
@@ -26,4 +26,4 @@ const OtherCommentActions = ({t, isFlagged, handleReply, handleFlag}) => (
   </React.Fragment>
 )
 
-export default translate('main')(OtherCommentActions)
+export default withNamespaces('main')(OtherCommentActions)

app/components/Comments/OwnCommentActions.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 
 import CommentAction from './CommentAction'
 
 
-const OwnCommentActions = ({t, handleAddToThread, handleDelete}) => (
+const OwnCommentActions = ({ t, handleAddToThread, handleDelete }) => (
   <React.Fragment>
     <CommentAction
       title={t('actions.addToThread')}
@@ -19,4 +19,4 @@ const OwnCommentActions = ({t, handleAddToThread, handleDelete}) => (
   </React.Fragment>
 )
 
-export default translate('main')(OwnCommentActions)
+export default withNamespaces('main')(OwnCommentActions)

app/components/Comments/Vote.jsx

@@ -1,22 +1,22 @@
 import React from 'react'
 import classNames from 'classnames'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 
 import ClickableIcon from '../Utils/ClickableIcon'
 import IconModerationPending from './IconModerationPending'
 
 
-const Score = ({isVoting, isReported, score}) => {
+const Score = ({ isVoting, isReported, score }) => {
   if (isVoting) {
-    return <span className="round-spinner"/>
+    return <span className="round-spinner" />
   }
   if (isReported) {
-    return <IconModerationPending/>
+    return <IconModerationPending />
   }
   return score
 }
 
-const Vote = ({isVoting, score, myVote, onVote, isReported}) => (
+const Vote = ({ isVoting, score, myVote, onVote, isReported }) => (
   <figure>
     <div className="vote">
       <ClickableIcon
@@ -25,7 +25,7 @@ const Vote = ({isVoting, score, myVote, onVote, isReported}) => (
         onClick={() => (myVote <= 0 ? onVote(1) : onVote(0))}
       />
       <div className="score">
-        <Score isVoting={isVoting} isReported={isReported} score={score}/>
+        <Score isVoting={isVoting} isReported={isReported} score={score} />
       </div>
       <ClickableIcon
         name="chevron-down"
@@ -36,4 +36,4 @@ const Vote = ({isVoting, score, myVote, onVote, isReported}) => (
   </figure>
 )
 
-export default translate('modetation')(Vote)
+export default withNamespaces('modetation')(Vote)

app/components/FormUtils/TextareaLengthCounter.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 
 
-const TextareaLengthCounter = ({length, maxLength}) =>
+const TextareaLengthCounter = ({ length, maxLength }) => (
   <span className="textarea-length-counter">
     <span className={`value ${length > maxLength ? 'invalid' : ''}`}>
       {length}
     </span>
     &nbsp;/ {maxLength}
   </span>
+)
 
 export default TextareaLengthCounter

app/components/Help/Help.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { translate, Trans } from 'react-i18next'
+import { withNamespaces, Trans } from 'react-i18next'
 
 import { Link, withRouter } from 'react-router'
 import { Icon } from '../Utils/Icon'
@@ -8,7 +8,7 @@ import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
 import Message from '../Utils/Message'
 
 
-@translate('help')
+@withNamespaces('help')
 @withRouter
 export default class Help extends React.PureComponent {
   render() {

app/components/Help/HelpModal.jsx

@@ -1,14 +1,14 @@
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
-import { translate } from 'react-i18next'
+import { withNamespaces } from 'react-i18next'
 import PropTypes from 'prop-types'
 
 import Modal from '../Modal/Modal'
 import HelpPageContent from './HelpPageContent'
 import { popModal } from '../../state/modals/reducer'
 
 
-@translate('help')
+@withNamespaces('help')
 @connect(null, {popModal})
 class HelpModal extends PureComponent {
   render() {