diff --git a/package.json b/package.json index 6c75b52e..774f56e2 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,11 @@ "version": "0.1.1", "private": true, "dependencies": { - "@capacitor/android": "3.6.0", - "@capacitor/core": "3.6.0", "@babel/core": "7.21.3", "@babel/plugin-syntax-flow": "7.18.6", "@babel/plugin-transform-react-jsx": "7.21.0", + "@capacitor/android": "3.6.0", + "@capacitor/core": "3.6.0", "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#97b538693972e26f7c0f0f13ec6afab03b0e2e57", "@testing-library/dom": "9.0.1", "@testing-library/jest-dom": "5.14.1", @@ -29,7 +29,6 @@ "react-dom": "18.2.0", "react-draggable": "4.4.5", "react-helmet-async": "1.3.0", - "react-infinite-scroller": "1.2.6", "react-is": "18.2.0", "react-markdown": "8.0.6", "react-modal": "3.16.1", @@ -37,6 +36,7 @@ "react-scripts": "5.0.1", "react-toastify": "9.1.1", "react-tooltip": "5.10.0", + "react-virtuoso": "^4.3.2", "rehype-sanitize": "5.0.1", "remark-breaks": "3.0.2", "styled-components": "5.3.9", @@ -115,15 +115,15 @@ } }, "devDependencies": { + "@capacitor/cli": "3.6.0", "concurrently": "8.0.1", + "cordova-res": "0.15.4", "cross-env": "7.0.3", "decompress": "4.2.1", "electron": "19.0.1", "electron-builder": "23.0.9", "typescript": "5.0.2", - "wait-on": "7.0.1", - "cordova-res": "0.15.4", - "@capacitor/cli": "3.6.0" + "wait-on": "7.0.1" }, "resolutions": { "styled-components": "^5" diff --git a/src/App.js b/src/App.js index 9f9a3625..af05bb3e 100644 --- a/src/App.js +++ b/src/App.js @@ -31,6 +31,7 @@ const GlobalStyle = createGlobalStyle` } .tooltip { + z-index: 999; border-radius: 0; max-width: 40%; font-size: 11px; diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 97e8f19d..393844b1 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1,8 +1,8 @@ import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Helmet } from 'react-helmet-async'; -import InfiniteScroll from 'react-infinite-scroller'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; +import { Virtuoso } from 'react-virtuoso'; import { useAccount, useAccountComments, useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks'; import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { debounce } from 'lodash'; @@ -458,16 +458,14 @@ const Board = () => { {feed.length < 1 ? ( ) : ( - - {selectedFeed.map((thread, index) => { - const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {}; - const commentMediaInfo = getCommentMediaInfo(thread); - const fallbackImgUrl = "/assets/filedeleted-res.gif"; - return ( + { + const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {}; + const commentMediaInfo = getCommentMediaInfo(thread); + const fallbackImgUrl = "/assets/filedeleted-res.gif"; + return (
@@ -1039,8 +1037,12 @@ const Board = () => { )})}
- )})} - + ); + }} + endReached={tryLoadMore} + useWindowScroll={true} + components={{ Footer: hasMore ? () => : null }} + /> )}
diff --git a/yarn.lock b/yarn.lock index b98004e3..a974f352 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11931,7 +11931,7 @@ prompts@^2.0.1, prompts@^2.3.2, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.0.0, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -12177,13 +12177,6 @@ react-helmet-async@1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-infinite-scroller@1.2.6: - version "1.2.6" - resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz#8b80233226dc753a597a0eb52621247f49b15f18" - integrity sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ== - dependencies: - prop-types "^15.5.8" - react-is@18.2.0, react-is@^18.0.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" @@ -12332,6 +12325,11 @@ react-tooltip@5.10.0: "@floating-ui/dom" "1.2.3" classnames "^2.3.2" +react-virtuoso@^4.3.2: + version "4.3.2" + resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.3.2.tgz#91d4926c67f635cf7efc2dea29e7cd6de83575d1" + integrity sha512-n51V4fMk36VM6NapfaMbfs4w/IaVodp5asp+rtzlvz0yurG6uVrqA040ke43gpYtoOL6j6TxeXWo4b6GpO9N0A== + react@18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"