Show user score in header (#1969)

Closes #564

I am going through old issues and trying to finish them.

Add user score to header and account menu


![image](https://user-images.githubusercontent.com/24505302/222948537-fa434d5f-1ca5-4c63-aad5-207200f7171b.png)

This is hidden on narrow screens


![image](https://user-images.githubusercontent.com/24505302/222948656-ed31b49e-f2df-4ff9-a931-1cbded4a203e.png)

The score could also be seen in the user menu (a bit redundant for large
screens, but ok).


![image](https://user-images.githubusercontent.com/24505302/222948919-9015138f-89b5-4b26-a2df-a1a061c378e7.png)

Author: AbdBarho

website/src/components/Header/Header.tsx

@@ -4,11 +4,11 @@ import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
-import { Flags } from "react-feature-flags";
 import { LanguageSelector } from "src/components/LanguageSelector";
 
 import { ColorModeToggler } from "./ColorModeToggler";
 import { UserMenu } from "./UserMenu";
+import { UserScore } from "./UserScore";
 
 function AccountButton() {
   const { data: session } = useSession();
@@ -44,12 +44,12 @@ export function Header() {
         </Link>
 
         <Flex alignItems="center" gap={["2", "4"]}>
-          <Flags authorizedFlags={["flagTest"]}>
-            <Text>FlagTest</Text>
-          </Flags>
           <LanguageSelector />
           <AccountButton />
           <UserMenu />
+          <div className="hidden md:block">
+            <UserScore />
+          </div>
           <ColorModeToggler />
         </Flex>
       </Box>

website/src/components/Header/UserMenu.tsx

@@ -17,6 +17,7 @@ import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import React, { ElementType, useCallback } from "react";
+import { UserScore } from "src/components/Header/UserScore";
 import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 
 interface MenuOption {
@@ -70,15 +71,15 @@ export function UserMenu() {
   return (
     <Menu>
       <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
-        <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
+        <Box display="flex" alignItems="center" gap="3" p="1">
           <Avatar size="sm" src={session.user.image!} />
-          <Text data-cy="username" className="hidden lg:flex">
+          <Text data-cy="username" className="hidden lg:flex ltr:pr-2 rtl:pl-2">
             {session.user.name || "New User"}
           </Text>
         </Box>
       </MenuButton>
       <MenuList p="2" borderRadius="xl" shadow="none">
-        <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
+        <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="1" gap="2">
           <Text>
             {session.user.name}
             {isAdminOrMod ? (
@@ -87,6 +88,7 @@ export function UserMenu() {
               </Badge>
             ) : null}
           </Text>
+          <UserScore />
         </Box>
         <MenuDivider />
         <MenuGroup>

website/src/components/Header/UserScore.tsx

@@ -0,0 +1,21 @@
+import { HStack } from "@chakra-ui/react";
+import { Icon } from "@chakra-ui/react";
+import { Star } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useUserScore } from "src/hooks/ui/useUserScore";
+
+export const UserScore = () => {
+  const score = useUserScore();
+  const { t } = useTranslation("leaderboard");
+
+  if (!Number.isFinite(score)) {
+    return null;
+  }
+
+  return (
+    <HStack gap="1" title={t("score")}>
+      <>{score}</>
+      <Icon as={Star} fill="gold" w="5" h="5" color="gold" />
+    </HStack>
+  );
+};

website/src/hooks/ui/useUserScore.ts

@@ -0,0 +1,19 @@
+import { useSession } from "next-auth/react";
+import { get } from "src/lib/api";
+import { LeaderboardEntity, LeaderboardTimeFrame } from "src/types/Leaderboard";
+import uswSWRImmutable from "swr/immutable";
+
+export const useUserScore = () => {
+  const { status } = useSession();
+  const isLoggedIn = status === "authenticated";
+  const { data: entries } = uswSWRImmutable<Partial<{ [time in LeaderboardTimeFrame]: LeaderboardEntity }>>(
+    isLoggedIn && "/api/user_stats",
+    get,
+    {
+      dedupingInterval: 1000 * 60, // once per minute
+      keepPreviousData: true,
+    }
+  );
+  const score: number | undefined = entries?.total?.leader_score;
+  return score;
+};