From e5a2c8f1d8830da1d9ef420a299eaa20dc566490 Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <JLSaunders987@gmail.com>
Date: Wed, 1 Nov 2023 17:51:30 -0700
Subject: [PATCH] Cleaning up unused imports, indentation, add some comments

---
 src/App.css |  32 --------
 src/App.jsx | 210 ++++++++++++++++++++++++++--------------------------
 2 files changed, 106 insertions(+), 136 deletions(-)

diff --git a/src/App.css b/src/App.css
index 630afb8..aeca2a3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,16 +1,10 @@
 .App {
-  /*text-align: center;*/
   position:absolute;
   height: 100%;
   width: 100%;
   background-color: #1e1e1e;
 }
 
-/*.App-Container {*/
-/*  background-color: #102445;*/
-
-/*}*/
-
 .App-logo {
   height: 10em;
   pointer-events: none;
@@ -36,32 +30,6 @@
   flex-basis: 50%;
 }
 
-/*@media (prefers-reduced-motion: no-preference) {*/
-/*  .App-logo {*/
-/*    animation: App-logo-spin infinite 20s linear;*/
-/*  }*/
-/*}*/
-
-/*.App-header {*/
-/*  background-color: #282c34;*/
-/*  min-height: 100vh;*/
-/*  display: flex;*/
-/*  flex-direction: column;*/
-/*  align-items: center;*/
-/*  justify-content: center;*/
-/*  font-size: calc(10px + 2vmin);*/
-/*  color: white;*/
-/*}*/
-
 .App-link {
   color: #61dafb;
 }
-
-/*@keyframes App-logo-spin {*/
-/*  from {*/
-/*    transform: rotate(0deg);*/
-/*  }*/
-/*  to {*/
-/*    transform: rotate(360deg);*/
-/*  }*/
-/*}*/
diff --git a/src/App.jsx b/src/App.jsx
index 064c52b..629c20d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,6 @@ import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import PropTypes from 'prop-types';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Typography from '@mui/material/Typography';
@@ -13,16 +12,10 @@ import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import InputAdornment from '@mui/material/InputAdornment';
-import {OutlinedInput} from '@mui/material';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
 import { NumericFormat } from 'react-number-format';
 import { FormattedNumber, IntlProvider } from 'react-intl';
 import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 
@@ -32,6 +25,7 @@ const darkTheme = createTheme({
   },
 });
 
+// Formatter for salary input component
 const NumericFormatCustom = React.forwardRef(function NumericFormatCustom(
     props,
     ref,
@@ -57,19 +51,24 @@ const NumericFormatCustom = React.forwardRef(function NumericFormatCustom(
   );
 });
 
+// Each calculator a separate component - only making postdoc for now
 function Postdoc(){
+  // The different parts of the calculation and results stored as state
   const [experience, setExperience] = React.useState(0)
   const [hireDate, setHireDate] = React.useState('apr')
   const [salary, setSalary] = React.useState(64480);
   const [newSalary, setNewSalary] = React.useState(undefined);
   const [futureSalaries, setFutureSalaries] = React.useState(undefined);
 
+  // Status function for calculating new salary from old salary and other state
+  // (lots of fun implicit dependencies in here but hey we can make a pure function later)
   const calculateNewSalary = (oldSalary) => {
     const multiplier_hire = hireDate === 'apr' ? 1.05 : 1.025
     const multiplier_exp = 1 + (experience / 20)
     return oldSalary * 1.05 * multiplier_hire * multiplier_exp;
   }
 
+  // Effect to update salary whenever any of the state values change
   React.useEffect(
       () => {
         setNewSalary(calculateNewSalary(salary))
@@ -86,7 +85,8 @@ function Postdoc(){
   )
 
 
-
+  // The logicless handlers that could just be an inline anonymous function but split
+  // out just to show...
   const handleHireDate = (event) => {
     setHireDate(event.target.value);
   };
@@ -95,8 +95,9 @@ function Postdoc(){
     setSalary(event.target.value)
   }
 
+  // Standard react render blob
   return(
-      <Box sx={{ flexGrow: 1 }}>
+    <Box sx={{ flexGrow: 1 }}>
       <Grid container spacing={2} padding={5}>
         <Grid item xs={6}>
           <Typography fontWeight={"bold"} fontSize={'1.2em'}>
@@ -118,7 +119,6 @@ function Postdoc(){
           <Typography fontWeight={"bold"} fontSize={'1.2em'}>
             Hiring Date
           </Typography>
-          {/*<Typography fontStyle={"italic"}>As of April 4, 2023</Typography>*/}
         </Grid>
         <Grid item xs={6}>
           <ToggleButtonGroup
@@ -133,68 +133,67 @@ function Postdoc(){
           </ToggleButtonGroup>
         </Grid>
 
-          <Grid item xs={6}>
-            <Typography fontWeight={"bold"} fontSize={'1.2em'}>
-              Salary Before Raise
-            </Typography>
-            {/*<Typography fontStyle={"italic"}></Typography>*/}
-          </Grid>
-          <Grid item xs={6}>
-            <TextField
-                fullWidth
-                label="USD"
-                value={salary}
-                onChange={handleChangeSalary}
-                name="numberformat"
-                id="formatted-numberformat-input"
-                InputProps={{
-                  inputComponent: NumericFormatCustom,
-                }}
-                variant="standard"
-            />
-          </Grid>
+        <Grid item xs={6}>
+          <Typography fontWeight={"bold"} fontSize={'1.2em'}>
+            Salary Before Raise
+          </Typography>
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+              fullWidth
+              label="USD"
+              value={salary}
+              onChange={handleChangeSalary}
+              name="numberformat"
+              id="formatted-numberformat-input"
+              InputProps={{
+                inputComponent: NumericFormatCustom,
+              }}
+              variant="standard"
+          />
+        </Grid>
         <Grid item xs={12}>
           {newSalary !== undefined ?
-              <>
-          <Typography textAlign={"center"} marginTop={"0.5em"} fontSize={"2em"}>
-            Your Salary Should Be:
-          </Typography>
-          <Typography textAlign={"center"} fontSize={"3em"} fontWeight={"bold"}>
-            <FormattedNumber
-                value={newSalary}
-                currency="USD"
-                unitDisplay="long"
-                style="currency"
-            />
-          </Typography>
-
-
-              </>
-          : undefined}
+            <>
+              <Typography textAlign={"center"} marginTop={"0.5em"} fontSize={"2em"}>
+                Your Salary Should Be:
+              </Typography>
+              <Typography textAlign={"center"} fontSize={"3em"} fontWeight={"bold"}>
+                <FormattedNumber
+                    value={newSalary}
+                    currency="USD"
+                    unitDisplay="long"
+                    style="currency"
+                />
+              </Typography>
+            </>
+            : undefined
+          }
           {futureSalaries !== undefined ?
-              <Table size="small">
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Future Date</TableCell>
-                    <TableCell>Salary</TableCell>
-                  </TableRow>
-                </TableHead>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Future Date</TableCell>
+                  <TableCell>Salary</TableCell>
+                </TableRow>
+              </TableHead>
               {futureSalaries.map(((item) => {return(
-                  <TableRow>
-                    <TableCell>{item[0]}</TableCell>
-                    <TableCell><FormattedNumber
-                      value={item[1]}
-                      currency="USD"
-                      unitDisplay="long"
-                      style="currency"
-                    /></TableCell>
-                  </TableRow>
+                <TableRow>
+                  <TableCell>{item[0]}</TableCell>
+                  <TableCell><FormattedNumber
+                    value={item[1]}
+                    currency="USD"
+                    unitDisplay="long"
+                    style="currency"
+                  /></TableCell>
+                </TableRow>
               )}))}
-              </Table>
-          : undefined}
+            </Table>
+            : undefined
+          }
         </Grid>
       </Grid>
-      </Box>
+    </Box>
   )
 }
 
@@ -207,46 +206,49 @@ function App() {
 
 
   return (
-      <IntlProvider>
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-    <div className="App">
-      <Box className={"App-Container"}
-      sx={{
-        width: '80%',
-        height: '90%',
-        margin: '5% 10%'
-      }}>
-        <Paper elevation={3} sx={{
-          width: '100%',
-          height: '100%',
-          padding: '20px'
-        }}>
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <h2 className={"title"}>Wage Calculator</h2>
-        <Tabs
-            sx={{width: '100%'}}
-            value={value}
-            onChange={handleChange}
-            aria-label="secondary tabs example"
-            variant='fullWidth'
-        >
-          <Tab value="postdoc" label="Postdoc" />
-          <Tab value="ar" label="AR" />
-          <Tab value="sre" label="ASE / SR" />
-        </Tabs>
-        {value === 'postdoc' ?
-        <Postdoc></Postdoc> : undefined
-        }
+    <IntlProvider>
+      <ThemeProvider theme={darkTheme}>
+        <CssBaseline />
+        <div className="App">
+          <Box
+            className={"App-Container"}
+            sx={{
+              width: '80%',
+              height: '90%',
+              margin: '5% 10%'
+            }}
+          >
+            <Paper elevation={3} sx={{
+              width: '100%',
+              height: '100%',
+              padding: '20px'
+            }}>
+              <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo" />
+                <h2 className={"title"}>Wage Calculator</h2>
 
-
-      </header>
-        </Paper>
-      </Box>
-    </div>
-    </ThemeProvider>
-      </IntlProvider>
+                {/* Tabs toggle between different calculators*/}
+                <Tabs
+                  sx={{width: '100%'}}
+                  value={value}
+                  onChange={handleChange}
+                  aria-label="secondary tabs example"
+                  variant='fullWidth'
+                >
+                  <Tab value="postdoc" label="Postdoc" />
+                  <Tab value="ar" label="AR" />
+                  <Tab value="sre" label="ASE / SR" />
+                </Tabs>
+                {value === 'postdoc' ?
+                  <Postdoc></Postdoc>
+                  : undefined
+                }
+              </header>
+            </Paper>
+          </Box>
+        </div>
+      </ThemeProvider>
+    </IntlProvider>
   );
 }