93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import React, { useState, ChangeEvent, useEffect } from 'react';
|
|
import { User } from '../types/user';
|
|
|
|
export interface UserFormProps {
|
|
user: User
|
|
onChange?: (user: User) => void
|
|
}
|
|
|
|
export function UserForm({ user, onChange }: UserFormProps) {
|
|
const [ state, setState ] = useState({
|
|
changed: false,
|
|
user: {
|
|
id: user && user.id ? user.id : '',
|
|
name: user && user.name ? user.name : '',
|
|
email: user && user.email ? user.email : '',
|
|
createdAt: user && user.createdAt ? user.createdAt : null,
|
|
connectedAt: user && user.connectedAt ? user.connectedAt : null,
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
setState({
|
|
changed: false,
|
|
user: {
|
|
id: user && user.id ? user.id : '',
|
|
name: user && user.name ? user.name : '',
|
|
email: user && user.email ? user.email : '',
|
|
createdAt: user && user.createdAt ? user.createdAt : null,
|
|
connectedAt: user && user.connectedAt ? user.connectedAt : null,
|
|
}
|
|
});
|
|
}, [user]);
|
|
|
|
const onSaveClick = () => {
|
|
if (!state.changed) return;
|
|
if (typeof onChange !== 'function') return;
|
|
onChange(state.user);
|
|
setState(state => {
|
|
return {
|
|
...state,
|
|
changed: false,
|
|
};
|
|
})
|
|
};
|
|
|
|
const onUserAttrChange = function(attrName: string, evt: ChangeEvent<HTMLInputElement>) {
|
|
const value = evt.currentTarget.value;
|
|
setState(state => {
|
|
return {
|
|
...state,
|
|
changed: true,
|
|
user: {
|
|
...state.user,
|
|
[attrName]: value,
|
|
}
|
|
};
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="form">
|
|
<div className="field">
|
|
<label className="label">Nom d'utilisateur</label>
|
|
<div className="control">
|
|
<input type="text" className="input" value={state.user.name}
|
|
onChange={onUserAttrChange.bind(null, "name")} />
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Adresse courriel</label>
|
|
<div className="control">
|
|
<p className="input is-static">{state.user.email}</p>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Date de dernière connexion</label>
|
|
<div className="control">
|
|
<p className="input is-static">{state.user.connectedAt}</p>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Date de création</label>
|
|
<div className="control">
|
|
<p className="input is-static">{state.user.createdAt}</p>
|
|
</div>
|
|
</div>
|
|
<div className="buttons is-right">
|
|
<button disabled={!state.changed}
|
|
className="button is-primary" onClick={onSaveClick}>Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |