diff options
| -rw-r--r-- | vnext/.eslintrc | 8 | ||||
| -rw-r--r-- | vnext/src/App.js | 2 | ||||
| -rw-r--r-- | vnext/src/components/Chat.js | 2 | ||||
| -rw-r--r-- | vnext/src/components/Header.js | 34 | ||||
| -rw-r--r-- | vnext/src/components/Thread.js | 5 | ||||
| -rw-r--r-- | vnext/webpack.config.js | 2 |
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' }, |