feat(profile): optionally include test activity on users public profile (@fehmer) (monkeytypegame#6824)

Co-authored-by: Miodec <[email protected]>

Author: fehmer

backend/__tests__/api/controllers/user.spec.ts

@@ -2948,6 +2948,9 @@ describe("user controller test", () => {
       streak: { length: 2, lastResultTimestamp: 2000, maxLength: 5 },
       lbOptOut: false,
       bananas: 47, //should get removed
+      testActivity: {
+        "2024": fillYearWithDay(94),
+      },
     };
 
     beforeEach(async () => {
@@ -2961,6 +2964,7 @@ describe("user controller test", () => {
 
     it("should get by name without authentication", async () => {
       //GIVEN
+
       getUserByNameMock.mockResolvedValue(foundUser as any);
 
       const rank = { rank: 24 } as LeaderboardEntry;
@@ -3018,6 +3022,46 @@ describe("user controller test", () => {
       expect(getUserByNameMock).toHaveBeenCalledWith("bob", "get user profile");
       expect(getUserMock).not.toHaveBeenCalled();
     });
+    it("should get testActivity if enabled", async () => {
+      //GIVEN
+      vi.useFakeTimers().setSystemTime(1712102400000);
+      getUserByNameMock.mockResolvedValue({
+        ...foundUser,
+        profileDetails: { showActivityOnPublicProfile: true },
+      } as any);
+      const rank = { rank: 24 } as LeaderboardEntry;
+      leaderboardGetRankMock.mockResolvedValue(rank);
+      leaderboardGetCountMock.mockResolvedValue(100);
+
+      //WHEN
+      const { body } = await mockApp.get("/users/bob/profile").expect(200);
+
+      //THEN
+      expect(body.data.testActivity).toEqual(
+        expect.objectContaining({
+          lastDay: 1712102400000,
+          testsByDays: expect.arrayContaining([]),
+        })
+      );
+    });
+    it("should not get testActivity if disabled", async () => {
+      //GIVEN
+      vi.useFakeTimers().setSystemTime(1712102400000);
+      getUserByNameMock.mockResolvedValue({
+        ...foundUser,
+        profileDetails: { showActivityOnPublicProfile: false },
+      } as any);
+      const rank = { rank: 24 } as LeaderboardEntry;
+      leaderboardGetRankMock.mockResolvedValue(rank);
+      leaderboardGetCountMock.mockResolvedValue(100);
+
+      //WHEN
+      const { body } = await mockApp.get("/users/bob/profile").expect(200);
+
+      //THEN
+      expect(body.data.testActivity).toBeUndefined();
+    });
+
     it("should get base profile for banned user", async () => {
       //GIVEN
       getUserByNameMock.mockResolvedValue({
@@ -3132,6 +3176,7 @@ describe("user controller test", () => {
           twitter: "twitter",
           website: "https://monkeytype.com",
         },
+        showActivityOnPublicProfile: false,
       };
 
       //WHEN
@@ -3159,6 +3204,7 @@ describe("user controller test", () => {
             twitter: "twitter",
             website: "https://monkeytype.com",
           },
+          showActivityOnPublicProfile: false,
         },
         {
           badges: [{ id: 4 }, { id: 2, selected: true }, { id: 3 }],

backend/src/api/controllers/user.ts

@@ -972,14 +972,25 @@ export async function getProfile(
     uid: user.uid,
   } as UserProfile;
 
+  if (user.profileDetails?.showActivityOnPublicProfile) {
+    profileData.testActivity = generateCurrentTestActivity(user.testActivity);
+  } else {
+    delete profileData.testActivity;
+  }
   return new MonkeyResponse("Profile retrieved", profileData);
 }
 
 export async function updateProfile(
   req: MonkeyRequest<undefined, UpdateUserProfileRequest>
 ): Promise<UpdateUserProfileResponse> {
   const { uid } = req.ctx.decodedToken;
-  const { bio, keyboard, socialProfiles, selectedBadgeId } = req.body;
+  const {
+    bio,
+    keyboard,
+    socialProfiles,
+    selectedBadgeId,
+    showActivityOnPublicProfile,
+  } = req.body;
 
   const user = await UserDAL.getPartialUser(uid, "update user profile", [
     "banned",
@@ -1005,6 +1016,7 @@ export async function updateProfile(
       socialProfiles,
       sanitizeString
     ) as UserProfileDetails["socialProfiles"],
+    showActivityOnPublicProfile,
   };
 
   await UserDAL.updateProfile(uid, profileDetailsUpdates, user.inventory);

frontend/src/html/pages/account.html

@@ -287,7 +287,7 @@
 
     <!-- <div class="group createdDate">Account created on -</div> -->
 
-    <div id="testActivity" class="hidden">
+    <div class="testActivity hidden">
       <div class="wrapper">
         <div class="top">
           <div class="year"><select class="yearSelect"></select></div>

frontend/src/html/pages/profile.html

@@ -162,5 +162,27 @@
       </div>
       <div class="lbOptOutReminder hidden"></div>
     </div>
+    <div class="testActivity hidden">
+      <div class="wrapper">
+        <div class="top">
+          <div class="title"></div>
+          <div class="legend">
+            <span>less</span>
+            <div data-level="0"></div>
+            <div data-level="1"></div>
+            <div data-level="2"></div>
+            <div data-level="3"></div>
+            <div data-level="4"></div>
+            <span>more</span>
+          </div>
+        </div>
+        <div class="activity"></div>
+        <div class="months"></div>
+        <div class="daysFull"></div>
+        <div class="days"></div>
+        <div class="nodata hidden">No data found.</div>
+        <div class="note">Note: All activity data is using UTC time.</div>
+      </div>
+    </div>
   </div>
 </div>

frontend/src/html/popups.html

@@ -1377,6 +1377,17 @@
       <label>badge</label>
       <div class="badgeSelectionContainer"></div>
     </div>
+    <div>
+      <label>public activity</label>
+      <label class="checkbox">
+        <input
+          class="editProfileShowActivityOnPublicProfile"
+          type="checkbox"
+          checked
+        />
+        <span>Include test activity graph on your public profile.</span>
+      </label>
+    </div>
     <button class="edit-profile-submit" type="submit">save</button>
   </form>
 </dialog>

frontend/src/styles/account.scss

@@ -459,7 +459,7 @@
   background-color: var(--sub-alt-color);
 }
 
-#testActivity {
+.testActivity {
   // width: max-content;
   // justify-self: center;
   background: var(--sub-alt-color);

frontend/src/styles/media-queries-blue.scss

@@ -231,7 +231,7 @@
       }
     }
   }
-  #testActivity {
+  .testActivity {
     --box-size: 0.58em;
     // .activity div,
     // .legend div {

frontend/src/styles/media-queries-brown.scss

@@ -54,7 +54,7 @@
     border-radius: 0.3rem;
     font-size: 0.5rem;
   }
-  #testActivity {
+  .testActivity {
     display: none;
   }
 

frontend/src/styles/media-queries-green.scss

@@ -272,7 +272,7 @@
       }
     }
   }
-  #testActivity {
+  .testActivity {
     --box-size: 0.7em;
     .wrapper {
       grid-template-areas:

frontend/src/styles/media-queries-orange.scss

@@ -8,7 +8,7 @@
   .content-grid {
     --content-max-width: 1280px;
   }
-  #testActivity {
+  .testActivity {
     --box-size: 1.05em;
     .daysFull {
       margin-right: 1rem;