diff options
Diffstat (limited to 'frontend/src/components/Discussions.tsx')
| -rw-r--r-- | frontend/src/components/Discussions.tsx | 70 |
1 files changed, 35 insertions, 35 deletions
diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx index 62a9fc7..994cd8e 100644 --- a/frontend/src/components/Discussions.tsx +++ b/frontend/src/components/Discussions.tsx | |||
| @@ -1,16 +1,16 @@ | |||
| 1 | import React from "react"; | 1 | import React from 'react'; |
| 2 | 2 | ||
| 3 | import { | 3 | import { |
| 4 | MapDiscussion, | 4 | MapDiscussion, |
| 5 | MapDiscussions, | 5 | MapDiscussions, |
| 6 | MapDiscussionsDetail, | 6 | MapDiscussionsDetail, |
| 7 | } from "@customTypes/Map"; | 7 | } from '@customTypes/Map'; |
| 8 | import { MapDiscussionContent } from "@customTypes/Content"; | 8 | import { MapDiscussionContent } from '@customTypes/Content'; |
| 9 | import { time_ago } from "@utils/Time"; | 9 | import { time_ago } from '@utils/Time'; |
| 10 | import { API } from "@api/Api"; | 10 | import { API } from '@api/Api'; |
| 11 | import "@css/Maps.css"; | 11 | import '@css/Maps.css'; |
| 12 | import { Link } from "react-router-dom"; | 12 | import { Link } from 'react-router-dom'; |
| 13 | import useConfirm from "@hooks/UseConfirm"; | 13 | import useConfirm from '@hooks/UseConfirm'; |
| 14 | 14 | ||
| 15 | interface DiscussionsProps { | 15 | interface DiscussionsProps { |
| 16 | token?: string; | 16 | token?: string; |
| @@ -32,17 +32,17 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 32 | const [discussionThread, setDiscussionThread] = React.useState< | 32 | const [discussionThread, setDiscussionThread] = React.useState< |
| 33 | MapDiscussion | undefined | 33 | MapDiscussion | undefined |
| 34 | >(undefined); | 34 | >(undefined); |
| 35 | const [discussionSearch, setDiscussionSearch] = React.useState<string>(""); | 35 | const [discussionSearch, setDiscussionSearch] = React.useState<string>(''); |
| 36 | 36 | ||
| 37 | const [createDiscussion, setCreateDiscussion] = | 37 | const [createDiscussion, setCreateDiscussion] = |
| 38 | React.useState<boolean>(false); | 38 | React.useState<boolean>(false); |
| 39 | const [createDiscussionContent, setCreateDiscussionContent] = | 39 | const [createDiscussionContent, setCreateDiscussionContent] = |
| 40 | React.useState<MapDiscussionContent>({ | 40 | React.useState<MapDiscussionContent>({ |
| 41 | title: "", | 41 | title: '', |
| 42 | content: "", | 42 | content: '', |
| 43 | }); | 43 | }); |
| 44 | const [createDiscussionCommentContent, setCreateDiscussionCommentContent] = | 44 | const [createDiscussionCommentContent, setCreateDiscussionCommentContent] = |
| 45 | React.useState<string>(""); | 45 | React.useState<string>(''); |
| 46 | 46 | ||
| 47 | const _open_map_discussion = async (discussion_id: number) => { | 47 | const _open_map_discussion = async (discussion_id: number) => { |
| 48 | const mapDiscussion = await API.get_map_discussion(mapID, discussion_id); | 48 | const mapDiscussion = await API.get_map_discussion(mapID, discussion_id); |
| @@ -72,7 +72,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 72 | const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => { | 72 | const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => { |
| 73 | if ( | 73 | if ( |
| 74 | await confirm( | 74 | await confirm( |
| 75 | "Delete Map Discussion", | 75 | 'Delete Map Discussion', |
| 76 | `Are you sure you want to remove post: ${discussion.title}?` | 76 | `Are you sure you want to remove post: ${discussion.title}?` |
| 77 | ) | 77 | ) |
| 78 | ) { | 78 | ) { |
| @@ -90,8 +90,8 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 90 | <input | 90 | <input |
| 91 | type="text" | 91 | type="text" |
| 92 | value={discussionSearch} | 92 | value={discussionSearch} |
| 93 | placeholder={"Search for posts..."} | 93 | placeholder={'Search for posts...'} |
| 94 | onChange={(e) => setDiscussionSearch(e.target.value)} | 94 | onChange={e => setDiscussionSearch(e.target.value)} |
| 95 | /> | 95 | /> |
| 96 | <div> | 96 | <div> |
| 97 | <button onClick={() => setCreateDiscussion(true)}>New Post</button> | 97 | <button onClick={() => setCreateDiscussion(true)}>New Post</button> |
| @@ -104,11 +104,11 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 104 | <div id="discussion-create"> | 104 | <div id="discussion-create"> |
| 105 | <span>Create Post</span> | 105 | <span>Create Post</span> |
| 106 | <button onClick={() => setCreateDiscussion(false)}>X</button> | 106 | <button onClick={() => setCreateDiscussion(false)}>X</button> |
| 107 | <div style={{ gridColumn: "1 / span 2" }}> | 107 | <div style={{ gridColumn: '1 / span 2' }}> |
| 108 | <input | 108 | <input |
| 109 | id="discussion-create-title" | 109 | id="discussion-create-title" |
| 110 | placeholder="Title..." | 110 | placeholder="Title..." |
| 111 | onChange={(e) => | 111 | onChange={e => |
| 112 | setCreateDiscussionContent({ | 112 | setCreateDiscussionContent({ |
| 113 | ...createDiscussionContent, | 113 | ...createDiscussionContent, |
| 114 | title: e.target.value, | 114 | title: e.target.value, |
| @@ -118,7 +118,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 118 | <input | 118 | <input |
| 119 | id="discussion-create-content" | 119 | id="discussion-create-content" |
| 120 | placeholder="Enter the content..." | 120 | placeholder="Enter the content..." |
| 121 | onChange={(e) => | 121 | onChange={e => |
| 122 | setCreateDiscussionContent({ | 122 | setCreateDiscussionContent({ |
| 123 | ...createDiscussionContent, | 123 | ...createDiscussionContent, |
| 124 | content: e.target.value, | 124 | content: e.target.value, |
| @@ -126,7 +126,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 126 | } | 126 | } |
| 127 | /> | 127 | /> |
| 128 | </div> | 128 | </div> |
| 129 | <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}> | 129 | <div style={{ placeItems: 'end', gridColumn: '1 / span 2' }}> |
| 130 | <button | 130 | <button |
| 131 | id="discussion-create-button" | 131 | id="discussion-create-button" |
| 132 | onClick={() => _create_map_discussion()} | 132 | onClick={() => _create_map_discussion()} |
| @@ -157,8 +157,8 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 157 | {time_ago( | 157 | {time_ago( |
| 158 | new Date( | 158 | new Date( |
| 159 | discussionThread.discussion.created_at | 159 | discussionThread.discussion.created_at |
| 160 | .replace("T", " ") | 160 | .replace('T', ' ') |
| 161 | .replace("Z", "") | 161 | .replace('Z', '') |
| 162 | ) | 162 | ) |
| 163 | )} | 163 | )} |
| 164 | </span> | 164 | </span> |
| @@ -170,7 +170,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 170 | (a, b) => | 170 | (a, b) => |
| 171 | new Date(a.date).getTime() - new Date(b.date).getTime() | 171 | new Date(a.date).getTime() - new Date(b.date).getTime() |
| 172 | ) | 172 | ) |
| 173 | .map((e) => ( | 173 | .map(e => ( |
| 174 | <> | 174 | <> |
| 175 | <Link to={`/users/${e.user.steam_id}`}> | 175 | <Link to={`/users/${e.user.steam_id}`}> |
| 176 | <img src={e.user.avatar_link} alt="" /> | 176 | <img src={e.user.avatar_link} alt="" /> |
| @@ -180,7 +180,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 180 | <span> | 180 | <span> |
| 181 | {time_ago( | 181 | {time_ago( |
| 182 | new Date( | 182 | new Date( |
| 183 | e.date.replace("T", " ").replace("Z", "") | 183 | e.date.replace('T', ' ').replace('Z', '') |
| 184 | ) | 184 | ) |
| 185 | )} | 185 | )} |
| 186 | </span> | 186 | </span> |
| @@ -188,29 +188,29 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 188 | </div> | 188 | </div> |
| 189 | </> | 189 | </> |
| 190 | )) | 190 | )) |
| 191 | : ""} | 191 | : ''} |
| 192 | </div> | 192 | </div> |
| 193 | <div id="discussion-send"> | 193 | <div id="discussion-send"> |
| 194 | <input | 194 | <input |
| 195 | type="text" | 195 | type="text" |
| 196 | value={createDiscussionCommentContent} | 196 | value={createDiscussionCommentContent} |
| 197 | placeholder={"Message"} | 197 | placeholder={'Message'} |
| 198 | onKeyDown={(e) => | 198 | onKeyDown={e => |
| 199 | e.key === "Enter" && | 199 | e.key === 'Enter' && |
| 200 | _create_map_discussion_comment(discussionThread.discussion.id) | 200 | _create_map_discussion_comment(discussionThread.discussion.id) |
| 201 | } | 201 | } |
| 202 | onChange={(e) => | 202 | onChange={e => |
| 203 | setCreateDiscussionCommentContent(e.target.value) | 203 | setCreateDiscussionCommentContent(e.target.value) |
| 204 | } | 204 | } |
| 205 | /> | 205 | /> |
| 206 | <div> | 206 | <div> |
| 207 | <button | 207 | <button |
| 208 | onClick={() => { | 208 | onClick={() => { |
| 209 | if (createDiscussionCommentContent !== "") { | 209 | if (createDiscussionCommentContent !== '') { |
| 210 | _create_map_discussion_comment( | 210 | _create_map_discussion_comment( |
| 211 | discussionThread.discussion.id | 211 | discussionThread.discussion.id |
| 212 | ); | 212 | ); |
| 213 | setCreateDiscussionCommentContent(""); | 213 | setCreateDiscussionCommentContent(''); |
| 214 | } | 214 | } |
| 215 | }} | 215 | }} |
| 216 | > | 216 | > |
| @@ -222,7 +222,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 222 | ) : data ? ( | 222 | ) : data ? ( |
| 223 | <> | 223 | <> |
| 224 | {data.discussions | 224 | {data.discussions |
| 225 | .filter((f) => f.title.includes(discussionSearch)) | 225 | .filter(f => f.title.includes(discussionSearch)) |
| 226 | .sort( | 226 | .sort( |
| 227 | (a, b) => | 227 | (a, b) => |
| 228 | new Date(b.updated_at).getTime() - | 228 | new Date(b.updated_at).getTime() - |
| @@ -234,7 +234,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 234 | <span>{e.title}</span> | 234 | <span>{e.title}</span> |
| 235 | {isModerator ? ( | 235 | {isModerator ? ( |
| 236 | <button | 236 | <button |
| 237 | onClick={(m) => { | 237 | onClick={m => { |
| 238 | m.stopPropagation(); | 238 | m.stopPropagation(); |
| 239 | _delete_map_discussion(e); | 239 | _delete_map_discussion(e); |
| 240 | }} | 240 | }} |
| @@ -248,10 +248,10 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 248 | <b>{e.creator.user_name}:</b> {e.content} | 248 | <b>{e.creator.user_name}:</b> {e.content} |
| 249 | </span> | 249 | </span> |
| 250 | <span> | 250 | <span> |
| 251 | Last Updated:{" "} | 251 | Last Updated:{' '} |
| 252 | {time_ago( | 252 | {time_ago( |
| 253 | new Date( | 253 | new Date( |
| 254 | e.updated_at.replace("T", " ").replace("Z", "") | 254 | e.updated_at.replace('T', ' ').replace('Z', '') |
| 255 | ) | 255 | ) |
| 256 | )} | 256 | )} |
| 257 | </span> | 257 | </span> |
| @@ -260,7 +260,7 @@ const Discussions: React.FC<DiscussionsProps> = ({ | |||
| 260 | ))} | 260 | ))} |
| 261 | </> | 261 | </> |
| 262 | ) : ( | 262 | ) : ( |
| 263 | <span style={{ textAlign: "center", display: "block" }}> | 263 | <span style={{ textAlign: 'center', display: 'block' }}> |
| 264 | No Discussions... | 264 | No Discussions... |
| 265 | </span> | 265 | </span> |
| 266 | ) | 266 | ) |