Sort completed items to the bottom

expanding the completed items toggle used to sort the contained
items into their respective places in the grouping. this caused them
to jump around.  This changes the sort order to keep completed items
together at the bottom

fixes ADMIN-1241

test plan:
  - on the same day, create todos
    ccc, 11:59, not complete
    bbb, 10:00, complete
    aaa, 11:59, complete
  - load the planner
  > expect to see "ccc" and "show 2 completed items"
  - open the completed items
  - expect to see  ccc, bbb, aaa in that order

Change-Id: I9fbdc802b35e3db6d6518a44f7719856181e0aaf
Reviewed-on: https://gerrit.instructure.com/157405
Tested-by: Jenkins
Reviewed-by: Carl Kibler <ckibler@instructure.com>
QA-Review: Deepeeca Soundarrajan <dsoundarrajan@instructure.com>
Product-Review: Ed Schiebel <eschiebel@instructure.com>

packages/canvas-planner/src/components/PlannerApp/__tests__/PlannerApp.spec.js

@@ -28,7 +28,8 @@ const getDefaultValues = (overrides) => {
   return Object.assign({}, {
     days: days.map(d => [d.format('YYYY-MM-DD'), [{dateBucketMoment: d}]]),
     timeZone: TZ,
-    changeDashboardView () {}
+    changeDashboardView () {},
+    isCompletelyEmpty: false,
   }, overrides);
 };
 

packages/canvas-planner/src/components/PlannerApp/__tests__/__snapshots__/PlannerApp.spec.js.snap

@@ -574,7 +574,7 @@ exports[`PlannerApp renders empty component with no assignments 1`] = `
   </View>
   <PlannerEmptyState
     changeDashboardView={[Function]}
-    isCompletelyEmpty={[Function]}
+    isCompletelyEmpty={false}
     onAddToDo={[Function]}
   />
 </div>

packages/canvas-planner/src/reducers/__tests__/sidebar-reducer.spec.js

@@ -128,8 +128,8 @@ it('updates the item on SAVED_PLANNER_ITEM', () => {
     item: {...initialState.items[1], completed: true}}));
   expect(nextState.items).toMatchObject([
     {uniqueId: '41', completed: false},
-    {uniqueId: '42', completed: true},
     {uniqueId: '43', completed: false},
+    {uniqueId: '42', completed: true},
   ]);
   expect(nextState).not.toBe(initialState);
 });

packages/canvas-planner/src/utilities/__tests__/daysUtils.spec.js

@@ -294,6 +294,19 @@ describe('groupAndSortDayItems', () => {
       {uniqueId: '3'}, {uniqueId: '1.5'}, {uniqueId: '4'}, {uniqueId: '2'}, {uniqueId: '1'}
     ]);
   });
+
+  it('sorts completed items last', () => {
+    const items = [
+      mockItem('2017-12-05T11:00:00Z', {uniqueId: '1', context: {type: 'Course', id: '1', title: 'Math'}, completed: true}),
+      mockItem('2017-12-05T12:00:00Z', {uniqueId: '2', context: {type: 'Course', id: '1', title: 'Math'}}),
+      mockItem('2017-12-05T12:30:00Z', {uniqueId: '3', context: {type: 'Course', id: '1', title: 'Math'}, allDay: true}),
+      mockItem('2017-12-05T11:00:00Z', {uniqueId: '4', context: {type: 'Course', id: '1', title: 'Math'}}),
+    ];
+    const result = groupAndSortDayItems(items);
+    expect(result).toMatchObject([
+      {uniqueId: '3'}, {uniqueId: '4'}, {uniqueId: '2'}, {uniqueId: '1'}
+    ]);
+  });
 });
 
 describe('deleteItemFromDays', () => {

packages/canvas-planner/src/utilities/daysUtils.js

@@ -165,8 +165,13 @@ function orderItemsByGrouping (a, b) {
 
 // order items by time, then title
 export function orderItemsByTimeAndTitle (a, b) {
+  // completed items are grouped at the bottom
+  if (a.completed && !b.completed) return 1;
+  if (!a.completed && b.completed) return -1;
+  // all day items are grouped at the top
   if (a.allDay && !b.allDay) return -1;
   if (!a.allDay && b.allDay) return 1;
+  // the rest are sorted by time, then title
   if (a.date.valueOf() === b.date.valueOf()) {
     return a.title.localeCompare(b.title, locale, cmpopts);
   }