From 7f5b0fcb8dea585c79d23e27b1e21e72456029e5 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 4 Apr 2019 15:52:11 +0300 Subject: LoginButton using hooks, Input component --- vnext/src/components/Input.css | 8 +++ vnext/src/components/Input.js | 9 +++ vnext/src/components/LoginButton.js | 112 +++++++++++++++--------------------- 3 files changed, 64 insertions(+), 65 deletions(-) create mode 100644 vnext/src/components/Input.css create mode 100644 vnext/src/components/Input.js diff --git a/vnext/src/components/Input.css b/vnext/src/components/Input.css new file mode 100644 index 00000000..acb878d9 --- /dev/null +++ b/vnext/src/components/Input.css @@ -0,0 +1,8 @@ +.input { + background: #FFF; + border: 1px solid #ccc; + outline: none !important; + padding: 4px; + -webkit-appearance: none; + border-radius: 0; +} \ No newline at end of file diff --git a/vnext/src/components/Input.js b/vnext/src/components/Input.js new file mode 100644 index 00000000..5c150ec3 --- /dev/null +++ b/vnext/src/components/Input.js @@ -0,0 +1,9 @@ +import React from 'react'; + +import './Input.css'; + +function Input({ name, value, ...rest }) { + return() +} + +export default React.memo(Input); \ No newline at end of file diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js index c25b0e81..92be22b8 100644 --- a/vnext/src/components/LoginButton.js +++ b/vnext/src/components/LoginButton.js @@ -1,88 +1,68 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import Icon from './Icon'; import Modal from './Modal'; import Button from './Button'; +import Input from './Input'; +import { useFormState } from 'react-use-form-state'; import { me, facebookLink, vkLink } from '../api'; -export default class LoginButton extends React.Component { - constructor(props) { - super(props); - this.state = { - isOpen: false, - username: '', - password: '' - }; - } - toggleModal = (event) => { +function LoginButton({ onAuth, title }) { + + const [open, setOpen] = useState(false); + const [formState, { text, password }] = useFormState(); + + let onToggle = (event) => { if (event) { event.preventDefault(); } - this.setState({ - isOpen: !this.state.isOpen - }); - } - usernameChanged = (event) => { - this.setState({ - username: event.target.value - }); - } - passwordChanged = (event) => { - this.setState({ - password: event.target.value - }); + setOpen(!open); } - login = (event) => { + let onSubmit = (event) => { event.preventDefault(); - me(this.state.username, this.state.password) + me(formState.values.username, formState.values.password) .then(response => { - this.toggleModal(); - this.props.onAuth(response); + onToggle(); + onAuth(response); } ).catch(ex => { console.log(ex); }); - } - - render() { - return ( - <> - - - {this.props.title} - - - - Please, introduce yourself: - - - Log in + } + return ( + <> + + + {title} + + + + Please, introduce yourself: + + + Log in - - - Log in + + + Log in - - Already registered? - - - - OK - - - > - ); - } + Already registered? + + + + OK + + + + > + ); } LoginButton.propTypes = { @@ -107,3 +87,5 @@ const vkButtonStyle = { padding: '2px 14px', background: '#4c75a3' }; + +export default LoginButton; \ No newline at end of file -- cgit v1.2.3
Please, introduce yourself:
Already registered?