fix(frontend): fix bio in edit profile page

This commit is contained in:
Sam 2022-12-03 04:25:25 +01:00
parent f2306b8b1d
commit 6b5ccae514

View file

@ -26,13 +26,6 @@ export default function Index() {
const router = useRouter(); const router = useRouter();
const [state, setState] = useState(cloneDeep(user)); const [state, setState] = useState(cloneDeep(user));
const onChangeBio = useCallback((value: string, viewUpdate: any) => {
setState((s) => {
s!.bio = value;
return s;
});
}, []);
const originalOrder = state?.fields const originalOrder = state?.fields
? state.fields.map((f, i) => { ? state.fields.map((f, i) => {
const field: EditField = { const field: EditField = {
@ -76,17 +69,17 @@ export default function Index() {
}; };
useEffect(() => { useEffect(() => {
if (!user) { if (!user || !state) {
router.push("/"); router.push("/");
} }
}, [user]); }, [user]);
if (!user) { if (!user || !state) {
return <Loading />; return <Loading />;
} }
const fieldsUpdated = !fieldsEqual(fields, originalOrder); const fieldsUpdated = !fieldsEqual(fields, originalOrder);
const isEdited = fieldsUpdated; const isEdited = fieldsUpdated || state.bio !== user.bio;
return ( return (
<div className="container mx-auto"> <div className="container mx-auto">
@ -97,8 +90,8 @@ export default function Index() {
style={ButtonStyle.success} style={ButtonStyle.success}
onClick={async () => { onClick={async () => {
const user = await updateUser({ const user = await updateUser({
displayName: state!.display_name, displayName: state.display_name,
bio: state!.bio, bio: state.bio,
fields, fields,
}); });
@ -117,14 +110,16 @@ export default function Index() {
<div> <div>
<h4 className="text-lg font-bold">Edit</h4> <h4 className="text-lg font-bold">Edit</h4>
<ReactCodeMirror <ReactCodeMirror
value={state?.bio || undefined} value={state.bio || undefined}
onChange={onChangeBio} onChange={(val, _) => {
setState({ ...state, bio: val });
}}
extensions={[markdown({ base: markdownLanguage })]} extensions={[markdown({ base: markdownLanguage })]}
/> />
</div> </div>
<div> <div>
<h4 className="text-lg font-bold">Preview</h4> <h4 className="text-lg font-bold">Preview</h4>
<ReactMarkdown>{state?.bio || ""}</ReactMarkdown> <ReactMarkdown>{state.bio || ""}</ReactMarkdown>
</div> </div>
</div> </div>