refactore to use hook

Author: dhewzulla

.eslintrc

@@ -16,7 +16,7 @@
         "no-floating-decimal": 2,
         "no-inner-declarations": [2, "both"],
         "no-lonely-if": 2,
-        "no-multiple-empty-lines": [2, {"max": 3}],
+        "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
         "no-self-compare": 2,
         "no-underscore-dangle": 0,
         "no-use-before-define": 0,
@@ -40,7 +40,14 @@
         "strict": [0],
         "valid-jsdoc": 2,
         "wrap-iife": [2, "any"],
-        "yoda": [1, "never"]
+        "yoda": [1, "never"],
+        "no-multi-spaces": "error",
+        "no-trailing-spaces": "error",
+        "comma-spacing": ["error", { "before": false, "after": true }],
+        "no-spaced-func": "error",
+        "no-whitespace-before-property": "error",
+        "space-before-function-paren": ["error", "never"],
+        "space-infix-ops": "error",
     },
     "plugins": [
         "react"

.eslintrc.js

@@ -29,6 +29,12 @@ module.exports = {
           'stories/**' 
         ]
       }
-    ]
-  },
+    ],
+    "no-trailing-spaces": "error",
+    "comma-spacing": ["error", { "before": false, "after": true }],
+    "no-spaced-func": "error",
+    "no-whitespace-before-property": "error",
+    "space-before-function-paren": ["error", "never"],
+    "space-infix-ops": "error",
+  }
 };

src/DisplayQRCode.js

@@ -1,99 +1,57 @@
-import React, {Component} from 'react';
+import React, {Component,useEffect,useState} from 'react';
 import QRCode from "qrcode.react";
 
-
-
-export  default class DisplayQRCode extends Component {
-  constructor(props){
-      super(props);
-      this.onWindowResize=this.onWindowResize.bind(this);
+const styles={
+  container:{
+    display:"flex",
+    flexDirection:"column",
+    justifyContent:"flex-start",
+    alignItems:"center",
+  },
+  qrCodeContainer:{
+    padding:5,
+    display:"flex",
+    width:"100%",
+    flexDirection:"column",
+    justifyContent:"flex-start",
+    alignItems:"center"
+  },
+  label:{
+    marginTop:10,
+    fontSize: 22,
+    color: "#4880ED",
+    fontWeight: 300
   }
-  componentDidMount() {
-      window.addEventListener("resize", this.onWindowResize);
-  }
-  onWindowResize(){
-
-    this.forceUpdate();
-  }
-  componentWillUnmount() {
-      window.removeEventListener("resize", this.onWindowResize);
-  }
-  getStyles(){
-          var styles={
-              screen512:null,
-              biggerThan512:function(){
-                  if(!this.screen512){
-                    this.screen512=window.matchMedia(`(min-width: 512px)`)
-                  }
-                  return this.screen512.matches;
-              },
-              container:{
-                display:"flex",
-                flexDirection:"column",
-                justifyContent:"flex-start",
-                alignItems:"center",
-              },
-              qrCodeContainer:{
-                padding:5,
-                display:"flex",
-                width:"100%",
-                flexDirection:"column",
-                justifyContent:"flex-start",
-                alignItems:"center"
-              },
-              label:{
-                marginTop:10,
-                fontSize: 22,
-                color: "#4880ED",
-                fontWeight: 300,
-
-              }
-          };
-          return styles;
-
-
-    }
-
-
-
-    render(){
-      var styles=this.getStyles();
-      var {code,size,level}=this.props;
-
-      if(!size){
-            var w = window.innerWidth-50;
-            var h = window.innerHeight-50;
-            if(w<h){
-                size=w;
-            }
-            else{
-              size=h;
-            }
-            if(size>400){
-              size=400;
-            }
-      }
-      else{
-        size=parseInt(size);
-      }
-      if(!level){
-        level="H";
-      }
-      if(!code){
-        code="";
-      }
-      return(
-          <div style={styles.container}>
-                      <div style={styles.qrCodeContainer}>
-                              <QRCode
+};
+function computeDefaultSize(){
+      console.log(window.innerWidth-50);
+      console.log(window.innerHeight-50);
+      let size = Math.min(window.innerWidth-50,window.innerHeight-50);
+      return Math.max(size,400);
+}
+
+export default ({label="",code="",level='H',size=0})=>{
+        const [defaultSize,setDefaultSize]=useState(computeDefaultSize());
+        useEffect(() => {
+          function onWindowResize(){
+            setDefaultSize(computeDefaultSize());
+          }
+          window.addEventListener("resize", onWindowResize);
+          return ()=>{
+              window.removeEventListener("resize", onWindowResize);
+          }
+        });
+    return(
+        <div style={styles.container}>
+        <div style={styles.qrCodeContainer}>
+                <QRCode
                                         value={code}
                                         level={level}
-                                        size={size}
+                                        size={size?size:defaultSize}
                                        />
-                      </div>
-                      <div style={styles.label}>{this.props.label}</div>
-          </div>
-        );
+        </div>
+        <div style={styles.label}>{label}</div>
+      </div>
+    );
+};
 
-    }
-  }