Merge pull request #48 from ucsb-cs156-s23/JessicaH-DayNum

JessicaH- Add day number on CommonsOverview
ucsb-cs156-s23 · Jun 6, 2023 · 51a60da · 51a60da
2 parents 8c6b4ad + fca2ac4
commit 51a60da
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -14,11 +14,11 @@ body {
   }
 
   .card-text.bigger-text {
-    font-size: 60px;
+    font-size: 50px;
   }
 
   .icon.small {
-    width: 30px;
-    height: 30px;
+    width: 50px;
+    height: 50px;
   }
 
diff --git a/frontend/src/main/components/Commons/CommonsOverview.js b/frontend/src/main/components/Commons/CommonsOverview.js
@@ -2,13 +2,18 @@ import React from "react";
 import { Row, Card, Col, Button } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 import { hasRole } from "main/utils/currentUser";
+import { calculateDays } from "main/utils/dateUtils";
 
 export default function CommonsOverview({ commons, currentUser }) {
 
     let navigate = useNavigate();
     // Stryker disable next-line all
     const leaderboardButtonClick = () => { navigate("/leaderboard/" + commons.id) };
     const showLeaderboard = (hasRole(currentUser, "ROLE_ADMIN") || commons.showLeaderboard );
+
+    const today = new Date();
+    commons.day = calculateDays(commons.startingDate,today);
+
     return (
         <Card data-testid="CommonsOverview">
             <Card.Header as="h5">Announcements</Card.Header>

diff --git a/frontend/src/main/utils/dateUtils.js b/frontend/src/main/utils/dateUtils.js
@@ -6,4 +6,13 @@ const timestampToDate = (timestamp) => {
     return (date.getFullYear() + "-" + (padWithZero(date.getMonth()+1)) + "-" + padWithZero(date.getDate()));
 }
 
-export {timestampToDate, padWithZero};
+
+const calculateDays = (startingDate,currentDate) => {
+    const start = new Date(startingDate);
+    const today = new Date(currentDate);
+    const timeDifference = today.getTime() - start.getTime();
+    const days = Math.floor(timeDifference / (1000 * 3600 * 24))+1;
+    return days;
+  }
+
+export {timestampToDate, padWithZero, calculateDays};
diff --git a/frontend/src/tests/components/Commons/CommonsOverview.test.js b/frontend/src/tests/components/Commons/CommonsOverview.test.js
@@ -81,10 +81,24 @@ describe("CommonsOverview tests", () => {
     });
 
     test("contains the correct content", async () => {
+
+        // arrange
+
+        jest.useFakeTimers().setSystemTime(new Date('2020-01-05'));
+
+        const commons = { 
+            ...commonsFixtures.oneCommons[0],
+            startingDate: new Date('2020-01-01'), 
+        };
+
+        // act
+
         render(
-            <CommonsOverview commons = {commonsFixtures.oneCommons[0]} />
+            <CommonsOverview commons = {commons} />
         );
 
+        // assert
+
         await waitFor (() => {
             expect(screen.getByText(/Today is day 5!/)).toBeInTheDocument();
         }); 

diff --git a/frontend/src/tests/utils/dateUtils.test.js b/frontend/src/tests/utils/dateUtils.test.js
@@ -1,4 +1,4 @@
-import { padWithZero, timestampToDate } from "main/utils/dateUtils";
+import { padWithZero, timestampToDate, calculateDays} from "main/utils/dateUtils";
 
 
 describe("dateUtils tests", () => {
@@ -25,4 +25,13 @@ describe("dateUtils tests", () => {
     });
   });
 
+  describe("calculateDays tests", () => {
+    test("with mock current date 2023-06-01T00:00:00", () => {
+      const startingDate = "2023-05-01T00:00:00";
+      const currentDate = "2023-06-01T00:00:00";
+      expect(calculateDays(startingDate,currentDate)).toBe(32);
+
+    });
+  });
+
 });