From d472223ee3ed9084ae2d01412350c14f3caf95de Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 25 Oct 2017 19:32:47 +0200
Subject: [PATCH] Fix/Implement sorting for stories

---
 client/coral-admin/src/reducers/stories.js    |  2 +-
 .../src/routes/Stories/components/Stories.js  | 24 +++++++------------
 .../src/routes/Stories/containers/Stories.js  | 10 ++++----
 routes/api/assets/index.js                    |  2 +-
 4 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/client/coral-admin/src/reducers/stories.js b/client/coral-admin/src/reducers/stories.js
index 0d640e6c2..271ec8cfe 100644
--- a/client/coral-admin/src/reducers/stories.js
+++ b/client/coral-admin/src/reducers/stories.js
@@ -9,7 +9,7 @@ const initialState = {
   },
   searchValue: '',
   criteria: {
-    sort: 'desc',
+    asc: 'false',
     filter: 'all',
   },
 };
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index f8f553cab..866defde4 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import cn from 'classnames';
 import {Link} from 'react-router';
 import PropTypes from 'prop-types';
-import sortBy from 'lodash/sortBy';
 import {Dropdown, Option, Paginate, Icon} from 'coral-ui';
 import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
 import t from 'coral-framework/services/i18n';
@@ -31,13 +30,8 @@ class Stories extends Component {
   }
 
   render () {
-    const {assets, searchValue, sort, filter, onSearchChange, onSettingChange, onPageChange} = this.props;
-
-    const assetsIds = sortBy(assets.ids.map((id) => assets.byId[id]), 'publication_date');
-
-    if (sort === 'desc') {
-      assetsIds.reverse();
-    }
+    const {assets, searchValue, filter, onSearchChange, onSettingChange, onPageChange, asc} = this.props;
+    const rows = assets.ids.map((id) => assets.byId[id]);
 
     return (
       <div className={cn('talk-admin-stories', styles.container)}>
@@ -67,19 +61,19 @@ class Stories extends Component {
           <div className={styles.optionHeader}>{t('streams.sort_by')}</div>
           <RadioGroup
             name='sort by'
-            value={sort}
+            value={asc}
             childContainer='div'
-            onChange={onSettingChange('sort')}
+            onChange={onSettingChange('asc')}
             className={styles.radioGroup}
           >
-            <Radio value='desc'>{t('streams.newest')}</Radio>
-            <Radio value='asc'>{t('streams.oldest')}</Radio>
+            <Radio value='false'>{t('streams.newest')}</Radio>
+            <Radio value='true'>{t('streams.oldest')}</Radio>
           </RadioGroup>
         </div>
         {
-          assetsIds.length
+          rows.length
             ? <div className={styles.mainContent}>
-              <DataTable className={styles.streamsTable} rows={assetsIds}>
+              <DataTable className={styles.streamsTable} rows={rows}>
                 <TableHeader name="title" cellFormatter={this.renderTitle}>{t('streams.article')}</TableHeader>
                 <TableHeader name="publication_date" cellFormatter={this.renderDate}>
                   {t('streams.pubdate')}
@@ -103,7 +97,7 @@ class Stories extends Component {
 Stories.propTypes = {
   assets: PropTypes.object,
   searchValue: PropTypes.string,
-  sort: PropTypes.string,
+  asc: PropTypes.string,
   filter: PropTypes.string,
   onStatusChange: PropTypes.func.isRequired,
   onSearchChange: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Stories/containers/Stories.js b/client/coral-admin/src/routes/Stories/containers/Stories.js
index 806bfc395..d91bed968 100644
--- a/client/coral-admin/src/routes/Stories/containers/Stories.js
+++ b/client/coral-admin/src/routes/Stories/containers/Stories.js
@@ -29,11 +29,11 @@ class StoriesContainer extends Component {
   }
 
   fetchAssets = (query) => {
-    const {searchValue, sort, filter, limit} = this.props;
+    const {searchValue, asc, filter, limit} = this.props;
 
     this.props.fetchAssets({
       value: searchValue,
-      sort,
+      asc,
       filter,
       limit,
       ...query
@@ -61,7 +61,7 @@ class StoriesContainer extends Component {
     return <Stories
       assets={this.props.assets}
       searchValue={this.props.searchValue}
-      sort={this.props.sort}
+      asc={this.props.asc}
       filter={this.props.filter}
       limit={this.props.limit}
       onPageChange={this.onPageChange}
@@ -75,7 +75,7 @@ class StoriesContainer extends Component {
 const mapStateToProps = ({stories}) => ({
   assets: stories.assets,
   searchValue: stories.searchValue,
-  sort: stories.criteria.sort,
+  asc: stories.criteria.asc,
   filter: stories.criteria.filter,
   limit: stories.criteria.limit,
 });
@@ -92,7 +92,7 @@ const mapDispatchToProps = (dispatch) =>
 StoriesContainer.propTypes = {
   assets: PropTypes.object,
   searchValue: PropTypes.string,
-  sort: PropTypes.string,
+  asc: PropTypes.string,
   filter: PropTypes.string,
   limit: PropTypes.number,
   setPage: PropTypes.func.isRequired,
diff --git a/routes/api/assets/index.js b/routes/api/assets/index.js
index 4007517de..165b2cd99 100644
--- a/routes/api/assets/index.js
+++ b/routes/api/assets/index.js
@@ -39,7 +39,7 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
   const {
     value = '',
     field = 'created_at',
-    page = 1, 
+    page = 1,
     asc = 'false',
     filter = 'all',
     limit = 20,