impr(leaderboard): daily mode/language buttons based on backend configuration (@fehmer) (#6713)

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

Author: fehmer

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

@@ -139,28 +139,29 @@ describe("Loaderboard Controller", () => {
       );
     });
 
-    it("should get for mode", async () => {
-      getLeaderboardMock.mockResolvedValue([]);
-      for (const mode of ["time", "words", "quote", "zen", "custom"]) {
-        const response = await mockApp
-          .get("/leaderboards")
-          .query({ language: "english", mode, mode2: "custom" });
-        expect(response.status, "for mode " + mode).toEqual(200);
-      }
-    });
-
-    it("should get for mode2", async () => {
-      getLeaderboardMock.mockResolvedValue([]);
-      for (const mode2 of allModes) {
-        const response = await mockApp.get("/leaderboards").query({
-          language: "english",
-          mode: "words",
-          mode2,
-        });
+    describe("should get for modes", async () => {
+      beforeEach(() => {
+        getLeaderboardMock.mockResolvedValue([]);
+      });
 
-        expect(response.status, "for mode2 " + mode2).toEqual(200);
-      }
+      const testCases = [
+        { mode: "time", mode2: "15", language: "english", expectStatus: 200 },
+        { mode: "time", mode2: "60", language: "english", expectStatus: 200 },
+        { mode: "time", mode2: "30", language: "english", expectStatus: 404 },
+        { mode: "words", mode2: "15", language: "english", expectStatus: 404 },
+        { mode: "time", mode2: "15", language: "spanish", expectStatus: 404 },
+      ];
+      it.for(testCases)(
+        `expect $expectStatus for mode $mode, mode2 $mode2, lang $language`,
+        async ({ mode, mode2, language, expectStatus }) => {
+          await mockApp
+            .get("/leaderboards")
+            .query({ language, mode, mode2 })
+            .expect(expectStatus);
+        }
+      );
     });
+
     it("fails for missing query", async () => {
       const { body } = await mockApp.get("/leaderboards").expect(422);
 

backend/src/api/controllers/leaderboard.ts

@@ -32,6 +32,14 @@ export async function getLeaderboard(
 ): Promise<GetLeaderboardResponse> {
   const { language, mode, mode2, page, pageSize } = req.query;
 
+  if (
+    mode !== "time" ||
+    (mode2 !== "15" && mode2 !== "60") ||
+    language !== "english"
+  ) {
+    throw new MonkeyError(404, "There is no leaderboard for this mode");
+  }
+
   const leaderboard = await LeaderboardsDAL.get(
     mode,
     mode2,

frontend/src/html/pages/leaderboards.html

@@ -156,7 +156,7 @@
         </div>
       </div>
     </div>
-    <div class="buttons">
+    <div class="sideButtons">
       <div class="buttonGroup typeButtons">
         <button data-type="allTime">
           <i class="fas fa-globe-americas"></i>
@@ -172,7 +172,7 @@
         </button>
       </div>
       <div class="divider hidden"></div>
-      <div class="buttonGroup hidden secondary modeButtons">
+      <div class="buttonGroup hidden modeButtons">
         <button data-mode="15">
           <i class="fas fa-clock"></i>
           time 15
@@ -182,8 +182,8 @@
           time 60
         </button>
       </div>
-      <div class="divider divider2 hidden"></div>
-      <div class="buttonGroup hidden secondary languageButtons">
+      <div class="divider2 hidden"></div>
+      <div class="buttonGroup hidden languageButtons">
         <button data-language="english">
           <i class="fas fa-globe"></i>
           english

frontend/src/styles/leaderboards.scss

@@ -279,7 +279,7 @@
       color: var(--sub-color);
       padding: 1em;
     }
-    .buttons {
+    .sideButtons {
       align-content: start;
       align-items: start;
       grid-area: buttons;
@@ -294,7 +294,8 @@
         justify-content: start;
         padding-left: 0.75em;
       }
-      .divider {
+      .divider,
+      .divider2 {
         background: var(--bg-color);
         width: 100%;
         height: 0.25em;

frontend/src/ts/ape/server-configuration.ts

@@ -1,8 +1,13 @@
 import { Configuration } from "@monkeytype/contracts/schemas/configuration";
 import Ape from ".";
+import { promiseWithResolvers } from "../utils/misc";
 
 let config: Configuration | undefined = undefined;
 
+const { promise: configPromise, resolve } = promiseWithResolvers<boolean>();
+
+export { configPromise };
+
 export function get(): Configuration | undefined {
   return config;
 }
@@ -15,5 +20,6 @@ export async function sync(): Promise<void> {
     return;
   } else {
     config = response.body.data ?? undefined;
+    resolve(true);
   }
 }