LoginButton using hooks, Input component

3 files changed, 64 insertions, 65 deletions

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(<input class="input" name={name} value={value} {...rest} />)    
+}
+
+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 (
-      <>
-        <a onClick={this.toggleModal}>
-          <Icon name="ei-user" size="s" />
-          <span className="desktop">{this.props.title}</span>
-        </a>
-        <Modal show={this.state.isOpen}
-          onClose={this.toggleModal}>
-          <div className="dialoglogin">
-            <p>Please, introduce yourself:</p>
-            <div style={socialButtonsStyle}>
-              <a href={facebookLink()} style={facebookButtonStyle}>
-                <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
+  }  
+  return (
+    <>
+      <a onClick={onToggle}>
+        <Icon name="ei-user" size="s" />
+        <span className="desktop">{title}</span>
+      </a>
+      <Modal show={open}
+        onClose={onToggle}>
+        <div className="dialoglogin">
+          <p>Please, introduce yourself:</p>
+          <div style={socialButtonsStyle}>
+            <a href={facebookLink()} style={facebookButtonStyle}>
+              <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
               </a>
-              <a href={vkLink()} style={vkButtonStyle}>
-                <Icon name="ei-sc-vk" size="s" noFill={true} />
-                Log in
+            <a href={vkLink()} style={vkButtonStyle}>
+              <Icon name="ei-sc-vk" size="s" noFill={true} />
+              Log in
              </a>
-            </div>
-            <p>Already registered?</p>
-            <form onSubmit={this.login}>
-              <input className="signinput"
-                type="text"
-                name="username"
-                placeholder="Username..."
-                value={this.state.username} onChange={this.usernameChanged} /><br />
-              <input className="signinput"
-                type="password" name="password"
-                placeholder="Password..."
-                value={this.state.password} onChange={this.passwordChanged} /><br />
-              <Button onClick={this.login}>OK</Button>
-            </form>
           </div>
-        </Modal>
-      </>
-    );
-  }
+          <p>Already registered?</p>
+          <form onSubmit={onSubmit}>
+            <Input name="username"
+              placeholder="Username..."
+              value={formState.values.username} {...text('username')} /><br />
+            <Input name="password"
+              placeholder="Password..."
+              value={formState.values.password} {...password('password')} /><br />
+            <Button onClick={onSubmit}>OK</Button>
+          </form>
+        </div>
+      </Modal>
+    </>
+  );
 }
 
 LoginButton.propTypes = {
@@ -107,3 +87,5 @@ const vkButtonStyle = {
   padding: '2px 14px',
   background: '#4c75a3'
 };
+
+export default LoginButton;
\ No newline at end of file