Merge pull request #195 from CaptainFact/staging

Release 0.8.14

.sass-lint.yml

@@ -72,7 +72,7 @@ rules:
   max-line-length: 0
   max-file-line-count: 0
   nesting-depth: 1
-  property-sort-order: 1
+  property-sort-order: 0
   pseudo-element: 1
   quotes: 1
   shorthand-values: 1

app/API/graphql_api.js

@@ -0,0 +1,9 @@
+import ApolloClient from 'apollo-boost'
+import { GRAPHQL_API_URL } from '../config'
+
+
+const GraphQLClient = new ApolloClient({
+  uri: GRAPHQL_API_URL
+})
+
+export default GraphQLClient

app/assets/assets/help/en/achievements.md

@@ -8,19 +8,28 @@
 * `🛡️ Bulletproof` Install the browser extension
 * `💉 Social Addict` Connect or link your account with third party (Facebook)
 
-# Rare
+# Special
 
 * `👻 Ghostbuster` you [report a bug](/help/bug_report) that gets confirmed
 * `🌟 Fact Check Me, I'm Famous` You made your way up to the monthly leaderboard
+* `Good Vibes` You made some suggestions for improvements or new features, and we find them interesting!
 
 # Legendary
 
 * `🏴‍☠️ Born to hack` You responsibly report us a security breach that gets confirmed
 * `📁 Ambassador` You helped the project in a unique way
+* `📁 Artist` One of your creations is integrated to the project
 
 ----------------------
 
 # Credits
 
-* [U Maja](https://society6.com/rabbitball) for the Bulletproof achievement
+* [U Maja](https://society6.com/rabbitball) for the `Bulletproof` achievement
+* [Alain Ternaute](https://captainfact.io/u/justinternet)
+  - `Open minded`
+  - `Fact's tamer`
+  - `You made a point`
+  - `Good vibes`
+  - `Hit machine`
+  - `Artist`
 * Want to contribute ? Checkout [this link](https://github.com/CaptainFact/captain-fact-frontend/issues/6)!

app/assets/assets/help/fr/achievements.md

@@ -3,24 +3,35 @@
 ## Médailles ordinaires
 
 * `🎉 Welcome` Bienvenue dans la communauté !
-* `🤖 Not a Robot` Email vérifié
-* `🎸 Help !` Vous avez lu au moins une page de l'aide
-* `🛡️ Bulletproof` Vous installez l'extension Chrome ou Firefox
-* `💉 Social Addict` Connectez-vous avec ou liez un compte tierce (Facebook)
+* `🤖 Pas un robot` Email vérifié
+* `🎸 Everybody hurts` Vous avez lu au moins une page de l'aide
+* `🛡️ À l'épreuve des balles` Vous installez l'extension Chrome ou Firefox
+* `💉 Addict aux réseaux sociaux` Connectez-vous avec ou liez un compte tierce (Facebook)
 
 ## Médailles rares
 
-* `👻 Ghostbuster` vous [signalez un bug](/help/bug_report)
+* `👻 Chasseur de fantômes` vous [signalez un bug](/help/bug_report)
 * `🌟 Fact Check Me, I'm Famous` Vous êtes arrivé dans le top contributeurs mensuel
+* `Ondes Positives` Une de vos suggestions d'améliorations ou de nouvelle fonctionnalités a été retenue.
 
 ## Médailles légendaires
 
-* `🏴‍☠️ Born to hack` Vous nous rapportez une faille de sécurité qui est confirmée
-* `📁 Ambassador` Vous avez aidé le projet d'une façon unique
+* `🏴‍☠️ Born to hack` Vous nous signalez une faille de sécurité qui est confirmée
+* `📁 Ambassador` Vous avez été nommé Ambassadeur de la communauté.
+* `📁 Artiste` Une ou plusieurs de vos créations sont intégrées dans le projet. Chapeau l'artiste !
 
 ----------------------
 
 ### Remerciements
 
+* [Alain Ternaute](https://captainfact.io/u/justinternet) pour ses nombreuses contributions :
+  - `🔝 Hit machine`
+  - `🎨 Artiste`
+  - `🐅 Fact's tamer`
+  - `👍 You made a point`
+  - `Open minded`
+  - `Good vibes`
+
 * [U Maja](https://society6.com/rabbitball) pour la médaille `🛡️ Bulletproof`
+
 * Vous souhaitez contribuer ? Jetez un coup d'oeuil [par ici](https://github.com/CaptainFact/captain-fact-frontend/issues/6)!

app/components/App/LanguageSelector.jsx

@@ -14,10 +14,12 @@ const defaultLocales = new Map({
 @translate() // 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
     return (
       <div className={classNames('language-selector', this.props.className)}>
-        {this.props.withIcon && <Icon name="language"/>}
-        <span className={classNames('select', this.props.size ? `is-${this.props.size}` : null)}>
+        {this.props.withIcon && <Icon name="language" size={this.props.size}/>}
+        &nbsp;
+        <span className={classNames('select', sizeClass)}>
           { this.renderSelect() }
         </span>
       </div>
@@ -31,8 +33,9 @@ export default class LanguageSelector extends React.PureComponent {
 
     return (
       <select
-        onChange={e => this.props.handleChange(e.target.value)} 
-        value={this.props.value}>
+        onChange={e => this.props.handleChange(e.target.value)}
+        value={this.props.value}
+      >
         { this.renderLocalesMap(options) }
       </select>
     )

app/components/App/Sidebar.jsx

@@ -3,20 +3,21 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router'
 import { translate } from 'react-i18next'
 import classNames from 'classnames'
+import capitalize from 'voca/capitalize'
 
 import { Icon } from '../Utils'
 import { MOBILE_WIDTH_THRESHOLD, USER_PICTURE_SMALL, MIN_REPUTATION_MODERATION } from '../../constants'
 import { LoadingFrame } from '../Utils/LoadingFrame'
 import RawIcon from '../Utils/RawIcon'
 import ReputationGuard from '../Utils/ReputationGuard'
 import LanguageSelector from './LanguageSelector'
-import capitalize from 'voca/capitalize'
 import ScoreTag from '../Users/ScoreTag'
 import { logout } from '../../state/users/current_user/effects'
 import { closeSidebar, toggleSidebar } from '../../state/user_preferences/reducer'
 import UserPicture from '../Users/UserPicture'
 import i18n from '../../i18n/i18n'
 import Logo from './Logo'
+import Button from '../Utils/Button'
 
 @connect(state => ({
   CurrentUser: state.CurrentUser.data,
@@ -69,21 +70,21 @@ export default class Sidebar extends React.PureComponent {
             </this.MenuLink>
           </div>
           <div className="level-right">
-            <a className="button" 
+            <Button
               title={this.props.t('menu.logout')}
               onClick={() => this.props.logout()}
             >
               <Icon name="sign-out"/>
-            </a>
+            </Button>
           </div>
         </nav>
         <ul className="menu-list user-links">
+          <this.MenuListLink to={`${baseLink}/activity`} iconName="tasks">
+            { t('menu.myActivity') }
+          </this.MenuListLink>
           <this.MenuListLink to={`${baseLink}/settings`} iconName="cog">
             { t('menu.settings')}
           </this.MenuListLink>
-          <this.MenuListLink to={`${baseLink}/activity`} iconName="tasks" disabled>
-            { t('menu.myActivity') }
-          </this.MenuListLink>
         </ul>
       </div>)
   }
@@ -102,16 +103,18 @@ export default class Sidebar extends React.PureComponent {
   renderUserSection() {
     if (this.props.isLoadingUser)
       return (<div className="user-section"><LoadingFrame size="mini"/></div>)
-    else if (this.props.CurrentUser.id !== 0)
+    if (this.props.CurrentUser.id !== 0)
       return this.renderUserLinks()
     return this.renderConnectLinks()
   }
 
   render() {
     const { sidebarExpended, className, t } = this.props
     return (
-      <aside id="sidebar"
-        className={`menu ${className} ${sidebarExpended ? 'expended' : ''}`}>
+      <aside
+        id="sidebar"
+        className={classNames('menu', className, {expended: sidebarExpended})}
+      >
         <div className="logo-banner">
           <div className="menu-collapse-button" onClick={() => this.props.toggleSidebar()}>
             <RawIcon name="bars"/>
@@ -123,8 +126,6 @@ export default class Sidebar extends React.PureComponent {
 
         <div className="menu-content">
           { this.renderUserSection() }
-          <p className="menu-label">{ t('menu.content') }</p>
-          {this.renderMenuContent()}
           <p className="menu-label hide-when-collapsed">{ t('menu.language') }</p>
           <LanguageSelector
             className="hide-when-collapsed"
@@ -133,12 +134,13 @@ export default class Sidebar extends React.PureComponent {
             size="small"
             withIcon
           />
-
+          <p className="menu-label">{ t('menu.content') }</p>
+          {this.renderMenuContent()}
           <p className="menu-label">{ t('menu.other') }</p>
           <ul className="menu-list">
             <li>
               <a
-                href="https://opencollective.com/captainfact_io" 
+                href="https://opencollective.com/captainfact_io"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="hide-when-collapsed link-with-icon"

app/components/App/index.jsx

@@ -11,27 +11,31 @@ import { MainModalContainer } from '../Modal/MainModalContainer'
 import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
 
 
-@connect(state => ({locale: state.UserPreferences.locale}), {fetchCurrentUser})
+@connect(state => ({
+  locale: state.UserPreferences.locale,
+  sidebarExpended: state.UserPreferences.sidebarExpended
+}), {fetchCurrentUser})
 export default class App extends React.PureComponent {
   componentDidMount() {
     this.props.fetchCurrentUser()
   }
 
   render() {
+    const {locale, sidebarExpended, children} = this.props
+    const mainContainerClass = sidebarExpended ? undefined : 'expended'
+
     return (
       <I18nextProvider i18n={i18n}>
-        <div lang={this.props.locale}>
+        <div lang={locale}>
           <Helmet>
             <title>CaptainFact</title>
           </Helmet>
           <MainModalContainer/>
-          <div className="columns is-mobile is-gapless">
-            <Sidebar className="column is-narrow"/>
-            <div id="main-container" className="column">
-              {this.props.children}
-            </div>
-          </div>
           <FlashMessages/>
+          <Sidebar/>
+          <div id="main-container" className={mainContainerClass}>
+            {children}
+          </div>
           <PublicAchievementUnlocker achievementId={4} meetConditionsFunc={this.checkExtensionInstall}/>
         </div>
       </I18nextProvider>

app/components/Comments/CommentAction.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import classNames from 'classnames'
+import Button from '../Utils/Button'
+import { Icon } from '../Utils/Icon'
+
+
+const CommentAction = ({className, onClick, title, iconName}) => (
+  <Button
+    className={classNames('is-inverted is-primary', className)}
+    onClick={onClick}
+  >
+    <Icon name={iconName}/>
+    <span>{title}</span>
+  </Button>
+)
+
+export default CommentAction

app/components/Comments/CommentActions.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { translate } from 'react-i18next'
+
+import OwnCommentActions from './OwnCommentActions'
+import OtherCommentActions from './OtherCommentActions'
+import CommentAction from './CommentAction'
+
+const CommentActions = ({
+  t,
+  isOwnComment,
+  nbReplies,
+  repliesCollapsed,
+  handleReply,
+  handleDelete,
+  handleFlag,
+  handleToggleShowReplies
+}) => (
+  <nav className="comment-actions">
+    { isOwnComment
+      ? (
+        <OwnCommentActions
+          handleAddToThread={handleReply}
+          handleDelete={handleDelete}
+        />
+      ) : (
+        <OtherCommentActions
+          handleReply={handleReply}
+          handleFlag={handleFlag}
+        />
+      )
+    }
+    {nbReplies !== 0 && (
+      <CommentAction
+        title={t('comment.replies', {
+          context: repliesCollapsed ? 'show' : 'hide',
+          count: nbReplies
+        })}
+        iconName={repliesCollapsed ? 'eye' : 'eye-slash'}
+        onClick={handleToggleShowReplies}
+      />
+    )}
+  </nav>
+)
+
+export default translate('videoDebate')(CommentActions)

app/components/Comments/CommentContent.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Tag from '../Utils/Tag'
+import { Source } from './Source'
+
+const COLLAPSE_CONTENT_ABOVE_NESTING = 6
+
+const CommentContent = ({
+  comment: {source, text},
+  nesting,
+  replyingTo,
+  richMedias
+}) => {
+  const isCollapsed = replyingTo && nesting > COLLAPSE_CONTENT_ABOVE_NESTING
+  const shouldRenderTextBlock = text || isCollapsed
+
+  return (
+    <div>
+      {shouldRenderTextBlock && (
+        <div className="comment-text">
+          {isCollapsed && (
+            <Tag style={{marginRight: 5}}>@{replyingTo.username}</Tag>
+          )}
+          { text }
+        </div>
+      )}
+      {source && <Source withoutPlayer={!richMedias} source={source}/>}
+    </div>
+  )
+}
+
+export default CommentContent