feat(flags): enable flags again

.env

@@ -1,2 +1,3 @@
 ILUM_DOMAIN=https://ilumv2.xp-bot.net
-DEVELOPERS=265849018662387712,524860237979582464
+DEVELOPERS=265849018662387712,524860237979582464
+PUBLIC_HAPPYKIT_API=flags_pub_development_349193885386277458

components/leaderboard-panel.tsx

@@ -1,14 +1,15 @@
-import useBreakpoints from 'hooks/use-breakpoints';
-import { isEqual } from 'lodash';
-import { IXPLeaderboardUser } from 'models/backend/xp-models';
-import Link from 'next/link';
-import { FC, useState } from 'react';
-import { avatarToURL } from 'utils/discord-utils';
-import { calculateLevel, formatNumber } from 'utils/text-utils';
+import { useUser } from "context/user-context";
+import useBreakpoints from "hooks/use-breakpoints";
+import { isEqual } from "lodash";
+import { IXPLeaderboardUser } from "models/backend/xp-models";
+import Link from "next/link";
+import { FC, useState } from "react";
+import { avatarToURL } from "utils/discord-utils";
+import { calculateLevel, formatNumber } from "utils/text-utils";
 
-import BlockButton from './block-button';
-import FallBackImage from './fallback-image';
-import { ArrowDown, ArrowUp, Neutral } from './svg/arrows';
+import BlockButton from "./block-button";
+import FallBackImage from "./fallback-image";
+import { ArrowDown, ArrowUp, Neutral } from "./svg/arrows";
 
 interface LeaderboardPanelProps {
   user: IXPLeaderboardUser;
@@ -33,6 +34,7 @@ const LeaderboardPanel: FC<LeaderboardPanelProps> = ({
   requestEdit,
   isAdmin,
 }) => {
+  const userContext = useUser();
   const [hovering, setHovering] = useState(false);
   const breakpoints = useBreakpoints();
   hovering;
@@ -48,20 +50,16 @@ const LeaderboardPanel: FC<LeaderboardPanelProps> = ({
       onMouseLeave={() => {
         setHovering(false);
       }}
-      className="flex h-[40px] w-full shrink-0 flex-row gap-3 font-semibold md:cursor-default md:gap-5"
+      className="flex h-[40px] w-full shrink-0 flex-row gap-3 md:cursor-default md:gap-5"
     >
-      <div
-        className="relative flex aspect-square h-full w-[40px] shrink-0 grow-0 overflow-hidden rounded-md bg-panelBack p-1 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode"
-      >
+      <div className="relative flex aspect-square h-full w-[40px] shrink-0 grow-0 overflow-hidden rounded-md bg-panelBack p-1 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode">
         <FallBackImage
           customFallback="https://cdn.namespace.media/s/ofpajSeo5zoymxL/download/LOGO_3_x250.png"
           src={avatarToURL(user, 64)}
           className="h-full w-full rounded-md object-cover"
         />
       </div>
-      <div
-        className="relative flex h-full shrink-0 items-center overflow-hidden whitespace-nowrap rounded-md bg-panelBack p-4 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode"
-      >
+      <div className="relative flex h-full shrink-0 items-center overflow-hidden whitespace-nowrap rounded-md bg-panelBack p-4 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode">
         #{rank}
       </div>
       <Link
@@ -81,21 +79,17 @@ const LeaderboardPanel: FC<LeaderboardPanelProps> = ({
         <span className="truncate">{user.username}</span>
       </Link>
 
-      <div
-        className="relative hidden h-full shrink-0 items-center overflow-hidden whitespace-nowrap rounded-md bg-panelBack p-4 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode md:flex"
-      >
+      <div className="relative hidden h-full shrink-0 items-center overflow-hidden whitespace-nowrap rounded-md bg-panelBack p-4 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode md:flex">
         Lvl. {formatNumber(calculateLevel(user.xp))}
       </div>
-      <div
-        className="relative hidden h-full shrink-0 items-center overflow-hidden whitespace-nowrap rounded-md bg-panelBack p-4 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode md:flex"
-      >
+      <div className="relative hidden h-full shrink-0 items-center overflow-hidden whitespace-nowrap rounded-md bg-panelBack p-4 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode md:flex">
         {formatNumber(user.xp)} xp
       </div>
-      <div
-        className="relative flex h-full shrink-0 items-center overflow-hidden whitespace-nowrap rounded-md bg-panelBack p-4 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode"
-      >
-        {getArrowPos(user.id, user.arrowPos, rank)}
-      </div>
+      {!userContext.flags?.["disable-leaderboard-arrows"] && (
+        <div className="relative flex h-full shrink-0 items-center overflow-hidden whitespace-nowrap rounded-md bg-panelBack p-4 text-darkText shadow-md dark:bg-panelBack-darkMode dark:text-darkText-darkMode">
+          {getArrowPos(user.id, user.arrowPos, rank)}
+        </div>
+      )}
       {isAdmin && (
         <BlockButton
           onClick={requestEdit}

context/user-context.tsx

@@ -8,6 +8,8 @@ import { ISocketIO } from "models/backend/socket-models";
 import { useRouter } from "next/router";
 import { createContext, useContext, useEffect, useState } from "react";
 import { io } from "socket.io-client";
+import { useFlags } from "utils/flags/client";
+import { AppFlags } from "utils/flags/config";
 
 import { apiRoutes } from "../apis/api-helper";
 import { IApiFailure, IApiSuccess } from "../models/api-models";
@@ -26,6 +28,7 @@ export enum LoginStatus {
 }
 
 interface IUserContextValues {
+  flags: AppFlags | null;
   isLoggedIn: boolean;
   loginStatus: LoginStatus;
   currentUser?: IXPAPIUser;
@@ -72,6 +75,7 @@ interface IUserContextValues {
 }
 
 export const UserContext = createContext<IUserContextValues>({
+  flags: null,
   isLoggedIn: false,
   loginStatus: LoginStatus.checking,
   discordGuilds: [],
@@ -123,6 +127,7 @@ export function UserContextProvider({
     []
   );
   const [currentUser, setCurrentUser] = useState<IXPAPIUser | undefined>();
+  const { flags } = useFlags();
 
   const [inboxItems, setInboxItems] = useState<IInboxItem[]>([]);
 
@@ -290,6 +295,7 @@ export function UserContextProvider({
   return (
     <UserContext.Provider
       value={{
+        flags,
         isLoggedIn: isEqual(loginStatus, LoginStatus.loggedIn),
         loginStatus,
         currentUser,

next.config.js

@@ -22,6 +22,7 @@ const nextConfig = {
     BACKEND_DOMAIN: process.env.NEXT_PUBLIC_BACKEND_DOMAIN,
     ILUM_DOMAIN: process.env.ILUM_DOMAIN,
     DEVELOPERS: process.env.DEVELOPERS,
+    PUBLIC_HAPPYKIT_API: process.env.PUBLIC_HAPPYKIT_API,
   },
   sassOptions: {
     includePaths: [path.join(__dirname, "styles")],

package.json

@@ -14,7 +14,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@happykit/flags": "^3.0.0",
+    "@happykit/flags": "^3.3.0",
     "@tailwindcss/typography": "^0.5.7",
     "axios": "^1.1.2",
     "chart.js": "^4.1.2",
@@ -49,16 +49,16 @@
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
     "@types/semver": "^7.3.13",
-    "autoprefixer": "^10.4.12",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.4.12",
     "eslint": "^8.45.0",
     "eslint-config-next": "^13.4.10",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-check-file": "^2.6.2",
+    "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "eslint-plugin-lodash": "^7.4.0",
     "postcss": "^8.4.17",
     "sass": "^1.55.0",
     "tailwindcss": "^3.3.1",

utils/flags/config.ts

@@ -0,0 +1,14 @@
+import type { Configuration } from "@happykit/flags/config";
+
+export type AppFlags = {
+    "disable-leaderboard-arrows": boolean;
+};
+
+
+export const config: Configuration<AppFlags> = {
+    envKey: process.env.PUBLIC_HAPPYKIT_API || 'flags',
+
+    defaultFlags: {
+        "disable-leaderboard-arrows": false,
+    },
+};