diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index da787e8..91b623f 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -66,6 +66,22 @@ strong {
/* MISC */
+.navBarText {
+ height: 61px;
+ width: 1192px;
+ position: absolute;
+ left: calc(50% - 596px);
+ text-align: center;
+}
+
+.navBarText span {
+ color: #00b5ad;
+ height: 61px;
+ line-height: 61px;
+ vertical-align: middle;
+ font-size: 1.5em;
+}
+
.form-textarea-required {
color: rgb(159, 58, 56) !important;
outline-color: rgb(159, 58, 56) !important;
@@ -167,8 +183,4 @@ a {
.fill {
width: 100%;
height: 100%;
-}
-
-.vis { /* For UX developing */
- border: 1px solid red;
}
\ No newline at end of file
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index cd2458a..b7b50f2 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -41,6 +41,9 @@ class NavBar extends Component {
}
+
+ {this.props.navBarTitle !== '' && {this.props.navBarTitle}}
+
);
}
@@ -51,9 +54,10 @@ NavBar.contextTypes = {
};
const mapStateToProps = state => {
- return {
- hasSignedUp: state.user.hasSignedUp
- }
+ return {
+ hasSignedUp: state.user.hasSignedUp,
+ navBarTitle: state.interface.navBarTitle
+ }
};
export default drizzleConnect(NavBar, mapStateToProps);
\ No newline at end of file
diff --git a/src/components/Post.js b/src/components/Post.js
index d446f62..d6bbd90 100644
--- a/src/components/Post.js
+++ b/src/components/Post.js
@@ -3,6 +3,7 @@ import { Link, withRouter } from 'react-router';
import { drizzleConnect } from 'drizzle-react';
import PropTypes from 'prop-types';
+import { Transition } from 'semantic-ui-react'
import { Grid, Divider, Button, Icon, Label } from 'semantic-ui-react'
import TimeAgo from 'react-timeago';
@@ -15,12 +16,18 @@ class Post extends Component {
super(props);
this.fetchPost = this.fetchPost.bind(this);
+ if (props.getFocus){
+ this.postRef = React.createRef();
+ }
this.orbitPostData = {
content: "",
subject: ""
};
this.orbitPostDataFetchStatus = "pending";
+ this.state = {
+ animateOnToggle: true
+ }
}
async fetchPost(postID) {
@@ -44,6 +51,7 @@ class Post extends Component {
}
}
this.orbitPostDataFetchStatus = "fetched";
+ this.readyForAnimation = true;
}
render(){
@@ -57,74 +65,76 @@ class Post extends Component {
);
return (
-
-
- #{this.props.postIndex}
-
-
-
-
- {this.props.blockchainData[0].returnData !== null
- ? {event.stopPropagation()}}>
- {avatarView}
-
- :avatarView
- }
-
-
-
-
-
-
- {this.props.blockchainData[0].returnData !== null
- ?this.props.blockchainData[0].returnData[2]
- :"Username"
+
+
+
+ #{this.props.postIndex}
+
+
+
+
+ {this.props.blockchainData[0].returnData !== null
+ ? {event.stopPropagation()}}>
+ {avatarView}
+
+ :avatarView
+ }
+
+
+
+
+
+
+ {this.props.blockchainData[0].returnData !== null
+ ?this.props.blockchainData[0].returnData[2]
+ :"Username"
+ }
+
+
+
+ {this.props.blockchainData[0].returnData !== null &&
+
}
-
-
-
- {this.props.blockchainData[0].returnData !== null &&
-
+
+
+
+
+
+ Subject: {this.orbitPostData.subject}
+
+
+
+
+ {this.orbitPostData.content
+ ?
+ :
Post content...
}
-
-
-
-
-
- Subject: {this.orbitPostData.subject}
-
-
+
-
- {this.orbitPostData.content
- ?
- :
Post content...
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
@@ -133,6 +143,17 @@ class Post extends Component {
&& this.orbitPostDataFetchStatus === "pending") {
this.fetchPost(this.props.postID);
}
+ if (this.readyForAnimation){
+ if (this.postRef){
+ setTimeout(() => {
+ this.postRef.current.scrollIntoView({ block: 'start', behavior: 'smooth' });
+ setTimeout(() => {
+ this.setState({ animateOnToggle: false });
+ }, 300);
+ }, 100);
+ this.readyForAnimation = false;
+ }
+ }
}
};
diff --git a/src/components/PostList.js b/src/components/PostList.js
index 86f8fc6..3eeb5ae 100644
--- a/src/components/PostList.js
+++ b/src/components/PostList.js
@@ -17,6 +17,7 @@ const PostList = (props) => {
avatarUrl={""}
postIndex={index}
postID={postID}
+ getFocus={props.focusOnPost === postID ? true : false}
key={postID}
/>
);
diff --git a/src/components/ProfileInformation.js b/src/components/ProfileInformation.js
index 5c7ca37..00f6159 100644
--- a/src/components/ProfileInformation.js
+++ b/src/components/ProfileInformation.js
@@ -7,10 +7,6 @@ import UsernameFormContainer from '../containers/UsernameFormContainer';
const ProfileInformation = (props) => {
let transaction = props.blockchainData
- .find(transaction => transaction.callInfo.method === "getUsername");
- let username = transaction ? transaction.returnData : "";
-
- transaction = props.blockchainData
.find(transaction => transaction.callInfo.method === "getUserDateOfRegister");
let dateOfRegister = transaction ? transaction.returnData : "";
@@ -24,12 +20,12 @@ const ProfileInformation = (props) => {
size="40"
className="inline user-avatar"
src={props.avatarUrl}
- name={username}/>}
+ name={props.username}/>}
Username: |
- {username} |
+ {props.username} |
Account address: |
diff --git a/src/containers/ProfileContainer.js b/src/containers/ProfileContainer.js
index 3399531..d0ada67 100644
--- a/src/containers/ProfileContainer.js
+++ b/src/containers/ProfileContainer.js
@@ -9,6 +9,7 @@ import ProfileInformation from '../components/ProfileInformation';
import TopicList from '../components/TopicList';
import PostList from '../components/PostList';
import LoadingSpinner from '../components/LoadingSpinner';
+import { setNavBarTitle } from '../redux/actions/userInterfaceActions';
class Profile extends Component {
constructor(props, context) {
@@ -34,10 +35,6 @@ class Profile extends Component {
( transaction.callInfo.method === "getUsername");
+ if (transaction.returnData){
+ this.username = transaction.returnData;
+ }
+ }
if (!this.topicIDs){
let transaction = this.props.blockchainData
.find(transaction => transaction.callInfo.method === "getUserTopics");
@@ -117,6 +122,12 @@ class Profile extends Component {
}
}
}
+
+ componentDidUpdate(){
+ if (this.username){
+ this.props.store.dispatch(setNavBarTitle(this.username));
+ }
+ }
}
Profile.contextTypes = {
@@ -145,6 +156,10 @@ class ProfileContainer extends Component {
this.profile = ({
posting: false
}));
- //TODO reload topic
}
render() {
@@ -77,7 +81,8 @@ class Topic extends Component {
if (this.props.blockchainData[0].status === "success") {
topicContents = (
(
-
+
{this.state.posting &&
- Magic elfs are processing your nobel request.
+ Magic elves are processing your noble request.
diff --git a/src/redux/actions/userInterfaceActions.js b/src/redux/actions/userInterfaceActions.js
index 77591e0..3d42d8a 100644
--- a/src/redux/actions/userInterfaceActions.js
+++ b/src/redux/actions/userInterfaceActions.js
@@ -2,11 +2,19 @@
export const SHOW_PROGRESS_BAR = 'SHOW_PROGRESS_BAR';
export const HIDE_PROGRESS_BAR = 'HIDE_PROGRESS_BAR';
+export const SET_NAVBAR_TITLE = 'SET_NAVBAR_TITLE';
export function showProgressBar(){
- return { type: 'SHOW_PROGRESS_BAR'};
+ return { type: SHOW_PROGRESS_BAR};
}
export function hideProgressBar(){
- return { type: 'HIDE_PROGRESS_BAR'};
+ return { type: HIDE_PROGRESS_BAR};
+}
+
+export function setNavBarTitle(newTitle){
+ return {
+ type: SET_NAVBAR_TITLE,
+ title: newTitle
+ };
}
\ No newline at end of file
diff --git a/src/redux/reducer/userInterfaceReducer.js b/src/redux/reducer/userInterfaceReducer.js
index e0baf4f..6d6c663 100644
--- a/src/redux/reducer/userInterfaceReducer.js
+++ b/src/redux/reducer/userInterfaceReducer.js
@@ -1,7 +1,12 @@
-import { SHOW_PROGRESS_BAR, HIDE_PROGRESS_BAR } from '../actions/userInterfaceActions';
+import {
+ SHOW_PROGRESS_BAR,
+ HIDE_PROGRESS_BAR,
+ SET_NAVBAR_TITLE
+} from '../actions/userInterfaceActions';
const initialState = {
- displayProgressBar: false
+ displayProgressBar: false,
+ navBarTitle: ''
};
const userInterfaceReducer = (state = initialState, action) => {
@@ -14,6 +19,10 @@ const userInterfaceReducer = (state = initialState, action) => {
return {
displayProgressBar: false
};
+ case SET_NAVBAR_TITLE:
+ return {
+ navBarTitle: action.title
+ }
default:
return state;
}