Merge pull request #770 from bcgov/fix/report-off-by-one

Fix: off-by-one report dates bug
bcgov · Jun 23, 2022 · d4fc967 · d4fc967
2 parents 13218c5 + 34d5c45
commit d4fc967
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 125 deletions.
diff --git a/app/components/Form/ProjectAnnualReportForm.tsx b/app/components/Form/ProjectAnnualReportForm.tsx
@@ -6,7 +6,6 @@ import ReportDueIndicator from "components/ReportingRequirement/ReportDueIndicat
 import Status from "components/ReportingRequirement/Status";
 import projectReportingRequirementSchema from "data/jsonSchemaForm/projectReportingRequirementSchema";
 import { JSONSchema7 } from "json-schema";
-import { getReportingStatus, isOverdue } from "lib/helpers/reportStatusHelpers";
 import FormBorder from "lib/theme/components/FormBorder";
 import EmptyObjectFieldTemplate from "lib/theme/EmptyObjectFieldTemplate";
 import { useAddReportingRequirementToRevision } from "mutations/ProjectReportingRequirement/addReportingRequirementToRevision";
@@ -119,21 +118,16 @@ const ProjectAnnualReportForm: React.FC<Props> = (props) => {
     );
   }, [projectRevision.projectAnnualReportFormChanges]);
 
-  const reportDueDate =
+  const upcomingReportDueDate =
     projectRevision.upcomingAnnualReportFormChange?.asReportingRequirement
       .reportDueDate;
-  const overdue = useMemo(() => {
-    return isOverdue(reportDueDate);
-  }, [reportDueDate]);
 
   const reportSubmittedDates = useMemo(() => {
     return projectRevision.projectAnnualReportFormChanges.edges.map(
       ({ node }) => node.newFormData.submittedDate
     );
   }, [projectRevision.projectAnnualReportFormChanges.edges]);
 
-  const variant = getReportingStatus(reportSubmittedDates, overdue);
-
   return (
     <div>
       <header>
@@ -142,7 +136,11 @@ const ProjectAnnualReportForm: React.FC<Props> = (props) => {
         <SavingIndicator isSaved={!isUpdating && !isAdding} />
       </header>
       <h3>Status</h3>
-      <Status variant={variant} reportType={"Annual"} />
+      <Status
+        upcomingReportDueDate={upcomingReportDueDate}
+        reportSubmittedDates={reportSubmittedDates}
+        reportType={"Annual"}
+      />
 
       <ReportDueIndicator
         reportTitle="Annual Report"

diff --git a/app/components/Form/ProjectMilestoneReportForm.tsx b/app/components/Form/ProjectMilestoneReportForm.tsx
@@ -9,7 +9,6 @@ import {
   projectMilestoneSchema,
 } from "data/jsonSchemaForm/projectMilestoneSchema";
 import { JSONSchema7, JSONSchema7Definition } from "json-schema";
-import { getReportingStatus, isOverdue } from "lib/helpers/reportStatusHelpers";
 import FormBorder from "lib/theme/components/FormBorder";
 import EmptyObjectFieldTemplate from "lib/theme/EmptyObjectFieldTemplate";
 import { useAddReportingRequirementToRevision } from "mutations/ProjectReportingRequirement/addReportingRequirementToRevision";
@@ -171,29 +170,28 @@ const ProjectMilestoneReportForm: React.FC<Props> = (props) => {
     );
   }, [projectRevision.projectMilestoneReportFormChanges]);
 
-  const reportDueDate =
+  const upcomingReportDueDate =
     projectRevision.upcomingMilestoneReportFormChange?.asReportingRequirement
       .reportDueDate;
-  const overdue = useMemo(() => {
-    return isOverdue(reportDueDate);
-  }, [reportDueDate]);
 
   const reportSubmittedDates = useMemo(() => {
     return projectRevision.projectMilestoneReportFormChanges.edges.map(
       ({ node }) => node.newFormData.submittedDate
     );
   }, [projectRevision.projectMilestoneReportFormChanges.edges]);
 
-  const variant = getReportingStatus(reportSubmittedDates, overdue);
-
   return (
     <div>
       <header id={`Milestone0`}>
         <h2>Milestone Reports</h2>
         <UndoChangesButton formChangeIds={formChangeIds} formRefs={formRefs} />
         <SavingIndicator isSaved={!isUpdating && !isAdding} />
       </header>
-      <Status variant={variant} reportType={"Milestone"} />
+      <Status
+        upcomingReportDueDate={upcomingReportDueDate}
+        reportSubmittedDates={reportSubmittedDates}
+        reportType={"Milestone"}
+      />
       <ReportDueIndicator
         reportTitle="Milestone Report"
         reportDueFormChange={projectRevision.upcomingMilestoneReportFormChange}

diff --git a/app/components/Form/ProjectQuarterlyReportForm.tsx b/app/components/Form/ProjectQuarterlyReportForm.tsx
@@ -1,10 +1,11 @@
 import { Button } from "@button-inc/bcgov-theme";
 import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import CollapsibleReport from "components/ReportingRequirement/CollapsibleReport";
 import ReportDueIndicator from "components/ReportingRequirement/ReportDueIndicator";
+import Status from "components/ReportingRequirement/Status";
 import projectReportingRequirementSchema from "data/jsonSchemaForm/projectReportingRequirementSchema";
 import { JSONSchema7 } from "json-schema";
-import { getReportingStatus, isOverdue } from "lib/helpers/reportStatusHelpers";
 import FormBorder from "lib/theme/components/FormBorder";
 import EmptyObjectFieldTemplate from "lib/theme/EmptyObjectFieldTemplate";
 import { useAddReportingRequirementToRevision } from "mutations/ProjectReportingRequirement/addReportingRequirementToRevision";
@@ -23,8 +24,6 @@ import {
 } from "./reportingRequirementFormChangeFunctions";
 import SavingIndicator from "./SavingIndicator";
 import UndoChangesButton from "./UndoChangesButton";
-import CollapsibleReport from "components/ReportingRequirement/CollapsibleReport";
-import Status from "components/ReportingRequirement/Status";
 
 interface Props {
   onSubmit: () => void;
@@ -111,21 +110,16 @@ const ProjectQuarterlyReportForm: React.FC<Props> = (props) => {
     );
   }, [projectRevision.projectQuarterlyReportFormChanges]);
 
-  const reportDueDate =
+  const upcomingReportDueDate =
     projectRevision.upcomingQuarterlyReportFormChange?.asReportingRequirement
       .reportDueDate;
-  const overdue = useMemo(() => {
-    return isOverdue(reportDueDate);
-  }, [reportDueDate]);
 
   const reportSubmittedDates = useMemo(() => {
     return projectRevision.projectQuarterlyReportFormChanges.edges.map(
       ({ node }) => node.newFormData.submittedDate
     );
   }, [projectRevision.projectQuarterlyReportFormChanges.edges]);
 
-  const variant = getReportingStatus(reportSubmittedDates, overdue);
-
   return (
     <div>
       <header>
@@ -134,7 +128,11 @@ const ProjectQuarterlyReportForm: React.FC<Props> = (props) => {
         <SavingIndicator isSaved={!isUpdating && !isAdding} />
       </header>
       <h3>Status</h3>
-      <Status variant={variant} reportType={"Quarterly"} />
+      <Status
+        upcomingReportDueDate={upcomingReportDueDate}
+        reportSubmittedDates={reportSubmittedDates}
+        reportType={"Quarterly"}
+      />
       <ReportDueIndicator
         reportTitle="Quarterly Report"
         reportDueFormChange={projectRevision.upcomingQuarterlyReportFormChange}

diff --git a/app/components/ReportingRequirement/CollapsibleReport.tsx b/app/components/ReportingRequirement/CollapsibleReport.tsx
@@ -1,6 +1,6 @@
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { getBadgeForDates } from "lib/helpers/reportStatusHelpers";
+import { getBadgeForIndividualReportStatus } from "lib/helpers/reportStatusHelpers";
 import { useState } from "react";
 import { graphql, useFragment } from "react-relay";
 import { CollapsibleReport_reportingRequirement$key } from "__generated__/CollapsibleReport_reportingRequirement.graphql";
@@ -38,7 +38,10 @@ const CollapsibleReport: React.FC<Props> = ({
         <header className="reportHeader" onClick={() => setIsOpen(!isOpen)}>
           <h3>{title}</h3>
           <div className="reportStatus">
-            {getBadgeForDates(data.reportDueDate, data.submittedDate)}
+            {getBadgeForIndividualReportStatus(
+              data.reportDueDate,
+              data.submittedDate
+            )}
           </div>
           <div className="toggleIcon">
             <FontAwesomeIcon icon={isOpen ? faChevronUp : faChevronDown} />

diff --git a/app/components/ReportingRequirement/ReportDueIndicator.tsx b/app/components/ReportingRequirement/ReportDueIndicator.tsx
@@ -1,6 +1,9 @@
 import { faCalendarAlt, faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { daysUntilReportDue, isOverdue } from "lib/helpers/reportStatusHelpers";
+import {
+  getDaysUntilDue,
+  parseStringDate,
+} from "lib/helpers/reportStatusHelpers";
 import FormBorder from "lib/theme/components/FormBorder";
 import { DateTime } from "luxon";
 import Link from "next/link";
@@ -39,8 +42,8 @@ const ReportDueIndicator: React.FC<Props> = ({
   const reportingRequirement = formChange?.reportingRequirement;
   const hasValidReportDueDate = reportingRequirement?.reportDueDate;
 
-  const reportDueIn = daysUntilReportDue(hasValidReportDueDate);
-  const overdue = isOverdue(hasValidReportDueDate);
+  const reportDueIn = getDaysUntilDue(parseStringDate(hasValidReportDueDate));
+  const overdue = reportDueIn < 0 ? true : false;
 
   return (
     <>

diff --git a/app/components/ReportingRequirement/Status.tsx b/app/components/ReportingRequirement/Status.tsx
@@ -1,14 +1,23 @@
-import StatusBadge from "components/StatusBadge";
+import { getBadgeForOverallReportStatus } from "lib/helpers/reportStatusHelpers";
 
 interface Props {
   reportType: "Quarterly" | "Annual" | "Milestone";
-  variant: "complete" | "late" | "onTrack" | "inReview" | "none";
+  upcomingReportDueDate: string;
+  reportSubmittedDates: string[];
 }
 
-const Status: React.FC<Props> = ({ reportType, variant }) => {
+const Status: React.FC<Props> = ({
+  reportType,
+  upcomingReportDueDate,
+  reportSubmittedDates,
+}) => {
   return (
     <div>
-      Status of {reportType} Reports <StatusBadge variant={variant} />
+      Status of {reportType} Reports{" "}
+      {getBadgeForOverallReportStatus(
+        upcomingReportDueDate,
+        reportSubmittedDates
+      )}
       <style jsx>{`
         div {
           margin-bottom: 1em;

diff --git a/app/lib/helpers/reportStatusHelpers.tsx b/app/lib/helpers/reportStatusHelpers.tsx
@@ -1,56 +1,56 @@
 import StatusBadge from "components/StatusBadge";
 import { DateTime } from "luxon";
 
-export const daysUntilReportDue = (reportDueDate: string) => {
-  const diff = DateTime.fromISO(reportDueDate, {
-    setZone: true,
-    locale: "en-CA",
-  }).diff(
-    // Current date without time information
-    DateTime.now().setZone("America/Vancouver").startOf("day"),
-    "days"
+export const parseStringDate = (stringDate: string) => {
+  if (!stringDate) return null;
+  return (
+    stringDate &&
+    DateTime.fromISO(stringDate, {
+      setZone: true,
+      locale: "en-CA",
+    }).startOf("day")
   );
-
-  return Math.ceil(diff.days);
 };
 
-export const isOverdue = (reportDueDate: string | undefined) => {
-  return reportDueDate ? daysUntilReportDue(reportDueDate) < 0 : false;
+export const getDaysUntilDue = (reportDueDate: DateTime) => {
+  if (!reportDueDate) {
+    return null;
+  }
+  return Math.floor(
+    reportDueDate.diff(
+      // Current date without time information
+      DateTime.now().setZone("America/Vancouver").startOf("day"),
+      "days"
+    ).days
+  );
 };
 
-export const getReportingStatus = (
-  reportSubmittedDates: string[],
-  isReportOverdue: boolean
+export const getBadgeForOverallReportStatus = (
+  upcomingReportDueDateString: string,
+  reportSubmittedDates: string[]
 ) => {
+  const parsedDueDate = parseStringDate(upcomingReportDueDateString);
   const reportsExist = reportSubmittedDates?.length !== 0;
-
   if (!reportsExist) {
-    return "none";
+    return <StatusBadge variant="none" />;
   } else if (reportsExist && !reportSubmittedDates.includes(undefined)) {
-    return "complete";
-  } else if (isReportOverdue) {
-    return "late";
+    return <StatusBadge variant="complete" />;
   } else {
-    return "onTrack";
+    const dueIn = getDaysUntilDue(parsedDueDate);
+    return dueIn < 0 ? (
+      <StatusBadge variant="late" />
+    ) : (
+      <StatusBadge variant="onTrack" />
+    );
   }
 };
 
-export const getBadgeForDates = (
+export const getBadgeForIndividualReportStatus = (
   reportDueDateString: string,
   submittedDateString: string
 ) => {
-  const parsedDueDate =
-    reportDueDateString &&
-    DateTime.fromISO(reportDueDateString, {
-      setZone: true,
-      locale: "en-CA",
-    }).startOf("day");
-  const parsedSubmittedDate =
-    submittedDateString &&
-    DateTime.fromISO(submittedDateString, {
-      setZone: true,
-      locale: "en-CA",
-    }).startOf("day");
+  const parsedDueDate = parseStringDate(reportDueDateString);
+  const parsedSubmittedDate = parseStringDate(submittedDateString);
 
   if (parsedDueDate && parsedSubmittedDate) {
     {
@@ -64,11 +64,7 @@ export const getBadgeForDates = (
       );
     }
   } else if (parsedDueDate && !parsedSubmittedDate) {
-    const dueIn = parsedDueDate.diff(
-      // Current date without time information
-      DateTime.now().setZone("America/Vancouver").startOf("day"),
-      "days"
-    ).days;
+    const dueIn = getDaysUntilDue(parsedDueDate);
 
     return dueIn < 0 ? (
       <StatusBadge variant="late" />

diff --git a/app/tests/unit/lib/helpers/reportStatusHelpers.test.ts b/app/tests/unit/lib/helpers/reportStatusHelpers.test.ts