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(
-
+
@@ -118,7 +119,6 @@ function Postdoc(){
Hiring Date
- {/*As of April 4, 2023*/}
-
-
- Salary Before Raise
-
- {/**/}
-
-
-
-
+
+
+ Salary Before Raise
+
+
+
+
+
{newSalary !== undefined ?
- <>
-
- Your Salary Should Be:
-
-
-
-
-
-
- >
- : undefined}
+ <>
+
+ Your Salary Should Be:
+
+
+
+
+ >
+ : undefined
+ }
{futureSalaries !== undefined ?
-
-
-
- Future Date
- Salary
-
-
+
+
+
+ Future Date
+ Salary
+
+
{futureSalaries.map(((item) => {return(
-
- {item[0]}
-
-
+
+ {item[0]}
+
+
)}))}
-
- : undefined}
+
+ : undefined
+ }
-
+
)
}
@@ -207,46 +206,49 @@ function App() {
return (
-
-
-
-
-
-
-
-
- Wage Calculator
-
-
-
-
-
- {value === 'postdoc' ?
- : undefined
- }
+
+
+
+
+
+
+
+
+ Wage Calculator
-
-
-
-
-
-
-
+ {/* Tabs toggle between different calculators*/}
+
+
+
+
+
+ {value === 'postdoc' ?
+
+ : undefined
+ }
+
+
+
+
+
+
);
}