From d0207739db4bd7ed0007e411f812d200c30ef521 Mon Sep 17 00:00:00 2001
From: Apostolof <apotwohd@gmail.com>
Date: Sun, 17 Jun 2018 15:12:05 +0300
Subject: [PATCH] Add separate route for SignUpContainer, Redirect / to /home,
 Add guest capabilities

---
 src/assets/css/App.css                   | 14 +--------
 src/assets/css/navbar.css                |  7 -----
 src/assets/css/start-topic-container.css |  2 +-
 src/components/FloatingButton.js         |  1 -
 src/components/NavBar.js                 |  2 +-
 src/components/NewPost.js                |  9 ++----
 src/components/NewTopicPreview.js        |  2 +-
 src/components/NotFoundView.js           |  2 +-
 src/components/Topic.js                  |  1 -
 src/containers/BoardContainer.js         | 37 +++++++++++++++++++++---
 src/containers/HomeContainer.js          | 22 ++++++++++----
 src/containers/LoadingContainer.js       | 14 ++-------
 src/containers/PrivateRouteContainer.js  | 25 ----------------
 src/containers/ProfileContainer.js       |  9 ++++--
 src/containers/SignUpContainer.js        | 29 +++++++++++++------
 src/containers/StartTopicContainer.js    |  8 ++++-
 src/containers/TopicContainer.js         |  2 +-
 src/containers/UsernameFormContainer.js  | 10 +++----
 src/index.js                             | 20 +++++--------
 src/layouts/CoreLayout/CoreLayout.js     |  1 -
 20 files changed, 108 insertions(+), 109 deletions(-)
 delete mode 100644 src/assets/css/navbar.css
 delete mode 100644 src/containers/PrivateRouteContainer.js

diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index f19033b..d985067 100644
--- a/src/assets/css/App.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/assets/css/navbar.css b/src/assets/css/navbar.css
deleted file mode 100644
index 8e65749..0000000
--- a/src/assets/css/navbar.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* NAVBAR */
-
-.nav-link:hover {
-  background: rgba(255,255,255,.08) !important;
-  color: #fff !important;
-  cursor: pointer !important;
-}
\ No newline at end of file
diff --git a/src/assets/css/start-topic-container.css b/src/assets/css/start-topic-container.css
index 2c7c64a..44370a4 100644
--- a/src/assets/css/start-topic-container.css
+++ b/src/assets/css/start-topic-container.css
@@ -5,6 +5,6 @@
   margin: 20px 0px;
 }
 
-.markdownPreview {
+.markdown-preview {
   padding: 0px 20px;
 }
\ No newline at end of file
diff --git a/src/components/FloatingButton.js b/src/components/FloatingButton.js
index 75178da..522005a 100644
--- a/src/components/FloatingButton.js
+++ b/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) => {
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 77176aa..cd2458a 100644
--- a/src/components/NavBar.js
+++ b/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>
diff --git a/src/components/NewPost.js b/src/components/NewPost.js
index 70d1027..380ebc8 100644
--- a/src/components/NewPost.js
+++ b/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"
-                                                type="button"
+                                            <Button type="button"
                                                 onClick={this.handlePreviewToggle}
                                                 color='yellow'>
                                                 {this.state.previewEnabled ? "Edit" : "Preview"}
                                             </Button>
-                                            <Button className="btn red margin-left-small"
-                                                type="button"
+                                            <Button type="button"
                                                 onClick={this.props.onCancelClick}
                                                 color='red'>
                                                 Cancel
diff --git a/src/components/NewTopicPreview.js b/src/components/NewTopicPreview.js
index decbc99..21643b7 100644
--- a/src/components/NewTopicPreview.js
+++ b/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';
diff --git a/src/components/NotFoundView.js b/src/components/NotFoundView.js
index 2af7444..6a766e2 100644
--- a/src/components/NotFoundView.js
+++ b/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>
     );
diff --git a/src/components/Topic.js b/src/components/Topic.js
index befb9a1..7e5432c 100644
--- a/src/components/Topic.js
+++ b/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';
 
diff --git a/src/containers/BoardContainer.js b/src/containers/BoardContainer.js
index cb625e5..ba040f5 100644
--- a/src/containers/BoardContainer.js
+++ b/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}
-                    key="createTopicButton"/>
+                this.props.user.hasSignedUp &&
+                    <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 (
diff --git a/src/containers/HomeContainer.js b/src/containers/HomeContainer.js
index 38e48a9..71e1df8 100644
--- a/src/containers/HomeContainer.js
+++ b/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
-        const view = this.props.user.hasSignedUp
-            ? (<BoardContainer/>) //This may become multiple boards
-            : (<SignUpContainer/>);
+        //We can add a modal to tell the user to sign up
+
+        /*var modal = this.props.user.hasSignedUp && (
+        <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/>);
     }
 }
 
diff --git a/src/containers/LoadingContainer.js b/src/containers/LoadingContainer.js
index d1909c7..d07afc7 100644
--- a/src/containers/LoadingContainer.js
+++ b/src/containers/LoadingContainer.js
@@ -1,13 +1,9 @@
-import { drizzleConnect } from 'drizzle-react'
-import React, { Children, Component } from 'react'
-import PropTypes from 'prop-types'
+import { drizzleConnect } from 'drizzle-react';
+import React, { Children, Component } from 'react';
+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,
diff --git a/src/containers/PrivateRouteContainer.js b/src/containers/PrivateRouteContainer.js
deleted file mode 100644
index 7895b43..0000000
--- a/src/containers/PrivateRouteContainer.js
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/containers/ProfileContainer.js b/src/containers/ProfileContainer.js
index ff60493..3399531 100644
--- a/src/containers/ProfileContainer.js
+++ b/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 => {
diff --git a/src/containers/SignUpContainer.js b/src/containers/SignUpContainer.js
index 806ef9b..c4ec30f 100644
--- a/src/containers/SignUpContainer.js
+++ b/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">
-                <div>
-                    <h1>Sign Up</h1>
-                    <p className="no-margin">
-                        <strong>Account address:</strong> {this.props.user.address}
-                    </p>
-                    <UsernameFormContainer/>
-                </div>
-            </div>
+            this.props.user.hasSignedUp
+                ?(<div className="vertical-center-in-parent">
+                    <Header color='teal' textAlign='center' as='h2'>
+                        There is already an account for this addresss.
+                    </Header>
+                    <Header color='teal' textAlign='center' as='h4'>
+                        If you want to create another account please change your address.
+                    </Header>
+                </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>)
         );
     }
 }
diff --git a/src/containers/StartTopicContainer.js b/src/containers/StartTopicContainer.js
index 12cb42c..3e67f49 100644
--- a/src/containers/StartTopicContainer.js
+++ b/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 => {
diff --git a/src/containers/TopicContainer.js b/src/containers/TopicContainer.js
index aa2234e..88001ee 100644
--- a/src/containers/TopicContainer.js
+++ b/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>)
diff --git a/src/containers/UsernameFormContainer.js b/src/containers/UsernameFormContainer.js
index ae2b5a7..d38eee8 100644
--- a/src/containers/UsernameFormContainer.js
+++ b/src/containers/UsernameFormContainer.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
-import { drizzleConnect } from 'drizzle-react'
-import PropTypes from 'prop-types'
+import React, { Component } from 'react';
+import { drizzleConnect } from 'drizzle-react';
+import PropTypes from 'prop-types';
 
-import { Button, Message, Form, Dimmer, Loader, Header } from 'semantic-ui-react'
-import { createDatabases } from './../util/orbit'
+import { Button, Message, Form, Dimmer, Loader, Header } from 'semantic-ui-react';
+import { createDatabases } from './../util/orbit';
 
 const contract = "Forum";
 const signUpMethod = "signUp";
diff --git a/src/index.js b/src/index.js
index b551365..972ba1c 100644
--- a/src/index.js
+++ b/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)'
@@ -46,11 +49,4 @@ render((
     </DrizzleProvider>
   ),
   document.getElementById('root')
-);
-
-/*<PrivateRouteContainer path="/topic/:topicId(/:topicSubject)(/:postId)"
-              component={TopicContainer} />
-  <PrivateRouteContainer path='/profile(/:address)(/:username)'
-    component={ProfileContainer} />
-  <PrivateRouteContainer path='/startTopic'
-    component={StartTopicContainer} />*/
\ No newline at end of file
+);
\ No newline at end of file
diff --git a/src/layouts/CoreLayout/CoreLayout.js b/src/layouts/CoreLayout/CoreLayout.js
index bcf16c1..41127e2 100644
--- a/src/layouts/CoreLayout/CoreLayout.js
+++ b/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';