Hide header on scroll (mobile only)

1 files changed, 74 insertions, 63 deletions

diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js
index 8c79f779..e687f1e2 100644
--- a/vnext/src/ui/Feeds.js
+++ b/vnext/src/ui/Feeds.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 
 import { Link } from 'react-router-dom';
 import qs from 'qs';
@@ -23,9 +23,9 @@ import { getMessages } from '../api';
  * @property {import('history').History} history
  * @property {import('history').Location} location
  * @property {import('react-router').match} match
- * @property {string} search
+ * @property {string=} search
  * @property {import('../api').SecureUser} visitor
- * @property {import('../api').Message[]} msgs
+ * @property {import('../api').Message[]=} msgs
  */
 
 /**
@@ -101,84 +101,95 @@ export function Home(props) {
 }
 
 /**
- * @param {{
-  authRequired?: boolean,
-  visitor: import('../api').SecureUser,
-  history: import('history').History,
-  location: import('history').Location,
-  msgs: import('../api').Message[],
-  query: Query
-}} props
+ * @typedef {Object} FeedState
+ * @property authRequired?: boolean
+ * @property visitor: import('../api').SecureUser
+ * @property history: import('history').History
+ * @property location: import('history').Location
+ * @property msgs: import('../api').Message[]
+ * @property query: Query
+ */
+
+/**
+ * @param {FeedState} props
  */
 function Feed(props) {
-  const [msgs, setMsgs] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [nextpage, setNextpage] = useState(null);
-  const [error, setError] = useState(false);
+  const [state, setState] = useState({
+    history: props.history,
+    authRequired: props.authRequired,
+    query: props.query,
+    hash: props.visitor.hash,
+    filter: props.location.search.substring(1),
+    msgs: [],
+    loading: true,
+    nextpage: null,
+    error: false,
+    tag: ''
+  });
+
+  const stateRef = useRef(state);
 
   useEffect(() => {
-    let loadMessages = (hash = '', filter = '') => {
-      document.body.scrollTop = 0;
-      document.documentElement.scrollTop = 0;
-      setMsgs([]);
-      setLoading(true);
-      const filterParams = qs.parse(filter);
-      let params = Object.assign({}, filterParams || {}, props.query.search || {});
-      let url = props.query.baseUrl;
-      if (hash) {
-        params.hash = hash;
-      }
-      if (!params.hash && props.authRequired) {
-        props.history.push('/');
-      }
-      getMessages(url, params)
-        .then(response => {
-          const { data } = response;
-          const { pageParam } = props.query;
-          const lastMessage = data.slice(-1)[0] || {};
-          const nextpage = getPageParam(pageParam, lastMessage, filterParams);
-          setMsgs(data);
-          setLoading(false);
-          setNextpage(nextpage);
-        }).catch(ex => {
-          setError(true);
-        });
+    let getPageParam = (pageParam, lastMessage, filterParams) => {
+      const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : moment.utc(lastMessage.updated).valueOf();
+      let newFilter = { ...filterParams };
+      newFilter[pageParam] = pageValue;
+      return `?${qs.stringify(newFilter)}`;
     };
-    loadMessages(props.visitor.hash, props.location.search.substring(1));
-  }, [props]);
-
-  let getPageParam = (pageParam, lastMessage, filterParams) => {
-    const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : moment.utc(lastMessage.updated).valueOf();
-    let newFilter = { ...filterParams };
-    newFilter[pageParam] = pageValue;
-    return `?${qs.stringify(newFilter)}`;
-  };
-  const { tag } = qs.parse(location.search.substring(1)) || {};
-  const nodes = (
-    <>
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+    const filterParams = qs.parse(stateRef.current.filter);
+    let params = Object.assign({}, filterParams || {}, stateRef.current.query.search || {});
+    let url = stateRef.current.query.baseUrl;
+    if (stateRef.current.hash) {
+      params.hash = stateRef.current.hash;
+    }
+    if (!params.hash && stateRef.current.authRequired) {
+      stateRef.current.history.push('/');
+    }
+    getMessages(url, params)
+      .then(response => {
+        const { data } = response;
+        const { pageParam } = stateRef.current.query;
+        const lastMessage = data.slice(-1)[0] || {};
+        const nextpage = getPageParam(pageParam, lastMessage, filterParams);
+        setState({
+          ...stateRef.current,
+          msgs: data,
+          loading: false,
+          nextpage: nextpage,
+          tag: qs.parse(location.search.substring(1))['tag'] || ''
+        });
+      }).catch(ex => {
+        setState({
+          ...stateRef.current,
+          error: true
+        });
+      });
+  }, []);
+  return (state.msgs.length > 0 ? (
+    <div className="msgs">
       {
-        tag && (
+        state.tag && (
           <p className="page">
-            <Link to={{ pathname: `/tag/${tag}` }}>
-              <span>← All posts with tag&nbsp;</span><b>{tag}</b>
+            <Link to={{ pathname: `/tag/${state.tag}` }}>
+              <span>← All posts with tag&nbsp;</span><b>{state.tag}</b>
             </Link>
           </p>
         )
       }
       {
-        msgs.map(msg =>
+        state.msgs.map(msg =>
           <Message key={msg.mid} data={msg} visitor={props.visitor} />)
       }
       {
-        msgs.length >= 20 && (
+        state.msgs.length >= 20 && (
           <p className="page">
-            <Link to={{ pathname: props.location.pathname, search: nextpage }} rel="prev">Next →</Link>
+            <Link to={{ pathname: props.location.pathname, search: state.nextpage }} rel="prev">Next →</Link>
           </p>
         )
       }
-    </>
+    </div>
+  ) : state.error ? <div>error</div> : state.loading ? <div className="msgs"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>
   );
-  return msgs.length > 0 ? (
-    <div className="msgs">{nodes}</div>
-  ) : error ? <div>error</div> : loading ? <div className="msgs"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>;
 }