make gang button a component

src/Faction/ui/FactionRoot.tsx

@@ -22,6 +22,7 @@ import { Box, Paper, Typography, Button, Tooltip } from "@mui/material";
 import { CovenantPurchasesRoot } from "../../PersonObjects/Sleeve/ui/CovenantPurchasesRoot";
 import { FactionNames } from "../data/FactionNames";
 import { GangConstants } from "../../Gang/data/Constants";
+import { GangButton } from "./GangButton";
 
 type IProps = {
   faction: Faction;
@@ -61,18 +62,8 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea
   const player = use.Player();
   const router = use.Router();
   const [sleevesOpen, setSleevesOpen] = useState(false);
-  const [gangOpen, setGangOpen] = useState(false);
   const factionInfo = faction.getInfo();
 
-  function manageGang(): void {
-    // If player already has a gang, just go to the gang UI
-    if (player.inGang()) {
-      return router.toGang();
-    }
-
-    setGangOpen(true);
-  }
-
   function startWork(): void {
     player.startFocusing();
     router.toWork();
@@ -104,20 +95,6 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea
 
   const canPurchaseSleeves = faction.name === FactionNames.TheCovenant && player.bitNodeN === 10;
 
-  // Note : For future-proofing sake, an assumption is made that player is intended to retain access to his gang if his karma were to somehow increases.
-  let isManageGangVisible = GangConstants.Names.includes(faction.name) && player.isAwareOfGang();
-  // karma threshold is only checked at that point, via canAccessGang(). No further check is made.
-  let isManageGangClickable = player.canAccessGang();
-  if (player.inGang()) {
-    if (player.getGangName() !== faction.name) {
-      isManageGangVisible = false;
-    } else if (player.getGangName() === faction.name) {
-      isManageGangVisible = true;
-      // The following line will enable the button, without checking for karma threshold.
-      isManageGangClickable = true;
-    }
-  }
-
   return (
     <>
       <Button onClick={() => router.toFactions()}>Back</Button>
@@ -125,26 +102,7 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea
         {faction.name}
       </Typography>
       <Info faction={faction} factionInfo={factionInfo} />
-      {isManageGangVisible && (
+      <GangButton faction={faction} />
-        <>
-          <Box>
-            <Paper sx={{ my: 1, p: 1 }}>
-              <Tooltip
-                title={!isManageGangClickable ? <Typography>Unlocked when reaching {GangConstants.GangKarmaRequirement} karma</Typography> : ""}
-              >
-                <span>
-                  <Button onClick={manageGang} disabled={!isManageGangClickable}>
-                    {"Manage Gang"}
-                  </Button>
-                  <Typography>{gangInfo}</Typography>
-                </span>
-              </Tooltip>
-            </Paper>
-          </Box>
-
-          <CreateGangModal facName={faction.name} open={gangOpen} onClose={() => setGangOpen(false)} />
-        </>
-      )}
       {!isPlayersGang && factionInfo.offerHackingWork && (
         <Option
           buttonText={"Hacking Contracts"}

src/Faction/ui/GangButton.tsx

@@ -0,0 +1,79 @@
+import { Button, Typography, Box, Paper, Tooltip } from "@mui/material";
+import React, { useState } from "react";
+import { GangConstants } from "../../Gang/data/Constants";
+import { use } from "../../ui/Context";
+import { Faction } from "../Faction";
+import { CreateGangModal } from "./CreateGangModal";
+
+type IProps = {
+  faction: Faction;
+};
+
+export function GangButton({ faction }: IProps): React.ReactElement {
+  const player = use.Player();
+  const router = use.Router();
+  const [gangOpen, setGangOpen] = useState(false);
+
+  if (
+    !GangConstants.Names.includes(faction.name) || // not even a gang
+    !player.isAwareOfGang() || // doesn't know about gang
+    (player.inGang() && player.getGangName() !== faction.name) // already in another gang
+  ) {
+    return <></>;
+  }
+
+  let data = {
+    enabled: false,
+    title: "",
+    tooltip: "" as string | React.ReactElement,
+    description: "",
+  };
+
+  if (player.inGang()) {
+    data = {
+      enabled: true,
+      title: "Manage Gang",
+      tooltip: "",
+      description: "Manage a gang for this Faction. Gangs will earn you money and faction reputation",
+    };
+  } else {
+    data = {
+      enabled: player.canAccessGang(),
+      title: "Create Gang",
+      tooltip: !player.canAccessGang() ? (
+        <Typography>Unlocked when reaching {GangConstants.GangKarmaRequirement} karma</Typography>
+      ) : (
+        ""
+      ),
+      description: "Create a gang for this Faction. Gangs will earn you money and faction reputation",
+    };
+  }
+
+  const manageGang = (): void => {
+    // If player already has a gang, just go to the gang UI
+    if (player.inGang()) {
+      return router.toGang();
+    }
+
+    setGangOpen(true);
+  };
+
+  return (
+    <>
+      <Box>
+        <Paper sx={{ my: 1, p: 1 }}>
+          <Tooltip title={data.tooltip}>
+            <span>
+              <Button onClick={manageGang} disabled={!data.enabled}>
+                {data.title}
+              </Button>
+            </span>
+          </Tooltip>
+          <Typography>{data.description}</Typography>
+        </Paper>
+      </Box>
+
+      <CreateGangModal facName={faction.name} open={gangOpen} onClose={() => setGangOpen(false)} />
+    </>
+  );
+}

src/data/codingcontracttypes.ts

@@ -1,7 +1,7 @@
 import { getRandomInt } from "../utils/helpers/getRandomInt";
 import { MinHeap } from "../utils/Heap";
 
-import { comprGenChar, comprLZGenerate, comprLZEncode, comprLZDecode } from "../utils/CompressionContract";
+import { comprGenChar, comprLZGenerate, comprLZEncode, comprLZDecode } from "../utils/CompressionContracts";
 import { HammingEncode, HammingDecode } from "../utils/HammingCodeTools";
 /* tslint:disable:completed-docs no-magic-numbers arrow-return-shorthand */