feat(SpeakerPage): Initial work for showing statements by @vguen

Remove what's make it fail for now ...

Add filters in statement query

Add default filter for statements query

Add link to go to statement in video debate

Add speaker picture to statement

Add play icon on video link

Hide CommentForm for now ...

Add comments filter on statements

Remove unused file

Remove unused effects

Remove logged

Remove unused functions

Remove unused import

Remove unused imports

Rename constant

Remove comments' effect since they are unused for now...

Remove unused code

app/API/graphql_queries.js

@@ -94,3 +94,45 @@ export const loggedInUserTodayReputationGain = gql`
     }
   }
 `
+
+export const StatementsQuery = gql`
+  query StatementsIndex($offset: Int! = 1, $limit: Int! = 16, $filters: VideoFilter = {}) {
+    statements(limit: $limit, offset: $offset, filters: $filters) {
+      pageNumber
+      pageSize
+      totalEntries
+      totalPages
+      entries {
+        id
+        text
+        speaker {
+          id
+          slug
+          fullName
+          title
+          picture
+        }
+        video {
+          hashId
+          title
+        }
+        comments {
+          id
+          text
+          approve
+          score
+          user {
+            id
+            name
+            username
+            pictureUrl
+          }
+          source {
+            id
+            url
+          }
+        }
+      }
+    }
+  }
+`

app/API/socket_api.js

@@ -46,7 +46,7 @@ class CaptainFactSocketApi {
       channel
         .join()
         .receive('ok', fulfill)
-        .receive('error', () => reject('noInternet'))
+        .receive('error', (e) => reject(e.reason))
         .receive('timeout', () => reject('noInternet'))
     })
   }

app/components/App/Sidebar.jsx

@@ -217,6 +217,9 @@ export default class Sidebar extends React.PureComponent {
         <this.MenuListLink to="/videos" iconName="television" onlyActiveOnIndex>
           {capitalize(t('entities.videoFactChecking'))}
         </this.MenuListLink>
+        <this.MenuListLink to="/last_statements" iconName="television" onlyActiveOnIndex>
+          {capitalize(t('entities.lastStatements'))}
+        </this.MenuListLink>
         <ReputationGuard requiredRep={MIN_REPUTATION_MODERATION}>
           <Query
             fetchPolicy="network-only"

app/components/Statements/PaginatedStatementsContainer.jsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+import { Link } from 'react-router'
+import { withNamespaces } from 'react-i18next'
+import { get } from 'lodash'
+
+import { LoadingFrame } from '../Utils/LoadingFrame'
+import { ErrorView } from '../Utils/ErrorView'
+import { StatementsGrid } from './StatementsGrid'
+import PaginationMenu from '../Utils/PaginationMenu'
+import { StatementsQuery } from '../../API/graphql_queries'
+import styled from 'styled-components'
+
+const INITIAL_STATEMENTS = { pageNumber: 1, totalPages: 1, entries: [] }
+
+const StatementPaginationMenu = styled(PaginationMenu)`
+  && {
+    margin: 0 auto 1em auto;
+    max-width: 600px;
+  }
+`
+
+const buildFiltersFromProps = ({ commentedStatements }) => {
+  const filters = {}
+
+  filters.commented = commentedStatements
+
+  return filters
+}
+
+const PaginatedStatementsContainer = ({
+  t,
+  baseURL,
+  query = StatementsQuery,
+  queryArgs = {},
+  statementsPath = 'statements',
+  showPagination = true,
+  currentPage = 1,
+  limit = 16,
+  ...props
+}) => {
+  const filters = buildFiltersFromProps(props)
+  return (
+    <Query
+      query={query}
+      variables={{ offset: currentPage, limit, filters, ...queryArgs }}
+      fetchPolicy="network-only"
+    >
+      {({ loading, error, data }) => {
+        const statements = get(data, statementsPath, INITIAL_STATEMENTS)
+        if (error) {
+          return <ErrorView error={error} />
+        }
+        if (!loading && statements.entries.length === 0) {
+          // TODO: change this error !
+          return <h2>{t('errors:client.noVideoAvailable')}</h2>
+        }
+
+        const paginationMenu = !showPagination ? null : (
+          <StatementPaginationMenu
+            currentPage={statements.pageNumber}
+            total={statements.totalPages}
+            isRounded
+            onPageChange={() => window.scrollTo({ top: 0 })}
+            LinkBuilder={({ 'data-page': page, ...props }) => {
+              const urlParams = page > 1 ? `?page=${page}` : ''
+              return <Link to={`${baseURL}${urlParams}`} className="button" {...props} />
+            }}
+          />
+        )
+
+        return (
+          <div>
+            {paginationMenu}
+            {loading ? <LoadingFrame /> : <StatementsGrid statements={statements.entries} />}
+            {paginationMenu}
+          </div>
+        )
+      }}
+    </Query>
+  )
+}
+
+export default withNamespaces('main')(PaginatedStatementsContainer)