CODEBASE: Add custom useRerender hook (#359)

src/Locations/ui/CompanyLocation.tsx

@@ -3,7 +3,7 @@
  *
  * This subcomponent renders all of the buttons for applying to jobs at a company
  */
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
@@ -25,6 +25,7 @@ import { Page } from "../../ui/Router";
 import { Player } from "@player";
 import { QuitJobModal } from "../../Company/ui/QuitJobModal";
 import { CompanyWork } from "../../Work/CompanyWork";
+import { useRerender } from "../../ui/React/hooks";
 
 type IProps = {
   locName: LocationName;
@@ -32,15 +33,8 @@ type IProps = {
 
 export function CompanyLocation(props: IProps): React.ReactElement {
   const [quitOpen, setQuitOpen] = useState(false);
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
+  const rerender = useRerender(200);
 
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
   /**
    * We'll keep a reference to the Company that this component is being rendered for,
    * so we don't have to look it up every time

src/Locations/ui/HospitalLocation.tsx

@@ -12,20 +12,12 @@ import { getHospitalizationCost } from "../../Hospital/Hospital";
 import { Money } from "../../ui/React/Money";
 
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
-import { useEffect, useState } from "react";
+import { useRerender } from "../../ui/React/hooks";
 
 export function HospitalLocation(): React.ReactElement {
   /** Stores button styling that sets them all to block display */
   const btnStyle = { display: "block" };
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
+  const rerender = useRerender(200);
 
   function getHealed(e: React.MouseEvent<HTMLElement>): void {
     if (!e.isTrusted) {

src/Locations/ui/PurchaseServerModal.tsx

@@ -14,7 +14,6 @@ interface IProps {
   onClose: () => void;
   ram: number;
   cost: number;
-  rerender: () => void;
 }
 
 /** React Component for the popup used to purchase a new server. */

src/Locations/ui/SlumsLocation.tsx

@@ -3,7 +3,7 @@
  *
  * This subcomponent renders all of the buttons for committing crimes
  */
-import React, { useState, useEffect } from "react";
+import React from "react";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 
@@ -15,15 +15,11 @@ import { Page } from "../../ui/Router";
 import { Player } from "@player";
 import { Box } from "@mui/material";
 import { Crime } from "../../Crime/Crime";
+import { useRerender } from "../../ui/React/hooks";
 
 export function SlumsLocation(): React.ReactElement {
-  const setRerender = useState(false)[1];
-  const rerender = () => setRerender((o) => !o);
+  useRerender(1000);
   const crimes = Object.values(Crimes);
-  useEffect(() => {
-    const timerId = setInterval(() => rerender(), 1000);
-    return () => clearInterval(timerId);
-  });
 
   function doCrime(e: React.MouseEvent<HTMLElement>, crime: Crime) {
     if (!e.isTrusted) return;

src/Locations/ui/TechVendorLocation.tsx

@@ -3,7 +3,7 @@
  *
  * This subcomponent renders all of the buttons for purchasing things from tech vendors
  */
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 
@@ -19,13 +19,9 @@ import { Player } from "@player";
 import { PurchaseServerModal } from "./PurchaseServerModal";
 import { formatRam } from "../../ui/formatNumber";
 import { Box } from "@mui/material";
+import { useRerender } from "../../ui/React/hooks";
 
-interface IServerProps {
-  ram: number;
-  rerender: () => void;
-}
-
-function ServerButton(props: IServerProps): React.ReactElement {
+function ServerButton(props: { ram: number }): React.ReactElement {
   const [open, setOpen] = useState(false);
   const cost = getPurchaseServerCost(props.ram);
   return (
@@ -34,35 +30,17 @@ function ServerButton(props: IServerProps): React.ReactElement {
         Purchase {formatRam(props.ram)} Server - 
         <Money money={cost} forPurchase={true} />
       </Button>
-      <PurchaseServerModal
-        open={open}
-        onClose={() => setOpen(false)}
-        ram={props.ram}
-        cost={cost}
-        rerender={props.rerender}
-      />
+      <PurchaseServerModal open={open} onClose={() => setOpen(false)} ram={props.ram} cost={cost} />
     </>
   );
 }
 
-type IProps = {
-  loc: Location;
-};
-
-export function TechVendorLocation(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 1000);
-    return () => clearInterval(id);
-  }, []);
+export function TechVendorLocation(props: { loc: Location }): React.ReactElement {
+  const rerender = useRerender(1000);
 
   const purchaseServerButtons: React.ReactNode[] = [];
   for (let i = props.loc.techVendorMinRam; i <= props.loc.techVendorMaxRam; i *= 2) {
-    purchaseServerButtons.push(<ServerButton key={i} ram={i} rerender={rerender} />);
+    purchaseServerButtons.push(<ServerButton key={i} ram={i} />);
   }
 
   return (

src/Locations/ui/TravelAgencyRoot.tsx

@@ -3,7 +3,7 @@
  *
  * TThis subcomponent renders all of the buttons for traveling to different cities
  */
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 
 import { CityName } from "../../Enums";
 import { TravelConfirmationModal } from "./TravelConfirmationModal";
@@ -21,6 +21,7 @@ import { dialogBoxCreate } from "../../ui/React/DialogBox";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import { useRerender } from "../../ui/React/hooks";
 
 function travel(to: CityName): void {
   const cost = CONSTANTS.TravelCost;
@@ -35,17 +36,9 @@ function travel(to: CityName): void {
 }
 
 export function TravelAgencyRoot(): React.ReactElement {
-  const setRerender = useState(false)[1];
   const [open, setOpen] = useState(false);
   const [destination, setDestination] = useState(CityName.Sector12);
-  function rerender(): void {
-    setRerender((o) => !o);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 1000);
-    return () => clearInterval(id);
-  }, []);
+  useRerender(1000);
 
   function startTravel(city: CityName): void {
     const cost = CONSTANTS.TravelCost;