Add separate route for SignUpContainer, Redirect / to /home, Add guest capabilities

src/assets/css/App.css

@@ -41,6 +41,7 @@ strong {
   top: 0;
   left: 0;
 }
+
 .main-panel {
   width: 60%;
   height: 100%;
@@ -105,10 +106,6 @@ strong {
   margin: 0px;
 }
 
-.margin-left-small {
-  margin-left: 7px;
-}
-
 hr {
   color: #0c1a2b;
   margin: 0px;
@@ -118,10 +115,6 @@ hr {
   outline:none !important
 }
 
-.centerDiv {
-  margin: 0 auto;
-}
-
 a {
   color:inherit;
   text-decoration: none;
@@ -175,11 +168,6 @@ a {
   height: 100%;
 }
 
-.full-width {
-  max-width: 100% !important;
-  width: 100% !important;
-}
-
 .vis { /* For UX developing */
   border: 1px solid red;
 }

src/assets/css/navbar.css

@@ -1,7 +0,0 @@
-/* NAVBAR */
-
-.nav-link:hover {
-  background: rgba(255,255,255,.08) !important;
-  color: #fff !important;
-  cursor: pointer !important;
-}

src/assets/css/start-topic-container.css

@@ -5,6 +5,6 @@
   margin: 20px 0px;
 }
 
-.markdownPreview {
+.markdown-preview {
   padding: 0px 20px;
 }

src/components/FloatingButton.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router';
 import { Button, Icon } from 'semantic-ui-react'
 
 const FloatingButton = (props) => {

src/components/NavBar.js

@@ -36,7 +36,7 @@ class NavBar extends Component {
                         Profile
                     </Menu.Item>
                     :<Menu.Menu position='right'>
-                        <Menu.Item onClick={() => {this.handleItemClick("/signUp")}}>
+                        <Menu.Item onClick={() => {this.handleItemClick("/signup")}}>
                             Sign Up
                         </Menu.Item>
                     </Menu.Menu>

src/components/NewPost.js

@@ -132,7 +132,7 @@ class NewPost extends Component {
                                     <Form className="topic-form">
                                         {this.state.previewEnabled
                                             ? <ReactMarkdown source={this.state.postContentInput}
-                                                className="markdownPreview" />
+                                                className="markdown-preview" />
                                             : [
                                             <Form.Input key={"postSubjectInput"}
                                                 name={"postSubjectInput"}
@@ -154,7 +154,6 @@ class NewPost extends Component {
                                         <br/><br/>
                                         <Button.Group>
                                             <Button key="submit"
-                                                className="btn waves-effect waves-teal white black-text"
                                                 type="button"
                                                 onClick={this.validateAndPost}
                                                 color='teal'
@@ -164,14 +163,12 @@ class NewPost extends Component {
                                                         <Icon name='reply' />
                                                     </Button.Content>
                                             </Button>
-                                            <Button className="waves-effect waves-orange btn white black-text margin-left-small"
+                                            <Button type="button"
-                                                type="button"
                                                 onClick={this.handlePreviewToggle}
                                                 color='yellow'>
                                                 {this.state.previewEnabled ? "Edit" : "Preview"}
                                             </Button>
-                                            <Button className="btn red margin-left-small"
+                                            <Button type="button"
-                                                type="button"
                                                 onClick={this.props.onCancelClick}
                                                 color='red'>
                                                 Cancel

src/components/NewTopicPreview.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { drizzleConnect } from 'drizzle-react';
 
-import { Grid, Divider, Button, Icon, Label } from 'semantic-ui-react'
+import { Grid, Divider } from 'semantic-ui-react'
 
 import TimeAgo from 'react-timeago';
 import UserAvatar from 'react-user-avatar';

src/components/NotFoundView.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const NotFoundView = (props) => {
     return (
-        <div className="center">
+        <div style={{textAlign: "center"}}>
             <img src={require('../resources/PageNotFound.jpg')} alt="Page not found!"/>
         </div>
     );

src/components/Topic.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router';
 import { drizzleConnect } from 'drizzle-react';
 import PropTypes from 'prop-types';
 

src/containers/BoardContainer.js

@@ -1,7 +1,9 @@
-import { drizzleConnect } from 'drizzle-react';
 import React, { Component } from 'react';
+import { drizzleConnect } from 'drizzle-react';
 import PropTypes from 'prop-types';
 
+import { Header } from 'semantic-ui-react';
+
 import WithBlockchainData from '../components/WithBlockchainData';
 import TopicList from '../components/TopicList';
 import FloatingButton from '../components/FloatingButton';
@@ -24,16 +26,43 @@ class Board extends Component {
             boardContents = (
                 <LoadingSpinner/>
             );
-        } else {
+        } else if (this.props.blockchainData[0].returnData !== '0'){
             this.topicIDs = [];
             for (var i = 0; i < this.props.blockchainData[0].returnData; i++) {
                 this.topicIDs.push(i);
             }
             boardContents = ([
                 <TopicList topicIDs={this.topicIDs} key="topicList"/>,
-                <FloatingButton onClick={this.handleCreateTopicClick}
+                this.props.user.hasSignedUp &&
-                    key="createTopicButton"/>
+                    <FloatingButton onClick={this.handleCreateTopicClick}
+                        key="createTopicButton"/>
             ]);
+        } else {
+            if (!this.props.user.hasSignedUp){
+                boardContents = (
+                    <div className="vertical-center-in-parent">
+                        <Header color='teal' textAlign='center' as='h2'>
+                            There are no topics yet!
+                        </Header>
+                        <Header color='teal' textAlign='center' as='h4'>
+                            Sign up to be the first post.
+                        </Header>
+                    </div>
+                );
+            } else {
+                boardContents = (
+                    <div className="vertical-center-in-parent">
+                        <Header color='teal' textAlign='center' as='h2'>
+                            There are no topics yet!
+                        </Header>
+                        <Header color='teal' textAlign='center' as='h4'>
+                            Click the add button at the bottom of the page to be the first to post.
+                        </Header>
+                        <FloatingButton onClick={this.handleCreateTopicClick}
+                            key="createTopicButton"/>
+                    </div>
+                );
+            }
         }
 
         return (

src/containers/HomeContainer.js

@@ -1,16 +1,26 @@
 import { drizzleConnect } from 'drizzle-react';
 import React, { Component } from 'react';
-import SignUpContainer from './SignUpContainer';
+
 import BoardContainer from './BoardContainer';
 
 class Home extends Component {
     render() {
-        //This must change to routes and redirects
+        //We can add a modal to tell the user to sign up
-        const view = this.props.user.hasSignedUp
+
-            ? (<BoardContainer/>) //This may become multiple boards
+        /*var modal = this.props.user.hasSignedUp && (
-            : (<SignUpContainer/>);
+        <Modal dimmer='blurring' open={this.state.open}>
+            <Modal.Header>Select a Photo</Modal.Header>
+            <Modal.Content image>
+                <Image wrapped size='medium' src='/assets/images/avatar/large/rachel.png' />
+                <Modal.Description>
+                    <Header>Default Profile Image</Header>
+                    <p>We've found the following gravatar image associated with your e-mail address.</p>
+                    <p>Is it okay to use this photo?</p>
+                </Modal.Description>
+            </Modal.Content>
+        </Modal>);*/
 
-        return (view);
+        return (<BoardContainer/>);
     }
 }
 

src/containers/LoadingContainer.js

@@ -1,13 +1,9 @@
-import { drizzleConnect } from 'drizzle-react'
+import { drizzleConnect } from 'drizzle-react';
-import React, { Children, Component } from 'react'
+import React, { Children, Component } from 'react';
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 import ipfs_logo from './../resources/ipfs_logo.png';
 
-/*
- * Create component.
- */
-
 class LoadingContainer extends Component {
     render() {
         if (this.props.web3.status === 'failed')
@@ -80,10 +76,6 @@ LoadingContainer.contextTypes = {
     drizzle: PropTypes.object
 };
 
-/*
- * Export connected component.
- */
-
 const mapStateToProps = state => {
     return {
         accounts: state.accounts,

src/containers/PrivateRouteContainer.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { drizzleConnect } from 'drizzle-react';
-import { Route } from "react-router";
-import { Redirect } from "react-router-dom";
-
-const PrivateRoute = (props) => {
-  return (
-    props.user.hasSignedUp
-    ? <Route path={props.path} component={props.component} />
-    : <Redirect 
-          from={props.path}
-          to="/login"
-    />
-  );
-};
-
-const mapStateToProps = state => {
-  return {
-    user: state.user
-  }
-};
-
-const PrivateRouteContainer = drizzleConnect(PrivateRoute, mapStateToProps);
-
-export default PrivateRouteContainer;

src/containers/ProfileContainer.js

@@ -1,6 +1,5 @@
 import { drizzleConnect } from 'drizzle-react';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
 import { Tab } from 'semantic-ui-react'
@@ -25,6 +24,11 @@ class Profile extends Component {
     }
 
     render() {
+        if (!this.props.user.hasSignedUp) {
+            this.context.router.push("/signup");
+            return(null);
+        }
+
         this.propsToView();
         var infoTab =
             (<WithBlockchainData
@@ -116,7 +120,8 @@ class Profile extends Component {
 }
 
 Profile.contextTypes = {
-    drizzle: PropTypes.object
+    drizzle: PropTypes.object,
+    router: PropTypes.object
 };
 
 const mapStateToProps = state => {

src/containers/SignUpContainer.js

@@ -2,18 +2,29 @@ import { drizzleConnect } from 'drizzle-react';
 import React, { Component } from 'react';
 import UsernameFormContainer from './UsernameFormContainer';
 
+import { Header } from 'semantic-ui-react';
+
 class SignUp extends Component {
     render() {
         return (
-            <div className="sign-up-container">
+            this.props.user.hasSignedUp
-                <div>
+                ?(<div className="vertical-center-in-parent">
-                    <h1>Sign Up</h1>
+                    <Header color='teal' textAlign='center' as='h2'>
-                    <p className="no-margin">
+                        There is already an account for this addresss.
-                        <strong>Account address:</strong> {this.props.user.address}
+                    </Header>
-                    </p>
+                    <Header color='teal' textAlign='center' as='h4'>
-                    <UsernameFormContainer/>
+                        If you want to create another account please change your address.
-                </div>
+                    </Header>
-            </div>
+                </div>)
+                :(<div className="sign-up-container">
+                    <div>
+                        <h1>Sign Up</h1>
+                        <p className="no-margin">
+                            <strong>Account address:</strong> {this.props.user.address}
+                        </p>
+                        <UsernameFormContainer/>
+                    </div>
+                </div>)
         );
     }
 }

src/containers/StartTopicContainer.js

@@ -89,6 +89,11 @@ class StartTopic extends Component {
     }
 
     render() {
+        if (!this.props.user.hasSignedUp) {
+            this.context.router.push("/signup");
+            return(null);
+        }
+
         var previewEditText = this.state.previewEnabled ? "Edit" : "Preview";
         return (
             <div>
@@ -296,7 +301,8 @@ class StartTopic extends Component {
 }
 
 StartTopic.contextTypes = {
-    drizzle: PropTypes.object
+    drizzle: PropTypes.object,
+    router: PropTypes.object
 };
 
 const mapStateToProps = state => {

src/containers/TopicContainer.js

@@ -75,7 +75,7 @@ class Topic extends Component {
                             onPostCreated={() => {this.postCreated()}}
                         />
                     }
-                    {!this.state.posting &&
+                    {this.props.user.hasSignedUp && !this.state.posting &&
                         <FloatingButton onClick={this.handleClick}/>
                     }
                 </div>)

src/containers/UsernameFormContainer.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';
-import { drizzleConnect } from 'drizzle-react'
+import { drizzleConnect } from 'drizzle-react';
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
-import { Button, Message, Form, Dimmer, Loader, Header } from 'semantic-ui-react'
+import { Button, Message, Form, Dimmer, Loader, Header } from 'semantic-ui-react';
-import { createDatabases } from './../util/orbit'
+import { createDatabases } from './../util/orbit';
 
 const contract = "Forum";
 const signUpMethod = "signUp";

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Router, IndexRoute, browserHistory } from 'react-router';
+import { Router, IndexRedirect, browserHistory } from 'react-router';
 import { Route } from 'react-router-dom';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { DrizzleProvider } from 'drizzle-react';
@@ -10,8 +10,7 @@ import CoreLayout from './layouts/CoreLayout/CoreLayout';
 
 // Containers
 import LoadingContainer  from './containers/LoadingContainer';
-import PrivateRouteContainer from './containers/PrivateRouteContainer';
+import SignUpContainer from './containers/SignUpContainer';
-
 import HomeContainer from './containers/HomeContainer';
 import TopicContainer from './containers/TopicContainer';
 import StartTopicContainer from './containers/StartTopicContainer';
@@ -31,7 +30,11 @@ render((
       <LoadingContainer>
         <Router history={history}>
           <Route path="/" component={CoreLayout}>
-            <IndexRoute component={HomeContainer} />
+            <IndexRedirect to="/home" />
+            <Route path="/home"
+              component={HomeContainer} />
+            <Route path="/signup"
+              component={SignUpContainer} />
             <Route path="/topic/:topicId(/:postId)"
               component={TopicContainer} />
             <Route path='/profile(/:address)(/:username)'
@@ -47,10 +50,3 @@ render((
   ),
   document.getElementById('root')
 );
-
-/*<PrivateRouteContainer path="/topic/:topicId(/:topicSubject)(/:postId)"
-              component={TopicContainer} />
-  <PrivateRouteContainer path='/profile(/:address)(/:username)'
-    component={ProfileContainer} />
-  <PrivateRouteContainer path='/startTopic'
-    component={StartTopicContainer} />*/

src/layouts/CoreLayout/CoreLayout.js

@@ -6,7 +6,6 @@ import '../../assets/fonts/fontawesome-free-5.0.13/fontawesome-all.js';
 import '../../assets/css/App.css';
 import '../../assets/css/loading-container.css';
 import '../../assets/css/sign-up-container.css';
-import '../../assets/css/navbar.css';
 
 import '../../assets/css/board-container.css';
 import '../../assets/css/start-topic-container.css';