From 8ae2d912e25aca408f42409f4e9c02290a7ebfd9 Mon Sep 17 00:00:00 2001
From: Yusuf YILDIZ <a.yusuf.yildiz@hotmail.com>
Date: Tue, 2 Jun 2020 19:17:47 +0300
Subject: Rewrite Card.js with hooks (#1)

---
 src/components/Card.js | 80 +++++++++++++++++++++-----------------------------
 1 file changed, 33 insertions(+), 47 deletions(-)

(limited to 'src')

diff --git a/src/components/Card.js b/src/components/Card.js
index fb11834..7b615ea 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,56 +1,42 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import QRCode from 'qrcode.react';
 import './style.css';
 
-class Card extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {ssid: '', password: '', qrvalue: ''};
-    this.handleSSIDChange = this.handleSSIDChange.bind(this);
-    this.handlePasswordChange= this.handlePasswordChange.bind(this);
-  }
-
-  handleSSIDChange(event) {
-    this.setState({ssid: event.target.value}, () => this.generateqr());
-  }
-
-  handlePasswordChange(event) {
-    this.setState({password: event.target.value}, () => this.generateqr());
-  }
-
-  generateqr() {
-    const qrcode = `WIFI:T:WPA;S:${this.state.ssid};P:${this.state.password};;`
-    this.setState({qrvalue: qrcode});
-  }
-
-  render() {
-    return (
-      <div>
-        <fieldset id="print-area">
-          <legend></legend>
-
-          <h1>WiFi Login</h1>
-          <hr/>
-
-          <div className="details">
-            <QRCode className="qrcode" value={this.state.qrvalue} size={175} />
-
-            <div className="text">
-              <label>Network name</label>
-              <input id="ssid" type="text" maxlength="32" placeholder="Enter your WiFi Network" value={this.state.ssid} onChange={this.handleSSIDChange}/>
-              <label>Password</label>
-              <input id="password" type="text" maxlength="64" placeholder="password" value={this.state.password} onChange={this.handlePasswordChange}/>
-            </div>
-          </div>
+const Card = () => {
+  const [ssid, setSsid] = useState('');
+  const [password, setPassword] = useState('');
+  const [qrvalue, setQrvalue] = useState('');
+
+  useEffect(() => {
+    setQrvalue(`WIFI:T:WPA;S:${ssid};P:${password};;`);
+  }, [ssid, password]);
+
+  return (
+    <div>
+      <fieldset id="print-area">
+        <legend></legend>
+
+        <h1>WiFi Login</h1>
+        <hr/>
 
-          <p><span role="img" aria-label="mobile-phone">📸📱</span>Point your phone's camera at the QR Code to connect automatically</p>
-        </fieldset>
-        <div className="print-btn">
-          <button onClick={window.print}>Print</button>
+        <div className="details">
+          <QRCode className="qrcode" value={qrvalue} size={175} />
+
+          <div className="text">
+            <label>Network name</label>
+            <input id="ssid" type="text" maxlength="32" placeholder="Enter your WiFi Network" value={ssid} onChange={event => setSsid(event.target.value)} />
+            <label>Password</label>
+            <input id="password" type="text" maxlength="64" placeholder="password" value={password} onChange={event => setPassword(event.target.value)} />
+          </div>
         </div>
+
+        <p><span role="img" aria-label="mobile-phone">📸📱</span>Point your phone's camera at the QR Code to connect automatically</p>
+      </fieldset>
+      <div className="print-btn">
+        <button onClick={window.print}>Print</button>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default Card;
-- 
cgit v1.2.3