Cleaning up unused imports, indentation, add some comments

This commit is contained in:
sneakers-the-rat 2023-11-01 17:51:30 -07:00
parent f2dc1cbe4c
commit e5a2c8f1d8
2 changed files with 106 additions and 136 deletions

View File

@ -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);*/
/* }*/
/*}*/

View File

@ -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>
);
}