From ae27ee54457cb0b5813ce3c6cb5272e027206580 Mon Sep 17 00:00:00 2001
From: Rogerio Chaves <rogeriocfj@gmail.com>
Date: Thu, 23 Apr 2020 22:46:25 +0200
Subject: [PATCH] Add mobile friends

---
 app/lib/express.js               | 31 +++++++++++++++++++
 app/public/mobile_style.css      | 18 +++++++++++
 app/views/_friendship_button.ejs | 24 +++++++++++++++
 app/views/home.ejs               |  2 +-
 app/views/mobile/_friends.ejs    |  6 ++++
 app/views/mobile/friends.ejs     |  4 +--
 app/views/mobile/profile.ejs     | 51 ++++++++++++++++++++++++++++++++
 app/views/profile.ejs            | 29 ++----------------
 8 files changed, 136 insertions(+), 29 deletions(-)
 create mode 100644 app/views/_friendship_button.ejs
 create mode 100644 app/views/mobile/_friends.ejs
 create mode 100644 app/views/mobile/profile.ejs

diff --git a/app/lib/express.js b/app/lib/express.js
index b1cde2e..847c9aa 100644
--- a/app/lib/express.js
+++ b/app/lib/express.js
@@ -350,6 +350,10 @@ router.get("/profile/:id(*)", async (req, res) => {
     return res.redirect("/");
   }
 
+  if (isPhone(req)) {
+    return res.redirect(`/mobile/profile/${id}`);
+  }
+
   const [profile, posts, friends, friendshipStatus] = await Promise.all([
     queries.getProfile(ssbServer, id),
     queries.getPosts(ssbServer, { id }),
@@ -360,6 +364,33 @@ router.get("/profile/:id(*)", async (req, res) => {
   res.render("profile", { profile, posts, friends, friendshipStatus });
 });
 
+router.get("/mobile/profile/:id(*)", async (req, res) => {
+  const id = req.params.id;
+
+  if (id == req.context.profile.id) {
+    return res.redirect("/");
+  }
+
+  if (!isPhone(req)) {
+    return res.redirect(`/profile/${id}`);
+  }
+
+  const [profile, posts, friends, friendshipStatus] = await Promise.all([
+    queries.getProfile(ssbServer, id),
+    queries.getPosts(ssbServer, { id }),
+    queries.getFriends(ssbServer, { id }),
+    queries.getFriendshipStatus(ssbServer, req.context.profile.id, id),
+  ]);
+
+  res.render("mobile/profile", {
+    profile,
+    posts,
+    friends,
+    friendshipStatus,
+    layout: "mobile/_layout",
+  });
+});
+
 router.post("/profile/:id(*)/add_friend", async (req, res) => {
   const id = req.params.id;
   if (id == req.context.profile.id) {
diff --git a/app/public/mobile_style.css b/app/public/mobile_style.css
index 182ca3b..42f8641 100644
--- a/app/public/mobile_style.css
+++ b/app/public/mobile_style.css
@@ -127,3 +127,21 @@ nav a.selected {
   min-width: auto;
   flex-grow: 1;
 }
+
+.tabs {
+  border-bottom: 1px solid #5f5f5f;
+}
+
+.tab-title {
+  border: 1px solid #5f5f5f;
+  background: #eee;
+  border-radius: 5px 5px 0 0;
+  margin-bottom: -1px;
+  height: 32px;
+}
+
+.tab-title.tab-selected {
+  background: #fff;
+  border-bottom: none;
+  height: 33px;
+}
diff --git a/app/views/_friendship_button.ejs b/app/views/_friendship_button.ejs
new file mode 100644
index 0000000..46da38c
--- /dev/null
+++ b/app/views/_friendship_button.ejs
@@ -0,0 +1,24 @@
+<% if (friendshipStatus == "no_relation") { %>
+  <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
+    <input type="submit" class="button-blue" value="Add as friend" />
+  </form>
+<% } else if (friendshipStatus == "friends") { %>
+  <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
+    <input type="submit" value="Undo Friendship" />
+  </form>
+<% } else if (friendshipStatus == "request_sent") { %>
+  <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
+    <button class="button-secondary undo-request">Request sent</button>
+  </form>
+<% } else if (friendshipStatus == "request_received") { %>
+  <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
+    <input type="submit" class="button-blue" value="Accept" />
+  </form>
+  <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST" style="margin-left: 5px">
+    <input type="submit" value="Reject" />
+  </form>
+<% } else if (friendshipStatus == "request_rejected") { %>
+  <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
+    <input type="submit" value="Add as friend" />
+  </form>
+<% } %>
\ No newline at end of file
diff --git a/app/views/home.ejs b/app/views/home.ejs
index 9691f1a..f22196d 100644
--- a/app/views/home.ejs
+++ b/app/views/home.ejs
@@ -20,7 +20,7 @@
     </div>
 
     <form action="/publish" method="POST" style="padding-top: 20px;">
-      <textarea name="message" class="compose-post"></textarea>
+      <textarea name="message" class="compose-post" placeholder="Post something on your wall..."></textarea>
       <div class="reverse-columns" style="margin-top: 10px">
         <input type="submit" value="Publish" />
       </div>
diff --git a/app/views/mobile/_friends.ejs b/app/views/mobile/_friends.ejs
new file mode 100644
index 0000000..cfcab10
--- /dev/null
+++ b/app/views/mobile/_friends.ejs
@@ -0,0 +1,6 @@
+<% friends.map(friend => { %>
+  <a class="link-block" href="/mobile<%= profileUrl(friend.id) %>">
+    <img class="link-profile-pic" src="<%= profileImageUrl(friend) %>" />
+    <div><%= friend.name %></div>
+  </a>
+<% }) %>
\ No newline at end of file
diff --git a/app/views/mobile/friends.ejs b/app/views/mobile/friends.ejs
index 28fac98..3227acc 100644
--- a/app/views/mobile/friends.ejs
+++ b/app/views/mobile/friends.ejs
@@ -7,8 +7,8 @@
   <% } %>
 
   <h2>Friends</h2>
-  <%- include('../_friends', { friends: friends.friends }) %>
+  <%- include('_friends', { friends: friends.friends }) %>
 
   <h2 style="margin-top: 30px">Requests Sent</h2>
-  <%- include('../_friends', { friends: friends.requestsSent }) %>
+  <%- include('_friends', { friends: friends.requestsSent }) %>
 </div>
\ No newline at end of file
diff --git a/app/views/mobile/profile.ejs b/app/views/mobile/profile.ejs
new file mode 100644
index 0000000..c8736e5
--- /dev/null
+++ b/app/views/mobile/profile.ejs
@@ -0,0 +1,51 @@
+<div class="columns">
+  <div><img class="profile-pic" src="<%= profileImageUrl(profile) %>" style="display:block" /></div>
+  <div style="padding-left: 10px">
+    <h1><%= profile.name %></h1>
+
+    <%= profile.description.substr(0, 70) %>
+
+    <% if (friendshipStatus == "request_received") { %>
+      <p><%= profile.name %> sent you a friendship request</p>
+    <% } else if (true || friendshipStatus == "request_rejected") { %>
+      <p>You rejected <%= profile.name %> friendship request</p>
+    <% } %>
+
+    <div class="columns profile-actions" style="margin-top: 10px;">
+      <%- include('../_friendship_button') %>
+
+      <button class="button-yellow js-compose-secret-message" style="margin-left: 5px" data-url="<%= profileUrl(profile.id, "/publish_secret") %>">
+        🤫 Secret
+      </button>
+      <%- include('secrets/_compose_single') %>
+    </div>
+  </div>
+</div>
+
+<div class="tabs" style="margin-top: 20px; padding: 0 10px;">
+  <button class="tab-title tab-selected">
+    Wall
+  </button>
+  <button class="tab-title">
+    Friends
+  </button>
+</div>
+<div class="tab-content">
+  <div class="tab-item">
+    <% if (posts.length > 0) { %>
+      <form action="/publish" method="POST" style="padding: 0px 8px 5px 8px;">
+        <textarea name="message" class="compose-post js-compose-post" placeholder="Write something to <%= profile.name %>..."></textarea>
+        <div class="reverse-columns">
+          <input type="submit" value="Publish" style="display: none; margin: 5px 0" class="js-publish-button" />
+        </div>
+      </form>
+      <%- include('../_posts', { posts }) %>
+    <% } else { %>
+      <div style="padding-top: 15px;">
+        <div class="post">
+          No posts yet
+        </div>
+      </div>
+    <% } %>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/views/profile.ejs b/app/views/profile.ejs
index 4f4daec..bec2ebd 100644
--- a/app/views/profile.ejs
+++ b/app/views/profile.ejs
@@ -22,33 +22,10 @@
         <% } %>
 
         <div class="columns profile-actions">
-          <% if (friendshipStatus == "no_relation") { %>
-            <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
-              <input type="submit" class="button-blue" value="Add as friend" />
-            </form>
-          <% } else if (friendshipStatus == "friends") { %>
-            <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
-              <input type="submit" value="Undo Friendship" />
-            </form>
-          <% } else if (friendshipStatus == "request_sent") { %>
-            <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST">
-              <button class="button-secondary undo-request">Request sent</button>
-            </form>
-          <% } else if (friendshipStatus == "request_received") { %>
-            <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
-              <input type="submit" class="button-blue" value="Accept" />
-            </form>
-            <form action="<%= profileUrl(profile.id, "/reject_friend") %>" method="POST" style="margin-left: 5px">
-              <input type="submit" value="Reject" />
-            </form>
-          <% } else if (friendshipStatus == "request_rejected") { %>
-            <form action="<%= profileUrl(profile.id, "/add_friend") %>" method="POST">
-              <input type="submit" value="Add as friend" />
-            </form>
-          <% } %>
+          <%- include('_friendship_button') %>
 
           <button class="button-yellow js-compose-secret-message" style="margin-left: 5px" data-url="<%= profileUrl(profile.id, "/publish_secret") %>">
-            👻 Secret Message
+            🤫 Secret Message
           </button>
           <%- include('secrets/_compose_single') %>
         </div>
@@ -56,7 +33,7 @@
     </div>
 
     <form action="<%= profileUrl(profile.id, "/publish") %>" method="POST" style="padding-top: 20px;">
-      <textarea name="message" class="compose-post"></textarea>
+      <textarea name="message" class="compose-post" placeholder="Write something to <%= profile.name %>..."></textarea>
       <div class="reverse-columns" style="margin-top: 10px">
         <input type="submit" value="Publish" />
       </div>