From b85573eb1a6eb0f1bdf8f95f26b73b4715791159 Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
Date: Sat, 21 Aug 2021 13:50:24 +0200
Subject: [PATCH] feat: thread list displays news threads

---
 .../src/components/ThreadFormDialog/index.tsx | 32 +------------------
 .../ThreadList/ThreadList.module.css          |  7 ++++
 frontend/src/components/ThreadList/index.tsx  | 26 +++++++++------
 frontend/src/utils/CustomDate.ts              | 32 +++++++++++++++++++
 4 files changed, 56 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/components/ThreadList/ThreadList.module.css
 create mode 100644 frontend/src/utils/CustomDate.ts

diff --git a/frontend/src/components/ThreadFormDialog/index.tsx b/frontend/src/components/ThreadFormDialog/index.tsx
index c030d0d..55269b7 100644
--- a/frontend/src/components/ThreadFormDialog/index.tsx
+++ b/frontend/src/components/ThreadFormDialog/index.tsx
@@ -13,6 +13,7 @@ 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";
 
 export type ThreadFormProps = {
     open: boolean
@@ -21,37 +22,6 @@ export type ThreadFormProps = {
     onSubmit: (thread: Thread) => void
 }
 
-class CustomDate extends Date {
-    constructor(date?: Date) {
-        super(date ? date : new Date())
-    }
-
-    public toLocalISOString(milliseconds: boolean = true,
-                            timezone: boolean = true): string {
-        let result =
-            this.getFullYear() + "-" +
-            (String(this.getMonth()).padStart(2, "0")) + "-" +
-            (String(this.getDay()).padStart(2, "0")) + "T" +
-            (String(this.getHours()).padStart(2, "0")) + ":" +
-            (String(this.getMinutes()).padStart(2, "0")) + ":" +
-            (String(this.getSeconds()).padStart(2, "0"))
-        if (milliseconds) {
-            result += "." + (String(this.getMilliseconds()).padStart(3, "0"))
-        }
-        if (timezone) {
-            const offset = -this.getTimezoneOffset()
-            const hourOffset = Math.floor(Math.abs(offset) / 60)
-            const minuteOffset = offset % 60
-            result +=
-                (offset > 0 ? "+" : "-") +
-                (String(hourOffset).padStart(2, "0")) +
-                (String(minuteOffset).padStart(2, "0"))
-        }
-
-        return result
-    }
-}
-
 const Index: FunctionComponent<ThreadFormProps> = ({open, account, initial, onSubmit}) => {
     const [thread, setThread] = useState<Thread>(initial)
 
diff --git a/frontend/src/components/ThreadList/ThreadList.module.css b/frontend/src/components/ThreadList/ThreadList.module.css
new file mode 100644
index 0000000..af11ffd
--- /dev/null
+++ b/frontend/src/components/ThreadList/ThreadList.module.css
@@ -0,0 +1,7 @@
+.title {
+    text-overflow: ellipsis;
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    white-space:nowrap;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ThreadList/index.tsx b/frontend/src/components/ThreadList/index.tsx
index 381cdd5..7636e03 100644
--- a/frontend/src/components/ThreadList/index.tsx
+++ b/frontend/src/components/ThreadList/index.tsx
@@ -1,6 +1,8 @@
 import {FunctionComponent} from "react";
 import {Avatar, List, ListItem, ListItemAvatar, ListItemText, Typography} from "@material-ui/core";
 import Thread from "../../api/entities/Thread";
+import CustomDate from "../../utils/CustomDate";
+import styles from "./ThreadList.module.css"
 
 
 export type ThreadListProps = {
@@ -19,16 +21,20 @@ const ThreadList: FunctionComponent<ThreadListProps> = ({threads}) => {
     } else {
         return (
             <List>
-                {threads.map(thread => (
-                    <ListItem key={thread.id}>
-                        <ListItemAvatar>
-                            <Avatar>
-                                {thread.id}
-                            </Avatar>
-                        </ListItemAvatar>
-                        <ListItemText primary="Thread" secondary={thread.scheduled_for}/>
-                    </ListItem>
-                ))}
+                {threads.map(thread => {
+                    return (
+                        <ListItem key={thread.id}>
+                            <ListItemAvatar>
+                                <Avatar>
+                                    {thread.id}
+                                </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={<span className={styles.title}>{thread.tweets[0].text}</span>}
+                                secondary={new CustomDate(thread.scheduled_for).toLocalISOString(false, true)}/>
+                        </ListItem>
+                    )
+                })}
             </List>
         )
     }
diff --git a/frontend/src/utils/CustomDate.ts b/frontend/src/utils/CustomDate.ts
new file mode 100644
index 0000000..dbd1746
--- /dev/null
+++ b/frontend/src/utils/CustomDate.ts
@@ -0,0 +1,32 @@
+class CustomDate extends Date {
+    constructor(date?: Date) {
+        super(date ? date : new Date())
+    }
+
+    public toLocalISOString(milliseconds: boolean = true,
+                            timezone: boolean = true): string {
+        let result =
+            this.getFullYear() + "-" +
+            (String(this.getMonth()).padStart(2, "0")) + "-" +
+            (String(this.getDay()).padStart(2, "0")) + "T" +
+            (String(this.getHours()).padStart(2, "0")) + ":" +
+            (String(this.getMinutes()).padStart(2, "0")) + ":" +
+            (String(this.getSeconds()).padStart(2, "0"))
+        if (milliseconds) {
+            result += "." + (String(this.getMilliseconds()).padStart(3, "0"))
+        }
+        if (timezone) {
+            const offset = -this.getTimezoneOffset()
+            const hourOffset = Math.floor(Math.abs(offset) / 60)
+            const minuteOffset = offset % 60
+            result +=
+                (offset > 0 ? "+" : "-") +
+                (String(hourOffset).padStart(2, "0")) +
+                (String(minuteOffset).padStart(2, "0"))
+        }
+
+        return result
+    }
+}
+
+export default CustomDate
\ No newline at end of file