Alter the assignment count so that it only shows the number of recent assignments to do

Author: mlt47

src/app/components/navigation/NavigationBar.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react";
 import {Link} from "react-router-dom";
 import {useDispatch, useSelector} from "react-redux";
-import {AppState} from "../../state/reducers";
+import {AppState, assignments} from "../../state/reducers";
 import {
     Badge,
     Collapse,
@@ -15,12 +15,20 @@ import {
 } from "reactstrap";
 import {isAdmin, isStaff} from "../../services/user";
 import {loadMyAssignments} from "../../state/actions";
+import {filterAssignmentsByStatus} from "../../services/assignments";
 
 export const NavigationBar = () => {
     const dispatch = useDispatch();
     const [menuOpen, setMenuOpen] = useState(false);
     const user = useSelector((state: AppState) => (state && state.user) || null);
-    const assignmentCount = useSelector((state: AppState) => (state && state.assignments && state.assignments.length) || 0);
+    const assignmentCount = useSelector((state: AppState) => {
+        if (state && state.assignments) {
+            const {inProgressRecent} = filterAssignmentsByStatus(state.assignments);
+            return inProgressRecent.length;
+        } else {
+            return 0;
+        }
+    });
 
     useEffect(() => {
         if (user && user.loggedIn) {

src/app/components/pages/MyAssignments.tsx

@@ -6,10 +6,10 @@ import {ShowLoading} from "../handlers/ShowLoading";
 import {AppState} from "../../state/reducers";
 import {AssignmentDTO} from "../../../IsaacApiTypes";
 import {Card, CardBody, Container, Row, Col, Nav, NavItem, NavLink} from 'reactstrap';
-import {orderBy} from "lodash";
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {extractTeacherName} from "../../services/user";
 import {DATE_FORMATTER, STUDENTS_CRUMB} from "../../services/constants";
+import {filterAssignmentsByStatus} from "../../services/assignments";
 
 const stateToProps = (state: AppState) => (state && {assignments: state.assignments});
 const dispatchToProps = {loadMyAssignments, logAction};
@@ -76,49 +76,13 @@ const Assignments = ({assignments, showOld}: {assignments: AssignmentDTO[]; show
     </ShowLoading>;
 };
 
-function notMissing<T>(item: T | undefined): T {
-    if (item === undefined) throw new Error("Missing item");
-    return item;
-}
+
 
 const MyAssignmentsPageComponent = ({assignments, loadMyAssignments, logAction}: MyAssignmentsPageProps) => {
     useEffect(() => {loadMyAssignments();}, []);
     useEffect(() => {logAction({type: "VIEW_MY_ASSIGNMENTS"})}, []);
 
-    const now = new Date();
-    const fourWeeksAgo = new Date(now.valueOf() - (4 * 7 * 24 * 60 * 60 * 1000));
-    // Midnight five days ago:
-    const fiveDaysAgo = new Date(now);
-    fiveDaysAgo.setDate(now.getDate() - 5);
-    fiveDaysAgo.setHours(0, 0, 0, 0);
-
-    const myAssignments: {inProgressRecent: AssignmentDTO[]; inProgressOld: AssignmentDTO[]; completed: AssignmentDTO[]} = {
-        inProgressRecent: [],
-        inProgressOld: [],
-        completed: []
-    };
-
-    if (assignments) {
-        assignments.forEach(assignment => {
-            assignment.gameboard = notMissing(assignment.gameboard);
-            assignment.creationDate = notMissing(assignment.creationDate);
-            if (assignment.gameboard.percentageCompleted === undefined || assignment.gameboard.percentageCompleted < 100) {
-                let noDueDateButRecent = !assignment.dueDate && (assignment.creationDate > fourWeeksAgo);
-                let dueDateAndCurrent = assignment.dueDate && (assignment.dueDate >= fiveDaysAgo);
-                if (noDueDateButRecent || dueDateAndCurrent) {
-                    // Assignment either not/only just overdue, or else set within last month but no due date.
-                    myAssignments.inProgressRecent.push(assignment);
-                } else {
-                    myAssignments.inProgressOld.push(assignment);
-                }
-            } else {
-                myAssignments.completed.push(assignment);
-            }
-        });
-        myAssignments.inProgressRecent = orderBy(myAssignments.inProgressRecent, ["dueDate", "creationDate"], ["asc", "desc"]);
-        myAssignments.inProgressOld = orderBy(myAssignments.inProgressOld, ["dueDate", "creationDate"], ["asc", "desc"]);
-        myAssignments.completed = orderBy(myAssignments.completed, ["creationDate"], ["desc"]);
-    }
+    const myAssignments = filterAssignmentsByStatus(assignments)
 
     const [activeTab, setActiveTab] = useState(0);
 

src/app/services/assignments.ts

@@ -0,0 +1,45 @@
+import {AssignmentDTO} from "../../IsaacApiTypes";
+import {orderBy} from "lodash";
+
+function notMissing<T>(item: T | undefined): T {
+    if (item === undefined) throw new Error("Missing item");
+    return item;
+}
+export const filterAssignmentsByStatus = (assignments: AssignmentDTO[] | null) => {
+    const now = new Date();
+    const fourWeeksAgo = new Date(now.valueOf() - (4 * 7 * 24 * 60 * 60 * 1000));
+    // Midnight five days ago:
+    const fiveDaysAgo = new Date(now);
+    fiveDaysAgo.setDate(now.getDate() - 5);
+    fiveDaysAgo.setHours(0, 0, 0, 0);
+
+    const myAssignments: {inProgressRecent: AssignmentDTO[]; inProgressOld: AssignmentDTO[]; completed: AssignmentDTO[]} = {
+        inProgressRecent: [],
+        inProgressOld: [],
+        completed: []
+    };
+
+    if (assignments) {
+        assignments.forEach(assignment => {
+            assignment.gameboard = notMissing(assignment.gameboard);
+            assignment.creationDate = notMissing(assignment.creationDate);
+            if (assignment.gameboard.percentageCompleted === undefined || assignment.gameboard.percentageCompleted < 100) {
+                let noDueDateButRecent = !assignment.dueDate && (assignment.creationDate > fourWeeksAgo);
+                let dueDateAndCurrent = assignment.dueDate && (assignment.dueDate >= fiveDaysAgo);
+                if (noDueDateButRecent || dueDateAndCurrent) {
+                    // Assignment either not/only just overdue, or else set within last month but no due date.
+                    myAssignments.inProgressRecent.push(assignment);
+                } else {
+                    myAssignments.inProgressOld.push(assignment);
+                }
+            } else {
+                myAssignments.completed.push(assignment);
+            }
+        });
+        myAssignments.inProgressRecent = orderBy(myAssignments.inProgressRecent, ["dueDate", "creationDate"], ["asc", "desc"]);
+        myAssignments.inProgressOld = orderBy(myAssignments.inProgressOld, ["dueDate", "creationDate"], ["asc", "desc"]);
+        myAssignments.completed = orderBy(myAssignments.completed, ["creationDate"], ["desc"]);
+    }
+
+    return myAssignments;
+};