Merge pull request #493 from Testaustime/add-you-badge

Add you badge to leaderboards and friends pages

Author: Eldemarkki

.storybook/main.ts

@@ -13,4 +13,4 @@ const config: StorybookConfig = {
   },
 };
 
-export default config
+export default config;

public/locales/en/common.json

@@ -82,7 +82,6 @@
     "yourFriends": "Your friends"
   },
   "leaderboards": {
-    "admin": "Admin",
     "create": "Create",
     "createNewLeaderboard": "Create new leaderboard",
     "deleteLeaderboard": "Delete leaderboard",
@@ -307,5 +306,9 @@
       "text": "Not working?",
       "link": "Copy authentication token on settings page."
     }
+  },
+  "badges": {
+    "admin": "Admin",
+    "you": "You"
   }
 }

public/locales/fi/common.json

@@ -82,7 +82,6 @@
     "yourFriends": "Kaverisi"
   },
   "leaderboards": {
-    "admin": "Ylläpitäjä",
     "create": "Luo",
     "createNewLeaderboard": "Luo uusi tulostaulu",
     "deleteLeaderboard": "Poista tulostaulu",
@@ -307,5 +306,9 @@
       "text": "Eikö toimi?",
       "link": "Kopioi tunnistautumistunnus asetukset-sivulla."
     }
+  },
+  "badges": {
+    "admin": "Ylläpitäjä",
+    "you": "Sinä"
   }
 }

src/app/[locale]/leaderboards/[name]/page.tsx

@@ -23,6 +23,7 @@ import { PromoteUserButton } from "./PromoteUserButton";
 import { KickUserButton } from "./KickUserButton";
 import { GetLeaderboardError } from "../../../../types";
 import { getPreferences } from "../../../../utils/cookieUtils";
+import { YOU_BADGE_COLOR } from "../../../../utils/constants";
 
 export default async function LeaderboardPage({
   params: { locale, name },
@@ -115,9 +116,12 @@ export default async function LeaderboardPage({
                   </TableTd>
                   <TableTd>
                     {member.username}
-                    {member.admin && (
-                      <Badge ml="sm">{t("leaderboards.admin")}</Badge>
+                    {member.username === me.username && (
+                      <Badge ml="sm" color={YOU_BADGE_COLOR}>
+                        {t("badges.you")}
+                      </Badge>
                     )}
+                    {member.admin && <Badge ml="sm">{t("badges.admin")}</Badge>}
                   </TableTd>
                   <TableTd>
                     {prettyDuration(member.time_coded, maxTimeUnit)}

src/app/[locale]/leaderboards/page.tsx

@@ -7,6 +7,7 @@ import { CreateNewLeaderboardButton } from "./CreateNewLeaderboardButton";
 import { JoinLeaderboardButton } from "./JoinLeaderboardButton";
 import { getMyLeaderboards } from "../../../api/leaderboardApi";
 import { getPreferences } from "../../../utils/cookieUtils";
+import { getMe } from "../../../api/usersApi";
 
 export type LeaderboardsPageProps = {
   initialLeaderboards: LeaderboardData[];
@@ -46,6 +47,22 @@ export default async function LeaderboardsPage({
     }
   }
 
+  const me = await getMe();
+
+  if (!me) {
+    redirect("/login");
+  }
+
+  if ("error" in me) {
+    if (me.error === "Unauthorized") {
+      redirect("/login");
+    } else if (me.error === "Too many requests") {
+      redirect("/rate-limited");
+    } else {
+      throw new Error(JSON.stringify(me));
+    }
+  }
+
   const { maxTimeUnit } = getPreferences();
 
   return (
@@ -60,6 +77,7 @@ export default async function LeaderboardsPage({
       <LeaderboardsList
         leaderboards={leaderboardList}
         maxTimeUnit={maxTimeUnit}
+        meUsername={me.username}
       />
     </>
   );

src/components/friends/FriendListRow.module.css

@@ -1,5 +1,4 @@
-import { Button, HoverCard, TableTd, TableTr } from "@mantine/core";
-import styles from "./FriendListRow.module.css";
+import { Badge, Button, HoverCard, TableTd, TableTr } from "@mantine/core";
 import { CurrentActivity } from "../CurrentActivity/CurrentActivity";
 import { BlinkingDot } from "../CurrentActivity/BlinkingDot";
 import { CurrentActivityDisplay } from "../CurrentActivity/CurrentActivityDisplay";
@@ -12,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import { showNotification } from "@mantine/notifications";
 import { logOutAndRedirect } from "../../utils/authUtils";
 import { useState } from "react";
+import { YOU_BADGE_COLOR } from "../../utils/constants";
 
 type FriendListRowProps = {
   isMe: boolean;
@@ -37,11 +37,12 @@ export const FriendListRow = ({
   const [isDeleting, setIsDeleting] = useState(false);
 
   return (
-    <TableTr className={isMe ? styles.tableRow : undefined}>
+    <TableTr>
       <TableTd>{index + 1}</TableTd>
       <TableTd>
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
           {username}
+          {isMe && <Badge color={YOU_BADGE_COLOR}>{t("badges.you")}</Badge>}
           {status && (
             <HoverCard>
               <HoverCard.Target>

src/components/friends/FriendListRow.tsx

@@ -6,15 +6,18 @@ import { getOrdinalSuffix } from "../../utils/stringUtils";
 import { Leaderboard } from "../../types";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
+import { YOU_BADGE_COLOR } from "../../utils/constants";
 
 interface LeaderboardsListProps {
   leaderboards: Leaderboard[];
   maxTimeUnit: TimeUnit;
+  meUsername: string;
 }
 
 export const LeaderboardsList = ({
   leaderboards,
   maxTimeUnit,
+  meUsername,
 }: LeaderboardsListProps) => {
   const { t } = useTranslation();
 
@@ -38,12 +41,17 @@ export const LeaderboardsList = ({
               <Table.Td>
                 {leaderboard.name}
                 {leaderboard.me.admin && (
-                  <Badge ml="sm">{t("leaderboards.admin")}</Badge>
+                  <Badge ml="sm">{t("badges.admin")}</Badge>
                 )}
               </Table.Td>
               <Table.Td>
                 {topMember.username} (
                 {prettyDuration(topMember.time_coded, maxTimeUnit)})
+                {topMember.username === meUsername && (
+                  <Badge color={YOU_BADGE_COLOR} ml="sm">
+                    {t("badges.you")}
+                  </Badge>
+                )}
               </Table.Td>
               <Table.Td>
                 {yourPosition}

src/components/leaderboard/LeaderboardsList.tsx

@@ -6,3 +6,5 @@ export const timeInHoursCookieName = "testaustime-time-in-hours";
 
 export const DEFAULT_DAY_RANGE = "week";
 export const DEFAULT_TIME_IN_HOURS = false;
+
+export const YOU_BADGE_COLOR = "green" as const;