Merge pull request #448 from Eldemarkki/small-improvements

Small improvements

.eslintrc.json

@@ -21,5 +21,8 @@
     }
   },
   "root": true,
-  "plugins": ["@typescript-eslint"]
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/switch-exhaustiveness-check": "error"
+  }
 }

.storybook/withSetup.tsx

@@ -27,7 +27,7 @@ const InnerApp = ({ children }: PropsWithChildren) => {
   return (
     <MantineProvider
       theme={{
-        fontFamily: "Ubuntu, sans-serif",
+        fontFamily: "var(--font-ubuntu), sans-serif",
         white: "#eee",
         black: "#121212",
         colors: {
@@ -57,7 +57,7 @@ const InnerApp = ({ children }: PropsWithChildren) => {
           ],
         },
         headings: {
-          fontFamily: "Poppins, sans-serif",
+          fontFamily: "var(--font-poppins), sans-serif",
           fontWeight: "800",
           sizes: {
             h1: { fontSize: "1.9rem" },
@@ -79,15 +79,13 @@ const InnerApp = ({ children }: PropsWithChildren) => {
 
 export const withSetup: Decorator = (Story) => {
   return (
-    <div id="root">
-      <I18nextProvider i18n={i18n}>
-        <InnerApp>
-          <ModalsProvider>
-            <Notifications />
-            <Story />
-          </ModalsProvider>
-        </InnerApp>
-      </I18nextProvider>
-    </div>
+    <I18nextProvider i18n={i18n}>
+      <InnerApp>
+        <ModalsProvider>
+          <Notifications />
+          <Story />
+        </ModalsProvider>
+      </InnerApp>
+    </I18nextProvider>
   );
 };

package.json

@@ -11,7 +11,7 @@
     "@mantine/notifications": "^7.3.2",
     "@radix-ui/react-icons": "^1.3.0",
     "chart.js": "^4.4.1",
-    "date-fns": "^3.0.1",
+    "date-fns": "^3.0.6",
     "formik": "^2.4.5",
     "i18next": "^23.7.11",
     "i18next-resources-to-backend": "^1.2.0",
@@ -22,7 +22,7 @@
     "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "react-i18next": "^13.5.0",
+    "react-i18next": "^14.0.0",
     "yup": "^1.3.3"
   },
   "scripts": {
@@ -49,7 +49,7 @@
     "@typescript-eslint/parser": "^6.15.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.0",
+    "eslint-plugin-prettier": "^5.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.6.15",
     "prettier": "^3.1.1",

public/locales/en/common.json

@@ -37,6 +37,9 @@
     "title": "Editing {{projectName}}"
   },
   "error": "Error",
+  "errors": {
+    "unauthorized": "You are not logged in or your session has expired. Please log in and try again."
+  },
   "extensions": {
     "body": "Download the Testaustime extension for your favorite code editor!",
     "intellij": "Download Testaustime for IntelliJ",

public/locales/fi/common.json

@@ -37,6 +37,9 @@
     "title": "Muokataan {{projectName}}"
   },
   "error": "Virhe",
+  "errors": {
+    "unauthorized": "Et ole kirjautunut sisään tai sinun istuntosi on vanhentunut. Kirjaudu sisään, ja yritä uudelleen."
+  },
   "extensions": {
     "body": "Lataa Testaustime-laajennus suosikkieditorillesi!",
     "intellij": "Lataa Testaustime IntelliJ:lle",

src/api/leaderboardApi.ts

@@ -8,13 +8,11 @@ import {
   Leaderboard,
   LeaderboardData,
 } from "../types";
-import { revalidateTag } from "next/cache";
-import { redirect } from "next/navigation";
 
-export const getMyLeaderboards = async (username: string) => {
+export const getMyLeaderboards = async () => {
   const token = cookies().get("token")?.value;
   if (!token) {
-    return GetLeaderboardsError.Unauthorized;
+    return { error: GetLeaderboardsError.Unauthorized };
   }
 
   try {
@@ -27,38 +25,35 @@ export const getMyLeaderboards = async (username: string) => {
           "bypass-token": process.env.RATELIMIT_IP_FORWARD_SECRET ?? "",
         },
         cache: "no-cache",
-        next: {
-          tags: [`leaderboards-${username}`],
-        },
       },
     );
 
     if (!response.ok) {
       if (response.status === 401) {
-        return GetLeaderboardsError.Unauthorized;
+        return { error: GetLeaderboardsError.Unauthorized };
       } else if (response.status === 429) {
-        return GetLeaderboardsError.TooManyRequests;
+        return { error: GetLeaderboardsError.RateLimited };
       }
 
       const errorText = await response.text();
-      console.log(errorText);
+      console.log("Unknown error when getting user's leaderboards:", errorText);
 
-      return GetLeaderboardsError.UnknownError;
+      return { error: GetLeaderboardsError.UnknownError };
     }
 
     const data = (await response.json()) as Leaderboard[];
 
     return data;
   } catch (e: unknown) {
-    console.error(e);
-    return GetLeaderboardsError.UnknownError;
+    console.error("Unknown error when getting user's leaderboards:", e);
+    return { error: GetLeaderboardsError.UnknownError };
   }
 };
 
 export const getLeaderboard = async (leaderboardName: string) => {
   const token = cookies().get("token")?.value;
   if (!token) {
-    redirect("/login");
+    return { error: GetLeaderboardError.Unauthorized };
   }
 
   const response = await fetch(
@@ -78,26 +73,23 @@ export const getLeaderboard = async (leaderboardName: string) => {
 
   if (!response.ok) {
     if (response.status === 401) {
-      return GetLeaderboardError.Unauthorized;
+      return { error: GetLeaderboardError.Unauthorized };
     } else if (response.status === 429) {
-      return GetLeaderboardError.TooManyRequests;
+      return { error: GetLeaderboardError.RateLimited };
     }
 
     const errorText = await response.text();
     console.log(errorText);
 
-    return GetLeaderboardError.UnknownError;
+    return { error: GetLeaderboardError.UnknownError };
   }
 
   const data = (await response.json()) as LeaderboardData;
 
   return data;
 };
 
-export const createLeaderboard = async (
-  leaderboardName: string,
-  username: string,
-) => {
+export const createLeaderboard = async (leaderboardName: string) => {
   const token = cookies().get("token")?.value;
   const response = await fetch(
     process.env.NEXT_PUBLIC_API_URL + "/leaderboards/create",
@@ -114,19 +106,18 @@ export const createLeaderboard = async (
     },
   );
 
-  if (response.status === 409) {
-    return CreateLeaderboardError.AlreadyExists;
-  }
-
   if (!response.ok) {
-    console.log(await response.text());
-    return CreateLeaderboardError.UnknownError;
+    if (response.status === 409) {
+      return { error: CreateLeaderboardError.AlreadyExists };
+    } else if (response.status === 429) {
+      return { error: CreateLeaderboardError.RateLimited };
+    }
+
+    console.error("Error while creating leaderboard:", await response.text());
+    return { error: CreateLeaderboardError.UnknownError };
   }
 
   const data = (await response.json()) as { invite_code: string };
 
-  // TODO: username is provided by user, we should not trust it
-  revalidateTag(`leaderboards-${username}`);
-
   return data;
 };

src/api/usersApi.ts

@@ -1,4 +1,3 @@
-import { redirect } from "next/navigation";
 import {
   ActivityDataSummary,
   ApiUsersUserActivityDataResponseItem,
@@ -11,7 +10,7 @@ import { CurrentActivity } from "../components/CurrentActivity/CurrentActivity";
 export const getMe = async () => {
   const token = cookies().get("token")?.value;
   if (!token) {
-    redirect("/login");
+    return undefined;
   }
 
   const meResponse = await fetch(

src/app/[locale]/Content.module.css

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  min-height: 100vh;
+}

src/app/[locale]/extensions/Content.tsx → src/app/[locale]/Content.tsx

@@ -2,11 +2,12 @@
 
 import { ModalsProvider } from "@mantine/modals";
 import { Notifications } from "@mantine/notifications";
-import { SettingsContext } from "../../../contexts/SettingsContext";
-import { MantineColorScheme } from "@mantine/core";
-import { useCreateSettings } from "../../../hooks/useSettings";
+import { SettingsContext } from "../../contexts/SettingsContext";
+import { MantineColorScheme, useMantineColorScheme } from "@mantine/core";
+import { useCreateSettings } from "../../hooks/useSettings";
 import { useHotkeys } from "@mantine/hooks";
 import { CookiesProvider } from "react-cookie";
+import styles from "./Content.module.css";
 
 export const Content = ({
   children,
@@ -15,6 +16,7 @@ export const Content = ({
   children: React.ReactNode;
   colorScheme: MantineColorScheme;
 }) => {
+  const mantineColorScheme = useMantineColorScheme();
   const settings = useCreateSettings({
     initialColorScheme: colorScheme,
   });
@@ -24,6 +26,7 @@ export const Content = ({
       "mod+J",
       () => {
         settings.toggleColorScheme();
+        mantineColorScheme.toggleColorScheme();
       },
     ],
   ]);
@@ -32,7 +35,7 @@ export const Content = ({
     <>
       <Notifications />
       <ModalsProvider>
-        <div id="root">
+        <div className={styles.container}>
           <CookiesProvider>
             <SettingsContext.Provider value={settings}>
               {children}