Merge fixes, Add sticky navBar, Fix various views

src/assets/css/App.css

@@ -23,7 +23,7 @@ strong {
 }
 
 .view-container {
-  width: 70%;
+  width: 60%;
   margin: 10px auto;
 }
 
@@ -77,6 +77,13 @@ strong {
   background: #0c1a2b;
 }
 
+.stick {
+  z-index: 2;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
 /* TOPICS */
 
 .topic {
@@ -142,6 +149,12 @@ strong {
   margin-right: 11.25px;
 }
 
+.user-avatar {
+  width: 52px;
+  height: 52px;
+  text-align: center;
+}
+
 .stretch-space-between {
   display: flex;
   flex-flow: row nowrap;
@@ -190,6 +203,10 @@ a {
   text-decoration: none;
 }
 
+.post-content a{
+  color: #039be5;
+}
+
 .center-in-parent {
   width: 100%;
   height: 100%;

src/components/NavBar.js

@@ -1,17 +1,25 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { drizzleConnect } from 'drizzle-react';
 import { Link } from 'react-router';
 
-const NavBar = (props) => {
+class NavBar extends Component {
+    constructor(props){
+        super(props);
+
+        this.handleScroll = this.handleScroll.bind(this);
+
+        this.navRef = React.createRef();
+    }
+
+    render() {
         return (
-        <nav>
+            <nav ref={this.navRef}>
                 <div className="nav-wrapper navColor">
-            {/*<a href="#" className="brand-logo right">Logo</a>*/}
                 <ul id="nav-mobile" className="left hide-on-med-and-down">
                     <li>
                         <Link to="/">Home</Link>
                     </li>
-                {props.hasSignedUp &&
+                    {this.props.hasSignedUp &&
                         <li>
                           <Link to="/profile">Profile</Link>
                         </li>
@@ -20,6 +28,24 @@ const NavBar = (props) => {
               </div>
           </nav>
         );
+    }
+
+    componentDidMount(){
+        this.headerHeight = this.navRef.current.offsetTop;
+        window.addEventListener('scroll', this.handleScroll);
+    }
+
+    componentWillUnmount(){
+        window.removeEventListener('scroll', this.handleScroll);
+    }
+
+    handleScroll(){
+        if (window.pageYOffset >= this.headerHeight) {
+            this.navRef.current.classList.add("stick")
+        } else {
+            this.navRef.current.classList.remove("stick");
+        }
+    }
 };
 
 const mapStateToProps = state => {

src/components/NewPost.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import uuidv4 from 'uuid/v4';
 
+import TimeAgo from 'react-timeago';
 import UserAvatar from 'react-user-avatar';
 import ReactMarkdown from 'react-markdown';
 
@@ -18,6 +19,9 @@ class NewPost extends Component {
         this.validateAndPost = this.validateAndPost.bind(this);
         this.pushToDatabase = this.pushToDatabase.bind(this);
 
+        this.newPostOuterRef = React.createRef();
+        this.subjectInputRef = React.createRef();
+
         this.transactionProgressText = [];
         this.drizzle = context.drizzle;
 
@@ -84,7 +88,7 @@ class NewPost extends Component {
 
     render() {
         return (
-            <div className="post card">
+            <div className="post" ref={this.newPostOuterRef}>
                 {this.state.creatingPost && <div id="overlay">
                         <div id="overlay-content">
                             <p><i className="fas fa-spinner fa-3x fa-spin"></i></p>
@@ -93,25 +97,37 @@ class NewPost extends Component {
                         </div>
                     </div>
                 }
-                <div className="post-header">
+                <div className="row">
+                    <div className="col s1">
                         <UserAvatar
                             size="40"
                             className="inline user-avatar"
-                        src={this.props.user.avatarUrl}
+                            src={this.props.avatarUrl}
-                        name={this.props.user.username}/>
+                            name={this.props.user.username}
-                    <p className="inline no-margin">
+                        />
-                        <strong>{this.props.user.username}<br/>Subject: {this.state.postSubjectInput}</strong>
+                    </div>
-                    </p>
+                    <div className="col s11">
-                    <div className="post-info">
+                        <div>
-                        <span></span>
+                            <div className="stretch-space-between">
-                        <span>#{this.props.postIndex}</span>
+                                <strong><span>{this.props.user.username}</span></strong>
+                                <span className="grey-text text-darken-2">
+                                    {this.state.previewEnabled && 
+                                        <TimeAgo date={this.state.previewDate}/>
+                                    }{this.state.previewEnabled && ","} #{this.props.postIndex}
+                                </span>
                             </div>
+                            <div className="stretch-space-between">
+                                <strong><span>
+                                    {this.state.previewEnabled &&
+                                        ("Subject: " + this.state.postSubjectInput)
+                                    }
+                                </span></strong>
                             </div>
-                <hr/>
+                            <div>
-                <div className="post-content">
                                 <form className="topic-form">
                                     {this.state.previewEnabled
-                            ? <ReactMarkdown source={this.state.postContentInput} className="markdownPreview" />
+                                        ? <ReactMarkdown source={this.state.postContentInput}
+                                            className="markdownPreview" />
                                         : [
                                         <input key={"postSubjectInput"}
                                             name={"postSubjectInput"}
@@ -120,6 +136,7 @@ class NewPost extends Component {
                                             value={this.state.postSubjectInput}
                                             placeholder="Subject"
                                             id="postSubjectInput"
+                                            ref={this.subjectInputRef}
                                             onChange={this.handleInputChange} />,
                                         <textarea key={"postContentInput"}
                                             name={"postContentInput"}
@@ -129,23 +146,28 @@ class NewPost extends Component {
                                             onChange={this.handleInputChange} />
                                         ]}
                                     <button key="submit"
+                                        className="btn waves-effect waves-teal white black-text"
                                         type="button"
                                         onClick={this.validateAndPost}>
-                                Post
+                                            <i className="material-icons right">send</i>Post
                                     </button>
-                        <button className="margin-left-small"
+                                    <button className="waves-effect waves-orange btn white black-text margin-left-small"
                                         type="button"
                                         onClick={this.handlePreviewToggle}>
-                                {this.state.previewEnabled ? "Edit" : "Preview"}
+                                        <span>{this.state.previewEnabled ? "Edit" : "Preview"}</span>
                                     </button>
-                        <button className="margin-left-small"
+                                    <button className="btn red margin-left-small"
                                         type="button"
                                         onClick={this.props.onCancelClick}>
-                                Cancel
+                                        <span>Cancel</span>
                                     </button>
                                 </form>
                             </div>
                         </div>
+                    </div>
+                </div>
+                <div className="divider"></div>
+            </div>
         );
     }
 
@@ -298,6 +320,16 @@ class NewPost extends Component {
             }
         }
     }
+
+    componentDidUpdate(prevProps, prevState){
+        if (!this.state.previewEnabled && prevState.previewEnabled){
+            this.newPostOuterRef.current.scrollIntoView(true);
+        }
+    }
+
+    componentDidMount(){
+        this.newPostOuterRef.current.scrollIntoView(true);
+    }
 }
 
 NewPost.contextTypes = {

src/components/Post.js

@@ -4,7 +4,7 @@ import { drizzleConnect } from 'drizzle-react';
 import PropTypes from 'prop-types';
 
 import TimeAgo from 'react-timeago';
-import epochTimeConverter from '../helpers/EpochTimeConverter'
+import epochTimeConverter from '../helpers/EpochTimeConverter';
 import UserAvatar from 'react-user-avatar';
 import ReactMarkdown from 'react-markdown';
 
@@ -34,20 +34,17 @@ class Post extends Component {
     render(){
         let avatarView = (this.props.blockchainData[0].returnData
             ? <UserAvatar
-                size="40"
+                size="52"
-                className="inline user-avatar"
+                className="inline"
                 src={this.props.avatarUrl}
                 name={this.props.blockchainData[0].returnData[2]}/>
-            : <div className="user-avatar" style={{width: "40px"}}></div>
+            : <div></div>
         );
 
         return (
-            <div className="post"
+            <div className="post">
-                onClick={() => { this.context.router.push("/topic/"
-                    + this.props.blockchainData[0].returnData[4] + "/"
-                    + this.props.postID)}}>
                 <div className="row">
-                    <div className="col s1">
+                    <div className="col s1 user-avatar">
                         {this.props.blockchainData[0].returnData !== null
                             ?<Link to={"/profile/" + this.props.blockchainData[0].returnData[1]
                                 + "/" + this.props.blockchainData[0].returnData[2]}
@@ -60,7 +57,7 @@ class Post extends Component {
                     <div className="col s11">
                         <div>
                             <div className="stretch-space-between">
-                                <strong><span className={this.props.blockchainData[0].returnData !== null ? "" : "grey-text"}}>
+                                <strong><span className={this.props.blockchainData[0].returnData !== null ? "" : "grey-text"}>
                                     {this.props.blockchainData[0].returnData !== null
                                         ?this.props.blockchainData[0].returnData[2]
                                         :"Username"
@@ -69,7 +66,7 @@ class Post extends Component {
                                 <span className="grey-text text-darken-2">
                                     {this.props.blockchainData[0].returnData !== null &&
                                         <TimeAgo date={epochTimeConverter(this.props.blockchainData[0].returnData[3])}/>
-                            		}, #{this.props.postIndex}
+                                    }{this.props.blockchainData[0].returnData !== null && ","} #{this.props.postIndex}
                                 </span>
                             </div>
                             <div className="stretch-space-between">
@@ -77,7 +74,7 @@ class Post extends Component {
                                     Subject: {this.orbitPostData.subject}
                                 </span></strong>
                             </div>
-	                        <div>
+                            <div className="post-content">
                                 {this.orbitPostData.content
                                     ? <ReactMarkdown source={this.orbitPostData.content} />
                                     : <p className="grey-text">Post content...</p>
@@ -95,7 +92,10 @@ class Post extends Component {
                         <i className="material-icons waves-effect waves-teal circle">
                             keyboard_arrow_down
                         </i>
-	                    <i className="material-icons waves-effect waves-teal circle" onClick={props.onHrefClick}>
+                        <i className="material-icons waves-effect waves-teal circle"
+                            onClick={() => { this.context.router.push("/topic/"
+                                + this.props.blockchainData[0].returnData[4] + "/"
+                                + this.props.postID)}}>
                             link
                         </i>
                     </div>

src/components/Topic.js

@@ -45,7 +45,7 @@ class Topic extends Component {
                     <div className="card-content">
                         <div className={"topic-subject" + (this.topicSubject ? "" : "grey-text")}>
                             <p>
-                                {topic.topicSubject !== null ? topic.topicSubject : "Subject"}
+                                {this.topicSubject !== null ? this.topicSubject : "Subject"}
                             </p>
                         </div>
                         <hr/>

src/containers/ProfileContainer.js

@@ -26,7 +26,7 @@ class Profile extends Component {
 
         this.state = {
             viewSelected: "profile-info-tab",
-            userAddress: this.profile.userAddress
+            userAddress: this.props.params.address ? this.props.params.address : this.props.user.address
         };
     }
 

src/containers/TopicContainer.js

@@ -66,14 +66,15 @@ class Topic extends Component {
         } else {
             topicContents = (
                 (<div style={{marginBottom: '100px'}}>
+                    {this.postList}
                     {this.state.posting &&
                         <NewPost topicID={this.state.topicID}
                             subject={this.state.topicSubject}
+                            postIndex={this.props.blockchainData[0].returnData[4].length}
                             onCancelClick={() => {this.handleClick()}}
                             onPostCreated={() => {this.postCreated()}}
                         />
                     }
-                    {this.postList}
                     {!this.state.posting &&
                         <FloatingButton onClick={this.handleClick}/>
                     }