Add sorting to sketches #789 (#910)

* reselect added

* Added Reselect Sorting

* Refactor App

* added svgs

* Refactor

* Fixed Issues

* re: #789, update sorting styling, create sorting actions and reducers, add sort by sketch name

* re #789, change names of svg icons

* re: #789, use orderBy instead of sortBy, fix styling jumps

Author: siddhant1

client/constants.js

@@ -118,6 +118,9 @@ export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
 export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';
 export const SET_ASSETS = 'SET_ASSETS';
 
+export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
+export const SET_SORTING = 'SET_SORTING';
+
 export const START_LOADING = 'START_LOADING';
 export const STOP_LOADING = 'STOP_LOADING';
 

client/images/sort-arrow-down.svg

@@ -13,6 +13,7 @@ require('./images/p5js-square-logo.png');
 
 const history = browserHistory;
 const initialState = window.__INITIAL_STATE__;
+
 const store = configureStore(initialState);
 
 const App = () => (

client/images/sort-arrow-up.svg

@@ -0,0 +1,27 @@
+import * as ActionTypes from '../../../constants';
+
+export const DIRECTION = {
+  ASC: 'ASCENDING',
+  DESC: 'DESCENDING'
+};
+
+export function setSorting(field, direction) {
+  return {
+    type: ActionTypes.SET_SORTING,
+    payload: {
+      field,
+      direction
+    }
+  };
+}
+
+export function resetSorting() {
+  return setSorting('createdAt', DIRECTION.DESC);
+}
+
+export function toggleDirectionForField(field) {
+  return {
+    type: ActionTypes.TOGGLE_DIRECTION,
+    field
+  };
+}

client/index.jsx

@@ -6,17 +6,24 @@ import InlineSVG from 'react-inlinesvg';
 import { connect } from 'react-redux';
 import { browserHistory, Link } from 'react-router';
 import { bindActionCreators } from 'redux';
+import classNames from 'classnames';
 import * as ProjectActions from '../actions/project';
 import * as SketchActions from '../actions/projects';
 import * as ToastActions from '../actions/toast';
+import * as SortingActions from '../actions/sorting';
+import getSortedSketches from '../selectors/projects';
 import Loader from '../../App/components/loader';
 
 const trashCan = require('../../../images/trash-can.svg');
+const arrowUp = require('../../../images/sort-arrow-up.svg');
+const arrowDown = require('../../../images/sort-arrow-down.svg');
 
 class SketchList extends React.Component {
   constructor(props) {
     super(props);
     this.props.getProjects(this.props.username);
+    this.props.resetSorting();
+    this._renderFieldHeader = this._renderFieldHeader.bind(this);
   }
 
   getSketchesTitle() {
@@ -30,35 +37,56 @@ class SketchList extends React.Component {
     return !this.props.loading && this.props.sketches.length > 0;
   }
 
-  renderLoader() {
+  _renderLoader() {
     if (this.props.loading) return <Loader />;
     return null;
   }
 
-  renderEmptyTable() {
+  _renderEmptyTable() {
     if (!this.props.loading && this.props.sketches.length === 0) {
       return (<p className="sketches-table__empty">No sketches.</p>);
     }
     return null;
   }
 
+  _renderFieldHeader(fieldName, displayName) {
+    const { field, direction } = this.props.sorting;
+    const headerClass = classNames({
+      'sketches-table__header': true,
+      'sketches-table__header--selected': field === fieldName
+    });
+    return (
+      <th scope="col">
+        <button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
+          <span className={headerClass}>{displayName}</span>
+          {field === fieldName && direction === SortingActions.DIRECTION.ASC &&
+            <InlineSVG src={arrowUp} />
+          }
+          {field === fieldName && direction === SortingActions.DIRECTION.DESC &&
+            <InlineSVG src={arrowDown} />
+          }
+        </button>
+      </th>
+    );
+  }
+
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
       <div className="sketches-table-container">
         <Helmet>
           <title>{this.getSketchesTitle()}</title>
         </Helmet>
-        {this.renderLoader()}
-        {this.renderEmptyTable()}
+        {this._renderLoader()}
+        {this._renderEmptyTable()}
         {this.hasSketches() &&
           <table className="sketches-table" summary="table containing all saved projects">
             <thead>
               <tr>
                 <th className="sketch-list__trash-column" scope="col"></th>
-                <th scope="col">Sketch</th>
-                <th scope="col">Date created</th>
-                <th scope="col">Date updated</th>
+                {this._renderFieldHeader('name', 'Sketch')}
+                {this._renderFieldHeader('createdAt', 'Date Created')}
+                {this._renderFieldHeader('updatedAt', 'Date Updated')}
               </tr>
             </thead>
             <tbody>
@@ -112,7 +140,13 @@ SketchList.propTypes = {
   })).isRequired,
   username: PropTypes.string,
   loading: PropTypes.bool.isRequired,
-  deleteProject: PropTypes.func.isRequired
+  deleteProject: PropTypes.func.isRequired,
+  toggleDirectionForField: PropTypes.func.isRequired,
+  resetSorting: PropTypes.func.isRequired,
+  sorting: PropTypes.shape({
+    field: PropTypes.string.isRequired,
+    direction: PropTypes.string.isRequired
+  }).isRequired,
 };
 
 SketchList.defaultProps = {
@@ -122,13 +156,14 @@ SketchList.defaultProps = {
 function mapStateToProps(state) {
   return {
     user: state.user,
-    sketches: state.sketches,
-    loading: state.loading,
+    sketches: getSortedSketches(state),
+    sorting: state.sorting,
+    loading: state.loading
   };
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(Object.assign({}, SketchActions, ProjectActions, ToastActions), dispatch);
+  return bindActionCreators(Object.assign({}, SketchActions, ProjectActions, ToastActions, SortingActions), dispatch);
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(SketchList);

client/modules/IDE/actions/sorting.js

@@ -0,0 +1,29 @@
+import * as ActionTypes from '../../../constants';
+import { DIRECTION } from '../actions/sorting';
+
+const initialState = {
+  field: 'createdAt',
+  direction: DIRECTION.DESC
+};
+
+const sorting = (state = initialState, action) => {
+  switch (action.type) {
+    case ActionTypes.TOGGLE_DIRECTION:
+      if (action.field && action.field !== state.field) {
+        if (action.field === 'name') {
+          return { ...state, field: action.field, direction: DIRECTION.ASC };
+        }
+        return { ...state, field: action.field, direction: DIRECTION.DESC };
+      }
+      if (state.direction === DIRECTION.ASC) {
+        return { ...state, direction: DIRECTION.DESC };
+      }
+      return { ...state, direction: DIRECTION.ASC };
+    case ActionTypes.SET_SORTING:
+      return { ...state, field: action.payload.field, direction: action.payload.direction };
+    default:
+      return state;
+  }
+};
+
+export default sorting;

client/modules/IDE/components/SketchList.jsx

@@ -0,0 +1,32 @@
+import { createSelector } from 'reselect';
+import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
+import orderBy from 'lodash/orderBy';
+import { DIRECTION } from '../actions/sorting';
+
+const getSketches = state => state.sketches;
+const getField = state => state.sorting.field;
+const getDirection = state => state.sorting.direction;
+
+const getSortedSketches = createSelector(
+  getSketches,
+  getField,
+  getDirection,
+  (sketches, field, direction) => {
+    if (field === 'name') {
+      if (direction === DIRECTION.DESC) {
+        return orderBy(sketches, 'name', 'desc');
+      }
+      return orderBy(sketches, 'name', 'asc');
+    }
+    const sortedSketches = [...sketches].sort((a, b) => {
+      const result =
+        direction === DIRECTION.ASC
+          ? differenceInMilliseconds(new Date(a[field]), new Date(b[field]))
+          : differenceInMilliseconds(new Date(b[field]), new Date(a[field]));
+      return result;
+    });
+    return sortedSketches;
+  }
+);
+
+export default getSortedSketches;

client/modules/IDE/reducers/sorting.js

@@ -10,6 +10,7 @@ import sketches from './modules/IDE/reducers/projects';
 import toast from './modules/IDE/reducers/toast';
 import console from './modules/IDE/reducers/console';
 import assets from './modules/IDE/reducers/assets';
+import sorting from './modules/IDE/reducers/sorting';
 import loading from './modules/IDE/reducers/loading';
 
 const rootReducer = combineReducers({
@@ -20,6 +21,7 @@ const rootReducer = combineReducers({
   user,
   project,
   sketches,
+  sorting,
   editorAccessibility,
   toast,
   console,

client/modules/IDE/selectors/projects.js

@@ -19,6 +19,31 @@
   height: #{32 / $base-font-size}rem;
 }
 
+.sketch-list__sort-button {
+  display: flex;
+  align-items: center;
+  height: #{35 / $base-font-size}rem;
+  & svg {
+    @include themify() {
+      fill: getThemifyVariable('inactive-text-color')
+    }
+  }
+}
+
+.sketches-table__header {
+  border-bottom: 2px dashed transparent;
+  padding: #{3 / $base-font-size}rem 0;
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color')
+  }
+}
+
+.sketches-table__header--selected {
+  @include themify() {
+    border-color: getThemifyVariable('logo-color');
+  }
+}
+
 .sketches-table__row {
   margin: #{10 / $base-font-size}rem;
   height: #{72 / $base-font-size}rem;