Make mapStateToProps more specific, Refactor

app/src/containers/CoreLayoutContainer.js → app/src/components/CoreLayoutContainer.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import NavBarContainer from './NavBarContainer';
-import RightSideBarContainer from './TransactionsMonitorContainer';
+import NavBarContainer from '../containers/NavBarContainer';
+import RightSideBarContainer from '../containers/TransactionsMonitorContainer';
 // Styles
 import '../assets/fonts/fontawesome-free-5.7.2/all.js'; // TODO: check https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
 import '../assets/css/App.css';
@@ -13,8 +13,6 @@ import '../assets/css/start-topic-container.css';
 import '../assets/css/topic-container.css';
 import '../assets/css/profile-container.css';
 
-/* import TransactionsMonitorContainer from '../../containers/TransactionsMonitorContainer'; */
-
 const CoreLayout = ({ children }) => (
   <div className="App">
     <NavBarContainer />

app/src/containers/HomeContainer.js → app/src/components/HomeContainer.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import BoardContainer from './BoardContainer';
+import BoardContainer from '../containers/BoardContainer';
 
 class HomeContainer extends Component {
   render() {

app/src/containers/BoardContainer.js

@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom';
 import { Header } from 'semantic-ui-react';
 import { drizzle } from '../index';
 
-import TopicList from '../components/TopicList';
+import TopicList from './TopicList';
 import FloatingButton from '../components/FloatingButton';
 
 /* import { showProgressBar, hideProgressBar } from '../redux/actions/userInterfaceActions'; */

app/src/components/NewPost.js → app/src/containers/NewPost.js

@@ -86,7 +86,7 @@ class NewPost extends Component {
       previewDate, postSubjectInputEmptySubmit, postSubjectInput, postContentInputEmptySubmit,
       postContentInput, previewEnabled
     } = this.state;
-    const { postIndex, avatarUrl, user, onCancelClick } = this.props;
+    const { postIndex, avatarUrl, username, onCancelClick } = this.props;
 
     return (
       <div className="post" ref={this.newPostOuterRef}>
@@ -103,13 +103,13 @@ class NewPost extends Component {
                 size="52"
                 className="inline user-avatar"
                 src={avatarUrl}
-                name={user.username}
+                name={username}
               />
             </Grid.Column>
             <Grid.Column width={15}>
               <div className="">
                 <div className="stretch-space-between">
-                  <span><strong>{user.username}</strong></span>
+                  <span><strong>{username}</strong></span>
                   <span className="grey-text">
                     {previewEnabled
                                         && <TimeAgo date={previewDate} />
@@ -218,15 +218,14 @@ NewPost.propTypes = {
   topicID: PropTypes.number.isRequired,
   postIndex: PropTypes.number.isRequired,
   avatarUrl: PropTypes.string,
-  user: PropTypes.object.isRequired,
+  username: PropTypes.string.isRequired,
   onCancelClick: PropTypes.func.isRequired,
   dispatch: PropTypes.func.isRequired,
   onPostCreated: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => ({
-  orbitDB: state.orbitDB,
-  user: state.user
+  username: state.user.username
 });
 
 export default connect(mapStateToProps)(NewPost);

app/src/components/Post.js → app/src/containers/Post.js

@@ -74,10 +74,10 @@ class Post extends Component {
   }
 
   async fetchPost(postID) {
-    const { user, postData, orbitDB } = this.props;
+    const { address, postData, orbitDB } = this.props;
     let orbitPostData;
 
-    if (postData.value[1] === user.address) {
+    if (postData.value[1] === address) {
       orbitPostData = orbitDB.postsDB.get(postID);
     } else {
       const fullAddress = `/orbitdb/${postData.value[0]}/posts`;
@@ -288,7 +288,7 @@ class Post extends Component {
 
 Post.propTypes = {
   getFocus: PropTypes.bool.isRequired,
-  user: PropTypes.object.isRequired,
+  address: PropTypes.string.isRequired,
   orbitDB: PropTypes.object.isRequired,
   avatarUrl: PropTypes.string,
   postIndex: PropTypes.number.isRequired,
@@ -302,7 +302,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
 }, dispatch);
 
 const mapStateToProps = state => ({
-  user: state.user,
+  address: state.user.address,
   orbitDB: state.orbit
 });
 

app/src/containers/ProfileContainer.js

@@ -6,9 +6,9 @@ import { connect } from 'react-redux';
 import { Tab } from 'semantic-ui-react';
 import { drizzle } from '../index';
 
-import ProfileInformation from '../components/ProfileInformation';
-import TopicList from '../components/TopicList';
-import PostList from '../components/PostList';
+import ProfileInformation from './ProfileInformation';
+import TopicList from './TopicList';
+import PostList from './PostList';
 import LoadingSpinner from '../components/LoadingSpinner';
 import { setNavBarTitle } from '../redux/actions/userInterfaceActions';
 
@@ -214,8 +214,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
 const mapStateToProps = state => ({
   user: state.user,
   drizzleStatus: state.drizzleStatus,
-  contracts: state.contracts,
-  orbitDB: state.orbitDB
+  contracts: state.contracts
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProfileContainer);

app/src/components/ProfileInformation.js → app/src/containers/ProfileInformation.js

@@ -6,7 +6,7 @@ import { drizzle } from '../index';
 
 import epochTimeConverter from '../helpers/EpochTimeConverter';
 
-import UsernameFormContainer from '../containers/UsernameFormContainer';
+import UsernameFormContainer from './UsernameFormContainer';
 
 const callsInfo = [
   {
@@ -189,8 +189,7 @@ ProfileInformation.propTypes = {
 
 const mapStateToProps = state => ({
   drizzleStatus: state.drizzleStatus,
-  contracts: state.contracts,
-  user: state.user
+  contracts: state.contracts
 });
 
 export default connect(mapStateToProps)(ProfileInformation);

app/src/containers/StartTopicContainer.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { Button, Form, Icon, TextArea } from 'semantic-ui-react';
-import NewTopicPreview from '../components/NewTopicPreview';
+import NewTopicPreview from './NewTopicPreview';
 
 import { createTopic } from '../redux/actions/transactionsActions';
 
@@ -77,9 +77,9 @@ class StartTopicContainer extends Component {
       previewDate, previewEnabled, topicSubjectInputEmptySubmit, topicSubjectInput,
       topicMessageInputEmptySubmit, topicMessageInput
     } = this.state;
-    const { user, history } = this.props;
+    const { hasSignedUp, history } = this.props;
 
-    if (!user.hasSignedUp) {
+    if (!hasSignedUp) {
       history.push('/signup');
       return (null);
     }
@@ -156,12 +156,11 @@ class StartTopicContainer extends Component {
 StartTopicContainer.propTypes = {
   dispatch: PropTypes.func.isRequired,
   history: PropTypes.object.isRequired,
-  user: PropTypes.object.isRequired
+  hasSignedUp: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = state => ({
-  orbitDB: state.orbitDB,
-  user: state.user
+  hasSignedUp: state.user.hasSignedUp
 });
 
 export default connect(mapStateToProps)(StartTopicContainer);

app/src/containers/TopicContainer.js

@@ -5,8 +5,8 @@ import { push } from 'connected-react-router';
 import { connect } from 'react-redux';
 import { drizzle } from '../index';
 
-import PostList from '../components/PostList';
-import NewPost from '../components/NewPost';
+import PostList from './PostList';
+import NewPost from './NewPost';
 import FloatingButton from '../components/FloatingButton';
 
 import { setNavBarTitle } from '../redux/actions/userInterfaceActions.js';

app/src/router/routes.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import CoreLayoutContainer from '../containers/CoreLayoutContainer';
-import HomeContainer from '../containers/HomeContainer';
+import CoreLayoutContainer from '../components/CoreLayoutContainer';
+import HomeContainer from '../components/HomeContainer';
 import SignUpContainer from '../containers/SignUpContainer';
 import StartTopicContainer from '../containers/StartTopicContainer';
 import TopicContainer from '../containers/TopicContainer';