Revert "better lint, added InfiniteScroll, debugUtils"

This reverts commit 965068e8a8.
This commit is contained in:
plebbitor
2023-02-12 12:26:31 +01:00
parent 965068e8a8
commit af0a4c67de
5 changed files with 81 additions and 143 deletions
+1 -2
View File
@@ -1,3 +1,2 @@
REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT=1 REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT=1
REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT_LOADING_TIME=1000 REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT_LOADING_TIME=1000
REACT_APP_PLEBBIT_REACT_HOOKS_NO_CACHE=1
-2
View File
@@ -49,8 +49,6 @@
}, },
"devDependencies": { "devDependencies": {
"@craco/craco": "^7.0.0", "@craco/craco": "^7.0.0",
"eslint": "^8.34.0",
"eslint-plugin-react": "^7.32.2",
"typescript": "^4.9.5" "typescript": "^4.9.5"
}, },
"resolutions": { "resolutions": {
+78 -92
View File
@@ -1,26 +1,19 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled'; import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
import { useFeed, useComments, debugUtils } from '@plebbit/plebbit-react-hooks'; import { useFeed } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
import ImageBanner from './ImageBanner'; import ImageBanner from './ImageBanner';
import { BoardContext } from '../App'; import { BoardContext } from '../App';
import InfiniteScroll from 'react-infinite-scroller';
// await debugUtils.deleteDatabases() const Board = ({ setBodyStyle }) => {
// await debugUtils.deleteCaches()
// await debugUtils.deleteAccountsDatabases()
// await debugUtils.deleteNonAccountsDatabases()
const Board = ({setBodyStyle}) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
const [selectedStyle, setSelectedStyle] = useState("Yotsuba"); const [selectedStyle, setSelectedStyle] = useState("Yotsuba");
const {selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress} = useContext(BoardContext); const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
const [showPostFormLink, setShowPostFormLink] = useState(true); const [showPostFormLink, setShowPostFormLink] = useState(true);
const [showPostForm, setShowPostForm] = useState(false); const [showPostForm, setShowPostForm] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const {feed, hasMore, loadMore} = useFeed([`${selectedAddress}`], 'new'); const { feed } = useFeed([`${selectedAddress}`], 'new');
useEffect(() => { useEffect(() => {
let didCancel = false; let didCancel = false;
@@ -45,7 +38,7 @@ const Board = ({setBodyStyle}) => {
}; };
const handleClickHelp = () => { 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 = () => { const handleClickForm = () => {
@@ -219,96 +212,89 @@ const Board = ({setBodyStyle}) => {
<hr /> <hr />
</TopBar> </TopBar>
<BoardForm selectedStyle={selectedStyle} id="board-form" name="board-form" action="" method="post"> <BoardForm selectedStyle={selectedStyle} id="board-form" name="board-form" action="" method="post">
<InfiniteScroll <div className="board">
pageStart={0} {feed.map(object => {
loadMore={loadMore} let counter = 1;
hasMore={hasMore} const thread = object;
loader={<div>Loading...</div>} const { replies: { pages: { topAll: { comments } } } } = object;
> return (
<div className="board"> <>
{feed.map(object => { <div key={`t-${thread.cid}`} className="thread">
let counter = 1; <div key={`c-${thread.cid}`} className="post-container op-container">
const thread = object; <div key={`po-${thread.cid}`} className="post op">
const {replies: {pages: {topAll: {comments} } } } = object; <div key={`pi-${thread.cid}`} className="post-info">
return ( &nbsp;
<> <span key={`nb-${thread.cid}`} className="name-block">
<div key={`t-${thread.cid}`} className="thread"> <span key={`n-${thread.cid}`} className="name">{thread.author.displayName}</span>
<div key={`c-${thread.cid}`} className="post-container op-container"> &nbsp;
<div key={`po-${thread.cid}`} className="post op"> <span key={`pa-${thread.cid}`} className="poster-address">
<div key={`pi-${thread.cid}`} className="post-info"> (User: {thread.author.address})
</span>
</span>
&nbsp; &nbsp;
<span key={`nb-${thread.cid}`} className="name-block"> <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
<span key={`n-${thread.cid}`} className="name">{thread.author.displayName}</span>
&nbsp;
<span key={`pa-${thread.cid}`} className="poster-address">
(User: {thread.author.address})
</span>
</span>
&nbsp;
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
&nbsp;
<span key={`pn-${thread.cid}`} className="post-number">
<a key={`pl1-${thread.cid}`} href="javascript:void(0)" title="Link to this post">No.</a>
<a key={`pl2-${thread.cid}`} href="javascript:void(0)" title="Reply to this post">00000001</a>
&nbsp; &nbsp;
<span key={`rl1-${thread.cid}`}>
[
<a key={`rl2-${thread.cid}`} className="reply-link" href="javascript:void(0)">Reply</a>
]
</span>
</span>
<a key={`pmb-${thread.cid}`} className="post-menu-button" href="javascript:void(0)" title="Post menu" data-cmd="post-menu"></a>
<div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
<span key={`ql1-${thread.cid}`}>
<a key={`ql2-${thread.cid}`} className="quote-link" href="javascript:void(0)">{'>>'}00000002</a>
</span>
</div>
<blockquote key={`bq-${thread.cid}`}>
<span key={`q-${thread.cid}`} className="quote">
{thread.title ? `>${thread.title}` : null}
</span>
<br key={`br-${thread.cid}`} />
{thread.content}
</blockquote>
</div>
</div>
</div>
{comments.map(reply => {
counter++;
return (
<div key={`pc-${reply.cid}`} className="post-container reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
<div key={`pr-${reply.cid}`} className="post-reply">
<div key={`pi-${reply.cid}`} className="post-info">
&nbsp; &nbsp;
<span key={`nb-${reply.cid}`} className="nameblock"> <span key={`pn-${thread.cid}`} className="post-number">
<span key={`n-${reply.cid}`} className="name">{reply.author.displayName}</span> <a key={`pl1-${thread.cid}`} href="javascript:void(0)" title="Link to this post">No.</a>
&nbsp; <a key={`pl2-${thread.cid}`} href="javascript:void(0)" title="Reply to this post">00000001</a>
<span key={`pa-${reply.cid}`} className="poster-address"> &nbsp; &nbsp;
(User: {reply.author.address}) <span key={`rl1-${thread.cid}`}>
</span> [
<a key={`rl2-${thread.cid}`} className="reply-link" href="javascript:void(0)">Reply</a>
]
</span> </span>
&nbsp; </span>
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span> <a key={`pmb-${thread.cid}`} className="post-menu-button" href="javascript:void(0)" title="Post menu" data-cmd="post-menu"></a>
&nbsp; <div key={`bi-${thread.cid}`} id="backlink-id" className="backlink">
<span key={`pn-${reply.cid}`} className="post-number"> <span key={`ql1-${thread.cid}`}>
<a key={`pl1-${reply.cid}`} href="javascript:void(0)" title="Link to this post">No.</a> <a key={`ql2-${thread.cid}`} className="quote-link" href="javascript:void(0)">{'>>'}00000002</a>
<a key={`pl2-${reply.cid}`} href="javascript:void(0)" title="Reply to this post">{`0000000${counter}`}</a>
</span> </span>
<a key={`pmb-${reply.cid}`} className="post-menu-button" href="javascript:void(0)" title="Post menu" data-cmd="post-menu"></a>
</div> </div>
<blockquote key={`pm-${reply.cid}`} className="post-message"> <blockquote key={`bq-${thread.cid}`}>
{reply.content} <span key={`q-${thread.cid}`} className="quote">
{thread.title ? `>${thread.title}` : null}
</span>
<br key={`br-${thread.cid}`} />
{thread.content}
</blockquote> </blockquote>
</div> </div>
</div> </div>
)})}
</div> </div>
<hr key={`hr-${thread.cid}`} /> {comments.map(reply => {
</> counter++;
return (
<div key={`pc-${reply.cid}`} className="post-container reply-container">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
<div key={`pr-${reply.cid}`} className="post-reply">
<div key={`pi-${reply.cid}`} className="post-info">
&nbsp;
<span key={`nb-${reply.cid}`} className="nameblock">
<span key={`n-${reply.cid}`} className="name">{reply.author.displayName}</span>
&nbsp;
<span key={`pa-${reply.cid}`} className="poster-address">
(User: {reply.author.address})
</span>
</span>
&nbsp;
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
&nbsp;
<span key={`pn-${reply.cid}`} className="post-number">
<a key={`pl1-${reply.cid}`} href="javascript:void(0)" title="Link to this post">No.</a>
<a key={`pl2-${reply.cid}`} href="javascript:void(0)" title="Reply to this post">{`0000000${counter}`}</a>
</span>
<a key={`pmb-${reply.cid}`} className="post-menu-button" href="javascript:void(0)" title="Post menu" data-cmd="post-menu"></a>
</div>
<blockquote key={`pm-${reply.cid}`} className="post-message">
{reply.content}
</blockquote>
</div>
</div>
)})} )})}
</div> </div>
</InfiniteScroll> <hr key={`hr-${thread.cid}`} />
</>
)})}
</div>
</BoardForm> </BoardForm>
</Container> </Container>
); );
+1 -1
View File
@@ -5,7 +5,7 @@ import { BoardContext } from '../App';
const Home = () => { const Home = () => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
const {selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress} = useContext(BoardContext); const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
const handleClick = (title, address) => { const handleClick = (title, address) => {
setSelectedTitle(title); setSelectedTitle(title);
+1 -46
View File
@@ -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" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g== integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
eslint-plugin-react@^7.27.1, eslint-plugin-react@^7.32.2: eslint-plugin-react@^7.27.1:
version "7.32.2" version "7.32.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg== integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
@@ -5592,51 +5592,6 @@ eslint@^8.3.0:
strip-json-comments "^3.1.0" strip-json-comments "^3.1.0"
text-table "^0.2.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: esm@^3.2.25:
version "3.2.25" version "3.2.25"
resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10" resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"