big work

src/Faction/ui/FactionRoot.tsx

@@ -3,7 +3,7 @@
  * This is the component for displaying a single faction's UI, not the list of all
  * accessible factions
  */
-import * as React from "react";
+import React, { useState } from "react";
 
 import { AugmentationsPage } from "./AugmentationsPage";
 import { DonateOption } from "./DonateOption";
@@ -11,30 +11,21 @@ import { Info } from "./Info";
 import { Option } from "./Option";
 
 import { CONSTANTS } from "../../Constants";
-import { IEngine } from "../../IEngine";
 
 import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";
 import { Faction } from "../../Faction/Faction";
-import { IPlayer } from "../../PersonObjects/IPlayer";
 import { createSleevePurchasesFromCovenantPopup } from "../../PersonObjects/Sleeve/SleeveCovenantPurchases";
 import { SourceFileFlags } from "../../SourceFile/SourceFileFlags";
 
 import { createPopup } from "../../ui/React/createPopup";
+import { use } from "../../ui/Context";
 import { CreateGangPopup } from "./CreateGangPopup";
 
 type IProps = {
-  engine: IEngine;
   faction: Faction | null;
-  p: IPlayer;
   startHackingMissionFn: (faction: Faction) => void;
 };
 
-type IState = {
-  rerenderFlag: boolean;
-  purchasingAugs: boolean;
-  faction: Faction;
-};
-
 // Info text for all options on the UI
 const gangInfo = "Create and manage a gang for this Faction. Gangs will earn you money and " + "faction reputation";
 const hackingMissionInfo =
@@ -72,91 +63,68 @@ const GangNames = [
   "The Black Hand",
 ];
 
-export class FactionRoot extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
-    if (props.faction === null) throw new Error("Trying to render the Faction page with null faction");
-    super(props);
+export function FactionRoot(props: IProps): React.ReactElement {
+  const faction = props.faction;
+  if (faction === null) throw new Error("Trying to render the Faction page with null faction");
 
-    this.state = {
-      rerenderFlag: false,
-      purchasingAugs: false,
-      faction: props.faction,
-    };
+  const player = use.Player();
+  const router = use.Router();
+  const [, setRerenderFlag] = useState(false);
+  const [purchasingAugs, setPurchasingAugs] = useState(false);
 
-    this.manageGang = this.manageGang.bind(this);
-    this.rerender = this.rerender.bind(this);
-    this.routeToMain = this.routeToMain.bind(this);
-    this.routeToPurchaseAugs = this.routeToPurchaseAugs.bind(this);
-    this.sleevePurchases = this.sleevePurchases.bind(this);
-    this.startFieldWork = this.startFieldWork.bind(this);
-    this.startHackingContracts = this.startHackingContracts.bind(this);
-    this.startHackingMission = this.startHackingMission.bind(this);
-    this.startSecurityWork = this.startSecurityWork.bind(this);
-  }
-
-  manageGang(): void {
+  function manageGang(faction: Faction): void {
     // If player already has a gang, just go to the gang UI
-    if (this.props.p.inGang()) {
-      return this.props.engine.loadGangContent();
+    if (player.inGang()) {
+      return router.toGang();
     }
 
     const popupId = "create-gang-popup";
     createPopup(popupId, CreateGangPopup, {
       popupId: popupId,
-      facName: this.state.faction.name,
-      p: this.props.p,
-      engine: this.props.engine,
+      facName: faction.name,
     });
   }
 
-  rerender(): void {
-    this.setState((prevState) => {
-      return {
-        rerenderFlag: !prevState.rerenderFlag,
-      };
-    });
+  function rerender(): void {
+    setRerenderFlag((old) => !old);
   }
 
   // Route to the main faction page
-  routeToMain(): void {
-    this.setState({ purchasingAugs: false });
+  function routeToMain(): void {
+    setPurchasingAugs(false);
   }
 
   // Route to the purchase augmentation UI for this faction
-  routeToPurchaseAugs(): void {
-    this.setState({ purchasingAugs: true });
+  function routeToPurchaseAugs(): void {
+    setPurchasingAugs(true);
   }
 
-  sleevePurchases(): void {
-    createSleevePurchasesFromCovenantPopup(this.props.p);
+  function sleevePurchases(): void {
+    createSleevePurchasesFromCovenantPopup(player);
   }
 
-  startFieldWork(): void {
-    this.props.p.startFactionFieldWork(this.state.faction);
+  function startFieldWork(faction: Faction): void {
+    player.startFactionFieldWork(faction);
+    router.toWork();
   }
 
-  startHackingContracts(): void {
-    this.props.p.startFactionHackWork(this.state.faction);
+  function startHackingContracts(faction: Faction): void {
+    player.startFactionHackWork(faction);
+    router.toWork();
   }
 
-  startHackingMission(): void {
-    const fac = this.state.faction;
-    this.props.p.singularityStopWork();
-    this.props.engine.loadMissionContent();
-    this.props.startHackingMissionFn(fac);
+  function startHackingMission(faction: Faction): void {
+    player.singularityStopWork();
+    props.startHackingMissionFn(faction);
   }
 
-  startSecurityWork(): void {
-    this.props.p.startFactionSecurityWork(this.state.faction);
+  function startSecurityWork(faction: Faction): void {
+    player.startFactionSecurityWork(faction);
+    router.toWork();
   }
 
-  render(): React.ReactNode {
-    return this.state.purchasingAugs ? this.renderAugmentationsPage() : this.renderMainPage();
-  }
-
-  renderMainPage(): React.ReactNode {
-    const p = this.props.p;
-    const faction = this.state.faction;
+  function MainPage({ faction }: { faction: Faction }): React.ReactElement {
+    const p = player;
     const factionInfo = faction.getInfo();
 
     // We have a special flag for whether the player this faction is the player's
@@ -183,49 +151,51 @@ export class FactionRoot extends React.Component<IProps, IState> {
       <div className="faction-container">
         <h1>{faction.name}</h1>
         <Info faction={faction} factionInfo={factionInfo} />
-        {canAccessGang && <Option buttonText={"Manage Gang"} infoText={gangInfo} onClick={this.manageGang} />}
+        {canAccessGang && <Option buttonText={"Manage Gang"} infoText={gangInfo} onClick={() => manageGang(faction)} />}
         {!isPlayersGang && factionInfo.offerHackingMission && (
-          <Option buttonText={"Hacking Mission"} infoText={hackingMissionInfo} onClick={this.startHackingMission} />
+          <Option
+            buttonText={"Hacking Mission"}
+            infoText={hackingMissionInfo}
+            onClick={() => startHackingMission(faction)}
+          />
         )}
         {!isPlayersGang && factionInfo.offerHackingWork && (
           <Option
             buttonText={"Hacking Contracts"}
             infoText={hackingContractsInfo}
-            onClick={this.startHackingContracts}
+            onClick={() => startHackingContracts(faction)}
           />
         )}
         {!isPlayersGang && factionInfo.offerFieldWork && (
-          <Option buttonText={"Field Work"} infoText={fieldWorkInfo} onClick={this.startFieldWork} />
+          <Option buttonText={"Field Work"} infoText={fieldWorkInfo} onClick={() => startFieldWork(faction)} />
         )}
         {!isPlayersGang && factionInfo.offerSecurityWork && (
-          <Option buttonText={"Security Work"} infoText={securityWorkInfo} onClick={this.startSecurityWork} />
+          <Option buttonText={"Security Work"} infoText={securityWorkInfo} onClick={() => startSecurityWork(faction)} />
         )}
         {!isPlayersGang && factionInfo.offersWork() && (
           <DonateOption
-            faction={this.state.faction}
-            p={this.props.p}
-            rerender={this.rerender}
+            faction={faction}
+            p={player}
+            rerender={rerender}
             favorToDonate={favorToDonate}
             disabled={!canDonate}
           />
         )}
-        <Option buttonText={"Purchase Augmentations"} infoText={augmentationsInfo} onClick={this.routeToPurchaseAugs} />
+        <Option buttonText={"Purchase Augmentations"} infoText={augmentationsInfo} onClick={routeToPurchaseAugs} />
         {canPurchaseSleeves && (
           <Option
             buttonText={"Purchase & Upgrade Duplicate Sleeves"}
             infoText={sleevePurchasesInfo}
-            onClick={this.sleevePurchases}
+            onClick={sleevePurchases}
           />
         )}
       </div>
     );
   }
 
-  renderAugmentationsPage(): React.ReactNode {
-    return (
-      <>
-        <AugmentationsPage faction={this.state.faction} p={this.props.p} routeToMainPage={this.routeToMain} />
-      </>
-    );
-  }
+  return purchasingAugs ? (
+    <AugmentationsPage faction={faction} routeToMainPage={routeToMain} />
+  ) : (
+    <MainPage faction={faction} />
+  );
 }