From 7f98a5c07e3ec09debf61b01a0d554c66e25f70d Mon Sep 17 00:00:00 2001 From: overflowerror Date: Sat, 21 Aug 2021 19:40:01 +0200 Subject: [PATCH] feat: reset form data on cancel --- .../src/components/AccountDialog/index.tsx | 12 +++++++++- .../src/components/ThreadFormDialog/index.tsx | 22 ++++++++++++++++++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/AccountDialog/index.tsx b/frontend/src/components/AccountDialog/index.tsx index 53ca892..5a1ff69 100644 --- a/frontend/src/components/AccountDialog/index.tsx +++ b/frontend/src/components/AccountDialog/index.tsx @@ -1,4 +1,4 @@ -import {FunctionComponent, useState} from "react"; +import {FunctionComponent, useEffect, useState} from "react"; import { Button, Dialog, @@ -37,6 +37,16 @@ const AccountDialog: FunctionComponent = ( const [error, setError] = useState(null) + useEffect(() => { + if (!open) { + // dialog is closed; reset component + setError(null) + setCode("") + setAccountId(null) + setActiveStep(0) + } + }) + return ( diff --git a/frontend/src/components/ThreadFormDialog/index.tsx b/frontend/src/components/ThreadFormDialog/index.tsx index 4fc5d58..716e952 100644 --- a/frontend/src/components/ThreadFormDialog/index.tsx +++ b/frontend/src/components/ThreadFormDialog/index.tsx @@ -1,4 +1,4 @@ -import React, {FunctionComponent, useState} from "react"; +import React, {FunctionComponent, useEffect, useState} from "react"; import { Button, Dialog, @@ -7,6 +7,7 @@ import { DialogTitle, Grid, IconButton, + InputAdornment, TextField } from "@material-ui/core"; import DeleteIcon from '@material-ui/icons/Delete'; @@ -41,10 +42,21 @@ const Index: FunctionComponent = ( return _idCounter } + const [_initial, _setInitial] = useState(initial) const [thread, setThread] = useState(initial) const [error, setError] = useState(null) + useEffect(() => { + if (initial != _initial) { + // initial changed + _setInitial(initial) + setThread(initial) + setError(null) + _setIdCounter(0) + } + }) + return ( @@ -113,6 +125,14 @@ const Index: FunctionComponent = ( ...thread }) }} + InputProps={{ + endAdornment: ( + + {280 - thread.tweets[index].text.length} + + ) + }} + variant="outlined" fullWidth />