[pull] master from monkeytypegame:master

backend/__tests__/__integration__/dal/user.spec.ts

@@ -1,12 +1,12 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
+import { CustomThemeColors } from "@monkeytype/schemas/configs";
+import { PersonalBest, PersonalBests } from "@monkeytype/schemas/shared";
+import { MonkeyMail, ResultFilters } from "@monkeytype/schemas/users";
+import { ObjectId } from "mongodb";
 import * as UserDAL from "../../../src/dal/user";
-import * as UserTestData from "../../__testData__/users";
 import { createConnection as createFriend } from "../../__testData__/connections";
-import { ObjectId } from "mongodb";
-import { MonkeyMail, ResultFilters } from "@monkeytype/schemas/users";
-import { PersonalBest, PersonalBests } from "@monkeytype/schemas/shared";
-import { CustomThemeColors } from "@monkeytype/schemas/configs";
+import * as UserTestData from "../../__testData__/users";
 
 const mockPersonalBest: PersonalBest = {
   acc: 1,
@@ -1122,6 +1122,55 @@ describe("UserDal", () => {
       expect(year2024[93]).toEqual(2);
     });
   });
+
+  describe("getUser", () => {
+    it("should get with missing personalBests", async () => {
+      //GIVEN
+      let user = await UserTestData.createUser({ personalBests: undefined });
+
+      //WHEN
+      const read = await UserDAL.getUser(user.uid, "read");
+
+      expect(read.personalBests).toEqual({
+        custom: {},
+        quote: {},
+        time: {},
+        words: {},
+        zen: {},
+      });
+    });
+  });
+
+  describe("getUserByName", () => {
+    it("should get with missing personalBests", async () => {
+      //GIVEN
+      let user = await UserTestData.createUser({ personalBests: undefined });
+
+      //WHEN
+      const read = await UserDAL.getUserByName(user.name, "read");
+
+      expect(read.personalBests).toEqual({
+        custom: {},
+        quote: {},
+        time: {},
+        words: {},
+        zen: {},
+      });
+    });
+  });
+
+  describe("getPersonalBests", () => {
+    it("should get with missing personalBests", async () => {
+      //GIVEN
+      let user = await UserTestData.createUser({ personalBests: undefined });
+
+      //WHEN
+      const read = await UserDAL.getPersonalBests(user.uid, "time", "15");
+
+      expect(read).toBeUndefined();
+    });
+  });
+
   describe("getPartialUser", () => {
     it("should throw for unknown user", async () => {
       await expect(async () =>
@@ -1156,6 +1205,24 @@ describe("UserDal", () => {
         },
       });
     });
+    it("should get with missing personalBests", async () => {
+      //GIVEN
+      let user = await UserTestData.createUser({ personalBests: undefined });
+
+      //WHEN
+      const read = await UserDAL.getPartialUser(user.uid, "read", [
+        "uid",
+        "personalBests",
+      ]);
+
+      expect(read.personalBests).toEqual({
+        custom: {},
+        quote: {},
+        time: {},
+        words: {},
+        zen: {},
+      });
+    });
   });
   describe("updateEmail", () => {
     it("throws for nonexisting user", async () => {

backend/src/dal/user.ts

@@ -27,7 +27,12 @@ import {
   CountByYearAndDay,
   Friend,
 } from "@monkeytype/schemas/users";
-import { Mode, Mode2, PersonalBest } from "@monkeytype/schemas/shared";
+import {
+  Mode,
+  Mode2,
+  PersonalBest,
+  PersonalBests,
+} from "@monkeytype/schemas/shared";
 import { addImportantLog } from "./logs";
 import { Result as ResultType } from "@monkeytype/schemas/results";
 import { Configuration } from "@monkeytype/schemas/configuration";
@@ -246,7 +251,7 @@ export async function updateEmail(
 export async function getUser(uid: string, stack: string): Promise<DBUser> {
   const user = await getUsersCollection().findOne({ uid });
   if (!user) throw new MonkeyError(404, "User not found", stack);
-  return user;
+  return migrateUser(user);
 }
 
 /**
@@ -263,10 +268,16 @@ export async function getPartialUser<K extends keyof DBUser>(
   fields: K[],
 ): Promise<Pick<DBUser, K>> {
   const projection = new Map(fields.map((it) => [it, 1]));
-  const results = await getUsersCollection().findOne({ uid }, { projection });
-  if (results === null) throw new MonkeyError(404, "User not found", stack);
+  const partialUser = await getUsersCollection().findOne(
+    { uid },
+    { projection },
+  );
+  if (partialUser === null) throw new MonkeyError(404, "User not found", stack);
 
-  return results;
+  if (fields.includes("personalBests" as K)) {
+    return migrateUser(partialUser);
+  }
+  return partialUser;
 }
 
 export async function findByName(name: string): Promise<DBUser | undefined> {
@@ -294,7 +305,7 @@ export async function getUserByName(
 ): Promise<DBUser> {
   const user = await findByName(name);
   if (!user) throw new MonkeyError(404, "User not found", stack);
-  return user;
+  return migrateUser(user);
 }
 
 export async function isDiscordIdAvailable(
@@ -1359,3 +1370,15 @@ export async function getFriends(uid: string): Promise<DBFriend[]> {
     ],
   );
 }
+
+function migrateUser<T extends { personalBests: PersonalBests }>(user: T): T {
+  user.personalBests ??= {
+    time: {},
+    words: {},
+    quote: {},
+    zen: {},
+    custom: {},
+  };
+
+  return user;
+}

frontend/__tests__/utils/ip-addresses.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import * as IpAddresses from "../../src/ts/utils/ip-addresses";
 
-const IP_GENERATE_COUNT = 1000;
+const IP_GENERATE_COUNT = 50;
 
 describe("IP Addresses", () => {
   describe("Compressing IPv6", () => {
@@ -37,25 +37,17 @@ describe("IP Addresses", () => {
 
   describe("Generating IPv4", () => {
     it("should generate valid IPv4 addresses", () => {
-      // We generate a set number of ip addresses dictated by the constant
       for (let i = 0; i < IP_GENERATE_COUNT; i++) {
         const ipAddress = IpAddresses.getRandomIPv4address();
-        const splitIpAddress = ipAddress.split(".");
+        const parts = ipAddress.split(".");
 
-        expect(splitIpAddress.length, "Make sure there are four parts").toEqual(
-          4,
-        );
+        expect(parts).toHaveLength(4);
 
-        for (let j = 0; j < 4; j++) {
-          const currentNumber = Number(splitIpAddress[j]);
-          expect(
-            currentNumber,
-            "Each part of an IPv4 should be >= 0",
-          ).toBeGreaterThanOrEqual(0);
-          expect(
-            currentNumber,
-            "Each part of an IPv4 should be <= 255",
-          ).toBeLessThanOrEqual(255);
+        for (const part of parts) {
+          const num = Number(part);
+          expect(num).toBeGreaterThanOrEqual(0);
+          expect(num).toBeLessThanOrEqual(255);
+          expect(Number.isInteger(num)).toBe(true);
         }
       }
     });
@@ -65,37 +57,18 @@ describe("IP Addresses", () => {
     it("should generate valid IPv6 addresses", () => {
       for (let i = 0; i < IP_GENERATE_COUNT; i++) {
         const ipAddress = IpAddresses.getRandomIPv6address();
-        const splitIpAddress = ipAddress.split(":");
+        const parts = ipAddress.split(":");
 
-        expect(
-          splitIpAddress.length,
-          "Make sure there are eight parts",
-        ).toEqual(8);
+        expect(parts).toHaveLength(8);
 
-        for (let j = 0; j < 8; j++) {
-          const currentPart = splitIpAddress[j] as string;
-          expect(
-            currentPart.length,
-            "Each part of an IPv6 should be between 1 and 4 characters",
-          ).toBeGreaterThanOrEqual(1);
-          expect(
-            currentPart.length,
-            "Each part of an IPv6 should be between 1 and 4 characters",
-          ).toBeLessThanOrEqual(4);
+        for (const part of parts) {
+          expect(part.length).toBeGreaterThanOrEqual(1);
+          expect(part.length).toBeLessThanOrEqual(4);
 
-          const currentNumber = parseInt(currentPart, 16);
-          expect(
-            currentNumber,
-            "Each part of an IPv6 should be a valid hexadecimal number",
-          ).not.toBeNaN();
-          expect(
-            currentNumber,
-            "Each part of an IPv6 should be >= 0",
-          ).toBeGreaterThanOrEqual(0);
-          expect(
-            currentNumber,
-            "Each part of an IPv6 should be <= 65535",
-          ).toBeLessThanOrEqual(65535);
+          const num = parseInt(part, 16);
+          expect(num).not.toBeNaN();
+          expect(num).toBeGreaterThanOrEqual(0);
+          expect(num).toBeLessThanOrEqual(0xffff);
         }
       }
     });

frontend/src/404.html

@@ -63,6 +63,6 @@ <h1 class="text">
         <load src="html/pages/404.html" />
       </main>
     </div>
-    <link rel="stylesheet" href="/themes/serika_dark.css" id="currentTheme" />
+    <link rel="stylesheet" href="/styles/standalone.scss" />
   </body>
 </html>

frontend/src/email-handler.html

@@ -4,11 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Email Handler | Monkeytype</title>
-    <!-- <link rel="stylesheet" href="css/fa.css" /> -->
-    <style>
-      @import "balloon-css/balloon.min.css";
-    </style>
-    <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
+    <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
     <link

frontend/src/privacy-policy.html

@@ -4,11 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Privacy Policy | Monkeytype</title>
-    <!-- <link rel="stylesheet" href="css/fa.css" /> -->
-    <style>
-      @import "balloon-css/balloon.min.css";
-    </style>
-    <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
+    <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
     <link rel="stylesheet" href="styles/index.scss" />

frontend/src/security-policy.html

@@ -4,11 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Security Policy | Monkeytype</title>
-    <!-- <link rel="stylesheet" href="css/fa.css" /> -->
-    <style>
-      @import "balloon-css/balloon.min.css";
-    </style>
-    <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
+    <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
     <link rel="stylesheet" href="styles/index.scss" />

frontend/src/styles/standalone.scss

@@ -0,0 +1,13 @@
+@import "balloon-css/balloon.min.css";
+:root {
+  --bg-color: #323437;
+  --main-color: #e2b714;
+  --caret-color: #e2b714;
+  --sub-color: #646669;
+  --sub-alt-color: #2c2e31;
+  --text-color: #d1d0c5;
+  --error-color: #ca4754;
+  --error-extra-color: #7e2a33;
+  --colorful-error-color: #ca4754;
+  --colorful-error-extra-color: #7e2a33;
+}

frontend/src/terms-of-service.html

@@ -4,11 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Terms of Service | Monkeytype</title>
-    <!-- <link rel="stylesheet" href="css/fa.css" /> -->
-    <style>
-      @import "balloon-css/balloon.min.css";
-    </style>
-    <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
+    <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
     <link rel="stylesheet" href="styles/index.scss" />

frontend/src/ts/components/utils/TailwindMediaQueryDebugger.tsx

@@ -1,18 +1,30 @@
-import { JSXElement, Show } from "solid-js";
+import { JSXElement, Match, Show, Switch } from "solid-js";
 
+import { bp } from "../../signals/breakpoints";
 import { isDevEnvironment } from "../../utils/misc";
 
 export function TailwindMediaQueryDebugger(): JSXElement {
   return (
     <Show when={isDevEnvironment()}>
-      <div class="bg-sub-alt text-text fixed top-12 left-2 z-999999999999999 rounded px-2 py-1 font-mono font-bold shadow-lg">
+      <div class="bg-sub-alt text-text fixed top-12 left-2 z-999999999999999 flex rounded px-2 py-1 font-mono font-bold shadow-lg">
         <div class="hidden 2xl:block">2xl</div>
         <div class="hidden xl:block 2xl:hidden">xl</div>
         <div class="hidden lg:block xl:hidden">lg</div>
         <div class="hidden md:block lg:hidden">md</div>
         <div class="hidden sm:block md:hidden">sm</div>
         <div class="xs:block hidden sm:hidden">xs</div>
         <div class="xs:hidden">xxs</div>
+        <div>
+          /
+          <Switch>
+            <Match when={bp().xxl}>2xl</Match>
+            <Match when={bp().xl}>xl</Match>
+            <Match when={bp().lg}>lg</Match>
+            <Match when={bp().md}>md</Match>
+            <Match when={bp().sm}>sm</Match>
+            <Match when={bp().xs}>xs</Match>
+          </Switch>
+        </div>
       </div>
     </Show>
   );