add moderator role (#1419)

website/src/components/AdminArea.tsx

@@ -10,9 +10,12 @@ export const AdminArea = ({ children }: { children: ReactNode }) => {
     if (status === "loading") {
       return;
     }
-    if (session?.user.role === "admin") {
+    const role = session?.user.role;
+
+    if (role === "admin" || role === "moderator") {
       return;
     }
+
     router.push("/");
   }, [router, session, status]);
   return <main>{status === "loading" ? "loading..." : children}</main>;

website/src/components/Header/UserMenu.tsx

@@ -1,5 +1,6 @@
 import {
   Avatar,
+  Badge,
   Box,
   Link,
   Menu,
@@ -16,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 { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 
 interface MenuOption {
   name: string;
@@ -31,7 +33,7 @@ export function UserMenu() {
     signOut({ callbackUrl: "/" });
   }, []);
   const { data: session, status } = useSession();
-
+  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
   if (!session || status !== "authenticated") {
     return null;
   }
@@ -56,7 +58,7 @@ export function UserMenu() {
     },
   ];
 
-  if (session.user.role === "admin") {
+  if (isAdminOrMod) {
     options.unshift({
       name: t("admin_dashboard"),
       href: "/admin",
@@ -77,7 +79,14 @@ export function UserMenu() {
       </MenuButton>
       <MenuList p="2" borderRadius="xl" shadow="none">
         <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
-          <Text>{session.user.name}</Text>
+          <Text>
+            {session.user.name}
+            {isAdminOrMod ? (
+              <Badge size="xs" ml="2" fontSize="xs" textTransform="capitalize">
+                {session.user.role}
+              </Badge>
+            ) : null}
+          </Text>
           {/* <Text color="blue.500" fontWeight="bold" fontSize="xl">
             3,200
           </Text> */}

website/src/components/LeaderboardTable/LeaderboardTable.tsx

@@ -4,7 +4,7 @@ import { MoreHorizontal } from "lucide-react";
 import NextLink from "next/link";
 import { useTranslation } from "next-i18next";
 import React, { useMemo } from "react";
-import { useHasRole } from "src/hooks/auth/useHasRole";
+import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 import { LeaderboardEntity, LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
 
 import { DataTable, DataTableColumnDef } from "../DataTable/DataTable";
@@ -41,7 +41,7 @@ export const LeaderboardTable = ({
     `/api/leaderboard?time_frame=${timeFrame}&limit=${limit}&includeUserStats=${!hideCurrentUserRanking}`
   );
 
-  const isAdmin = useHasRole("admin");
+  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
 
   const columns: DataTableColumnDef<WindowLeaderboardEntity>[] = useMemo(
     () => [
@@ -51,7 +51,7 @@ export const LeaderboardTable = ({
           cell: (ctx) =>
             ctx.row.original.isSpaceRow ? (
               <SpaceRow></SpaceRow>
-            ) : isAdmin ? (
+            ) : isAdminOrMod ? (
               jsonExpandRowModel.renderCell(ctx)
             ) : (
               ctx.getValue()
@@ -62,7 +62,7 @@ export const LeaderboardTable = ({
       columnHelper.accessor("display_name", {
         header: t("user"),
         cell: ({ getValue, row }) =>
-          isAdmin ? (
+          isAdminOrMod ? (
             <Link as={NextLink} href={`/admin/manage_user/${row.original.user_id}`}>
               {getValue()}
             </Link>
@@ -83,7 +83,7 @@ export const LeaderboardTable = ({
         header: t("label"),
       }),
     ],
-    [isAdmin, t]
+    [isAdminOrMod, t]
   );
 
   const {

website/src/components/Messages/MessageEmojiButton.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonProps } from "@chakra-ui/react";
-import { useHasRole } from "src/hooks/auth/useHasRole";
+import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 import { MessageEmoji } from "src/types/Conversation";
 import { emojiIcons } from "src/types/Emoji";
 
@@ -23,12 +23,12 @@ export const MessageEmojiButton = ({
   sx,
 }: MessageEmojiButtonProps) => {
   const EmojiIcon = emojiIcons.get(emoji.name);
-  const isAdmin = useHasRole("admin");
+  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
 
   if (!EmojiIcon) return null;
 
   const isDisabled = !!(userIsAuthor ? true : disabled);
-  const showCount = (emoji.count > 0 && userReacted) || userIsAuthor || isAdmin;
+  const showCount = (emoji.count > 0 && userReacted) || userIsAuthor || isAdminOrMod;
 
   return (
     <Button

website/src/components/Messages/MessageTableEntry.tsx

@@ -22,7 +22,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
 import { MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
 import { ReportPopup } from "src/components/Messages/ReportPopup";
-import { useHasRole } from "src/hooks/auth/useHasRole";
+import { useHasAnyRole } from "src/hooks/auth/useHasAnyRole";
 import { del, post, put } from "src/lib/api";
 import { colors } from "src/styles/Theme/colors";
 import { Message, MessageEmojis } from "src/types/Conversation";
@@ -210,7 +210,7 @@ const MessageActions = ({
     });
   };
 
-  const isAdmin = useHasRole("admin");
+  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
 
   return (
     <Menu>
@@ -243,7 +243,7 @@ const MessageActions = ({
         >
           {t("copy_message_link")}
         </MenuItem>
-        {!!isAdmin && (
+        {!!isAdminOrMod && (
           <>
             <MenuDivider />
             <MenuItem onClick={() => handleCopy(id)} icon={<Copy />}>

website/src/components/RoleSelect.tsx

@@ -2,7 +2,7 @@ import { Select, SelectProps } from "@chakra-ui/react";
 import { forwardRef } from "react";
 import { ElementOf } from "src/types/utils";
 
-export const roles = ["general", "admin", "banned"] as const;
+export const roles = ["general", "admin", "banned", "moderator"] as const;
 export type Role = ElementOf<typeof roles>;
 
 type RoleSelectProps = Omit<SelectProps, "defaultValue"> & {