From d942d27a8573f70a11d5fd0bd9416ee1549d5314 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 17:49:10 -0500
Subject: [PATCH] Reduce component usage in sleeve element

---
 src/PersonObjects/Sleeve/ui/SleeveElem.tsx | 138 ++++++++++-----------
 1 file changed, 64 insertions(+), 74 deletions(-)

diff --git a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
index 6ec55dea1..82a98a706 100644
--- a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
+++ b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
@@ -1,23 +1,19 @@
+import { Box, Button, Paper, Tooltip, Typography } from "@mui/material";
 import React, { useState } from "react";
-
-import { Box, Paper, Typography, Button, Tooltip } from "@mui/material";
-
 import { CONSTANTS } from "../../../Constants";
 import { Crimes } from "../../../Crime/Crimes";
-import { numeralWrapper } from "../../../ui/numeralFormat";
-import { createProgressBarText } from "../../../utils/helpers/createProgressBarText";
-import { use } from "../../../ui/Context";
 import { FactionWorkType } from "../../../Faction/FactionWorkTypeEnum";
-
+import { use } from "../../../ui/Context";
+import { numeralWrapper } from "../../../ui/numeralFormat";
+import { ProgressBar } from "../../../ui/React/Progress";
 import { Sleeve } from "../Sleeve";
 import { SleeveTaskType } from "../SleeveTaskTypesEnum";
-
-import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
-import { TravelModal } from "./TravelModal";
-import { StatsElement, EarningsElement } from "./StatsElement";
-import { MoreStatsModal } from "./MoreStatsModal";
 import { MoreEarningsModal } from "./MoreEarningsModal";
+import { MoreStatsModal } from "./MoreStatsModal";
+import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
+import { EarningsElement, StatsElement } from "./StatsElement";
 import { TaskSelector } from "./TaskSelector";
+import { TravelModal } from "./TravelModal";
 
 interface IProps {
   sleeve: Sleeve;
@@ -131,51 +127,47 @@ export function SleeveElem(props: IProps): React.ReactElement {
   }
 
   return (
-    <Box component={Paper} sx={{ width: "auto" }}>
-      <Box sx={{ m: 1 }}>
-        <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%", gap: 1 }}>
-          <Box>
-            <StatsElement sleeve={props.sleeve} />
-            <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
-              <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
-              <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
-              <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
-                <span>
-                  <Button
-                    onClick={() => setTravelOpen(true)}
-                    disabled={player.money < CONSTANTS.TravelCost}
-                    sx={{ width: "100%", height: "100%" }}
-                  >
-                    Travel
-                  </Button>
-                </span>
-              </Tooltip>
-              <Tooltip
-                title={
-                  props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""
-                }
-              >
-                <span>
-                  <Button
-                    onClick={() => setAugmentationsOpen(true)}
-                    disabled={props.sleeve.shock < 100}
-                    sx={{ width: "100%", height: "100%" }}
-                  >
-                    Manage Augmentations
-                  </Button>
-                </span>
-              </Tooltip>
-            </Box>
+    <>
+      <Paper sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 1fr", width: "auto", gap: 1 }}>
+        <span>
+          <StatsElement sleeve={props.sleeve} />
+          <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
+            <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
+            <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
+            <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
+              <span>
+                <Button
+                  onClick={() => setTravelOpen(true)}
+                  disabled={player.money < CONSTANTS.TravelCost}
+                  sx={{ width: "100%", height: "100%" }}
+                >
+                  Travel
+                </Button>
+              </span>
+            </Tooltip>
+            <Tooltip
+              title={props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""}
+            >
+              <span>
+                <Button
+                  onClick={() => setAugmentationsOpen(true)}
+                  disabled={props.sleeve.shock < 100}
+                  sx={{ width: "100%", height: "100%" }}
+                >
+                  Manage Augmentations
+                </Button>
+              </span>
+            </Tooltip>
           </Box>
-          <Box>
-            <EarningsElement sleeve={props.sleeve} />
-            <Box>
-              <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
-              <Button onClick={setTask} sx={{ width: "100%" }}>
-                Set Task
-              </Button>
-              <Typography>{desc}</Typography>
-              <Typography>
+        </span>
+        <span>
+          <EarningsElement sleeve={props.sleeve} />
+          <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
+          <Button onClick={setTask} sx={{ width: "100%" }}>
+            Set Task
+          </Button>
+          <Typography>{desc}</Typography>
+          <Typography>
             {props.sleeve.currentTask === SleeveTaskType.Crime && (
               <ProgressBar
                 variant="determinate"
@@ -184,23 +176,21 @@ export function SleeveElem(props: IProps): React.ReactElement {
               />
             )}
           </Typography>
-            </Box>
-          </Box>
-          <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
-          <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
-          <TravelModal
-            open={travelOpen}
-            onClose={() => setTravelOpen(false)}
-            sleeve={props.sleeve}
-            rerender={props.rerender}
-          />
-          <SleeveAugmentationsModal
-            open={augmentationsOpen}
-            onClose={() => setAugmentationsOpen(false)}
-            sleeve={props.sleeve}
-          />
-        </Box>
-      </Box>
-    </Box>
+        </span>
+      </Paper>
+      <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
+      <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
+      <TravelModal
+        open={travelOpen}
+        onClose={() => setTravelOpen(false)}
+        sleeve={props.sleeve}
+        rerender={props.rerender}
+      />
+      <SleeveAugmentationsModal
+        open={augmentationsOpen}
+        onClose={() => setAugmentationsOpen(false)}
+        sleeve={props.sleeve}
+      />
+    </>
   );
 }