From 30dfd6e256440076c80f8b1ff7a28d3b8bebc29e Mon Sep 17 00:00:00 2001
From: Alexander Harding <2166114+aeharding@users.noreply.github.com>
Date: Fri, 9 Aug 2024 17:31:18 -0500
Subject: [PATCH] (chore) Ban enums (#1565)

---
 eslint.config.mjs                             |  7 +++++
 src/features/comment/CommentHeader.tsx        | 12 ++++-----
 src/features/community/list/AlphabetJump.tsx  | 14 +++++-----
 src/features/moderation/ModeratableItem.tsx   |  4 +--
 .../banner/ModeratableItemBanner.tsx          | 26 ++++++++++---------
 5 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 80a250dd65..2659f29d98 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -70,6 +70,13 @@ export default [
       "@typescript-eslint/no-empty-object-type": 0,
       "@typescript-eslint/no-empty-interface": 0,
       "react/jsx-curly-brace-presence": ["warn", "never"],
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "TSEnumDeclaration",
+          message: "Don't declare enums",
+        },
+      ],
       eqeqeq: ["warn", "smart"],
       "no-unreachable": ["warn"],
 
diff --git a/src/features/comment/CommentHeader.tsx b/src/features/comment/CommentHeader.tsx
index b09b1c8905..ead8eab358 100644
--- a/src/features/comment/CommentHeader.tsx
+++ b/src/features/comment/CommentHeader.tsx
@@ -179,16 +179,16 @@ export default function CommentHeader({
   return <Header>{content}</Header>;
 }
 
-enum StubType {
-  None,
-  Deleted,
-  ModRemoved,
-}
+const StubType = {
+  None: 0,
+  Deleted: 1,
+  ModRemoved: 2,
+} as const;
 
 export function isStubComment(
   comment: Comment,
   canModerate: ModeratorRole | undefined,
-): StubType {
+): (typeof StubType)[keyof typeof StubType] {
   if (comment.deleted) return StubType.Deleted;
 
   if (comment.removed && !canModerate) return StubType.ModRemoved;
diff --git a/src/features/community/list/AlphabetJump.tsx b/src/features/community/list/AlphabetJump.tsx
index 2b927c3195..6d2c4aa12a 100644
--- a/src/features/community/list/AlphabetJump.tsx
+++ b/src/features/community/list/AlphabetJump.tsx
@@ -18,13 +18,15 @@ const alphabetUpperCase = Array.from({ length: 26 }, (_, i) =>
   String.fromCharCode(65 + i),
 );
 
-enum SpecialSection {
-  Home = 0,
-  Favorited = 1,
-  Moderated = 2,
-}
+const SpecialSection = {
+  Home: 0,
+  Favorited: 1,
+  Moderated: 2,
+} as const;
+
+type SpecialSectionType = (typeof SpecialSection)[keyof typeof SpecialSection];
 
-type JumpItem = SpecialSection | string;
+type JumpItem = SpecialSectionType | string;
 
 const SECTIONS = [
   <IonIcon icon={menuOutline} key={0} />,
diff --git a/src/features/moderation/ModeratableItem.tsx b/src/features/moderation/ModeratableItem.tsx
index 6d15bad0b2..9a4d7ae662 100644
--- a/src/features/moderation/ModeratableItem.tsx
+++ b/src/features/moderation/ModeratableItem.tsx
@@ -1,5 +1,5 @@
 import ModeratableItemBanner, {
-  ItemModState,
+  ItemModStateType,
   useItemModState,
   getModStateBackgroundColor,
 } from "./banner/ModeratableItemBanner";
@@ -11,7 +11,7 @@ import { styled } from "@linaria/react";
 import { isPost } from "../../helpers/lemmy";
 
 const ModeratableItemContainer = styled.div<{
-  modState?: ItemModState;
+  modState?: ItemModStateType;
   highlighted?: boolean;
 }>`
   width: 100%;
diff --git a/src/features/moderation/banner/ModeratableItemBanner.tsx b/src/features/moderation/banner/ModeratableItemBanner.tsx
index fc30b71437..4c8cfcbee7 100644
--- a/src/features/moderation/banner/ModeratableItemBanner.tsx
+++ b/src/features/moderation/banner/ModeratableItemBanner.tsx
@@ -9,8 +9,16 @@ import ReportBanner from "./ReportBanner";
 import { maxWidthCss } from "../../shared/AppContent";
 import { styled } from "@linaria/react";
 
+export const ItemModState = {
+  None: 0,
+  Flagged: 1,
+  RemovedByMod: 2,
+} as const;
+
+export type ItemModStateType = (typeof ItemModState)[keyof typeof ItemModState];
+
 export const Banner = styled.div<{
-  modState: ItemModState.Flagged | ItemModState.RemovedByMod;
+  modState: typeof ItemModState.Flagged | typeof ItemModState.RemovedByMod;
 }>`
   ${maxWidthCss}
 
@@ -31,7 +39,7 @@ export const Banner = styled.div<{
 `;
 
 interface RemovedByBannerProps {
-  modState: ItemModState;
+  modState: ItemModStateType;
   itemView: CommentView | PostView;
 }
 
@@ -49,13 +57,7 @@ export default function ModeratableItemBanner({
   }
 }
 
-export enum ItemModState {
-  None,
-  Flagged,
-  RemovedByMod,
-}
-
-export function useItemModState(item: Comment | Post): ItemModState {
+export function useItemModState(item: Comment | Post): ItemModStateType {
   const hasPostReports = useAppSelector(
     (state) => !!reportsByPostIdSelector(state)[item.id]?.length,
   );
@@ -75,7 +77,7 @@ export function useItemModState(item: Comment | Post): ItemModState {
 }
 
 export function getModStateBackgroundColor(
-  modState: ItemModState,
+  modState: ItemModStateType,
 ): string | undefined {
   switch (modState) {
     case ItemModState.Flagged:
@@ -88,7 +90,7 @@ export function getModStateBackgroundColor(
 }
 
 export function getModStateBannerBgColor(
-  modState: ItemModState,
+  modState: ItemModStateType,
 ): string | undefined {
   switch (modState) {
     case ItemModState.Flagged:
@@ -101,7 +103,7 @@ export function getModStateBannerBgColor(
 }
 
 export function getModStateBannerColor(
-  modState: ItemModState,
+  modState: ItemModStateType,
 ): string | undefined {
   switch (modState) {
     case ItemModState.Flagged: