replaced all emoji/flags with emoji-mart, removed emoji-picker-react (#…

…835)
MarechJ · Jan 3, 2025 · 01c6de6 · 01c6de6
1 parent 2d647a9
commit 01c6de6
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 71 deletions.
diff --git a/rcongui/package-lock.json b/rcongui/package-lock.json
diff --git a/rcongui/package.json b/rcongui/package.json
@@ -46,7 +46,6 @@
     "country-list": "^2.2.0",
     "dayjs": "^1.11.10",
     "emoji-mart": "^5.6.0",
-    "emoji-picker-react": "^4.12.0",
     "google-palette": "^1.1.0",
     "immutable": "^5.0.3",
     "localforage": "^1.10.0",

diff --git a/rcongui/src/components/shared/card/UsersCard.jsx b/rcongui/src/components/shared/card/UsersCard.jsx
@@ -87,6 +87,7 @@ const EmptyState = () => (
 /**
  * @typedef {Object} UserGroup
  * @property {string} group - Name of the user group
+ * @property {ReactNode} label - Label of the user group
  * @property {User[]} users - Array of users in this group
  * @property {string} [manageLink] - Optional URL to manage the group
  */
@@ -124,7 +125,7 @@ const OnlineUsersCard = ({ onlineUsers, title }) => {
             {onlineUsers.map((group, index) => (
               <Tab
                 key={group.group}
-                label={`${group.group} (${group.users.length})`}
+                label={group.label}
               />
             ))}
           </Tabs>

diff --git a/rcongui/src/features/player-action/forms/AddFlagFormFields.jsx b/rcongui/src/features/player-action/forms/AddFlagFormFields.jsx
@@ -1,13 +1,20 @@
-import {Stack, TextField, useTheme} from "@mui/material";
-import {ControlledTextInput} from "@/components/form/core/ControlledTextInput";
-import {lazy, Suspense, useEffect} from "react";
-import {Controller} from "react-hook-form";
+import {
+  Box,
+  Skeleton,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { ControlledTextInput } from "@/components/form/core/ControlledTextInput";
+import { lazy, Suspense } from "react";
+import { Controller } from "react-hook-form";
+import emojiData from "@emoji-mart/data/sets/15/twitter.json";
+import Emoji from "@/components/shared/Emoji";
 
-const LushEmojiPicker = lazy(() => import('emoji-picker-react'));
+const EmojiPicker = lazy(() => import("@emoji-mart/react"));
 
-export const AddFlagFormFields = ({control, errors, setValue}) => {
+export const AddFlagFormFields = ({ control, errors, setValue }) => {
   const theme = useTheme();
-  let EmojiStyle = {};
 
   // It is called 'comment' at the backend but it is really a 'note' for the flag
   const noteError = errors["comment"];
@@ -16,32 +23,49 @@ export const AddFlagFormFields = ({control, errors, setValue}) => {
   const flagError = errors["flag"];
   const hasFlagError = !!flagError;
 
-  useEffect(() => {
-    import('emoji-picker-react').then((epr) => EmojiStyle = epr.EmojiStyle);
-  }, []);
-
   return (
     <Stack alignContent={"center"} spacing={2}>
       <Stack direction={"row"} spacing={1}>
         <Controller
           defaultValue={""}
-          rules={{required: "Flag is required."}}
+          rules={{ required: "Flag is required." }}
           name={"flag"}
           control={control}
-          render={({field}) => (
-            <TextField
-              onChange={field.onChange} // send value to hook form
-              onBlur={field.onBlur} // notify when input is touched/blur
-              value={field.value} // input value
-              name={field.name} // send down the input name
-              inputRef={field.ref} // send input ref, so we can focus on input when error appear
-              disabled={true}
-              label={"Flag"}
-              helperText={hasFlagError && flagError.message}
-              error={hasFlagError}
-              rows={1}
-              sx={{width: "60px", fontSize: "2rem"}}
-            />
+          render={({ field }) => (
+            <>
+              <Stack direction={"column"} alignItems={"start"} spacing={0.25}>
+                <Box
+                  sx={{
+                    border: (theme) => `1px solid ${theme.palette.grey[500]}`,
+                    px: 2,
+                    py: 1.75,
+                    color: (theme) => theme.palette.grey[400],
+                    borderRadius: 1,
+                    height: "3.5rem",
+                    width: "6.5rem",
+                    borderColor: (theme) =>
+                      hasFlagError
+                        ? theme.palette.error.main
+                        : theme.palette.grey[500],
+                  }}
+                >
+                  {field.value ? <Emoji emoji={field.value} size={24} /> : "Flag"}
+                </Box>
+                <Typography
+                  variant="caption"
+                  sx={{ color: (theme) => hasFlagError ? theme.palette.error.main : theme.palette.grey[400], px: 1 }}
+                >
+                  {hasFlagError ? flagError.message : "Emoji"}
+                </Typography>
+              </Stack>
+              <input
+                onChange={field.onChange} // send value to hook form
+                onBlur={field.onBlur} // notify when input is touched/blur
+                value={field.value} // input value
+                name={field.name} // send down the input name
+                hidden
+              />
+            </>
           )}
         />
         <ControlledTextInput
@@ -53,24 +77,27 @@ export const AddFlagFormFields = ({control, errors, setValue}) => {
           helperText={
             hasNoteError ? noteError.message : "Your note for this flag."
           }
-          sx={{flexGrow: 1}}
+          sx={{ flexGrow: 1 }}
           defaultValue={""}
         />
       </Stack>
-      <Suspense fallback={<div>Loading emoji picker...</div>}>
-        <LushEmojiPicker
-          width={"100%"}
-          emojiStyle={EmojiStyle.TWITTER}
-          emojiVersion="15"
-          skinTonesDisabled={true}
-          theme={theme.palette.mode}
-          onEmojiClick={({emoji}) =>
-            setValue("flag", emoji, {
-              shouldTouch: true,
-              shouldValidate: true,
-            })
-          }
-        />
+      <Suspense
+        fallback={<Skeleton variant="rectangular" height={400} width={300} />}
+      >
+        <Box sx={{ "& em-emoji-picker": { width: "100%" } }}>
+          <EmojiPicker
+            set="twitter"
+            theme={theme.palette.mode}
+            dynamicWidth={true}
+            data={emojiData}
+            onEmojiSelect={(emoji) => {
+              setValue("flag", emoji.native, {
+                shouldTouch: true,
+                shouldValidate: true,
+              });
+            }}
+          />
+        </Box>
       </Suspense>
     </Stack>
   );

diff --git a/rcongui/src/features/player-action/forms/RemoveFlagFormFields.jsx b/rcongui/src/features/player-action/forms/RemoveFlagFormFields.jsx
@@ -11,6 +11,7 @@ import {
 import DeleteIcon from "@mui/icons-material/Delete";
 import { useQueryClient } from "@tanstack/react-query";
 import { cmd } from "@/utils/fetchUtils";
+import Emoji from "@/components/shared/Emoji";
 
 export const RemoveFlagFormFields = ({ contextData, action, recipients }) => {
   const queryClient = useQueryClient();
@@ -53,7 +54,7 @@ export const RemoveFlagFormFields = ({ contextData, action, recipients }) => {
                 </IconButton>
               }
             >
-              <ListItemAvatar>{flag.flag}</ListItemAvatar>
+              <ListItemAvatar>{<Emoji emoji={flag.flag} size={24} />}</ListItemAvatar>
               <ListItemText primary={flag.comment} secondary={flag.modified} />
             </ListItem>
           </Fragment>

diff --git a/rcongui/src/pages/dashboard.jsx b/rcongui/src/pages/dashboard.jsx
@@ -10,6 +10,7 @@ import {
   Box,
   Typography,
   Divider,
+  Stack,
 } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import { Link } from "react-router-dom";
@@ -22,6 +23,7 @@ import LogsCard from "@/components/shared/card/LogsCard";
 import ScrollableCard from "@/components/shared/card/ScrollableCard";
 import { MapAvatar } from "@/components/MapManager/map-details";
 import { gameQueryOptions } from "@/queries/game-query";
+import Emoji from "@/components/shared/Emoji";
 
 const CHART_HEIGHT = 275;
 
@@ -258,6 +260,10 @@ const Dashboard = () => {
       }, {})
     ).map(([flag, players]) => ({
       group: flag,
+      label: <Stack direction={"row"} alignItems={"center"} spacing={0.5}>
+        <Emoji emoji={flag} size={16} />
+        <Typography variant="subtitle2">({players.length})</Typography>
+      </Stack>,
       users: players,
     }));
   }, [onlinePlayers]);
@@ -345,6 +351,7 @@ const Dashboard = () => {
 
       logs.push({
         group: "ADMIN",
+        label: `Admin (${adminLogs.length})`,
         logs: adminLogs,
       });
 
@@ -361,10 +368,10 @@ const Dashboard = () => {
     <Grid container sx={{ overflow: "hidden" }} spacing={2}>
       <Grid size={SMALL_CARD_SIZE}>
         <OnlineUsersCard
-          title="Online"
+          title="VIPs & Watched"
           onlineUsers={[
-            { group: "VIP", users: vips },
-            { group: "Watched", users: watchedPlayers },
+            { group: "VIP", label: `VIP (${vips.length})`, users: vips },
+            { group: "Watched", label: `Watched (${watchedPlayers.length})`, users: watchedPlayers },
           ]}
         />
       </Grid>
@@ -376,9 +383,10 @@ const Dashboard = () => {
         <OnlineUsersCard
           title="Moderators"
           onlineUsers={[
-            { group: "CRCON", users: crconMods, manageLink: "/admin" },
+            { group: "CRCON", label: `CRCON (${crconMods.length})`, users: crconMods, manageLink: "/admin" },
             {
               group: "In-Game",
+              label: `In-Game (${ingameMods.length})`,
               users: ingameMods,
               manageLink: "/settings/console-admins",
             },

diff --git a/rcongui/src/pages/views/live/players-columns.jsx b/rcongui/src/pages/views/live/players-columns.jsx
@@ -20,6 +20,7 @@ import {
 } from "@/utils/lib";
 import { SortableHeader } from "@/components/table/styles";
 import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+import Emoji from "@/components/shared/Emoji";
 
 export const Square = styled(Box)(({ theme }) => ({
   display: "flex",
@@ -267,12 +268,12 @@ export const columns = [
     cell: ({ row }) => {
       const flags = row.original.profile.flags;
       if (!flags || flags.length === 0) return null;
-      const flagsCount = 2;
+      const flagsCount = 5;
       return (
-        <Stack spacing={0.25} direction={"row"} alignItems={"center"}>
+        <Stack spacing={0.5} direction={"row"} alignItems={"center"}>
           {flags.slice(0, flagsCount).map(({ flag, comment: note, modified }) => (
             <Tooltip title={note} key={modified}>
-              <Box>{flag}</Box>
+              <Emoji emoji={flag} size={14} />
             </Tooltip>
           ))}
           {flags.length - flagsCount > 0 ? (