From b85573eb1a6eb0f1bdf8f95f26b73b4715791159 Mon Sep 17 00:00:00 2001 From: overflowerror 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 = ({open, account, initial, onSubmit}) => { const [thread, setThread] = useState(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 = ({threads}) => { } else { return ( - {threads.map(thread => ( - - - - {thread.id} - - - - - ))} + {threads.map(thread => { + return ( + + + + {thread.id} + + + {thread.tweets[0].text}} + secondary={new CustomDate(thread.scheduled_for).toLocalISOString(false, true)}/> + + ) + })} ) } 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