Fix ESLint warnings

react hooks linter fixes header!

6 files changed, 29 insertions, 24 deletions

diff --git a/vnext/.eslintrc b/vnext/.eslintrc
index 6d200c92..24325146 100644
--- a/vnext/.eslintrc
+++ b/vnext/.eslintrc
@@ -23,6 +23,12 @@
     "only-ascii",
     "react-hooks"
   ],
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "16.8"
+    }
+  },
   "rules": {
     "strict": 0,
     "no-console": "off",
@@ -55,7 +61,7 @@
     "no-unused-vars": "off",
     "no-useless-escape": "off",
 
-    "only-ascii/only-ascii": ["warn", { "allowedChars": "✓←→ " }],
+    "only-ascii/only-ascii": ["warn", { "allowedChars": "✓←→♡ " }],
     
     "jest/no-disabled-tests": "warn",
     "jest/no-focused-tests": "error",
diff --git a/vnext/src/App.js b/vnext/src/App.js
index 03acc9cc..1493f27a 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -60,7 +60,7 @@ export default function App() {
         es.addEventListener('msg', updateStatus);
         setEs(es);
       }
-    };
+    }
     return (() => {
       if (es.removeEventListener) {
         es.removeEventListener('read', updateStatus);
diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index 0742b7fb..8c1e2311 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -14,7 +14,7 @@ import './Chat.css';
 
 export default function Chat(props) {
     const [chats, setChats] = useState([]);
-    useEffect(() => {        
+    useEffect(() => {
         if (props.connection.addEventListener) {
             props.connection.addEventListener('msg', onMessage);
         }
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 0c01446b..48f89360 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
@@ -8,17 +8,17 @@ const header = document.getElementById('header');
 header.removeChild(document.getElementById('header_wrapper'));
 
 export default function Header({ children }) {
-    let dHeight = 0;
-    let wHeight = 0;
-    let wScrollCurrent = 0;
-    let wScrollBefore = 0;
-    let wScrollDiff = 0;
+    let dHeight = useRef(0);
+    let wHeight = useRef(0);
+    let wScrollCurrent = useRef(0);
+    let wScrollBefore = useRef(0);
+    let wScrollDiff = useRef(0);
 
     useEffect(() => {
         window.addEventListener('scroll', () => (!window.requestAnimationFrame)
             ? throttle(250, updateHeader)
             : window.requestAnimationFrame(updateHeader), false);
-    }, []);
+    }, [updateHeader]);
     let throttle = (delay, fn) => {
         var last, deferTimer;
         return function () {
@@ -37,21 +37,21 @@ export default function Header({ children }) {
             }
         };
     };
-    let updateHeader = () => {
-        dHeight = document.body.offsetHeight;
-        wHeight = window.innerHeight;
-        wScrollCurrent = window.pageYOffset;
-        wScrollDiff = wScrollBefore - wScrollCurrent;
+    let updateHeader = useCallback(() => {
+        dHeight.current = document.body.offsetHeight;
+        wHeight.current = window.innerHeight;
+        wScrollCurrent.current = window.pageYOffset;
+        wScrollDiff.current = wScrollBefore.current - wScrollCurrent.current;
 
-        if (wScrollCurrent <= 0) {
+        if (wScrollCurrent.current <= 0) {
             // scrolled to the very top; element sticks to the top
             header.classList.remove(elClassHidden);
         } else if (wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
             // scrolled up; element slides in
             header.classList.remove(elClassHidden);
-        } else if (wScrollDiff < 0) {
+        } else if (wScrollDiff.current < 0) {
             // scrolled down
-            if (wScrollCurrent + wHeight >= dHeight && header.classList.contains(elClassHidden)) {
+            if (wScrollCurrent.current + wHeight.current >= dHeight.current && header.classList.contains(elClassHidden)) {
                 // scrolled to the very bottom; element slides in
                 header.classList.remove(elClassHidden);
             } else {
@@ -59,8 +59,8 @@ export default function Header({ children }) {
                 header.classList.add(elClassHidden);
             }
         }
-        wScrollBefore = wScrollCurrent;
-    };
+        wScrollBefore.current = wScrollCurrent.current;
+    }, []);
     return ReactDOM.createPortal(children, header);
 }
 
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 912f808f..66b5fd62 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -88,11 +88,10 @@ export default function Thread(props) {
     setActive(0);
     loadReplies();
   }, []);
-  useEffect(() => {    
+  useEffect(() => {
     if (props.connection.addEventListener && message.mid) {
       props.connection.addEventListener('msg', onReply);
-    };
-    
+    }
     return () => {
       if (props.connection.removeEventListener && message.mid) {
         props.connection.removeEventListener('msg', onReply);
diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js
index fadf35a7..b8209023 100644
--- a/vnext/webpack.config.js
+++ b/vnext/webpack.config.js
@@ -40,7 +40,7 @@ module.exports = (env, argv) => {
                 {
                     test: /\.css$/,
                     use: [
-                        dev? "style-loader" : MiniCssExtractPlugin.loader,
+                        dev? 'style-loader' : MiniCssExtractPlugin.loader,
                         {
                             loader: 'css-loader'
                         },