aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/Discussions.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/Discussions.tsx')
-rw-r--r--frontend/src/components/Discussions.tsx70
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 @@
1import React from "react"; 1import React from 'react';
2 2
3import { 3import {
4 MapDiscussion, 4 MapDiscussion,
5 MapDiscussions, 5 MapDiscussions,
6 MapDiscussionsDetail, 6 MapDiscussionsDetail,
7} from "@customTypes/Map"; 7} from '@customTypes/Map';
8import { MapDiscussionContent } from "@customTypes/Content"; 8import { MapDiscussionContent } from '@customTypes/Content';
9import { time_ago } from "@utils/Time"; 9import { time_ago } from '@utils/Time';
10import { API } from "@api/Api"; 10import { API } from '@api/Api';
11import "@css/Maps.css"; 11import '@css/Maps.css';
12import { Link } from "react-router-dom"; 12import { Link } from 'react-router-dom';
13import useConfirm from "@hooks/UseConfirm"; 13import useConfirm from '@hooks/UseConfirm';
14 14
15interface DiscussionsProps { 15interface 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 )