feat: adding threads now works

frontend/src/api/endpoints/ThreadEndpoint.ts

@@ -2,7 +2,7 @@ import {Client} from "../client";
 import Endpoint from "./Endpoint";
 import Thread from "../entities/Thread";
 
-const API_PREFIX = "/api/account/"
+const API_PREFIX = "/api/thread/"
 
 class ThreadEndpoint extends Endpoint {
     constructor(client: Client) {

frontend/src/api/entities/Thread.ts

@@ -8,7 +8,10 @@ export enum ThreadStatus {
 }
 
 type Thread = {
-    id: string,
+    id?: string,
+    account: {
+        id: string,
+    },
     tweets: Tweet[],
     scheduled_for: Date,
     status: ThreadStatus,

frontend/src/api/entities/Tweet.ts

@@ -6,7 +6,7 @@ export enum TweetStatus {
 }
 
 type Tweet = {
-    id: string,
+    id?: string,
     text: string,
     status: TweetStatus,
     tweet_id: number|null,

frontend/src/components/AccountCard/index.tsx

@@ -7,15 +7,21 @@ import AddIcon from '@material-ui/icons/Add';
 import ThreadFormDialog from "../ThreadFormDialog";
 import Thread, {ThreadStatus} from "../../api/entities/Thread";
 import {TweetStatus} from "../../api/entities/Tweet";
+import {useAuth} from "../../auth/AuthProvider";
+import ThreadEndpoint from "../../api/endpoints/ThreadEndpoint";
+import {MessageBox, MessageBoxProps} from "../MessageBox";
 
 export type AccountCardProps = {
-    account: Account
+    account: Account,
+    onUpdate: (account: Account) => void,
 }
 
-const emptyThread = (): Thread => ({
-    id: "",
+const emptyThread = (account: Account): Thread => ({
     scheduled_for: new Date(),
     status: ThreadStatus.SCHEDULED,
+    account: {
+        id: account.id
+    },
     tweets: [
         {
             id: "new",
@@ -28,13 +34,32 @@ const emptyThread = (): Thread => ({
     error: null,
 })
 
-const AccountCard: FunctionComponent<AccountCardProps> = ({account}) => {
+const AccountCard: FunctionComponent<AccountCardProps> = (
+    {
+        account,
+        onUpdate
+    }
+) => {
+    const {client} = useAuth()
+
     const [editThread, setEditThread] = useState<Thread | null>(null)
 
     const openNewForm = () => {
-        setEditThread(emptyThread())
+        setEditThread(emptyThread(account))
     }
 
+    const [message, setMessage] = useState<MessageBoxProps>({
+        open: false,
+        success: false,
+        message: "",
+        onClose: () => {
+            setMessage({
+                ...message,
+                open: false
+            })
+        }
+    })
+
     return (
         <>
             <Card>
@@ -64,17 +89,63 @@ const AccountCard: FunctionComponent<AccountCardProps> = ({account}) => {
             <ThreadFormDialog
                 account={account}
                 open={Boolean(editThread)}
-                initial={editThread ? editThread : emptyThread()}
+                initial={editThread ? editThread : emptyThread(account)}
                 onSubmit={(thread) => {
-                    account.threads.push(thread)
+                    thread.tweets.forEach(t => {
+                        t.id = undefined
+                    })
 
-                    setEditThread(null)
+                    const endpoint = new ThreadEndpoint(client)
+                    const onSuccess = (result: Thread) => {
+                        setEditThread(null)
+                        if (!thread.id) {
+                            setMessage({
+                                ...message,
+                                open: true,
+                                success: true,
+                                message: "Thread was added successfully."
+                            })
+                            account.threads.push(result)
+                        } else {
+                            setMessage({
+                                ...message,
+                                open: true,
+                                success: true,
+                                message: "Thread was updated successfully."
+                            })
+                            account.threads = account.threads.filter(t => t.id != result.id)
+                            account.threads.push(result)
+                        }
+                        account.threads = account.threads.sort((a, b) => a.scheduled_for > b.scheduled_for ? 1 : -1)
+                        onUpdate(account)
+                    }
+                    const onFailure = (error: any) => {
+                        console.error(error)
+                        setMessage({
+                            ...message,
+                            open: true,
+                            success: false,
+                            message: "Something went wrong."
+                        })
+                    }
+
+                    if (!thread.id) {
+                        endpoint.add(thread)
+                            .then(onSuccess)
+                            .catch(onFailure)
+                    } else {
+                        // TODO
+                        console.log("we shouldn't be here")
+                        console.log(thread)
+                    }
                 }}
                 onCancel={() => {
                     // TODO show confirmation
                     setEditThread(null)
                 }}
             />
+
+            <MessageBox {...message} />
         </>
     )
 }

frontend/src/components/ThreadFormDialog/index.tsx

@@ -30,7 +30,6 @@ export type ThreadFormProps = {
 const Index: FunctionComponent<ThreadFormProps> = (
     {
         open,
-        account,
         initial,
         onSubmit,
         onCancel
@@ -94,7 +93,7 @@ const Index: FunctionComponent<ThreadFormProps> = (
                                 >
                                     {
                                         thread.tweets.map((tweet, index) => (
-                                            <Draggable draggableId={tweet.id} index={index}>
+                                            <Draggable draggableId={tweet.id!} index={index}>
                                                 {(provided, snapshot) => (
                                                     <Grid
                                                         container

frontend/src/pages/Dashboard/index.tsx

@@ -71,9 +71,16 @@ const Dashboard: FunctionComponent<DashboardProps> = () => {
                 }
                 <Grid item container spacing={4}>
                     {
-                        accounts.map((account) => (
+                        accounts.map((account, index) => (
                             <Grid item xs={4} key={account.id}>
-                                <AccountCard account={account}/>
+                                <AccountCard
+                                    account={account}
+                                    onUpdate={(account: Account) => {
+                                        accounts[index] = account
+                                        console.log(accounts)
+                                        setAccounts([...accounts])
+                                    }}
+                                />
                             </Grid>
                         ))
                     }