diff --git a/src/App.js b/src/App.js index 5ec0a59..9b8c300 100644 --- a/src/App.js +++ b/src/App.js @@ -2,12 +2,16 @@ import './App.css'; import { HashRouter, Route } from 'react-router-dom'; import { AppContainer } from './index/index'; import { UploadContainer } from './upload/upload'; +import { LogInContainer } from './login/login'; +import { ReviewContainer } from './review/review'; function App() { return ( + + ); } diff --git a/src/login/login.css b/src/login/login.css new file mode 100644 index 0000000..e69de29 diff --git a/src/login/login.js b/src/login/login.js new file mode 100644 index 0000000..fc20626 --- /dev/null +++ b/src/login/login.js @@ -0,0 +1,63 @@ +import { Component } from 'react'; +import './login.css'; + +export class LogInContainer extends Component { + constructor(props) { + super(props); + this.state = { + username: '', + password: '', + error: false, + errorMessage: '', + }; + } + + handleChange(e) { + const { name, value } = e.target; + this.setState({ [name]: value }); + } + + handleSubmit(e) { + e.preventDefault(); + const { username, password } = this.state; + this.props.login(username, password); + } + + render() { + const { error, errorMessage } = this.state; + return ( +
+

Login

+
+
+ + +
+
+ + +
+ + {error && +
+ {errorMessage} +
} +
+
+ ); + } +} \ No newline at end of file diff --git a/src/review/review.css b/src/review/review.css new file mode 100644 index 0000000..e69de29 diff --git a/src/review/review.js b/src/review/review.js new file mode 100644 index 0000000..b83b634 --- /dev/null +++ b/src/review/review.js @@ -0,0 +1,58 @@ +import { Component } from 'react'; +import './review.css'; + +export class ReviewContainer extends Component { + constructor(props) { + super(props); + this.state = { + rating: 0, + comment: '', + showComment: false, + }; + } + + handleClick(e) { + this.setState({ + showComment: !this.state.showComment, + }); + } + + handleChange(e) { + this.setState({ + rating: e.target.value, + }); + } + + handleCommentChange(e) { + this.setState({ + comment: e.target.value, + }); + } + + render() { + return ( +
+
+
+
+
+
+
+
+
+
+