aboutsummaryrefslogtreecommitdiff
path: root/vnext/src
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src')
-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
4 files changed, 21 insertions, 22 deletions
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);