From 608a78a31b294b468dc9daa4f1d85fc52415dab5 Mon Sep 17 00:00:00 2001
From: FifthWit <fifthwitbusiness@gmail.com>
Date: Thu, 30 Jan 2025 10:38:53 -0600
Subject: unused var

---
 frontend/src/components/Discussions.tsx | 327 +++++++++++++++++++++-----------
 1 file changed, 215 insertions(+), 112 deletions(-)

(limited to 'frontend/src/components/Discussions.tsx')

diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
index 17ae586..62a9fc7 100644
--- a/frontend/src/components/Discussions.tsx
+++ b/frontend/src/components/Discussions.tsx
@@ -1,34 +1,48 @@
-import React from 'react';
+import React from "react";
 
-import { MapDiscussion, MapDiscussions, MapDiscussionsDetail } from '@customTypes/Map';
-import { MapDiscussionCommentContent, MapDiscussionContent } from '@customTypes/Content';
-import { time_ago } from '@utils/Time';
-import { API } from '@api/Api';
-import "@css/Maps.css"
-import { Link } from 'react-router-dom';
-import useConfirm from '@hooks/UseConfirm';
+import {
+  MapDiscussion,
+  MapDiscussions,
+  MapDiscussionsDetail,
+} from "@customTypes/Map";
+import { MapDiscussionContent } from "@customTypes/Content";
+import { time_ago } from "@utils/Time";
+import { API } from "@api/Api";
+import "@css/Maps.css";
+import { Link } from "react-router-dom";
+import useConfirm from "@hooks/UseConfirm";
 
 interface DiscussionsProps {
-  token?: string
+  token?: string;
   data?: MapDiscussions;
   isModerator: boolean;
   mapID: string;
   onRefresh: () => void;
 }
 
-const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, mapID, onRefresh }) => {
-
+const Discussions: React.FC<DiscussionsProps> = ({
+  token,
+  data,
+  isModerator,
+  mapID,
+  onRefresh,
+}) => {
   const { confirm, ConfirmDialogComponent } = useConfirm();
 
-  const [discussionThread, setDiscussionThread] = React.useState<MapDiscussion | undefined>(undefined);
+  const [discussionThread, setDiscussionThread] = React.useState<
+    MapDiscussion | undefined
+  >(undefined);
   const [discussionSearch, setDiscussionSearch] = React.useState<string>("");
 
-  const [createDiscussion, setCreateDiscussion] = React.useState<boolean>(false);
-  const [createDiscussionContent, setCreateDiscussionContent] = React.useState<MapDiscussionContent>({
-    title: "",
-    content: "",
-  });
-  const [createDiscussionCommentContent, setCreateDiscussionCommentContent] = React.useState<string>("");
+  const [createDiscussion, setCreateDiscussion] =
+    React.useState<boolean>(false);
+  const [createDiscussionContent, setCreateDiscussionContent] =
+    React.useState<MapDiscussionContent>({
+      title: "",
+      content: "",
+    });
+  const [createDiscussionCommentContent, setCreateDiscussionCommentContent] =
+    React.useState<string>("");
 
   const _open_map_discussion = async (discussion_id: number) => {
     const mapDiscussion = await API.get_map_discussion(mapID, discussion_id);
@@ -45,13 +59,23 @@ const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, map
 
   const _create_map_discussion_comment = async (discussion_id: number) => {
     if (token) {
-      await API.post_map_discussion_comment(token, mapID, discussion_id, createDiscussionCommentContent);
+      await API.post_map_discussion_comment(
+        token,
+        mapID,
+        discussion_id,
+        createDiscussionCommentContent
+      );
       await _open_map_discussion(discussion_id);
     }
   };
 
   const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => {
-    if (await confirm("Delete Map Discussion", `Are you sure you want to remove post: ${discussion.title}?`)) {
+    if (
+      await confirm(
+        "Delete Map Discussion",
+        `Are you sure you want to remove post: ${discussion.title}?`
+      )
+    ) {
       if (token) {
         await API.delete_map_discussion(token, mapID, discussion.id);
         onRefresh();
@@ -60,107 +84,186 @@ const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, map
   };
 
   return (
-    <section id='section7' className='summary3'>
+    <section id="section7" className="summary3">
       {ConfirmDialogComponent}
-      <div id='discussion-search'>
-        <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={(e) => setDiscussionSearch(e.target.value)} />
-        <div><button onClick={() => setCreateDiscussion(true)}>New Post</button></div>
+      <div id="discussion-search">
+        <input
+          type="text"
+          value={discussionSearch}
+          placeholder={"Search for posts..."}
+          onChange={(e) => setDiscussionSearch(e.target.value)}
+        />
+        <div>
+          <button onClick={() => setCreateDiscussion(true)}>New Post</button>
+        </div>
       </div>
 
-      { // janky ternary operators here, could divide them to more components?
-        createDiscussion ?
-          (
-            <div id='discussion-create'>
-              <span>Create Post</span>
-              <button onClick={() => setCreateDiscussion(false)}>X</button>
-              <div style={{ gridColumn: "1 / span 2" }}>
-                <input id='discussion-create-title' placeholder='Title...' onChange={(e) => setCreateDiscussionContent({
-                  ...createDiscussionContent,
-                  title: e.target.value,
-                })} />
-                <input id='discussion-create-content' placeholder='Enter the content...' onChange={(e) => setCreateDiscussionContent({
-                  ...createDiscussionContent,
-                  content: e.target.value,
-                })} />
-              </div>
-              <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
-                <button id='discussion-create-button' onClick={() => _create_map_discussion()}>Post</button>
-              </div>
+      {
+        // janky ternary operators here, could divide them to more components?
+        createDiscussion ? (
+          <div id="discussion-create">
+            <span>Create Post</span>
+            <button onClick={() => setCreateDiscussion(false)}>X</button>
+            <div style={{ gridColumn: "1 / span 2" }}>
+              <input
+                id="discussion-create-title"
+                placeholder="Title..."
+                onChange={(e) =>
+                  setCreateDiscussionContent({
+                    ...createDiscussionContent,
+                    title: e.target.value,
+                  })
+                }
+              />
+              <input
+                id="discussion-create-content"
+                placeholder="Enter the content..."
+                onChange={(e) =>
+                  setCreateDiscussionContent({
+                    ...createDiscussionContent,
+                    content: e.target.value,
+                  })
+                }
+              />
+            </div>
+            <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
+              <button
+                id="discussion-create-button"
+                onClick={() => _create_map_discussion()}
+              >
+                Post
+              </button>
+            </div>
+          </div>
+        ) : discussionThread ? (
+          <div id="discussion-thread">
+            <div>
+              <span>{discussionThread.discussion.title}</span>
+              <button onClick={() => setDiscussionThread(undefined)}>X</button>
             </div>
-          )
-          :
-          discussionThread ?
-            (
-              <div id='discussion-thread'>
-                <div>
-                  <span>{discussionThread.discussion.title}</span>
-                  <button onClick={() => setDiscussionThread(undefined)}>X</button>
-                </div>
 
-                <div>
-                  <Link to={`/users/${discussionThread.discussion.creator.steam_id}`}>
-                    <img src={discussionThread.discussion.creator.avatar_link} alt="" />
-                  </Link>
-                  <div>
-                    <span>{discussionThread.discussion.creator.user_name}</span>
-                    <span>{time_ago(new Date(discussionThread.discussion.created_at.replace("T", " ").replace("Z", "")))}</span>
-                    <span>{discussionThread.discussion.content}</span>
-                  </div>
-                  {discussionThread.discussion.comments ?
-                    discussionThread.discussion.comments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
-                      .map(e => (
-                        <>
-                          <Link to={`/users/${e.user.steam_id}`}>
-                            <img src={e.user.avatar_link} alt="" />
-                          </Link>
-                          <div>
-                            <span>{e.user.user_name}</span>
-                            <span>{time_ago(new Date(e.date.replace("T", " ").replace("Z", "")))}</span>
-                            <span>{e.comment}</span>
-                          </div>
-                        </>
-                      )) : ""
-                  }
-                </div>
-                <div id='discussion-send'>
-                  <input type="text" value={createDiscussionCommentContent} placeholder={"Message"}
-                    onKeyDown={(e) => e.key === "Enter" && _create_map_discussion_comment(discussionThread.discussion.id)}
-                    onChange={(e) => setCreateDiscussionCommentContent(e.target.value)} />
-                  <div><button onClick={() => {
+            <div>
+              <Link
+                to={`/users/${discussionThread.discussion.creator.steam_id}`}
+              >
+                <img
+                  src={discussionThread.discussion.creator.avatar_link}
+                  alt=""
+                />
+              </Link>
+              <div>
+                <span>{discussionThread.discussion.creator.user_name}</span>
+                <span>
+                  {time_ago(
+                    new Date(
+                      discussionThread.discussion.created_at
+                        .replace("T", " ")
+                        .replace("Z", "")
+                    )
+                  )}
+                </span>
+                <span>{discussionThread.discussion.content}</span>
+              </div>
+              {discussionThread.discussion.comments
+                ? discussionThread.discussion.comments
+                    .sort(
+                      (a, b) =>
+                        new Date(a.date).getTime() - new Date(b.date).getTime()
+                    )
+                    .map((e) => (
+                      <>
+                        <Link to={`/users/${e.user.steam_id}`}>
+                          <img src={e.user.avatar_link} alt="" />
+                        </Link>
+                        <div>
+                          <span>{e.user.user_name}</span>
+                          <span>
+                            {time_ago(
+                              new Date(
+                                e.date.replace("T", " ").replace("Z", "")
+                              )
+                            )}
+                          </span>
+                          <span>{e.comment}</span>
+                        </div>
+                      </>
+                    ))
+                : ""}
+            </div>
+            <div id="discussion-send">
+              <input
+                type="text"
+                value={createDiscussionCommentContent}
+                placeholder={"Message"}
+                onKeyDown={(e) =>
+                  e.key === "Enter" &&
+                  _create_map_discussion_comment(discussionThread.discussion.id)
+                }
+                onChange={(e) =>
+                  setCreateDiscussionCommentContent(e.target.value)
+                }
+              />
+              <div>
+                <button
+                  onClick={() => {
                     if (createDiscussionCommentContent !== "") {
-                      _create_map_discussion_comment(discussionThread.discussion.id);
+                      _create_map_discussion_comment(
+                        discussionThread.discussion.id
+                      );
                       setCreateDiscussionCommentContent("");
                     }
-                  }}>Send</button></div>
-                </div>
-
+                  }}
+                >
+                  Send
+                </button>
               </div>
-            )
-            :
-            (
-              data ?
-                (<>
-                  {data.discussions.filter(f => f.title.includes(discussionSearch)).sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-                    .map((e, i) => (
-                      <div id='discussion-post'>
-                        <button key={e.id} onClick={() => _open_map_discussion(e.id)}>
-                          <span>{e.title}</span>
-                          {isModerator ?
-                            <button onClick={(m) => {
-                              m.stopPropagation();
-                              _delete_map_discussion(e);
-                            }}>Delete Post</button>
-                            : <span></span>
-                          }
-                          <span><b>{e.creator.user_name}:</b> {e.content}</span>
-                          <span>Last Updated: {time_ago(new Date(e.updated_at.replace("T", " ").replace("Z", "")))}</span>
-                        </button>
-                      </div>
-                    ))}
-                </>)
-                :
-                (<span style={{ textAlign: "center", display: "block" }}>No Discussions...</span>)
-            )
+            </div>
+          </div>
+        ) : data ? (
+          <>
+            {data.discussions
+              .filter((f) => f.title.includes(discussionSearch))
+              .sort(
+                (a, b) =>
+                  new Date(b.updated_at).getTime() -
+                  new Date(a.updated_at).getTime()
+              )
+              .map((e, i) => (
+                <div id="discussion-post">
+                  <button key={e.id} onClick={() => _open_map_discussion(e.id)}>
+                    <span>{e.title}</span>
+                    {isModerator ? (
+                      <button
+                        onClick={(m) => {
+                          m.stopPropagation();
+                          _delete_map_discussion(e);
+                        }}
+                      >
+                        Delete Post
+                      </button>
+                    ) : (
+                      <span></span>
+                    )}
+                    <span>
+                      <b>{e.creator.user_name}:</b> {e.content}
+                    </span>
+                    <span>
+                      Last Updated:{" "}
+                      {time_ago(
+                        new Date(
+                          e.updated_at.replace("T", " ").replace("Z", "")
+                        )
+                      )}
+                    </span>
+                  </button>
+                </div>
+              ))}
+          </>
+        ) : (
+          <span style={{ textAlign: "center", display: "block" }}>
+            No Discussions...
+          </span>
+        )
       }
     </section>
   );
-- 
cgit v1.2.3