diff --git a/src/containers/ProfileContainer.js b/src/containers/ProfileContainer.js
index 2a5a62f..ff60493 100644
--- a/src/containers/ProfileContainer.js
+++ b/src/containers/ProfileContainer.js
@@ -3,50 +3,27 @@ import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
+import { Tab } from 'semantic-ui-react'
+
import WithBlockchainData from '../components/WithBlockchainData';
import ProfileInformation from '../components/ProfileInformation';
import TopicList from '../components/TopicList';
import PostList from '../components/PostList';
import LoadingSpinner from '../components/LoadingSpinner';
-import '../assets/css/materialTabs.css';
-
class Profile extends Component {
constructor(props, context) {
super(props);
- this.handleTabClick = this.handleTabClick.bind(this);
this.propsToView = this.propsToView.bind(this);
this.drizzle = context.drizzle;
- this.underlineBarRef = React.createRef();
- this.infoSelectorRef = React.createRef();
- this.topicsSelectorRef = React.createRef();
- this.postsSelectorRef = React.createRef();
this.state = {
- viewSelected: "profile-info-tab",
userAddress: this.props.params.address ? this.props.params.address : this.props.user.address
};
}
- handleTabClick(event) {
- this.setState({viewSelected: event.target.id});
- if (event.target.id === "profile-info-tab"){
- this.underlineBarRef.current.style.left = this.infoSelectorRef.current.offsetLeft + 'px';
- this.underlineBarRef.current.style.width = ReactDOM.
- findDOMNode(this.infoSelectorRef.current).getBoundingClientRect().width + 'px';
- } else if (event.target.id === "profile-topics-tab"){
- this.underlineBarRef.current.style.left = this.topicsSelectorRef.current.offsetLeft + 'px';
- this.underlineBarRef.current.style.width = ReactDOM.
- findDOMNode(this.topicsSelectorRef.current).getBoundingClientRect().width + 'px';
- } else if (event.target.id === "profile-posts-tab"){
- this.underlineBarRef.current.style.left = this.postsSelectorRef.current.offsetLeft + 'px';
- this.underlineBarRef.current.style.width = ReactDOM.
- findDOMNode(this.postsSelectorRef.current).getBoundingClientRect().width + 'px';
- }
- }
-
render() {
this.propsToView();
var infoTab =
@@ -86,45 +63,36 @@ class Profile extends Component {
}
);
+ const profilePanes = [
+ {
+ menuItem: 'INFORMATION',
+ pane: {
+ key: 'INFORMATION',
+ content: (infoTab),
+ },
+ },
+ {
+ menuItem: 'TOPICS',
+ pane: {
+ key: 'TOPICS',
+ content: (topicsTab),
+ },
+ },
+ {
+ menuItem: 'POSTS',
+ pane: {
+ key: 'POSTS',
+ content: (postsTab),
+ },
+ },
+ ]
+
return (
-
-
-
- {infoTab}
-
-
- {topicsTab}
-
-
- {postsTab}
-
-
+
);
}
@@ -145,10 +113,6 @@ class Profile extends Component {
}
}
}
-
- componentDidMount() {
- this.infoSelectorRef.current.click();
- }
}
Profile.contextTypes = {
diff --git a/src/containers/SignUpContainer.js b/src/containers/SignUpContainer.js
index e0ac249..806ef9b 100644
--- a/src/containers/SignUpContainer.js
+++ b/src/containers/SignUpContainer.js
@@ -5,12 +5,12 @@ import UsernameFormContainer from './UsernameFormContainer';
class SignUp extends Component {
render() {
return (
-
-
+
+
Sign Up
-
Username: {this.props.user.username}
-
Account: {this.props.user.address}
-
OrbitDB: {this.props.orbitDB.id}
+
+ Account address: {this.props.user.address}
+
@@ -21,11 +21,7 @@ class SignUp extends Component {
// May still need this even with data function to refresh component on updates for this contract.
const mapStateToProps = state => {
return {
- accounts: state.accounts,
- Forum: state.contracts.Forum,
- user: state.user,
- orbitDB: state.orbitDB,
- drizzleStatus: state.drizzleStatus
+ user: state.user
}
};
diff --git a/src/containers/StartTopicContainer.js b/src/containers/StartTopicContainer.js
index 62f32a5..12cb42c 100644
--- a/src/containers/StartTopicContainer.js
+++ b/src/containers/StartTopicContainer.js
@@ -3,7 +3,9 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import uuidv4 from 'uuid/v4';
-import Post from '../components/Post'
+import { Form, TextArea, Button, Icon } from 'semantic-ui-react'
+
+import NewTopicPreview from '../components/NewTopicPreview'
const contract = "Forum";
const contractMethod = "createTopic";
@@ -40,6 +42,7 @@ class StartTopic extends Component {
topicSubjectInputEmptySubmit: this.state.topicSubjectInput === '',
topicMessageInputEmptySubmit: this.state.topicMessageInput === ''
});
+
return;
}
@@ -98,46 +101,48 @@ class StartTopic extends Component {
}
{this.state.previewEnabled &&
-
}
-
+
+
+
+
+
+
);
}
diff --git a/src/containers/TopicContainer.js b/src/containers/TopicContainer.js
index 59d910e..aa2234e 100644
--- a/src/containers/TopicContainer.js
+++ b/src/containers/TopicContainer.js
@@ -83,8 +83,11 @@ class Topic extends Component {
}
return (
-
+
{topicContents}
+ {!this.state.posting &&
+
+ }
);
}
diff --git a/src/containers/UsernameFormContainer.js b/src/containers/UsernameFormContainer.js
index 5a5ff89..ae2b5a7 100644
--- a/src/containers/UsernameFormContainer.js
+++ b/src/containers/UsernameFormContainer.js
@@ -1,10 +1,10 @@
-import { drizzleConnect } from 'drizzle-react'
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 PropTypes from 'prop-types'
-
const contract = "Forum";
const signUpMethod = "signUp";
const updateUsernameMethod ="updateUsername";
@@ -15,12 +15,31 @@ class UsernameFormContainer extends Component {
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
+ this.completeAction = this.completeAction.bind(this);
this.contracts = context.drizzle.contracts;
- this.state = {usernameInput:''};
+
+ this.state = {
+ usernameInput: '',
+ error: false,
+ completingAction: false
+ };
+ }
+
+ handleInputChange(e, { name, value }) {
+ this.setState({ [name]: value })
}
- async handleSubmit() {
+ handleSubmit() {
+ if (this.state.usernameInput === ''){
+ this.setState({ error: true });
+ } else {
+ this.completeAction();
+ }
+ }
+
+ async completeAction() {
+ this.setState({ completingAction: true });
if(this.props.user.hasSignedUp)
this.contracts[contract].methods[updateUsernameMethod].cacheSend(...[this.state.usernameInput]);
else
@@ -29,31 +48,41 @@ class UsernameFormContainer extends Component {
this.contracts[contract].methods[signUpMethod].cacheSend(...[this.state.usernameInput, orbitdbInfo.id,
orbitdbInfo.topicsDB, orbitdbInfo.postsDB, orbitdbInfo.publicKey, orbitdbInfo.privateKey]);
}
-
- }
-
-
- handleInputChange(event) {
- this.setState({[event.target.name]: event.target.value});
}
render() {
const hasSignedUp = this.props.user.hasSignedUp;
- if(hasSignedUp!==null) {
+ if(hasSignedUp !== null) {
const buttonText = hasSignedUp ? "Update" : "Sign Up";
const placeholderText = hasSignedUp ? this.props.user.username : "Username";
+ var withError = this.state.error && {error: true};
return(
-
+
+
+
+
+
+
+
+
+
+
+ Magic elfs are processing your nobel request.
+
+
+
);
}
diff --git a/src/layouts/CoreLayout/CoreLayout.js b/src/layouts/CoreLayout/CoreLayout.js
index 2977728..bcf16c1 100644
--- a/src/layouts/CoreLayout/CoreLayout.js
+++ b/src/layouts/CoreLayout/CoreLayout.js
@@ -1,23 +1,37 @@
import React, { Component } from 'react';
-import HeaderBar from '../../components/HeaderBar';
import NavBar from '../../components/NavBar';
// Styles
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';
+import '../../assets/css/topic-container.css';
+import '../../assets/css/profile-container.css';
class CoreLayout extends Component {
- render() {
- return (
-
-
-
-
- {this.props.children}
-
-
- );
- }
+ render() {
+ return (
+
+
+
+
+
+
+ {this.props.children}
+
+
+
+
+
+ );
+ }
}
export default CoreLayout;
\ No newline at end of file
diff --git a/src/redux/store.js b/src/redux/store.js
index 69cefff..a2f338e 100644
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -1,11 +1,11 @@
-import { browserHistory } from 'react-router'
-import { createStore, applyMiddleware, compose } from 'redux'
-import { routerMiddleware } from 'react-router-redux'
-import reducer from './reducer/reducer'
-import rootSaga from './sagas/rootSaga'
-import createSagaMiddleware from 'redux-saga'
-import { generateContractsInitialState } from 'drizzle'
-import drizzleOptions from '../util/drizzleOptions'
+import { browserHistory } from 'react-router';
+import { createStore, applyMiddleware, compose } from 'redux';
+import { routerMiddleware } from 'react-router-redux';
+import reducer from './reducer/reducer';
+import rootSaga from './sagas/rootSaga';
+import createSagaMiddleware from 'redux-saga';
+import { generateContractsInitialState } from 'drizzle';
+import drizzleOptions from '../util/drizzleOptions';
// Redux DevTools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;