diff --git a/packages/concordia-app/package.json b/packages/concordia-app/package.json index 8e5dc79..53a2c0b 100644 --- a/packages/concordia-app/package.json +++ b/packages/concordia-app/package.json @@ -8,8 +8,7 @@ "test": "react-scripts test", "eject": "react-scripts eject", "postinstall": "patch-package", - "analyze": "source-map-explorer 'build/static/js/*.js'", - "rendezvous": "star-signal --port=9090 --host=127.0.0.1" + "analyze": "source-map-explorer 'build/static/js/*.js'" }, "eslintConfig": { "extends": "react-app" @@ -27,28 +26,27 @@ ] }, "dependencies": { - "@ezerous/breeze": "0.1.1", - "@ezerous/drizzle": "0.3.0", - "@reduxjs/toolkit": "1.4.0", - "concordia-contracts": "0.1.0", - "level": "6.0.1", - "orbit-db-identity-provider": "0.3.1", - "prop-types": "15.7.2", - "react": "16.13.1", - "react-dom": "16.13.1", - "react-redux": "7.2.1", - "react-router": "5.2.0", - "react-router-dom": "5.2.0", - "react-scripts": "3.4.3", - "redux-saga": "1.1.3", - "semantic-ui-css": "^2.4.1", - "semantic-ui-react": "^1.2.1", - "web3": "1.2.11" + "@ezerous/breeze": "~0.2.0", + "@ezerous/drizzle": "~0.4.0", + "@reduxjs/toolkit": "~1.4.0", + "concordia-contracts": "~0.1.0", + "level": "~6.0.1", + "orbit-db-identity-provider": "~0.3.1", + "prop-types": "~15.7.2", + "react": "~16.13.1", + "react-dom": "~16.13.1", + "react-redux": "~7.2.1", + "react-router": "~5.2.0", + "react-router-dom": "~5.2.0", + "react-scripts": "~3.4.3", + "redux-saga": "~1.1.3", + "semantic-ui-css": "~2.4.1", + "semantic-ui-react": "~1.2.1", + "web3": "1.3.0" }, "devDependencies": { - "libp2p-webrtc-star": "0.20.0", - "patch-package": "6.2.2", - "postinstall-postinstall": "2.1.0", - "source-map-explorer": "2.5.0" + "patch-package": "~6.2.2", + "postinstall-postinstall": "~2.1.0", + "source-map-explorer": "~2.5.0" } } diff --git a/packages/concordia-app/patches/web3-eth+1.2.11.patch b/packages/concordia-app/patches/web3-eth+1.3.0.patch similarity index 100% rename from packages/concordia-app/patches/web3-eth+1.2.11.patch rename to packages/concordia-app/patches/web3-eth+1.3.0.patch diff --git a/packages/concordia-app/src/assets/css/app.css b/packages/concordia-app/src/assets/css/app.css new file mode 100644 index 0000000..07fe37e --- /dev/null +++ b/packages/concordia-app/src/assets/css/app.css @@ -0,0 +1,3 @@ +body { + margin: 1em !important; +} diff --git a/packages/concordia-app/src/assets/css/loading-component.css b/packages/concordia-app/src/assets/css/loading-component.css index f23835c..e4635a2 100644 --- a/packages/concordia-app/src/assets/css/loading-component.css +++ b/packages/concordia-app/src/assets/css/loading-component.css @@ -7,6 +7,7 @@ ul { } .loading-screen { + margin-top: 10em; text-align: center; font-size: large; } diff --git a/packages/concordia-app/src/components/App.jsx b/packages/concordia-app/src/components/App.jsx index 79f0777..4086e07 100644 --- a/packages/concordia-app/src/components/App.jsx +++ b/packages/concordia-app/src/components/App.jsx @@ -4,18 +4,25 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import LoadingContainer from './LoadingContainer' import PropTypes from 'prop-types' -import 'semantic-ui-css/semantic.min.css' +// CSS +import '../assets/css/app.css'; +import CoreLayoutContainer from './CoreLayoutContainer'; +import HomeContainer from './HomeContainer'; import NotFound from '../components/NotFound'; + const App = ({ store }) => ( - - - - - + + + + + + + + ) diff --git a/packages/concordia-app/src/components/CoreLayoutContainer.jsx b/packages/concordia-app/src/components/CoreLayoutContainer.jsx new file mode 100644 index 0000000..4a72130 --- /dev/null +++ b/packages/concordia-app/src/components/CoreLayoutContainer.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import MenuComponent from './MenuComponent'; + +export default class CoreLayout extends Component { + render() { + return ( +
+ + {this.props.children} +
+ ) + } +} + +CoreLayout.propTypes = { + children: PropTypes.element.isRequired +}; diff --git a/packages/concordia-app/src/components/HomeContainer.jsx b/packages/concordia-app/src/components/HomeContainer.jsx new file mode 100644 index 0000000..6fdafbb --- /dev/null +++ b/packages/concordia-app/src/components/HomeContainer.jsx @@ -0,0 +1,9 @@ +import React, { Component } from 'react'; + +class HomeContainer extends Component { + render() { + return(

TODO: Home Container

); + } +} + +export default HomeContainer; diff --git a/packages/concordia-app/src/components/LoadingContainer.jsx b/packages/concordia-app/src/components/LoadingContainer.jsx index fe3f4f0..c8ed6e0 100644 --- a/packages/concordia-app/src/components/LoadingContainer.jsx +++ b/packages/concordia-app/src/components/LoadingContainer.jsx @@ -1,6 +1,5 @@ import React, { Children, Component } from 'react'; import { connect } from 'react-redux'; -import { Container, Progress } from 'semantic-ui-react' import { breezeConstants } from '@ezerous/breeze' @@ -9,19 +8,13 @@ import LoadingComponent from './LoadingComponent'; // CSS import '../assets/css/loading-component.css'; -// Images -import ethereum_logo from '../assets/images/ethereum_logo.svg'; -import ipfs_logo from '../assets/images/ipfs_logo.svg'; -import orbitdb_logo from '../assets/images/orbitdb_logo.png'; -import logo from '../assets/images/app_logo.png'; - class LoadingContainer extends Component { render() { if ((this.props.web3.status === 'initializing' || !this.props.web3.networkId) && !this.props.web3.networkFailed) { return } - // Just in case our redux logic changes in the future - if (!this.props.drizzleStatus.initialized){ + if (!this.props.userFetched){ return } @@ -138,6 +130,7 @@ const mapStateToProps = (state) => ({ accounts: state.accounts, contractInitialized: state.contracts.Forum.initialized, contractDeployed: state.contracts.Forum.deployed, + userFetched: state.user.address }); export default connect(mapStateToProps)(LoadingContainer); diff --git a/packages/concordia-app/src/components/MenuComponent.jsx b/packages/concordia-app/src/components/MenuComponent.jsx new file mode 100644 index 0000000..c71b040 --- /dev/null +++ b/packages/concordia-app/src/components/MenuComponent.jsx @@ -0,0 +1,38 @@ +import React, { Component } from 'react'; +import { withRouter } from "react-router"; +import { Menu } from 'semantic-ui-react'; + +import AppContext from "./AppContext"; + +import app_logo from '../assets/images/app_logo.png'; +import SignUpForm from './SignUpForm'; + +class MenuComponent extends Component { + render() { + return ( + + {context => { + return( +
+ + { this.props.history.push("/"); }} + > + app_logo + + + + + +
+ ) + } + } +
+ ) + } +} + +export default withRouter(MenuComponent); diff --git a/packages/concordia-app/src/components/SignUpForm.jsx b/packages/concordia-app/src/components/SignUpForm.jsx new file mode 100644 index 0000000..fad79bc --- /dev/null +++ b/packages/concordia-app/src/components/SignUpForm.jsx @@ -0,0 +1,139 @@ +import React, { Component } from 'react'; +import { Button, Form, Menu, Message, Modal } from 'semantic-ui-react'; + +import AppContext from "./AppContext"; +import { connect } from 'react-redux'; + +const contractName = 'Forum'; +const checkUsernameTakenMethod = 'isUserNameTaken'; +const signUpMethod = 'signUp'; + +class SignUpForm extends Component { + constructor(props, context) { + super(props, context); + + // For quick access + this.contract = this.context.drizzle.contracts[contractName]; + + this.handleInputChange = this.handleInputChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.completeAction = this.completeAction.bind(this); + + this.checkedUsernames = []; + + this.state = { + usernameInput: '', + error: false, + errorHeader: '', + errorMessage: '', + signingUp: false, + }; + } + + handleInputChange(e, { name, value }) { + this.setState({ + [name]: value, + error: false, + }); + if (value !== '') { + if (this.checkedUsernames.length > 0) { + if (this.checkedUsernames.some((e) => e.usernameChecked === value)) { + return; + } + } + + this.contract.methods[checkUsernameTakenMethod].cacheCall( + value, + ); + } + } + + handleSubmit() { + const { usernameInput, error } = this.state; + + if (usernameInput === '') { + this.setState({ + error: true, + errorHeader: 'Data Incomplete', + errorMessage: 'You need to provide a username', + }); + } else if (!error) { + // TODO + // // Makes sure current input username has been checked for availability + // if (this.checkedUsernames.some((e) => e.usernameChecked === usernameInput)) { + // this.completeAction(); + // } + this.completeAction(); + } + } + + componentDidUpdate() { + // TODO + } + + completeAction() { + const { usernameInput } = this.state; + const { user, account } = this.props; + + if (user.hasSignedUp) { + console.log('Signing up..') + this.contract.methods['signUp'].cacheSend(usernameInput); + } else { + this.setState({ + signingUp: true, + }); + this.contract.methods[signUpMethod].cacheSend( + ...[usernameInput], { from: account }, + ); + } + this.setState({ + usernameInput: '', + }); + } + + render() { + const { + error, usernameInput, errorHeader, errorMessage, signingUp, + } = this.state; + + return( + this.handleSubmit(e)} trigger={ + + }> + Sign Up + + + + + + + +