From e427968a1f6cb6c7c4342554cbf0de92a411a23a Mon Sep 17 00:00:00 2001
From: zgeorge22 <zgeorge0123@gmail.com>
Date: Wed, 4 Nov 2020 14:38:33 -0500
Subject: [PATCH] Fix all bugs remaining in prep for demo

---
 public/common/account.html     |   7 +-
 public/common/create_post.html |   2 +-
 public/index.html              | 170 +++++++++++++----------
 public/js/account.js           |   2 +-
 public/js/create_post.js       |   2 +-
 public/js/index.js             | 243 ++++++++++++++-------------------
 public/js/post.js              |   2 +
 public/js/profile.js           |  42 +++++-
 8 files changed, 252 insertions(+), 218 deletions(-)
diff --git a/public/common/account.html b/public/common/account.html
index eb76406..a96a3ae 100644
--- a/public/common/account.html
+++ b/public/common/account.html
@@ -8,6 +8,8 @@
         <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
         <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-storage.js"></script>
         <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
+
+        <title>Account Information</title>
     </head>
     <body>
         <div class="ui fixed violet inverted menu">
@@ -24,9 +26,9 @@
                     
                     <i class="dropdown icon"></i>
                     <div class="menu">
-                        <a class="item" href="/user/" id="user-own-profile">Profile</a>                        
+                        <a class="item" href="/user/" id="user-own-profile">Profile</a>                    
                         <a class="item" href="/common/account.html">Account Information</a>
-                        <a class="item" href="/index.html" onclick="firebase.auth().signOut()">
+                        <a class="item" href="/index.html" onclick="firebase.auth().signOut();">
                             <h4 class="ui red header">Sign Out</h4>
                         </a>
                     </div>
@@ -108,5 +110,6 @@ <h1 class="ui header">Account Information</h1>
         </script>
 
         <script src="/js/account.js"></script>
+        <script src="/js/login.js" type="text/babel"></script>
     </body>
 </html>
diff --git a/public/common/create_post.html b/public/common/create_post.html
index af951f9..bca5c0a 100644
--- a/public/common/create_post.html
+++ b/public/common/create_post.html
@@ -26,7 +26,7 @@
                     <div class="menu">
                         <a class="item" href="/user/" id="user-own-profile">Profile</a>                        
                         <a class="item" href="/common/account.html">Account Information</a>
-                        <a class="item" href="/index.html" onclick="firebase.auth().signOut()">
+                        <a class="item" href="/index.html" onclick="firebase.auth().signOut();">
                             <h4 class="ui red header">Sign Out</h4>
                         </a>
                     </div>
diff --git a/public/index.html b/public/index.html
index 3d578cc..f38f8c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,79 +1,111 @@
 <html>
-    <head>
-        <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
-        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
-        
 
-        <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
-        <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
-        <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-storage.js"></script>
-        <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
-        <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
-        
-        <link rel="stylesheet" href="/css/styles.css">
-        <link rel="shortcut icon" href="favicon.ico">
-        <title>Bitwise Home</title>
-    </head>
-    <body>
-        <div class="ui fixed violet inverted menu">
-            <div class="ui fluid container">
-                <a href="/index.html" class="header item">
-                    <img class="logo" src="https://firebasestorage.googleapis.com/v0/b/bitwise-a3c2d.appspot.com/o/assets%2Flogo.png?alt=media&token=1498c5a1-3b43-436c-bed0-d764d91fe3e5">
-                    &nbsp; Bitwise
-                </a>
-                <div class="ui simple right dropdown item" id="user-dropdown">
-                    <img id="profile-icon" class="logo" src="https://firebasestorage.googleapis.com/v0/b/bitwise-a3c2d.appspot.com/o/usercontent%2Fdefault%2Fprofile.jpg?alt=media&token=f35c1c16-d557-4b94-b5f0-a1782869b551">
-                    <div id="account-dropdown">
-                        &nbsp; retrieving...
-                    </div>
-                    
-                    <i class="dropdown icon"></i>
-                    <div class="menu">
-                        <a class="item" href="/user/" id="user-own-profile">Profile</a>                        
-                        <a class="item" href="/common/account.html">Account Information</a>
-                        <a class="item" href="/common/login.html" onclick="firebase.auth().signOut()">
-                            <h4 class="ui red header">Sign Out</h4>
-                        </a>
-                    </div>
+<head>
+    <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.js"></script>
+
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.7/jquery.timeago.min.js"></script>
+
+    <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-storage.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
+    <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
+
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
+    <title>Home</title>
+</head>
+
+<body>
+    <div class="ui fixed violet inverted menu">
+        <div class="ui fluid container">
+            <a href="/index.html" class="header item">
+                <img class="logo" src="https://firebasestorage.googleapis.com/v0/b/bitwise-a3c2d.appspot.com/o/assets%2Flogo.png?alt=media&token=1498c5a1-3b43-436c-bed0-d764d91fe3e5">
+                &nbsp; Bitwise
+            </a>
+            <div class="ui simple right dropdown item" id="user-dropdown">
+                <img id="profile-icon" class="logo"
+                    src="https://firebasestorage.googleapis.com/v0/b/bitwise-a3c2d.appspot.com/o/usercontent%2Fdefault%2Fprofile.jpg?alt=media&token=f35c1c16-d557-4b94-b5f0-a1782869b551">
+                <div id="account-dropdown">
+                    &nbsp; retrieving...
+                </div>
+
+                <i class="dropdown icon"></i>
+                <div class="menu">
+                    <a class="item" href="/user/" id="user-own-profile">Profile</a>                    
+                    <a class="item" href="/common/account.html">Account Information</a>
+                    <a class="item" onclick="completeSignOut()">
+                        <h4 class="ui red header">Sign Out</h4>
+                    </a>
                 </div>
-                <a class="right header item" id="login-button">Log In</a>
-                <div id="login-modal"></div>
             </div>
+            <a class="right header item" id="login-button">Log In</a>
+            <div id="login-modal"></div>
         </div>
+    </div>
 
-        <br><br><br><br>
-        <div class="content">
-            <a id="test-button" href="/common/test.html" class='ui fluid inverted red button'>
-                <i class="keyboard icon"></i>Test Page
-            </a>
-        </div>
+    <br><br><br><br>
 
-        <div class="content">
-            <a id="create-post-button" href="/common/create_post.html" class='ui fluid inverted violet button'>
-                <i class="pencil alternate icon"></i>Create Post
-            </a>
-            <br>
-            <ul id="timeline"></ul>
-        </div>
+    <div class="ui main container">
+        <a class='ui fluid inverted violet button' id="create-post-button" href="/common/create_post.html" style="display:none;">
+            <i class="pencil alternate icon"></i>
+            Create Post
+        </a>
 
-        <script>
-            // Initialize Firebase
-            var firebaseConfig = { 
-                apiKey: "AIzaSyBJTDxfjl_xpPXSuiZmcriEpRj4KPPiVpg",
-                authDomain: "bitwise-a3c2d.firebaseapp.com",
-                databaseURL: "https://bitwise-a3c2d.firebaseio.com",
-                projectId: "bitwise-a3c2d",
-                storageBucket: "bitwise-a3c2d.appspot.com",
-                messagingSenderId: "1025486551841",
-                appId: "1:1025486551841:web:24f84a09e2f70631625c60",
-                measurementId: "G-9DCMV9YV2N"
-            };
-            firebase.initializeApp(firebaseConfig);
-            const db = firebase.firestore();
-        </script>
+        <div class="ui top attached tabular menu">
+            <a class="item active" data-tab="all-posts">All Posts</a>
+            <a class="item" data-tab="timeline" id="timeline-tab" style="display:none;">My Timeline</a>
+        </div>
         
-        <script src="js/login.js" type="text/babel"></script>
-        <script src="js/index.js"></script>
-    </body>
+        <div class="ui bottom attached tab segment active" data-tab="all-posts" id="all-posts-container">
+            <div class="ui inline centered active slow violet double loader"></div>
+        </div>
+        
+        <div class="ui bottom attached tab segment" data-tab="timeline" id="timeline-container">
+            <div class="ui inline centered active slow violet double loader"></div>
+        </div>
+
+        <style>
+            .ui.comments {
+                max-width: 100%;
+            }
+
+            .ui.comments .comment .avatar img,
+            .ui.comments .comment img.avatar {
+                height: auto;
+            }
+
+            .ui.comments .comment a.author:hover {
+                color: #6435c9;
+            }
+        </style>
+    </div>
+
+    <script>
+        // Initialize Firebase
+        var firebaseConfig = {
+            apiKey: "AIzaSyBJTDxfjl_xpPXSuiZmcriEpRj4KPPiVpg",
+            authDomain: "bitwise-a3c2d.firebaseapp.com",
+            databaseURL: "https://bitwise-a3c2d.firebaseio.com",
+            projectId: "bitwise-a3c2d",
+            storageBucket: "bitwise-a3c2d.appspot.com",
+            messagingSenderId: "1025486551841",
+            appId: "1:1025486551841:web:24f84a09e2f70631625c60",
+            measurementId: "G-9DCMV9YV2N"
+        };
+        firebase.initializeApp(firebaseConfig);
+        const db = firebase.firestore();
+    </script>
+    <script src="/js/endless.js" type="text/babel"></script>
+    <script src="/js/index.js" type="text/babel"></script>
+    <script src="/js/post.js" type="text/babel"></script>
+    <script src="/js/login.js" type="text/babel"></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/public/js/account.js b/public/js/account.js
index d2a3fdd..6a70657 100644
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -22,7 +22,7 @@ firebase.auth().onAuthStateChanged(function(user) {
         loadDropdown();
         loadAccountInfo();
     } else {
-        location.replace("/common/login.html");
+        location.replace("/index.html");
     }
 });
 
diff --git a/public/js/create_post.js b/public/js/create_post.js
index ada1a2d..076f027 100644
--- a/public/js/create_post.js
+++ b/public/js/create_post.js
@@ -35,7 +35,7 @@ firebase.auth().onAuthStateChanged(function(user) {
         $("#login-button").hide();
         $("#user-dropdown").show();
     } else {
-        location.replace("/common/login.html");
+        location.replace("/index.html");
     }
 });
   
diff --git a/public/js/index.js b/public/js/index.js
index 0f59d54..bbbf0aa 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,161 +1,122 @@
-// DOM elements
-const postForm      = document.querySelector('#create-post-form');
-const postList      = document.querySelector('#timeline');
-
-// create element & render cafe
-function renderPost(doc){
-  let li = document.createElement('li');
-  let title = document.createElement('span');
-  let topic = document.createElement('span');
-  let content = document.createElement('span');
-  let author = document.createElement('span');
-  let created = document.createElement('span');
-  let img = document.createElement('img');
-  let cross = document.createElement('div');
-
-  li.setAttribute('data-id', doc.id);
-  if (doc.data().topic != '') {
-    topic.textContent = "topic: " + doc.data().topic;
-  } 
-  title.textContent = doc.data().title;
-  content.textContent = doc.data().content;
-  //Check anon flag
-  if (doc.data().anon == true) {
-    author.textContent = "[anonymous]"
-  } else {
-    author.textContent = "author: " + doc.data().author;
-  }
-  created.textContent = doc.data().created.toDate();
-  img.setAttribute('src', doc.data().image);
-  cross.textContent = 'delete';
-
-  li.appendChild(topic);
-  li.appendChild(title);
-  li.appendChild(content);
-  li.appendChild(author);
-  li.appendChild(created);
-  if (doc.data().image != null) {
-    li.appendChild(img);
-  }
-  li.appendChild(cross);
-
-  postList.append(li);
-
-  // deleting data
-  cross.addEventListener('click', (e) => {
-      e.stopPropagation();
-      let id = e.target.parentElement.getAttribute('data-id');
-      db.collection('posts').doc(id).delete();
-  });
-}
-
-//okay well i dont WANT a real time listener...i want infinite scroll and not auto-updating posts
-var endless = {
-  /* (A) FLAGS */
-  hasMore: true, // have more contents to load?
-  proceed: true, // is another page currently loading?
-  first: true, // is this the first loading cycle?
-  prevDoc: null,
- 
-  /* (B) LOAD CONTENTS */
-  load: function () { 
-    // (B1) BLOCK MORE LOADING UNTIL THIS PAGE IS DONE
-    if (endless.proceed && endless.hasMore) {
-      endless.proceed = false;
- 
-      // pull posts
-      if (endless.first) {
-        // load one post to start the query offset
-        // if the user isnt following anything this will need to be fixed
-
-        db.collection('posts').orderBy('created', 'desc').limit(6)
-          .get().then(function (querySnapshot) {
-            if (querySnapshot.empty) {
-              endless.hasMore = false;
-              endless.first = false;
-              // do something
-              // TODO: make this display "you arent following anyone" when this returns nothing
-            } else {
-              querySnapshot.forEach( doc => {
-                endless.prevDoc = doc;
-                renderPost(doc);
-                endless.proceed = true;
-                endless.first = false;
-              });
-            }
-        });
-
-      } 
-
-      if (!endless.first && endless.hasMore) {
-        db.collection('posts').orderBy('created', 'desc')
-        .startAfter(endless.prevDoc).limit(2).get().then( querySnapshot => {
-          if (querySnapshot.empty) {
-            // theres none left.
-            endless.hasMore = false;
-            // idk display something
-          } else {
-            querySnapshot.forEach(function(doc) {
-              endless.prevDoc = doc;
-              renderPost(doc);
-              endless.proceed = true;
-              endless.hasMore = true;
-            });
-          }
-        });
-      } 
-    }
-  },
- 
-  /* (C) INIT */
-  init: function(){
-    // (C1) ATTACH SCROLL LISTENER
-    // Credits: https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom
-    window.addEventListener("scroll", function(){
-      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
-        endless.load();
-      }
-    });
-
-    // (C2) INITIAL LOAD CONTENTS
-    endless.load();
-  }
-};
-
-
-// setup materialize components
-document.addEventListener('DOMContentLoaded', function() {
-  // 
-  endless.init();
-});
-
-// ------------------------------------------------------------------------------------------ \\
 var UID = null;
 var storage = firebase.storage();
 var storageRef = storage.ref();
 var docRef = null;
 
-firebase.auth().onAuthStateChanged(function(user) {
+firebase.auth().onAuthStateChanged(function (user) {
+  loadAllPosts();
+
   if (user) {
     UID = user.uid;
     docRef = db.collection("users").doc(UID);
 
-    loadDropdown();
-
     $("#login-button").hide();
     $("#user-dropdown").show();
-    $("#create-post-button").show();
+
+    loadDropdown();
+
+    $('#create-post-button').show();
+    $("#timeline-tab").show();
+
+    loadMyTimeline(UID);
   } else {
+    docRef = null;
+
     $("#login-button").show();
     $("#user-dropdown").hide();
-    $("#create-post-button").hide();
+
+    $('#create-post-button').hide();
+    $("#timeline-tab").hide();
   }
 });
 
+// Initialize dynamic tab groups
+$('.menu .item').tab();
+
 function loadDropdown() {
-  docRef.get().then(function(doc) {
-      $('#user-own-profile').attr('href', '/user/'+doc.data().username);
-      $('#profile-icon').attr('src', doc.data().profileImageURL);
-      document.getElementById('account-dropdown').innerHTML = '&nbsp; ' + doc.data().username;
+  docRef.get().then(function (doc) {
+    $('#user-own-profile').attr('href', '/user/' + doc.data().username);
+    $('#profile-icon').attr('src', doc.data().profileImageURL);
+    document.getElementById('account-dropdown').innerHTML = '&nbsp; ' + doc.data().username;
+  });
+}
+
+function loadAllPosts() {
+  db.collection('posts')
+    .orderBy('created', 'desc').get().then(querySnapshot => {
+      if (querySnapshot.empty) {
+        // Display error message
+        ReactDOM.render(<div className="ui red message">No Posts Available!</div>, document.querySelector('#all-posts-container'));
+      } else {
+        var posts = [];
+        var first = true;
+
+        // Loop through each post to add formatted JSX element to list
+        querySnapshot.forEach(doc => {
+          // Only display parent posts (no comments)
+          if (doc.data().parent == null) {
+              var postProps = {
+                postID: doc.id,
+                type: "post",
+                divider: !first
+              };
+
+              posts.push(<Post {...postProps} key={doc.id} />);
+
+              first = false;
+          }
+        });
+
+        // Threaded post container
+        ReactDOM.render(<div className="ui threaded comments">
+          {posts}
+        </div>,
+          document.querySelector('#all-posts-container'));
+      }
+    })
+}
+
+function loadMyTimeline(myUID) {
+  db.collection('users').doc(myUID).get().then(userDoc => {
+
+    let followingUsers = userDoc.data().followingUsers,
+        followingTopics = userDoc.data().followingTopics;
+    followingUsers.push(myUID);
+    
+    db.collection('posts')
+      .orderBy('created', 'desc').get().then(querySnapshot => {
+        if (querySnapshot.empty) {
+          // Display error message
+          ReactDOM.render(<div className="ui red message">No Posts Available!</div>, document.querySelector('#timeline-container'));
+        } else {
+          var posts = [];
+          var first = true;
+
+          // Loop through each post to add formatted JSX element to list
+          querySnapshot.forEach(doc => {
+            // Display only followed users or topics
+            if (followingUsers.includes(doc.data().authorUID) || followingTopics.includes(doc.data().topic)) {
+              // Only display parent posts (no comments)
+              if (doc.data().parent == null) {
+                var postProps = {
+                  postID: doc.id,
+                  type: "post",
+                  divider: !first
+                };
+
+                posts.push(<Post {...postProps} key={doc.id} />);
+
+                first = false;
+              }
+            }
+          });
+
+          // Threaded post container
+          ReactDOM.render(<div className="ui threaded comments">
+            {posts}
+          </div>,
+            document.querySelector('#timeline-container'));
+        }
+      });
   });
 }
\ No newline at end of file
diff --git a/public/js/post.js b/public/js/post.js
index d1d0a97..43eb35d 100644
--- a/public/js/post.js
+++ b/public/js/post.js
@@ -13,6 +13,8 @@
 // Add custome onInteract callback to post to live update on profile
 // --Refresh button does not refresh 'Overview' tab
 // Prevent topics/usernames with spaces (or other weird characters)
+// --even on new account creation!
+// Fix deleteing top post border issue
 // ************************************************************** \\
 
 'use strict';
diff --git a/public/js/profile.js b/public/js/profile.js
index 64dafec..aa95009 100644
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -74,7 +74,6 @@ function changeFollowState() {
     loadFollowButton();
 }
 
-
 // Initialize dynamic tab groups
 $('.menu .item').tab();
 
@@ -91,6 +90,7 @@ firebase.auth().onAuthStateChanged(function (user) {
             //following = [viewUID];
             //endlessObj.init(following);
             loadUserPosts(viewUID);
+            loadUserPostsAndReplies(viewUID);
 
             if (user) {
                 UID = user.uid;
@@ -131,7 +131,8 @@ function refreshTabs() {
     $('#refresh-loader').show();
 
     db.collection('users').doc(viewUID).get().then((userDoc) => {
-        loadUserPosts(viewUID)
+        loadUserPosts(viewUID);
+        loadUserPostsAndReplies(viewUID);
         loadFollowedUsers(userDoc);
         loadFollowedTopics(userDoc);
         loadSavedPosts(userDoc);
@@ -149,7 +150,7 @@ function loadUserPosts(viewUID) {
     .orderBy('created', 'desc').get().then(querySnapshot => {
         if (querySnapshot.empty) {
             // Display error message
-            ReactDOM.render(<div className="ui red message">No Posts Available!</div>, document.querySelector('#feed'));
+            ReactDOM.render(<div className="ui red message">No Posts Available!</div>, document.querySelector('#all-posts-container'));
         } else {
             var posts = [];
             var first = true;
@@ -182,6 +183,41 @@ function loadUserPosts(viewUID) {
     })
 }
 
+function loadUserPostsAndReplies(viewUID) {
+    db.collection('posts')
+    .where('authorUID', '==', viewUID)
+    .orderBy('created', 'desc').get().then(querySnapshot => {
+        if (querySnapshot.empty) {
+            // Display error message
+            ReactDOM.render(<div className="ui red message">No Posts Available!</div>, document.querySelector('#all-posts-replies-container'));
+        } else {
+            var posts = [];
+            var first = true;
+    
+            // Loop through each post to add formatted JSX element to list
+            querySnapshot.forEach(doc => {
+                if (!doc.data().anon || doc.data().authorUID == UID) {
+                    var postProps = {
+                        postID: doc.id,
+                        type: "post",
+                        divider: !first
+                    };
+
+                    posts.push(<Post {...postProps} key={Math.random()}/>);
+
+                    first = false;
+                }
+            });
+    
+            // Threaded post container
+            ReactDOM.render(<div className="ui threaded comments">
+                                {posts}
+                            </div>,
+                            document.querySelector('#all-posts-replies-container'));
+        }
+    })
+}
+
 function loadFollowedUsers(userDoc) {
     var numFollowing = userDoc.data().followingUsers.length;
     if (numFollowing == 0) {
