Closed
Description
REQUEST: Object based handler hook.
An alternative to useReducer.
Maintain a unique instance of the handler class on memory. Heavy functions are not instantiated in every render. Bring back object oriented advantages, leaving behind some React overhead like useCallback, useReducer and custom hooks.
like in https://github.com/ksoze84/useStateHandler customs hook, but better and more integrated to core.
Example
ModalCert.tsx:
import { CertHandler } from './CertHandler';
import { useStateHandler } from 'use-state-handler';
const ModalCert: FunctionComponent<ModalProps> = ({ cert_name }) => {
const [ cert, handler ] = useStateHandler( CertHandler );
useEffect( () => { handler.load( cert_name ) }, [] )
return (
<div className="box">
<input
type='text'
placeholder="ej: Jhon"
value={cert.name}
name="name"
onChange={ handler.setInput }
/>
<input
type='text'
placeholder="ej: [email protected]"
value={cert.mail}
name="mail"
onChange={ handler.setInput }
/>
<select
name="type"
onChange={ handler.setType }
>
<option value="A"></option>
<option value="B"></option>
</select>
<span className="subtitle">Output Signature:</span>
<div className="signature"> cert.description </div>
<MyControlComponent
certHandler={handler}
/>
<button onClick={handler.save}>
Save
</button>
</div>
);
}CertHandler.ts
import { StateHandler } from 'use-state-handler';
class CertHandler extends StateHandler<ICert> {
private descA = " Description A ...";
private descB = " Description B ...";
static initState = { name : "", mail : "" }
instanceCreated = ( ) =>
this.load( "" )
public load = ( name : string ) =>
fetch( "url", name )
.then( data => setState( data ) )
public setValue = ( name: string, val : any ) => {
this.setState ( {...this.state, ...{ [name] : val } } )
}
public loadControlOptions = ( id : string ) =>
fetch( "url_details" )
.then( data => setState( {...this.state, ...{ details : data } } )
public setInput = ( e : ChangeEvent<HTMLInputElement> ) => {
this.setValue ( e.target.name, e.target.value )
}
public setType = ( e : ChangeEvent<HTMLSelectElement> ) => {
let type = e.target.value;
let desc : string
if(type === "A")
desc = state.name + this.descA;
else
desc = this.descB;
setState({...this.state, ...{ type : type, description : desc } });
}
save = () =>
post( "save_url", this.state )
}NewModalCert.tsx:
import { CertHandler } from './CertHandler';
import { useStateHandler } from 'use-state-handler';
const NewModalCert: FunctionComponent<ModalProps> = ({ cert_name }) => {
const [ cert, handler ] = useStateHandler( CertHandler, CertHandler.initState );
return (
<div className="box">
<input
type='text'
placeholder="ej: Jhon"
value={cert.name}
name="name"
onChange={ handler.setInput }
/>
<input
type='text'
placeholder="ej: [email protected]"
value={cert.mail}
name="mail"
onChange={ handler.setInput }
/>
<select
name="type"
onChange={ handler.setType }
>
<option value="A"></option>
<option value="B"></option>
</select>
<span className="subtitle">Output Signature:</span>
<div className="signature"> cert.description </div>
<MyControlComponent
certHandler={handler}
/>
<button onClick={handler.save}>
Save
</button>
</div>
);
}