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 {
|
||||
/*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);*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
|
|
|||
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 { 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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue