diff --git a/package.json b/package.json index 2f679bd..f55f8ee 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,14 @@ "version": "0.1.0", "private": true, "dependencies": { - "material-ui": "^1.0.0-beta.3", - "material-ui-icons": "^1.0.0-alpha.19", - "react": "^15.6.1", - "react-dom": "^15.6.1", - "react-redux": "^5.0.5", - "react-scripts": "1.0.10", - "redux": "^3.7.2" + "axios": "latest", + "formsy-react": "latest", + "formsy-semantic-ui-react": "latest", + "react": "latest", + "react-dom": "latest", + "react-router-dom": "latest", + "react-scripts": "latest", + "semantic-ui-react": "latest" }, "scripts": { "start": "react-scripts start", diff --git a/public/index.html b/public/index.html index d707fee..c0b5413 100644 --- a/public/index.html +++ b/public/index.html @@ -21,6 +21,7 @@ --> + React App diff --git a/src/App.css b/src/App.css index 15adfdc..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,24 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} diff --git a/src/App.js b/src/App.js index d7d52a7..c0ab290 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,14 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +import Header from './components/Header' +import Main from './components/Main' class App extends Component { render() { return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

+
+
+
); } diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..a0f96db --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,59 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import { + Menu, + Container, + Button, + Icon +} from 'semantic-ui-react' +import Axios from 'axios' + +export default class Header extends React.Component { + constructor() { + super() + this.state = { + color: 'black', + disabled: true + }; + } + + componentDidMount() { + Axios.get('http://localhost:10000/health') + .then(res => { + this.setState({ + color: 'green', + disabled: false + }) + }) + .catch(err => { + console.log(err); + this.setState({ + color: 'red', + disabled: false + }) + }) + } + + render() { + return ( +
+ + + Home + + + + + + + + + + + + + +
+ ) + } +} diff --git a/src/components/Main.js b/src/components/Main.js new file mode 100644 index 0000000..e0aafff --- /dev/null +++ b/src/components/Main.js @@ -0,0 +1,19 @@ +import React from 'react' +import { Switch, Route } from 'react-router-dom' +import Home from '../pages/Home' +import Login from '../pages/Login' +import Register from '../pages/Register' + +export default class Main extends React.Component { + render() { + return ( +
+ + + + + +
+ ) + } +} diff --git a/src/index.js b/src/index.js index fae3e35..ba39bd3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,14 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import registerServiceWorker from './registerServiceWorker'; +import React from 'react' +import ReactDOM from 'react-dom' +import { BrowserRouter } from 'react-router-dom' +import './index.css' +import App from './App' +// import registerServiceWorker from './registerServiceWorker' -ReactDOM.render(, document.getElementById('root')); -registerServiceWorker(); +ReactDOM.render( + + + , + document.getElementById('root') +) +// registerServiceWorker() diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 0000000..4ec8c82 --- /dev/null +++ b/src/pages/Home.js @@ -0,0 +1,30 @@ +import React from 'react' +// import { Link } from 'react-router-dom' +import { + Segment, + Container, + Header +} from 'semantic-ui-react' + +export default class Home extends React.Component { + render() { + return ( +
+ + +
+ + +
+ ) + } +} diff --git a/src/pages/Login.js b/src/pages/Login.js new file mode 100644 index 0000000..8cb2fe7 --- /dev/null +++ b/src/pages/Login.js @@ -0,0 +1,21 @@ +import React from 'react' +import { Grid, Form, Segment, Header } from 'semantic-ui-react' + +export default class Login extends React.Component { + render () { + return ( + + +
+ +
Login
+ + + Submit + +
+ + + ) + } +} diff --git a/src/pages/Register.js b/src/pages/Register.js new file mode 100644 index 0000000..18d6491 --- /dev/null +++ b/src/pages/Register.js @@ -0,0 +1,90 @@ +import React from "react" +import { Grid, Segment, Header, Message } from 'semantic-ui-react' +import Axios from 'axios' +import { Form } from 'formsy-semantic-ui-react' + +export default class Register extends React.Component { + constructor(props) { + super(props) + this.state = { + email: '', + email_check: '', + password: '', + password_check: '', + submittable: false + } + } + + setSubmittable() { + this.setState({submittable: true}) + } + + unsetSubmittable() { + this.setState({submittable: false}) + } + + register(formData) { + console.log(formData); + } + + render () { + return ( + + +
this.register(formData) } + onValid={() => this.setSubmittable()} + onInvalid={() => this.unsetSubmittable()}> + +
Register
+ } + name='mail'/> + } + name='mail_validation'/> + } + name='password'/> + } + name='password_validation'/> + Submit + +
+ + + ) + } +}