From 810e3a5a20dfd93ae348830675551e334b75dbd7 Mon Sep 17 00:00:00 2001 From: Apostolof Date: Thu, 21 Jun 2018 21:15:28 +0300 Subject: [PATCH] Add Navbar title, Scroll to post requested in the url --- src/assets/css/App.css | 20 ++- src/components/NavBar.js | 10 +- src/components/Post.js | 151 ++++++++++++---------- src/components/PostList.js | 1 + src/components/ProfileInformation.js | 8 +- src/containers/ProfileContainer.js | 23 +++- src/containers/TopicContainer.js | 11 +- src/containers/UsernameFormContainer.js | 2 +- src/redux/actions/userInterfaceActions.js | 12 +- src/redux/reducer/userInterfaceReducer.js | 13 +- 10 files changed, 161 insertions(+), 90 deletions(-) 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}/>} - + 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; }
Username:{username}{props.username}
Account address: