better lint, added InfiniteScroll, debugUtils

.env

@@ -1,2 +1,3 @@
 REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT=1
 REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT_LOADING_TIME=1000
+REACT_APP_PLEBBIT_REACT_HOOKS_NO_CACHE=1

package.json

@@ -49,6 +49,8 @@
   },
   "devDependencies": {
     "@craco/craco": "^7.0.0",
+    "eslint": "^8.34.0",
+    "eslint-plugin-react": "^7.32.2",
     "typescript": "^4.9.5"
   },
   "resolutions": {

src/components/Board.jsx

@@ -1,9 +1,16 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
-import { useFeed } from '@plebbit/plebbit-react-hooks';
+import { useFeed, useComments, debugUtils } from '@plebbit/plebbit-react-hooks';
+import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
 import ImageBanner from './ImageBanner';
 import { BoardContext } from '../App';
+import InfiniteScroll from 'react-infinite-scroller';
+
+// await debugUtils.deleteDatabases()
+// await debugUtils.deleteCaches()
+// await debugUtils.deleteAccountsDatabases()
+// await debugUtils.deleteNonAccountsDatabases()
 
 const Board = ({setBodyStyle}) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
@@ -13,7 +20,7 @@ const Board = ({ setBodyStyle }) => {
   const [showPostForm, setShowPostForm] = useState(false);
   const navigate = useNavigate();
 
-  const { feed } = useFeed([`${selectedAddress}`], 'new');
+  const {feed, hasMore, loadMore} = useFeed([`${selectedAddress}`], 'new');
 
   useEffect(() => {
     let didCancel = false;
@@ -38,7 +45,7 @@ const Board = ({ setBodyStyle }) => {
   };
 
   const handleClickHelp = () => {
-    alert("- The CAPTCHA loads after you click \"Post\" \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan.");
+    alert("- The CAPTCHA loads after you click \"Post\". \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan.");
   };
 
   const handleClickForm = () => {
@@ -212,6 +219,12 @@ const Board = ({ setBodyStyle }) => {
         <hr />
       </TopBar>
       <BoardForm selectedStyle={selectedStyle} id="board-form" name="board-form" action="" method="post">
+        <InfiniteScroll
+        pageStart={0}
+        loadMore={loadMore}
+        hasMore={hasMore}
+        loader={<div>Loading...</div>}
+        >
           <div className="board">
             {feed.map(object => {
               let counter = 1;
@@ -295,6 +308,7 @@ const Board = ({ setBodyStyle }) => {
               </>
               )})}
           </div>
+        </InfiniteScroll>
       </BoardForm>
     </Container>
   );

yarn.lock

@@ -5475,7 +5475,7 @@ eslint-plugin-react-hooks@^4.3.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
-eslint-plugin-react@^7.27.1:
+eslint-plugin-react@^7.27.1, eslint-plugin-react@^7.32.2:
   version "7.32.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
   integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
@@ -5592,6 +5592,51 @@ eslint@^8.3.0:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
+eslint@^8.34.0:
+  version "8.34.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.34.0.tgz#fe0ab0ef478104c1f9ebc5537e303d25a8fb22d6"
+  integrity sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==
+  dependencies:
+    "@eslint/eslintrc" "^1.4.1"
+    "@humanwhocodes/config-array" "^0.11.8"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.4.0"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
 esm@^3.2.25:
   version "3.2.25"
   resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"