aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/.eslintrc8
-rw-r--r--vnext/src/App.js2
-rw-r--r--vnext/src/components/Chat.js2
-rw-r--r--vnext/src/components/Header.js34
-rw-r--r--vnext/src/components/Thread.js5
-rw-r--r--vnext/webpack.config.js2
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'
},