From 9493979e4f1a67ae394ac1504fe8e989a752a253 Mon Sep 17 00:00:00 2001 From: overflowerror Date: Sat, 21 Aug 2021 14:05:51 +0200 Subject: [PATCH] feat: added cancel button and delete button to thread form dialog --- frontend/src/components/AccountCard/index.tsx | 17 +++- .../src/components/ThreadFormDialog/index.tsx | 78 ++++++++++++++----- 2 files changed, 75 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/AccountCard/index.tsx b/frontend/src/components/AccountCard/index.tsx index f18492a..44b6144 100644 --- a/frontend/src/components/AccountCard/index.tsx +++ b/frontend/src/components/AccountCard/index.tsx @@ -6,16 +6,25 @@ import ThreadList from "../ThreadList"; import AddIcon from '@material-ui/icons/Add'; import ThreadFormDialog from "../ThreadFormDialog"; import Thread, {ThreadStatus} from "../../api/entities/Thread"; +import {TweetStatus} from "../../api/entities/Tweet"; export type AccountCardProps = { account: Account } -const emptyThread = () => ({ +const emptyThread = (): Thread => ({ id: "", scheduled_for: new Date(), status: ThreadStatus.SCHEDULED, - tweets: [], + tweets: [ + { + id: "", + text: "", + status: TweetStatus.SCHEDULED, + tweet_id: null, + error: null, + } + ], error: null, }) @@ -61,6 +70,10 @@ const AccountCard: FunctionComponent = ({account}) => { setEditThread(null) }} + onCancel={() => { + // TODO show confirmation + setEditThread(null) + }} /> ) diff --git a/frontend/src/components/ThreadFormDialog/index.tsx b/frontend/src/components/ThreadFormDialog/index.tsx index 55269b7..df95ed0 100644 --- a/frontend/src/components/ThreadFormDialog/index.tsx +++ b/frontend/src/components/ThreadFormDialog/index.tsx @@ -9,22 +9,35 @@ import { IconButton, TextField } from "@material-ui/core"; +import DeleteIcon from '@material-ui/icons/Delete'; import Account from "../../api/entities/Account"; import Thread from "../../api/entities/Thread"; import AddIcon from "@material-ui/icons/Add"; import {TweetStatus} from "../../api/entities/Tweet"; import CustomDate from "../../utils/CustomDate"; +import {Alert} from "@material-ui/lab"; export type ThreadFormProps = { open: boolean account: Account initial: Thread onSubmit: (thread: Thread) => void + onCancel: () => void } -const Index: FunctionComponent = ({open, account, initial, onSubmit}) => { +const Index: FunctionComponent = ( + { + open, + account, + initial, + onSubmit, + onCancel + } +) => { const [thread, setThread] = useState(initial) + const [error, setError] = useState(null) + return ( @@ -51,23 +64,40 @@ const Index: FunctionComponent = ({open, account, initial, onSu { thread.tweets.map((tweet, index) => ( - - { - thread.tweets[index].text = event.target.value - setThread({ - ...thread - }) - }} - variant="outlined" - fullWidth - /> - + <> + + { + thread.tweets[index].text = event.target.value + setThread({ + ...thread + }) + }} + variant="outlined" + fullWidth + /> + + + { + thread.tweets.splice(index, 1) + setThread({ + ...thread + }) + }} + > + + + + )) } @@ -87,9 +117,21 @@ const Index: FunctionComponent = ({open, account, initial, onSu + { error && {error} } +