From 423da5baf0aeac7acffc83328a7c3731c2997b98 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Wed, 17 Apr 2019 17:18:50 +0300 Subject: Fix ESLint warnings react hooks linter fixes header! --- vnext/src/App.js | 2 +- vnext/src/components/Chat.js | 2 +- vnext/src/components/Header.js | 34 +++++++++++++++++----------------- vnext/src/components/Thread.js | 5 ++--- 4 files changed, 21 insertions(+), 22 deletions(-) (limited to 'vnext/src') 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); -- cgit v1.2.3