MISC: Refactor InvitationModal and AlertManager (#1287)

src/Faction/FactionHelpers.tsx

@@ -16,7 +16,7 @@ import {
 } from "../PersonObjects/formulas/reputation";
 
 import { dialogBoxCreate } from "../ui/React/DialogBox";
-import { InvitationEvent } from "./ui/InvitationModal";
+import { FactionInvitationEvents } from "./ui/FactionInvitationManager";
 import { SFC32RNG } from "../Casino/RNG";
 import { isFactionWork } from "../Work/FactionWork";
 import { getAugCost } from "../Augmentation/AugmentationHelpers";
@@ -28,7 +28,7 @@ export function inviteToFaction(faction: Faction): void {
   faction.alreadyInvited = true;
   faction.discovery = FactionDiscovery.known;
   if (!Settings.SuppressFactionInvites) {
-    InvitationEvent.emit(faction);
+    FactionInvitationEvents.emit({ type: "New", factionName: faction.name });
   }
 }
 

src/Faction/ui/FactionInvitationManager.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from "react";
+import { joinFaction } from "../FactionHelpers";
+import { Modal } from "../../ui/React/Modal";
+import { EventEmitter } from "../../utils/EventEmitter";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import { Report } from "@mui/icons-material";
+import { Settings } from "../../Settings/Settings";
+import { FactionName } from "../Enums";
+import { Factions } from "../Factions";
+
+type NewInvitation = {
+  type: "New";
+  factionName: FactionName;
+};
+
+type ClearAllInvitations = {
+  type: "ClearAll";
+};
+
+type FactionInvitationEvent = NewInvitation | ClearAllInvitations;
+
+export const FactionInvitationEvents = new EventEmitter<[FactionInvitationEvent]>();
+
+export function FactionInvitationManager({ hidden }: { hidden: boolean }): React.ReactElement {
+  const [factions, setFactions] = useState<FactionName[]>([]);
+
+  useEffect(
+    () =>
+      FactionInvitationEvents.subscribe((event) => {
+        if (event.type === "ClearAll") {
+          setFactions([]);
+          return;
+        }
+        setFactions((currentFactions) => {
+          if (currentFactions.includes(event.factionName)) {
+            return currentFactions;
+          }
+          return [...currentFactions, event.factionName];
+        });
+      }),
+    [],
+  );
+
+  function close(): void {
+    setFactions((currentFactions) => {
+      return currentFactions.slice(1);
+    });
+  }
+
+  const faction = factions.length > 0 ? Factions[factions[0]] : null;
+  const enemies = faction?.getInfo().enemies ?? [];
+
+  function join(): void {
+    if (faction === null || !faction.alreadyInvited) {
+      return;
+    }
+    joinFaction(faction);
+    close();
+  }
+
+  return (
+    <Modal open={!hidden && faction !== null} onClose={close}>
+      <Typography variant="h4">You received a faction invitation.</Typography>
+      <Typography>
+        Would you like to join <b>{faction?.name}</b>?
+      </Typography>
+      {enemies.length > 0 && (
+        <Typography component="div">
+          <br />
+          Joining this faction will prevent you from joining its enemies until your next augmentation.
+          <br />
+          {faction?.name} is enemies with:
+          {enemies.map((enemy) => (
+            <Typography key={enemy} sx={{ display: "flex", alignItems: "center" }}>
+              <Report sx={{ marginLeft: 2, marginRight: 1, color: Settings.theme.error }} />
+              {enemy}
+            </Typography>
+          ))}
+        </Typography>
+      )}
+      <br />
+      <Button onClick={join} sx={{ marginRight: 1 }}>
+        Join
+      </Button>
+      <Button onClick={close}>Decide later</Button>
+    </Modal>
+  );
+}

src/Faction/ui/InvitationModal.tsx

@@ -1,52 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { joinFaction } from "../FactionHelpers";
-import { Faction } from "../Faction";
-import { Modal } from "../../ui/React/Modal";
-import { EventEmitter } from "../../utils/EventEmitter";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import { Report } from "@mui/icons-material";
-import { Settings } from "../../Settings/Settings";
-
-export const InvitationEvent = new EventEmitter<[Faction | null]>();
-
-export function InvitationModal({ hidden }: { hidden: boolean }): React.ReactElement {
-  const [faction, setFaction] = useState<Faction | null>(null);
-
-  const enemies = faction?.getInfo().enemies ?? [];
-
-  function join(): void {
-    if (faction === null) return;
-    if (!faction.alreadyInvited) return;
-    joinFaction(faction);
-    setFaction(null);
-  }
-
-  useEffect(() => InvitationEvent.subscribe((faction) => setFaction(faction)), []);
-
-  return (
-    <Modal open={!hidden && faction !== null} onClose={() => setFaction(null)}>
-      <Typography variant="h4">You have received a faction invitation.</Typography>
-      <Typography>
-        Would you like to join <b>{faction?.name}</b>?
-      </Typography>
-      {enemies.length > 0 && (
-        <Typography component="div">
-          <br />
-          Joining this Faction will prevent you from joining its enemies until your next augmentation.
-          <br />
-          {faction?.name} is enemies with:
-          {enemies.map((enemy) => (
-            <Typography key={enemy} sx={{ display: "flex", alignItems: "center" }}>
-              <Report sx={{ ml: 2, mr: 1, color: Settings.theme.error }} />
-              {enemy}
-            </Typography>
-          ))}
-        </Typography>
-      )}
-      <br />
-      <Button onClick={join}>Join!</Button>
-      <Button onClick={() => setFaction(null)}>Decide later</Button>
-    </Modal>
-  );
-}