feat: discussion page (#137)

4 files changed, 406 insertions, 5 deletions

diff --git a/frontend/src/components/pages/profile.css b/frontend/src/components/pages/profile.css
index 677fa9b..4944ade 100644
--- a/frontend/src/components/pages/profile.css
+++ b/frontend/src/components/pages/profile.css
@@ -174,7 +174,7 @@ span.titles{
     height: 34px;
     display: grid;
     font-size: 20px;
-    padding-left: 60px;
+    padding-left: 40px;
     margin: 0 20px;
     grid-template-columns: 15% 15% 5% 15% 5% 15% 15% 15%;
 }
@@ -194,7 +194,7 @@ span.titles{
     height: 44px; 
 
     border-radius: 20px;
-    padding: 0 0 0 60px;
+    padding: 0 0 0 40px;
     font-size: 20px;
     
     color: inherit;
@@ -205,6 +205,7 @@ span.titles{
     display: grid;
     grid-template-columns: 15% 15% 5% 15% 5% 15% 15% 15%;
     overflow: hidden;
+    white-space: nowrap;
 
     transition: height .2s
 }
diff --git a/frontend/src/components/pages/profile.js b/frontend/src/components/pages/profile.js
index 041f585..7c45320 100644
--- a/frontend/src/components/pages/profile.js
+++ b/frontend/src/components/pages/profile.js
@@ -129,7 +129,7 @@ function UpdateProfile(){
       method: 'POST',
       headers: {Authorization: token}
     }).then(r=>r.json())
-    .then(d=>d.success?window.location.reload():window.alert(`Error: ${d.message}`))
+    .then(d=>d.success?window.alert("profile updated"):window.alert(`Error: ${d.message}`))
 }
 
 function TimeAgo(date) {
@@ -348,7 +348,7 @@ return (
           <span>{r.name}</span>
           <span style={{ display: "grid" }}>{record.scores[i].score_count}</span>
           <span style={{ display: "grid" }}>{record.scores[i].score_count-record.map_wr_count}</span>
-          <span>{TicksToTime(record.scores[i].score_time)}</span>
+          <span style={{ display: "grid" }}>{TicksToTime(record.scores[i].score_time)}</span>
           <span> </span>
           {i===0?<span>#{record.placement}</span>:<span> </span>}
           <span>{record.scores[i].date.split("T")[0]}</span>
diff --git a/frontend/src/components/pages/summary.css b/frontend/src/components/pages/summary.css
index 47c3f4b..c99a0bf 100644
--- a/frontend/src/components/pages/summary.css
+++ b/frontend/src/components/pages/summary.css
@@ -449,7 +449,233 @@ text-align: center;
 .leaderboard-record:last-child{margin: 10px 20px 10px 20px;}
 
 
+#section7{
+    margin: 40px 0 20px 0;
+    background-color: #202232;
+    border-radius: 24px;
+    padding: 10px;
+}
+
+#discussion-search{
+    height: 46px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 100px;
+    margin: 0 0 20px 0;
+}
+#discussion-search>input::placeholder{color: #aaa;}
+#discussion-search>input{
+    background-color: #2b2e46;
+    font-size: 20px;
+    padding-left: 10px;
+    color: white;
+    border: 0;
+    border-radius: 16px 0 0 16px;
+    font-family: inherit;
+}
+#discussion-search>div>button:hover{filter: brightness(75%);}
+#discussion-search>div>button{
+    padding: 7px 16px;
+    margin: 8px 0;
+    border: 0;
+    font-size: 16px;
+    border-radius: 24px;
+    display: block;
+    background-color:#3c91e6;
+    font-family: inherit;
+    font-weight: bold;
+    cursor: pointer;
+    color: white;
+
+    transition: filter .2s;
+}
+#discussion-search>div{
+    background-color: #2b2e46;
+    border-radius: 0 16px 16px 0;
+}
+#discussion-post>button:nth-child(1)>span>b{font-size: 18px;color:#cdcfdf;font-weight: lighter;}
+#discussion-post>button:nth-child(1){
+    background-color: #2b2e46;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 150px;
+
+    border-radius: 16px;
+    padding:  16px 12px;
+    margin: 8px 0 0 0;   
+    border: 0;
+    width: 100%; height: 100px;
+    text-align: start;
+    white-space: nowrap;
+    color: #cdcfdf;
+    cursor: pointer;
+    overflow: hidden;
+}
+#discussion-post>button:nth-child(1)>span:nth-child(1){font-size: 32px;}
+#discussion-post>button:nth-child(1)>span:nth-child(3){color: #aaa; font-size: 18px;}
+#discussion-post>button:nth-child(1)>span:nth-child(4){
+    opacity: .7;
+    height: 40px;
+    display: flex;
+    place-items: end;
+    justify-content: end;
+}
+
+#discussion-post{height: 100px;}
+#discussion-post>button>button:hover{filter: brightness(75%); }
+#discussion-post>button>button{
+    padding: 7px 16px;
+    
+    border: 0;
+    font-size: 16px;
+    border-radius: 24px;
+    background-color:#e52d04;
+    font-family: BarlowSemiCondensed-Regular;
+    font-weight: bold;
+    cursor: pointer;
+    color: white;
+
+    transition: filter .2s;
+}
+
+
+#discussion-create>div{
+    display: grid;
+    text-align: start;
+}    
+#discussion-create{    
+    display: grid;
+    grid-template-columns: 1fr 40px;
+    height: auto;
+    word-wrap: break-word;
+}
+
+#discussion-create>span{padding-left: 20px;}
+#discussion-create>div>input::placeholder{color: #aaa;}
+#discussion-create>div>input{
+    background-color: #2b2e46;
+    font-size: 20px;
+    padding-left: 10px;
+    margin-top: 10px;
+    height: 32px;
+    color: white;
+    border: 0;
+    font-family: inherit;
+}
+#discussion-create>div>input:nth-child(2){font-size: 16px;}
 
+#discussion-create-button:hover{filter: brightness(75%);}
+#discussion-create-button{
+    padding: 7px 16px;
+    margin: 8px 0 0 0;
+    border: 0;
+    font-size: 16px;
+    border-radius: 24px;
+    
+    background-color:#3c91e6;
+    font-family: inherit;
+    font-weight: bold;
+    cursor: pointer;
+    color: white;
+    width: min-content;
+    grid-column: 1 / span 2;
+
+
+    transition: filter .2s;
+}
+
+
+#discussion-thread>div:nth-child(1){
+    display: grid;
+    grid-template-columns: 1fr 40px;
+    height: auto;
+    padding: 0 0 10px 20px;
+    word-wrap: break-word;
+}
+
+#discussion-create>button:nth-child(2),
+#discussion-thread>div>button{
+    height: 40px;
+    float:inline-end;
+    color:#cdcfdf;
+    background-color: #0000;
+    border: 0;
+    font-size: 38px;
+    cursor: pointer;
+}
+
+
+#discussion-thread>div:nth-child(2)>img{
+    width: 60px; height: 60px;
+    border-radius: 100px;
+    margin: 20px 0 0 0;
+}
+#discussion-thread>div:nth-child(2)>div{
+    height: max-content;
+    padding: 20px 0 0 10px;
+    display: inline-grid;
+    grid-template-columns: min-content 1fr ;
+    overflow: hidden;
+    
+}
+#discussion-thread>div:nth-child(2)>div>span:nth-child(1){font-weight: bold;height: 30px;}
+#discussion-thread>div:nth-child(2)>div>span:nth-child(2){
+    opacity: 0.6;
+    height: 30px;
+    font-size: 80%;
+    padding-left: 10px;
+}
+#discussion-thread>div:nth-child(2)>div>span:nth-child(3){
+    grid-column: 1 / span 2;
+    height: max-content;
+    word-wrap: break-word;
+}
+#discussion-thread>div:nth-child(2){
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    font-size: 20px;
+    max-height: 522px;
+    overflow-y: auto;
+}
+
+
+#discussion-send{
+    height: 48px;
+    width: 100%;
+    display: grid; 
+    grid-template-columns: 1fr 80px;
+    margin: 10px 0 0 0;
+}
+#discussion-send>input::placeholder{color: #aaa;}
+#discussion-send>input{
+    background-color: #2b2e46;
+    padding-left: 10px;
+    color: white;
+    border: 0;
+    font-size: 20px;
+    border-radius: 16px 0 0 16px;
+    font-family: inherit;
+}
+#discussion-send>div{
+    background-color: #2b2e46;
+    border-radius: 0 16px 16px 0;
+
+}
+#discussion-send>div>button:hover{ filter: brightness(75%);}
+#discussion-send>div>button{
+    padding: 7px 20px;
+    margin: 8px 0;
+    font-size: 16px;
+    border: 0;
+    border-radius: 24px;
+    display: block;
+    background-color:#3c91e6;
+    font-family: inherit;
+    font-weight: bold;
+    cursor: pointer;
+    color: white;
+
+    transition: filter .2s;
+}
 
 
 
diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js
index 7c72c48..228ce01 100644
--- a/frontend/src/components/pages/summary.js
+++ b/frontend/src/components/pages/summary.js
@@ -21,6 +21,10 @@ const fakedata={} //for debug
     const [data, setData] = React.useState(null);
     React.useEffect(() => {
     setData(null)
+    setDiscussionThread(null)
+    setCreatePostState(0)
+    setSelectedRun(0)
+    setCatState(1)
         fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/summary`)
         .then(r => r.json())
         .then(d => {
@@ -40,6 +44,28 @@ const fakedata={} //for debug
         // eslint-disable-next-line
     }, [pageNumber,location.pathname]);
 
+    const [discussions,setDiscussions] = React.useState(null)
+    function fetchDiscussions() {
+        fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions`)
+        .then(r=>r.json())
+        .then(d=>setDiscussions(d.data.discussions))
+    }
+    
+    React.useEffect(()=>{
+        fetchDiscussions()
+    },[location.pathname])
+
+
+
+const [discussionThread,setDiscussionThread] = React.useState(null)
+function openDiscussion(x){
+    fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${x}`)
+    .then(r=>r.json())
+    .then(d=>setDiscussionThread(d.data.discussion)) 
+}
+const [discussionSearch, setDiscussionSearch] = React.useState("")
+
+
 
 
 const [navState, setNavState] = React.useState(0); // eslint-disable-next-line
@@ -204,7 +230,9 @@ function YouTubeGetID(url){
  }
 
 function TimeAgo(date) {
-    const seconds = Math.floor((new Date() - date) / 1000);
+    // const seconds = Math.floor((new Date() - date) / 1000);
+    
+    const seconds = Math.floor(((new Date(new Date() - (date.getTimezoneOffset()*-60000))) - date) / 1000);
   
     let interval = Math.floor(seconds / 31536000);
     if (interval > 1) {return interval + ' years ago';}
@@ -239,6 +267,52 @@ function TicksToTime(ticks) {
   return `${hours===0?"":hours+":"}${minutes===0?"":hours>0?minutes.toString().padStart(2, '0')+":":(minutes+":")}${minutes>0?seconds.toString().padStart(2, '0'):seconds}.${milliseconds.toString().padStart(3, '0')} (${ticks})`;
 }
 
+function PostComment() {
+
+    fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${discussionThread.id}`,{
+    method:"POST",
+    headers:{authorization:token},
+    body:JSON.stringify({"comment":document.querySelector("#discussion-send>input").value})
+})
+.then(r=>r.json())
+.then(d=>{
+    document.querySelector("#discussion-send>input").value=""
+    openDiscussion(discussionThread.id)
+})
+}
+
+
+const [createPostState,setCreatePostState] = React.useState(0)
+function CreatePost() {
+
+    fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions`,{
+        method:"POST",
+        headers:{authorization:token},
+        body:JSON.stringify({"title":document.querySelector("#discussion-create-title").value,"content":document.querySelector("#discussion-create-content").value})
+    })
+    .then(r=>r.json())
+    .then(d=>{
+        setCreatePostState(0)
+        fetchDiscussions()
+    })
+}
+
+function DeletePost(post) {
+if(window.confirm(`Are you sure you want to remove post: ${post.title}?`)){
+    console.log("deleted",post.id)
+    fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${post.id}`,{
+        method:"DELETE",
+        headers:{authorization:token},
+    })
+    .then(r=>r.json())
+    .then(d=>{
+        fetchDiscussions()
+    })
+}
+}
+
+
+
 if(data!==null){
 return (
     <>
@@ -365,6 +439,8 @@ return (
             </div>    
         </section>
 
+        {/* Leaderboards */}
+
         {lbData===null?"":lbData.success===false?(
             <section id='section6' className='summary2'>
                 <h1 style={{textAlign:"center"}}>Map is not available for competitive boards.</h1>
@@ -445,6 +521,104 @@ return (
         </section>
         )}
 
+
+        {/* Discussions */}
+        <section id='section7' className='summary3'>
+      
+    {discussionThread === null ? (
+        createPostState === 0 ? (
+        discussions !== null ? (
+        // Main screen
+        <>
+        <div id='discussion-search'> 
+            <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={()=>setDiscussionSearch(document.querySelector("#discussion-search>input").value)} />
+            <div><button onClick={()=>setCreatePostState(1)}>New Post</button></div>
+        </div>      
+        {discussions.filter(f=>f.title.includes(discussionSearch)).sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))
+        .map((e, i) => (
+            <div id='discussion-post'>
+
+            <button key={e.id} onClick={() => openDiscussion(e.id)}>
+                <span>{e.title}</span>
+                
+                {token!==null?e.creator.steam_id===JSON.parse(atob(token.split(".")[1])).sub?
+                    <button onClick={()=>DeletePost(e)}>Delete Post</button>
+                    :<span></span>:<span></span>}
+                <span><b>{e.creator.user_name}:</b> {e.content}</span>
+                <span>last updated: {TimeAgo(new Date(e.updated_at.replace("T"," ").replace("Z","")))}</span>
+            </button>
+            </div>
+        ))}
+      </>
+            ):(   
+
+            // Main screen (no posts)
+    <>
+    <div id='discussion-search'> 
+        <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={()=>setDiscussionSearch(document.querySelector("#discussion-search>input").value)} />
+        <div><button onClick={()=>setCreatePostState(1)}>New Post</button></div>
+    </div> 
+    <span style={{textAlign:"center",display:"block"}}>no discussions</span>
+</>
+            )
+    ):(
+    // Creating post 
+    <div id='discussion-create'>
+        <span>Create post</span>
+        <button onClick={()=>setCreatePostState(0)}>X</button>
+        <div style={{gridColumn:"1 / span 2"}}>
+            <input id='discussion-create-title' placeholder='Title...'></input>
+            <input id='discussion-create-content' placeholder='Enter the comment...' ></input>
+        </div>
+        <div style={{placeItems:"end",gridColumn:"1 / span 2"}}>
+        <button id='discussion-create-button' onClick={()=>CreatePost()}>Post</button>
+        </div>
+            
+    </div>
+
+    )):(
+    // Post screen
+    <div id='discussion-thread'>
+        <div>
+        <span>{discussionThread.title}</span>
+        <button onClick={()=>setDiscussionThread(null)}>X</button>
+        </div>
+
+        <div>
+            <img src={discussionThread.creator.avatar_link} alt="" />
+            <div>
+                <span>{discussionThread.creator.user_name}</span>
+                <span>{TimeAgo(new Date(discussionThread.created_at.replace("T"," ").replace("Z","")))}</span>
+                <span>{discussionThread.content}</span>
+            </div>
+            {discussionThread.comments!==null?
+            discussionThread.comments.sort((a, b) => new Date(a.date) - new Date(b.date))
+            .map(e=>(
+              <>
+                <img src={e.user.avatar_link} alt="" />
+                <div>
+                    <span>{e.user.user_name}</span>
+                    <span>{TimeAgo(new Date(e.date.replace("T"," ").replace("Z","")))}</span>
+                    <span>{e.comment}</span>
+                </div>
+              </>
+
+            )):""}
+                    
+
+        </div>
+        <div id='discussion-send'>
+            <input type="text" placeholder={"Message"} onKeyDown={(e)=>e.key==="Enter"?PostComment():""}/>
+            <div><button onClick={()=>PostComment()}>Send</button></div>
+        </div>
+
+    </div>
+    
+    
+    )}
+
+        </section>
+
     </main>
     </>
     )