friends

5 files changed, 161 insertions, 40 deletions

diff --git a/public/css/profile.css b/public/css/profile.css
index 8f212dd..112b1bf 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -119,7 +119,7 @@ body {
     border-bottom: 3px solid var(--logo) !important;
 }
 
-#about {
+#about, #friends {
     margin-top: 2em;
     align-self: center;
     padding: 0;
@@ -160,4 +160,36 @@ body {
 
 .logout {
     flex: 1;
+}
+
+.follow {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 175px;
+    background-color: var(--secondary);
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.follow>span {
+    color: var(--medium);
+}
+
+.friend {
+    background-color: var(--logo);
+    border: 1px solid var(#ffffff)
+}
+
+.friend>span {
+    color: #ffffff;
+}
+
+.right {
+    flex: 1;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    padding-right: 50px;
 }
\ No newline at end of file
diff --git a/public/js/api.js b/public/js/api.js
index 176ae59..5a55460 100644
--- a/public/js/api.js
+++ b/public/js/api.js
@@ -79,6 +79,18 @@ export const loadself = async () => {
     return await request("/users/self", {})
 }
 
+export const follow = async (state, user_id) => {
+    return await request('/users/follow', {state, user_id}, 'PUT')
+}
+
+export const follow_status = async (user_id) => {
+    return await request('/users/follow', {user_id})
+}
+
+export const friends = async (user_id) => {
+    return await request('/users/friends', {user_id})
+}
+
 export const postcomment = async (post_id, content) => {
     return await request('/posts/comment', {post_id, content}, 'PATCH')
 }
diff --git a/public/js/people.js b/public/js/people.js
index 0a97e93..99890d9 100644
--- a/public/js/people.js
+++ b/public/js/people.js
@@ -34,22 +34,7 @@ const data = {
 }
 
 async function load() {
-    let request = await loadself()
 
-    if (request.status === 429) {
-        let new_body = 
-        body({},
-            ...header(false, true)
-        )
-
-        document.body.replaceWith(new_body)
-        throw new Error("Rate limited");
-    }
-
-
-    const self = request.json
-
-    header(false, true, self.user_id)
     const users = (await loaduserspage(page)).json
 
     if (users.length === 0) {
diff --git a/public/js/profile.js b/public/js/profile.js
index dd5216d..4e4f44f 100644
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -1,31 +1,55 @@
 import { div, pfp, banner, parse, button, body, a, span, crawl, parseDate, parseMonth } from './main.js'
-import { loadself, loadusers, loadusersposts, updateavatar, updatebanner, logout } from './api.js'
-import { parsePost, header } from './components.js'
+import { loadself, loadusers, loadusersposts, updateavatar, updatebanner, logout, follow, follow_status, friends } from './api.js'
+import { parsePost, parseUser, header } from './components.js'
 
-function swap(value) {
-    let postsb = document.getElementById("profilepostbutton");
-    let aboutb = document.getElementById("profileaboutbutton");
-    let posts = document.getElementById("posts");
-    let about = document.getElementById("about");
-    let load = document.getElementsByClassName("loadp")[0];
+function swap(tab) {
+    let post_button = document.querySelector("#profilepostbutton");
+    let about_button = document.querySelector("#profileaboutbutton");
+    let friends_button = document.querySelector("#profilefriendsbutton");
 
-    if (value) {
+    let posts_section = document.querySelector("#posts");
+    let about_section = document.querySelector("#about");
+    let friends_section = document.querySelector("#friends");
+    
+    let load = document.querySelector(".loadp");
+
+    if (tab === 0) {
 
-        postsb.classList.add("selected")
-        aboutb.classList.remove("selected")
-        about.classList.add("hidden")
-        posts.classList.remove("hidden")
+        post_button.classList.add("selected")
+        about_button.classList.remove("selected")
+        friends_button.classList.remove("selected")
+
+        posts_section.classList.remove("hidden")
+        about_section.classList.add("hidden")
+        friends_section.classList.add("hidden")
 
         if (load) {
             load.classList.remove("hidden")
         }
 
-    } else {
+    } else if (tab === 1) {
 
-        postsb.classList.remove("selected")
-        aboutb.classList.add("selected")
-        about.classList.remove("hidden")
-        posts.classList.add("hidden")
+        post_button.classList.remove("selected")
+        about_button.classList.add("selected")
+        friends_button.classList.remove("selected")
+
+        posts_section.classList.add("hidden")
+        about_section.classList.remove("hidden")
+        friends_section.classList.add("hidden")
+
+        if (load) {
+            load.classList.add("hidden")
+        }
+
+    } else if (tab === 2) {
+
+        post_button.classList.remove("selected")
+        about_button.classList.remove("selected")
+        friends_button.classList.add("selected")
+
+        posts_section.classList.add("hidden")
+        about_section.classList.add("hidden")
+        friends_section.classList.remove("hidden")
 
         if (load) {
             load.classList.add("hidden")
@@ -67,9 +91,37 @@ function changeimage(fn) {
     input.click();
 }
 
-function render() {
+function status_text(status) {
+    switch (status) {
+        case 1:
+            return 'Following ✓'
+        case 2:
+            return 'Follow Back'
+        case 3:
+            return 'Friends ✓'
+        default:
+            return 'Follow'
+      }
+}
+
+async function render() {
 
-    let new_body =
+    let status;
+    if (!isself) {
+        let response = await follow_status(data.user.user_id)
+        if (response.status == 200) {
+            status = parseInt(response.msg)
+        } else {
+            status = 0;
+        }
+    }
+
+    let friends_arr = (await friends(data.user.user_id)).json
+    if (friends_arr == undefined) {
+        friends_arr = []
+    }
+
+    let new_body = 
     body({},
         ...header(false, false, data.self.user_id),
         div({id: 'top'},
@@ -91,16 +143,53 @@ function render() {
                     span({class: 'gtext'},
                         parse('Joined ' + parseDate(new Date(data.user.date)))
                     )
+                ),
+                !isself ?
+                div({class: 'right'},
+                    div({class: `follow ${status == 3 ? 'friend' : ''}`, onclick: async (event) => {
+                        let button = event.target
+                        if (button.tagName == 'SPAN') {
+                            button = button.parentElement 
+                        }
+                        
+                        let response
+                        if (status % 2 == 0) {
+                            response = await follow(true, data.user.user_id);
+                        } else {
+                            response = await follow(false, data.user.user_id);
+                        }
+
+                        if (response.status == 200) {
+                            status = parseInt(response.msg)
+                        } else {
+                            return
+                        }
+
+                        button.firstChild.innerHTML = status_text(status)
+                        if (status == 3) {
+                            button.classList.add('friend')
+                        } else {
+                            button.classList.remove('friend')
+                        }
+                    }},
+                        span({class: 'gtext'},
+                            parse(status_text(status))    
+                        )
+                    )
                 )
+                : parse('')
             ),
             div({class: 'fullline', style: 'width: 80em; margin-bottom: 0; z-index: 0;'}),
             div({class: 'profilebuttons'},
-                button({id: 'profilepostbutton', class: 'selected', onclick: () => swap(true)},
+                button({id: 'profilepostbutton', class: 'selected', onclick: () => swap(0)},
                     parse('Posts')
                 ),
-                button({id: 'profileaboutbutton', onclick: () => swap(false)},
+                button({id: 'profileaboutbutton', onclick: () => swap(1)},
                     parse('About')
                 ),
+                button({id: 'profilefriendsbutton', onclick: () => swap(2)},
+                    parse('Friends')
+                ),
                 div({style: 'flex: 20'}),
                 isself ? button({class: 'logout', onclick: async () => {
                     const response = await logout()
@@ -154,6 +243,9 @@ function render() {
                 )
             )
         ),
+        div({id: 'friends', class: 'hidden'},
+            ...friends_arr.map(u => parseUser(u))
+        ),
         div({id: 'popup', class: 'hidden'},
             div({class: 'createpost'},
                 div({class: 'close', onclick: () => document.getElementById('popup').classList.add('hidden')}),
@@ -207,7 +299,6 @@ async function load(id) {
         if (el) {
             el.remove()
         }
-        return []
     } else {
         page++
     }
@@ -269,7 +360,7 @@ async function init() {
 
     const posts = await load(id)
     data.posts.push(... posts)
-    
+
     data.user = data.users[id]
 
     render()
diff --git a/public/profile.html b/public/profile.html
index 35debf8..6d4b117 100644
--- a/public/profile.html
+++ b/public/profile.html
@@ -18,6 +18,7 @@
 
     <link rel="stylesheet" href="/css/main.css">
     <link rel="stylesheet" href="/css/header.css">
+    <link rel="stylesheet" href="/css/people.css">
     <link rel="stylesheet" href="/css/profile.css">
     <link rel="stylesheet" href="/css/home.css">