From 9493979e4f1a67ae394ac1504fe8e989a752a253 Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
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<AccountCardProps> = ({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<ThreadFormProps> = ({open, account, initial, onSubmit}) => {
+const Index: FunctionComponent<ThreadFormProps> = (
+    {
+        open,
+        account,
+        initial,
+        onSubmit,
+        onCancel
+    }
+) => {
     const [thread, setThread] = useState<Thread>(initial)
 
+    const [error, setError] = useState<string|null>(null)
+
     return (
         <Dialog open={open}>
             <DialogTitle title={"Thread"}/>
@@ -51,23 +64,40 @@ const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSu
                     </Grid>
                     {
                         thread.tweets.map((tweet, index) => (
-                            <Grid item xs={12}>
-                                <TextField
-                                    id="outlined-multiline-static"
-                                    label={"Tweet " + (index + 1)}
-                                    multiline
-                                    rows={3}
-                                    value={tweet.text}
-                                    onChange={event => {
-                                        thread.tweets[index].text = event.target.value
-                                        setThread({
-                                            ...thread
-                                        })
-                                    }}
-                                    variant="outlined"
-                                    fullWidth
-                                />
-                            </Grid>
+                            <>
+                                <Grid item xs={11}>
+                                    <TextField
+                                        id="outlined-multiline-static"
+                                        label={"Tweet " + (index + 1)}
+                                        multiline
+                                        rows={3}
+                                        value={tweet.text}
+                                        onChange={event => {
+                                            thread.tweets[index].text = event.target.value
+                                            setThread({
+                                                ...thread
+                                            })
+                                        }}
+                                        variant="outlined"
+                                        fullWidth
+                                    />
+                                </Grid>
+                                <Grid item xs={1}>
+                                    <IconButton
+                                        aria-label="delete"
+                                        color={"secondary"}
+                                        disabled={thread.tweets.length <= 1}
+                                        onClick={() => {
+                                            thread.tweets.splice(index, 1)
+                                            setThread({
+                                                ...thread
+                                            })
+                                        }}
+                                    >
+                                        <DeleteIcon fontSize="medium" />
+                                    </IconButton>
+                                </Grid>
+                            </>
                         ))
                     }
                     <Grid item xs={12}>
@@ -87,9 +117,21 @@ const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSu
                         </IconButton>
                     </Grid>
                 </Grid>
+                { error && <Alert severity="error">{error}</Alert> }
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => {
+                    // TODO show confirmation dialog
+                    onCancel()
+                }} color="secondary">
+                    Cancel
+                </Button>
+                <Button onClick={() => {
+                    if (!thread.tweets.every(t => t.text.trim().length != 0)) {
+                        setError("Empty tweets are not allowed!")
+                        return
+                    }
+                    setError(null)
                     onSubmit(thread)
                 }} color="primary">
                     Save changes