Cleaning up unused imports, indentation, add some comments
This commit is contained in:
parent
f2dc1cbe4c
commit
e5a2c8f1d8
2 changed files with 106 additions and 136 deletions
32
src/App.css
32
src/App.css
|
@ -1,16 +1,10 @@
|
||||||
.App {
|
.App {
|
||||||
/*text-align: center;*/
|
|
||||||
position:absolute;
|
position:absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #1e1e1e;
|
background-color: #1e1e1e;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*.App-Container {*/
|
|
||||||
/* background-color: #102445;*/
|
|
||||||
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.App-logo {
|
.App-logo {
|
||||||
height: 10em;
|
height: 10em;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -36,32 +30,6 @@
|
||||||
flex-basis: 50%;
|
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 {
|
.App-link {
|
||||||
color: #61dafb;
|
color: #61dafb;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*@keyframes App-logo-spin {*/
|
|
||||||
/* from {*/
|
|
||||||
/* transform: rotate(0deg);*/
|
|
||||||
/* }*/
|
|
||||||
/* to {*/
|
|
||||||
/* transform: rotate(360deg);*/
|
|
||||||
/* }*/
|
|
||||||
/*}*/
|
|
||||||
|
|
210
src/App.jsx
210
src/App.jsx
|
@ -5,7 +5,6 @@ import Box from '@mui/material/Box';
|
||||||
import Paper from '@mui/material/Paper';
|
import Paper from '@mui/material/Paper';
|
||||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||||
import CssBaseline from '@mui/material/CssBaseline';
|
import CssBaseline from '@mui/material/CssBaseline';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Tabs from '@mui/material/Tabs';
|
import Tabs from '@mui/material/Tabs';
|
||||||
import Tab from '@mui/material/Tab';
|
import Tab from '@mui/material/Tab';
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
|
@ -13,16 +12,10 @@ import Grid from '@mui/material/Grid';
|
||||||
import TextField from '@mui/material/TextField';
|
import TextField from '@mui/material/TextField';
|
||||||
import ToggleButton from '@mui/material/ToggleButton';
|
import ToggleButton from '@mui/material/ToggleButton';
|
||||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
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 { NumericFormat } from 'react-number-format';
|
||||||
import { FormattedNumber, IntlProvider } from 'react-intl';
|
import { FormattedNumber, IntlProvider } from 'react-intl';
|
||||||
import Table from '@mui/material/Table';
|
import Table from '@mui/material/Table';
|
||||||
import TableBody from '@mui/material/TableBody';
|
|
||||||
import TableCell from '@mui/material/TableCell';
|
import TableCell from '@mui/material/TableCell';
|
||||||
import TableContainer from '@mui/material/TableContainer';
|
|
||||||
import TableHead from '@mui/material/TableHead';
|
import TableHead from '@mui/material/TableHead';
|
||||||
import TableRow from '@mui/material/TableRow';
|
import TableRow from '@mui/material/TableRow';
|
||||||
|
|
||||||
|
@ -32,6 +25,7 @@ const darkTheme = createTheme({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Formatter for salary input component
|
||||||
const NumericFormatCustom = React.forwardRef(function NumericFormatCustom(
|
const NumericFormatCustom = React.forwardRef(function NumericFormatCustom(
|
||||||
props,
|
props,
|
||||||
ref,
|
ref,
|
||||||
|
@ -57,19 +51,24 @@ const NumericFormatCustom = React.forwardRef(function NumericFormatCustom(
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Each calculator a separate component - only making postdoc for now
|
||||||
function Postdoc(){
|
function Postdoc(){
|
||||||
|
// The different parts of the calculation and results stored as state
|
||||||
const [experience, setExperience] = React.useState(0)
|
const [experience, setExperience] = React.useState(0)
|
||||||
const [hireDate, setHireDate] = React.useState('apr')
|
const [hireDate, setHireDate] = React.useState('apr')
|
||||||
const [salary, setSalary] = React.useState(64480);
|
const [salary, setSalary] = React.useState(64480);
|
||||||
const [newSalary, setNewSalary] = React.useState(undefined);
|
const [newSalary, setNewSalary] = React.useState(undefined);
|
||||||
const [futureSalaries, setFutureSalaries] = 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 calculateNewSalary = (oldSalary) => {
|
||||||
const multiplier_hire = hireDate === 'apr' ? 1.05 : 1.025
|
const multiplier_hire = hireDate === 'apr' ? 1.05 : 1.025
|
||||||
const multiplier_exp = 1 + (experience / 20)
|
const multiplier_exp = 1 + (experience / 20)
|
||||||
return oldSalary * 1.05 * multiplier_hire * multiplier_exp;
|
return oldSalary * 1.05 * multiplier_hire * multiplier_exp;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Effect to update salary whenever any of the state values change
|
||||||
React.useEffect(
|
React.useEffect(
|
||||||
() => {
|
() => {
|
||||||
setNewSalary(calculateNewSalary(salary))
|
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) => {
|
const handleHireDate = (event) => {
|
||||||
setHireDate(event.target.value);
|
setHireDate(event.target.value);
|
||||||
};
|
};
|
||||||
|
@ -95,8 +95,9 @@ function Postdoc(){
|
||||||
setSalary(event.target.value)
|
setSalary(event.target.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Standard react render blob
|
||||||
return(
|
return(
|
||||||
<Box sx={{ flexGrow: 1 }}>
|
<Box sx={{ flexGrow: 1 }}>
|
||||||
<Grid container spacing={2} padding={5}>
|
<Grid container spacing={2} padding={5}>
|
||||||
<Grid item xs={6}>
|
<Grid item xs={6}>
|
||||||
<Typography fontWeight={"bold"} fontSize={'1.2em'}>
|
<Typography fontWeight={"bold"} fontSize={'1.2em'}>
|
||||||
|
@ -118,7 +119,6 @@ function Postdoc(){
|
||||||
<Typography fontWeight={"bold"} fontSize={'1.2em'}>
|
<Typography fontWeight={"bold"} fontSize={'1.2em'}>
|
||||||
Hiring Date
|
Hiring Date
|
||||||
</Typography>
|
</Typography>
|
||||||
{/*<Typography fontStyle={"italic"}>As of April 4, 2023</Typography>*/}
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={6}>
|
<Grid item xs={6}>
|
||||||
<ToggleButtonGroup
|
<ToggleButtonGroup
|
||||||
|
@ -133,68 +133,67 @@ function Postdoc(){
|
||||||
</ToggleButtonGroup>
|
</ToggleButtonGroup>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid item xs={6}>
|
<Grid item xs={6}>
|
||||||
<Typography fontWeight={"bold"} fontSize={'1.2em'}>
|
<Typography fontWeight={"bold"} fontSize={'1.2em'}>
|
||||||
Salary Before Raise
|
Salary Before Raise
|
||||||
</Typography>
|
</Typography>
|
||||||
{/*<Typography fontStyle={"italic"}></Typography>*/}
|
</Grid>
|
||||||
</Grid>
|
<Grid item xs={6}>
|
||||||
<Grid item xs={6}>
|
<TextField
|
||||||
<TextField
|
fullWidth
|
||||||
fullWidth
|
label="USD"
|
||||||
label="USD"
|
value={salary}
|
||||||
value={salary}
|
onChange={handleChangeSalary}
|
||||||
onChange={handleChangeSalary}
|
name="numberformat"
|
||||||
name="numberformat"
|
id="formatted-numberformat-input"
|
||||||
id="formatted-numberformat-input"
|
InputProps={{
|
||||||
InputProps={{
|
inputComponent: NumericFormatCustom,
|
||||||
inputComponent: NumericFormatCustom,
|
}}
|
||||||
}}
|
variant="standard"
|
||||||
variant="standard"
|
/>
|
||||||
/>
|
</Grid>
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
<Grid item xs={12}>
|
||||||
{newSalary !== undefined ?
|
{newSalary !== undefined ?
|
||||||
<>
|
<>
|
||||||
<Typography textAlign={"center"} marginTop={"0.5em"} fontSize={"2em"}>
|
<Typography textAlign={"center"} marginTop={"0.5em"} fontSize={"2em"}>
|
||||||
Your Salary Should Be:
|
Your Salary Should Be:
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography textAlign={"center"} fontSize={"3em"} fontWeight={"bold"}>
|
<Typography textAlign={"center"} fontSize={"3em"} fontWeight={"bold"}>
|
||||||
<FormattedNumber
|
<FormattedNumber
|
||||||
value={newSalary}
|
value={newSalary}
|
||||||
currency="USD"
|
currency="USD"
|
||||||
unitDisplay="long"
|
unitDisplay="long"
|
||||||
style="currency"
|
style="currency"
|
||||||
/>
|
/>
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</>
|
||||||
|
: undefined
|
||||||
</>
|
}
|
||||||
: undefined}
|
|
||||||
{futureSalaries !== undefined ?
|
{futureSalaries !== undefined ?
|
||||||
<Table size="small">
|
<Table size="small">
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell>Future Date</TableCell>
|
<TableCell>Future Date</TableCell>
|
||||||
<TableCell>Salary</TableCell>
|
<TableCell>Salary</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
{futureSalaries.map(((item) => {return(
|
{futureSalaries.map(((item) => {return(
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell>{item[0]}</TableCell>
|
<TableCell>{item[0]}</TableCell>
|
||||||
<TableCell><FormattedNumber
|
<TableCell><FormattedNumber
|
||||||
value={item[1]}
|
value={item[1]}
|
||||||
currency="USD"
|
currency="USD"
|
||||||
unitDisplay="long"
|
unitDisplay="long"
|
||||||
style="currency"
|
style="currency"
|
||||||
/></TableCell>
|
/></TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
)}))}
|
)}))}
|
||||||
</Table>
|
</Table>
|
||||||
: undefined}
|
: undefined
|
||||||
|
}
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -207,46 +206,49 @@ function App() {
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<IntlProvider>
|
<IntlProvider>
|
||||||
<ThemeProvider theme={darkTheme}>
|
<ThemeProvider theme={darkTheme}>
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Box className={"App-Container"}
|
<Box
|
||||||
sx={{
|
className={"App-Container"}
|
||||||
width: '80%',
|
sx={{
|
||||||
height: '90%',
|
width: '80%',
|
||||||
margin: '5% 10%'
|
height: '90%',
|
||||||
}}>
|
margin: '5% 10%'
|
||||||
<Paper elevation={3} sx={{
|
}}
|
||||||
width: '100%',
|
>
|
||||||
height: '100%',
|
<Paper elevation={3} sx={{
|
||||||
padding: '20px'
|
width: '100%',
|
||||||
}}>
|
height: '100%',
|
||||||
<header className="App-header">
|
padding: '20px'
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
}}>
|
||||||
<h2 className={"title"}>Wage Calculator</h2>
|
<header className="App-header">
|
||||||
<Tabs
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
sx={{width: '100%'}}
|
<h2 className={"title"}>Wage Calculator</h2>
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
|
{/* Tabs toggle between different calculators*/}
|
||||||
</header>
|
<Tabs
|
||||||
</Paper>
|
sx={{width: '100%'}}
|
||||||
</Box>
|
value={value}
|
||||||
</div>
|
onChange={handleChange}
|
||||||
</ThemeProvider>
|
aria-label="secondary tabs example"
|
||||||
</IntlProvider>
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue