fix numerical inputs in league options

also clean up some eslint warnings
This commit is contained in:
Elijah Steres 2021-01-14 17:58:24 -05:00
parent 96f272127c
commit 5f6d8cc2ec
4 changed files with 15 additions and 9 deletions

View File

@ -195,7 +195,7 @@ function shallowClone<T>(obj: T): T {
}
type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
type DistributivePick<T, K extends keyof T> = T extends any ? Pick<T, K> : never;
//type DistributivePick<T, K extends keyof T> = T extends any ? Pick<T, K> : never;
// CREATE LEAGUE
@ -323,7 +323,7 @@ function validRequest(name:string, structure: LeagueStructureState, options:Leag
}
function validNumber(value: string, min = 1) {
return Number(value) !== NaN && Number(value) >= min
return !isNaN(Number(value)) && Number(value) >= min
}
// LEAGUE STRUCUTRE
@ -464,7 +464,7 @@ function LeagueOptions(props: {state: LeagueOptionsState, dispatch: React.Dispat
props.dispatch({type: 'set_games_series', value: value})} showError={props.showError}/>
<NumberInput title="Number of teams from top of division to postseason" value={props.state.top_postseason} setValue={(value: string) =>
props.dispatch({type: 'set_top_postseason', value: value})} showError={props.showError}/>
<NumberInput title="Number of wildcards" value={props.state.wildcards} setValue={(value: string) =>
<NumberInput title="Number of wildcards" value={props.state.wildcards} minValue={0} setValue={(value: string) =>
props.dispatch({type: 'set_wildcards', value: value})} showError={props.showError}/>
</div>
<div className="cl_option_column">
@ -479,12 +479,16 @@ function LeagueOptions(props: {state: LeagueOptionsState, dispatch: React.Dispat
);
}
function NumberInput(props: {title: string, value: string, setValue: (newVal: string) => void, showError: boolean}) {
function NumberInput(props: {title: string, value: string, setValue: (newVal: string) => void, showError: boolean, minValue?:number}) {
let minValue = 1;
if (props.minValue !== undefined) {
minValue = props.minValue
}
return (
<div className="cl_option_box">
<div className="cl_option_label">{props.title}</div>
<input className="cl_option_input" type="number" min="0" value={props.value} onChange={e => props.setValue(e.target.value)}/>
<div className="cl_option_err">{(Number(props.value) === NaN || Number(props.value) < 0) && props.showError ? "Must be a number greater than 0" : ""}</div>
<input className="cl_option_input" type="number" min={minValue} value={props.value} onChange={e => props.setValue(e.target.value)}/>
<div className="cl_option_err">{(!isNaN(Number(props.value)) || Number(props.value) < minValue) && props.showError ? "Must be a number greater than "+minValue : ""}</div>
</div>
);
}

View File

@ -8,6 +8,7 @@ function GamesPage() {
let [search, setSearch] = useState(window.location.search);
useEffect(() => {
setSearch(window.location.search);
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [window.location.search])
let searchparams = new URLSearchParams(search);

View File

@ -32,6 +32,7 @@ const useListener = (onUpdate: (update: [string, GameState][]) => void, url: str
socket.on('connect', () => socket.emit('recieved', {}));
socket.on('states_update', onUpdate);
return () => {socket.disconnect()};
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [url])
}

View File

@ -32,14 +32,14 @@ function Header() {
<div id="link_div">
<a href="https://www.patreon.com/sixteen" className="patreon_link" target="_blank" rel="noopener noreferrer">
<div className="patreon_container">
<img className="patreon_logo" src={patreonLogo} />
<img className="patreon_logo" src={patreonLogo} alt="Patreon"/>
</div>
</a>
<a href="https://github.com/Sakimori/matteo-the-prestige" className="github_link" target="_blank" rel="noopener noreferrer">
<img className="github_logo" src={githubLogo} />
<img className="github_logo" src={githubLogo} alt="Github"/>
</a>
<a href="https://twitter.com/intent/follow?screen_name=SIBR_XVI" className="twitter_link" target="_blank" rel="noopener noreferrer">
<img className="twitter_logo" src={twitterLogo} />
<img className="twitter_logo" src={twitterLogo} alt="Twitter"/>
</a>
</div>
<div id="utility_links">