Merge pull request #41 from r-park/dev

refactor(tasks): use selector to filter tasks

Author: r-park

src/components/tasks/task-list.js

@@ -6,35 +6,27 @@ import { TaskItem } from './task-item';
 export class TaskList extends Component {
   static propTypes = {
     deleteTask: PropTypes.func.isRequired,
-    filter: PropTypes.string,
     tasks: PropTypes.instanceOf(List).isRequired,
     updateTask: PropTypes.func.isRequired
   };
 
   renderTaskItems() {
     const {
       deleteTask,
-      filter,
       tasks,
       updateTask
     } = this.props;
 
-    return tasks
-      .filter(task => {
-        if (filter === 'active') return !task.completed;
-        if (filter === 'completed') return task.completed;
-        return task;
-      })
-      .map((task, index) => {
-        return (
-          <TaskItem
-            deleteTask={deleteTask}
-            key={index}
-            task={task}
-            updateTask={updateTask}
-          />
-        );
-      });
+    return tasks.map((task, index) => {
+      return (
+        <TaskItem
+          deleteTask={deleteTask}
+          key={index}
+          task={task}
+          updateTask={updateTask}
+        />
+      );
+    });
   }
 
   render() {

src/components/tasks/task-list.spec.js

@@ -36,25 +36,9 @@ describe('TaskList', () => {
 
 
   describe('DOM:', () => {
-    it('should render all tasks', () => {
+    it('should render tasks', () => {
       let taskItems = scryRenderedComponentsWithType(taskList, TaskItem);
       expect(taskItems.length).toEqual(2);
     });
-
-    it('should render active tasks', () => {
-      taskList = createTestComponent(TaskList, {filter: 'active', ...props});
-      let taskItems = scryRenderedComponentsWithType(taskList, TaskItem);
-
-      expect(taskItems.length).toEqual(1);
-      expect(taskItems[0].props.task.completed).toEqual(false);
-    });
-
-    it('should render completed tasks', () => {
-      taskList = createTestComponent(TaskList, {filter: 'completed', ...props});
-      let taskItems = scryRenderedComponentsWithType(taskList, TaskItem);
-
-      expect(taskItems.length).toEqual(1);
-      expect(taskItems[0].props.task.completed).toEqual(true);
-    });
   });
 });

src/components/tasks/tasks.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import { getNotification, notificationActions } from 'src/core/notification';
-import { getTaskList, tasksActions } from 'src/core/tasks';
+import { getTaskFilter, getVisibleTasks, tasksActions } from 'src/core/tasks';
 import { Notification } from './notification';
 import { TaskFilters } from './task-filters';
 import { TaskForm } from './task-form';
@@ -16,6 +16,8 @@ export class Tasks extends Component {
     createTask: PropTypes.func.isRequired,
     deleteTask: PropTypes.func.isRequired,
     dismissNotification: PropTypes.func.isRequired,
+    filterTasks: PropTypes.func.isRequired,
+    filterType: PropTypes.string.isRequired,
     location: PropTypes.object.isRequired,
     notification: PropTypes.object.isRequired,
     registerListeners: PropTypes.func.isRequired,
@@ -26,6 +28,13 @@ export class Tasks extends Component {
 
   componentWillMount() {
     this.props.registerListeners();
+    this.props.filterTasks(this.props.location.query.filter);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.location.query.filter !== this.props.location.query.filter) {
+      this.props.filterTasks(nextProps.location.query.filter);
+    }
   }
 
   renderNotification() {
@@ -50,25 +59,22 @@ export class Tasks extends Component {
     const {
       createTask,
       deleteTask,
-      location,
+      filterType,
       notification,
       tasks,
       updateTask
     } = this.props;
 
-    const { filter } = location.query;
-
     return (
       <div className="g-row">
         <div className="g-col">
           <TaskForm createTask={createTask} />
         </div>
 
         <div className="g-col">
-          <TaskFilters filter={filter} />
+          <TaskFilters filter={filterType} />
           <TaskList
             deleteTask={deleteTask}
-            filter={filter}
             tasks={tasks}
             updateTask={updateTask}
           />
@@ -87,9 +93,11 @@ export class Tasks extends Component {
 
 const mapStateToProps = createSelector(
   getNotification,
-  getTaskList,
-  (notification, tasks) => ({
+  getTaskFilter,
+  getVisibleTasks,
+  (notification, filterType, tasks) => ({
     notification,
+    filterType,
     tasks
   })
 );

src/core/tasks/action-types.js

@@ -6,3 +6,5 @@ export const DELETE_TASK_SUCCESS = 'DELETE_TASK_SUCCESS';
 
 export const UPDATE_TASK_ERROR = 'UPDATE_TASK_ERROR';
 export const UPDATE_TASK_SUCCESS = 'UPDATE_TASK_SUCCESS';
+
+export const FILTER_TASKS = 'FILTER_TASKS';

src/core/tasks/actions.js

@@ -6,7 +6,8 @@ import {
   DELETE_TASK_ERROR,
   DELETE_TASK_SUCCESS,
   UPDATE_TASK_ERROR,
-  UPDATE_TASK_SUCCESS
+  UPDATE_TASK_SUCCESS,
+  FILTER_TASKS
 } from './action-types';
 
 
@@ -79,6 +80,14 @@ export function updateTask(task, changes) {
 }
 
 
+export function filterTasks(filterType) {
+  return {
+    type: FILTER_TASKS,
+    payload: {filterType}
+  };
+}
+
+
 export function registerListeners() {
   return (dispatch, getState) => {
     const { auth } = getState();

src/core/tasks/index.js

@@ -4,5 +4,5 @@ import * as tasksActions from './actions';
 export { tasksActions };
 export * from './action-types';
 export { tasksReducer } from './reducer';
-export { getTaskList } from './selectors';
+export { getTaskFilter, getVisibleTasks } from './selectors';
 export { Task } from './task';

src/core/tasks/reducer.js

@@ -7,12 +7,14 @@ import {
 import {
   CREATE_TASK_SUCCESS,
   DELETE_TASK_SUCCESS,
+  FILTER_TASKS,
   UPDATE_TASK_SUCCESS
 } from './action-types';
 
 
 export const TasksState = new Record({
   deleted: null,
+  filter: '',
   list: new List(),
   previous: null
 });
@@ -36,6 +38,9 @@ export function tasksReducer(state = new TasksState(), {payload, type}) {
         list: state.list.filter(task => task.key !== payload.key)
       });
 
+    case FILTER_TASKS:
+      return state.set('filter', payload.filterType || '');
+
     case UPDATE_TASK_SUCCESS:
       return state.merge({
         deleted: null,

src/core/tasks/reducer.spec.js

@@ -4,86 +4,105 @@ import { SIGN_OUT_SUCCESS } from 'src/core/auth';
 import {
   CREATE_TASK_SUCCESS,
   DELETE_TASK_SUCCESS,
+  FILTER_TASKS,
   UPDATE_TASK_SUCCESS
 } from './action-types';
 
-import { tasksReducer, TasksState } from './reducer';
 import { Task } from './task';
+import { tasksReducer, TasksState } from './reducer';
 
 
-describe('Tasks reducer', () => {
-  let task1;
-  let task2;
+describe('tasks', () => {
+  describe('tasksReducer', () => {
+    let task1;
+    let task2;
 
-  beforeEach(() => {
-    task1 = new Task({completed: false, key: '0', title: 'task 1'});
-    task2 = new Task({completed: false, key: '1', title: 'task 2'});
-  });
+    beforeEach(() => {
+      task1 = new Task({completed: false, key: '0', title: 'task 1'});
+      task2 = new Task({completed: false, key: '1', title: 'task 2'});
+    });
 
 
-  describe('CREATE_TASK_SUCCESS', () => {
-    it('should prepend new task to list', () => {
-      let state = new TasksState({list: new List([task1])});
+    describe('CREATE_TASK_SUCCESS', () => {
+      it('should prepend new task to list', () => {
+        let state = new TasksState({list: new List([task1])});
 
-      let nextState = tasksReducer(state, {
-        type: CREATE_TASK_SUCCESS,
-        payload: task2
-      });
+        let nextState = tasksReducer(state, {
+          type: CREATE_TASK_SUCCESS,
+          payload: task2
+        });
 
-      expect(nextState.list.get(0)).toBe(task2);
-      expect(nextState.list.get(1)).toBe(task1);
+        expect(nextState.list.get(0)).toBe(task2);
+        expect(nextState.list.get(1)).toBe(task1);
+      });
     });
-  });
 
 
-  describe('DELETE_TASK_SUCCESS', () => {
-    it('should remove task from list', () => {
-      let state = new TasksState({list: new List([task1, task2])});
+    describe('DELETE_TASK_SUCCESS', () => {
+      it('should remove task from list', () => {
+        let state = new TasksState({list: new List([task1, task2])});
 
-      let nextState = tasksReducer(state, {
-        type: DELETE_TASK_SUCCESS,
-        payload: task2
-      });
+        let nextState = tasksReducer(state, {
+          type: DELETE_TASK_SUCCESS,
+          payload: task2
+        });
 
-      expect(nextState.deleted).toBe(task2);
-      expect(nextState.list.size).toBe(1);
-      expect(nextState.list.get(0)).toBe(task1);
-      expect(nextState.previous).toBe(state.list);
+        expect(nextState.deleted).toBe(task2);
+        expect(nextState.list.size).toBe(1);
+        expect(nextState.list.get(0)).toBe(task1);
+        expect(nextState.previous).toBe(state.list);
+      });
     });
-  });
 
 
-  describe('UPDATE_TASK_SUCCESS', () => {
-    it('should update task', () => {
-      let state = new TasksState({list: new List([task1, task2])});
-      let changedTask = task2.set('title', 'changed');
+    describe('FILTER_TASKS', () => {
+      it('should set filter with provided value', () => {
+        let state = new TasksState();
 
-      let nextState = tasksReducer(state, {
-        type: UPDATE_TASK_SUCCESS,
-        payload: changedTask
-      });
+        let nextState = tasksReducer(state, {
+          type: FILTER_TASKS,
+          payload: {
+            filterType: 'completed'
+          }
+        });
 
-      expect(nextState.list.get(0)).toBe(task1);
-      expect(nextState.list.get(1)).toBe(changedTask);
+        expect(nextState.filter).toBe('completed');
+      });
     });
-  });
 
 
-  describe('SIGN_OUT_SUCCESS', () => {
-    it('should reset state', () => {
-      let state = new TasksState({
-        delete: task1,
-        list: new List([task1, task2]),
-        previous: new List()
-      });
+    describe('UPDATE_TASK_SUCCESS', () => {
+      it('should update task', () => {
+        let state = new TasksState({list: new List([task1, task2])});
+        let changedTask = task2.set('title', 'changed');
+
+        let nextState = tasksReducer(state, {
+          type: UPDATE_TASK_SUCCESS,
+          payload: changedTask
+        });
 
-      let nextState = tasksReducer(state, {
-        type: SIGN_OUT_SUCCESS
+        expect(nextState.list.get(0)).toBe(task1);
+        expect(nextState.list.get(1)).toBe(changedTask);
       });
+    });
+
+
+    describe('SIGN_OUT_SUCCESS', () => {
+      it('should reset state', () => {
+        let state = new TasksState({
+          delete: task1,
+          list: new List([task1, task2]),
+          previous: new List()
+        });
 
-      expect(nextState.deleted).toBe(null);
-      expect(nextState.list.size).toBe(0);
-      expect(nextState.previous).toBe(null);
+        let nextState = tasksReducer(state, {
+          type: SIGN_OUT_SUCCESS
+        });
+
+        expect(nextState.deleted).toBe(null);
+        expect(nextState.list.size).toBe(0);
+        expect(nextState.previous).toBe(null);
+      });
     });
   });
 });