CODEBASE: Add custom useRerender hook (#359)

src/PersonObjects/Grafting/ui/GraftingRoot.tsx

@@ -1,6 +1,6 @@
 import { CheckBox, CheckBoxOutlineBlank, Construction } from "@mui/icons-material";
 import { Box, Button, Container, List, ListItemButton, Paper, Typography } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { GraftingWork } from "../../../Work/GraftingWork";
 import { Augmentation } from "../../../Augmentation/Augmentation";
 import { AugmentationNames } from "../../../Augmentation/data/AugmentationNames";
@@ -20,6 +20,7 @@ import { convertTimeMsToTimeElapsedString } from "../../../utils/StringHelperFun
 import { Player } from "@player";
 import { GraftableAugmentation } from "../GraftableAugmentation";
 import { calculateGraftingTimeWithBonus, getGraftingAvailableAugs } from "../GraftingHelpers";
+import { useRerender } from "../../../ui/React/hooks";
 
 export const GraftableAugmentations = (): Record<string, GraftableAugmentation> => {
   const gAugs: Record<string, GraftableAugmentation> = {};
@@ -65,11 +66,7 @@ export const GraftingRoot = (): React.ReactElement => {
   const [selectedAug, setSelectedAug] = useState(getGraftingAvailableAugs()[0]);
   const [graftOpen, setGraftOpen] = useState(false);
   const selectedAugmentation = StaticAugmentations[selectedAug];
-
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
+  const rerender = useRerender(200);
 
   const getAugsSorted = (): string[] => {
     const augs = getGraftingAvailableAugs();
@@ -86,11 +83,6 @@ export const GraftingRoot = (): React.ReactElement => {
     rerender();
   };
 
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
-
   return (
     <Container disableGutters maxWidth="lg" sx={{ mx: 0 }}>
       <Button onClick={() => Router.toLocation(Locations[LocationName.NewTokyoVitaLife])}>Back</Button>

src/PersonObjects/Sleeve/ui/CovenantPurchasesRoot.tsx

@@ -2,7 +2,7 @@
  * Root React component for the popup that lets player purchase Duplicate
  * Sleeves and Sleeve-related upgrades from The Covenant
  */
-import React, { useState } from "react";
+import React from "react";
 
 import { CovenantSleeveMemoryUpgrade } from "./CovenantSleeveMemoryUpgrade";
 
@@ -17,6 +17,7 @@ import { dialogBoxCreate } from "../../../ui/React/DialogBox";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import { FactionNames } from "../../../Faction/data/FactionNames";
+import { useRerender } from "../../../ui/React/hooks";
 
 interface IProps {
   open: boolean;
@@ -24,18 +25,13 @@ interface IProps {
 }
 
 export function CovenantPurchasesRoot(props: IProps): React.ReactElement {
-  const [update, setUpdate] = useState(0);
+  const rerender = useRerender();
 
   /** Get the cost to purchase a new Duplicate Sleeve */
   function purchaseCost(): number {
     return Math.pow(10, Player.sleevesFromCovenant) * BaseCostPerSleeve;
   }
 
-  /** Force a rerender by just changing an arbitrary state value */
-  function rerender(): void {
-    setUpdate(update + 1);
-  }
-
   // Purchasing a new Duplicate Sleeve
   let purchaseDisabled = false;
   if (!Player.canAfford(purchaseCost())) {

src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx

@@ -1,9 +1,10 @@
 import { Container, Typography, Paper } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { PurchasableAugmentations } from "../../../Augmentation/ui/PurchasableAugmentations";
 import { Player } from "@player";
 import { Modal } from "../../../ui/React/Modal";
 import { Sleeve } from "../Sleeve";
+import { useRerender } from "../../../ui/React/hooks";
 
 interface IProps {
   open: boolean;
@@ -12,15 +13,7 @@ interface IProps {
 }
 
 export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 150);
-    return () => clearInterval(id);
-  }, []);
+  const rerender = useRerender(150);
 
   // Array of all owned Augmentations. Names only
   const ownedAugNames = props.sleeve.augmentations.map((e) => e.name);

src/PersonObjects/Sleeve/ui/SleeveRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 
 import { Box, Typography, Button, Container } from "@mui/material";
 
@@ -6,18 +6,11 @@ import { Player } from "@player";
 
 import { SleeveElem } from "./SleeveElem";
 import { FAQModal } from "./FAQModal";
+import { useRerender } from "../../../ui/React/hooks";
 
 export function SleeveRoot(): React.ReactElement {
   const [FAQOpen, setFAQOpen] = useState(false);
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
+  const rerender = useRerender(200);
 
   return (
     <>