From 2aff229997ae8ad196148a043f3f50ae92ff228c Mon Sep 17 00:00:00 2001 From: Tom Date: Tue, 9 May 2023 15:58:19 +0200 Subject: [PATCH] add new loading states --- src/components/views/Board.jsx | 25 ++++++++++---- src/components/views/Catalog.jsx | 28 +++++++++++----- src/components/views/Pending.jsx | 34 ++++++++++++------- src/components/views/Thread.jsx | 28 +++++++++++++--- src/utils/formatState.js | 27 --------------- yarn.lock | 57 -------------------------------- 6 files changed, 82 insertions(+), 117 deletions(-) delete mode 100644 src/utils/formatState.js diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 58dd2a43..b091bcab 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -16,7 +16,6 @@ import PostLoader from '../PostLoader'; import ReplyModal from '../ReplyModal'; import SettingsModal from '../SettingsModal'; import findShortParentCid from '../../utils/findShortParentCid'; -import formatState from '../../utils/formatState'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; import handleAddressClick from '../../utils/handleAddressClick'; @@ -25,6 +24,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick'; import handleStyleChange from '../../utils/handleStyleChange'; import useClickForm from '../../hooks/useClickForm'; import useError from '../../hooks/useError'; +import useStateString from '../../hooks/useStateString'; import useSuccess from '../../hooks/useSuccess'; import packageJson from '../../../package.json' const {version} = packageJson @@ -66,12 +66,23 @@ const Board = () => { const { subplebbitAddress } = useParams(); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); - useEffect(() => { - if (subplebbit.error) { - const errorMessage = formatState(subplebbit.error); - setErrorMessage(errorMessage); + const stateString = useStateString(subplebbit?.clients); + + const errorString = useMemo(() => { + if (subplebbit?.state === 'failed') { + let errorString = 'Failed fetching board "' + selectedAddress + '".'; + if (subplebbit.error) { + errorString += `: ${subplebbit.error.toString().slice(0, 300)}` + } + return errorString } - }, [subplebbit.error]); + }, [subplebbit?.state, subplebbit?.error, selectedAddress]) + + useEffect(() => { + if (errorString) { + setErrorMessage(errorString); + } + }, [errorString]); const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); @@ -515,7 +526,7 @@ const Board = () => { ) : (
- {formatState(subplebbit.state)} + {stateString}
)}
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 4e5f4241..c6798f39 100644 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -1,4 +1,4 @@ -import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'; +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'; @@ -13,11 +13,11 @@ import CatalogLoader from '../CatalogLoader'; import ImageBanner from '../ImageBanner'; import OfflineIndicator from '../OfflineIndicator'; import SettingsModal from '../SettingsModal'; -import formatState from '../../utils/formatState'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import handleStyleChange from '../../utils/handleStyleChange'; import useClickForm from '../../hooks/useClickForm'; import useError from '../../hooks/useError'; +import useStateString from '../../hooks/useStateString'; import useSuccess from '../../hooks/useSuccess'; import packageJson from '../../../package.json' const {version} = packageJson @@ -53,13 +53,23 @@ const Catalog = () => { const { subplebbitAddress } = useParams(); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); - useEffect(() => { - if (subplebbit.error) { - const errorMessage = formatState(subplebbit.error); - setErrorMessage(errorMessage); - } - }, [subplebbit.error]); + const stateString = useStateString(subplebbit?.clients); + const errorString = useMemo(() => { + if (subplebbit?.state === 'failed') { + let errorString = 'Failed fetching board "' + selectedAddress + '".'; + if (subplebbit.error) { + errorString += `: ${subplebbit.error.toString().slice(0, 300)}` + } + return errorString + } + }, [subplebbit?.state, subplebbit?.error, selectedAddress]) + + useEffect(() => { + if (errorString) { + setErrorMessage(errorString); + } + }, [errorString]); const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); const [errorMessage, setErrorMessage] = useState(null); @@ -430,7 +440,7 @@ const Catalog = () => { ) : (
- {formatState(subplebbit.state)} + {stateString}
)}
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx index b9911e05..68b4f3ad 100644 --- a/src/components/views/Pending.jsx +++ b/src/components/views/Pending.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { Helmet } from 'react-helmet-async'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; @@ -10,12 +10,12 @@ import ImageBanner from '../ImageBanner'; import Post from '../Post'; import PostLoader from '../PostLoader'; import SettingsModal from '../SettingsModal'; -import formatState from '../../utils/formatState'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; import handleQuoteClick from '../../utils/handleQuoteClick'; import handleStyleChange from '../../utils/handleStyleChange'; import useError from '../../hooks/useError'; +import useStateString from '../../hooks/useStateString'; import packageJson from '../../../package.json' const {version} = packageJson @@ -35,20 +35,30 @@ const Pending = () => { const account = useAccount(); const comment = useAccountComment({commentIndex: index}); - const { publishingState, error } = useAccountComment({commentIndex: index}); - + + const stateString = useStateString(comment?.clients) + + const errorString = useMemo(() => { + if (comment?.state === 'failed') { + let errorString = 'Failed fetching pending thread. Pending index: ' + index; + if (comment.error) { + errorString += `: ${comment.error.toString().slice(0, 300)}` + } + return errorString + } + }, [comment?.state, comment?.error, index]) + + useEffect(() => { + if (errorString) { + setErrorMessage(errorString); + } + }, [errorString]); + const [visible] = useState(true); const [errorMessage, setErrorMessage] = useState(null); useError(errorMessage, [errorMessage]); - useEffect(() => { - if (error) { - const errorMessage = formatState(error); - setErrorMessage(errorMessage); - } - }, [error]); - const navigate = useNavigate(); const [commentMediaInfo, setCommentMediaInfo] = useState(null); const fallbackImgUrl = "assets/filedeleted-res.gif"; @@ -178,7 +188,7 @@ const Pending = () => { Catalog ] - {formatState(publishingState)} + {stateString}
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index ac49693b..d126baeb 100644 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -15,7 +15,6 @@ import PostLoader from '../PostLoader'; import ReplyModal from '../ReplyModal'; import SettingsModal from '../SettingsModal'; import findShortParentCid from '../../utils/findShortParentCid'; -import formatState from '../../utils/formatState'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; import handleAddressClick from '../../utils/handleAddressClick'; @@ -24,6 +23,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick'; import handleStyleChange from '../../utils/handleStyleChange'; import useClickForm from '../../hooks/useClickForm'; import useError from '../../hooks/useError'; +import useStateString from '../../hooks/useStateString'; import packageJson from '../../../package.json' const {version} = packageJson @@ -61,6 +61,24 @@ const Thread = () => { const { subplebbitAddress, threadCid } = useParams(); const handleClickForm = useClickForm(); + const stateString = useStateString(comment?.clients); + + const errorString = useMemo(() => { + if (comment?.state === 'failed') { + let errorString = 'Failed fetching thread.' + if (comment.error) { + errorString += `: ${comment.error.toString().slice(0, 300)}` + } + return errorString + } + }, [comment?.state, comment?.error]) + + useEffect(() => { + if (errorString) { + setErrorMessage(errorString); + } + }, [errorString]); + const commentMediaInfo = getCommentMediaInfo(comment); const fallbackImgUrl = "assets/filedeleted-res.gif"; @@ -463,10 +481,10 @@ const Thread = () => { No replies yet ) ) : ( - {formatState(comment.state)} + {stateString} ) ) : ( - {formatState(comment.state)} + {stateString} )}
@@ -1036,10 +1054,10 @@ const Thread = () => { No replies yet ) ) : ( - {formatState(comment.state)} + {stateString} ) ) : ( - {formatState(comment.state)} + {stateString} )}
diff --git a/src/utils/formatState.js b/src/utils/formatState.js deleted file mode 100644 index 6251a7b2..00000000 --- a/src/utils/formatState.js +++ /dev/null @@ -1,27 +0,0 @@ -function formatState(str) { - if (!str) { - return null; - } - - const formattedWords = str - .replace(/-/g, " ") - .split(" ") - .map((word, index) => { - word = word.toLowerCase(); - if (word === "ipfs" || word === "ipns") { - return word.toUpperCase(); - } else if (index === 0) { - return word.charAt(0).toUpperCase() + word.slice(1); - } else { - return word; - } - }); - - if (formattedWords[0] === "Failed" || formattedWords[0] === "Succeeded") { - return formattedWords.join(" ") + "."; - } - - return formattedWords.join(" ") + "..."; -} - -export default formatState; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index a1553cf4..4ca3a6ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2613,48 +2613,6 @@ mkdirp "^1.0.4" rimraf "^3.0.2" -"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#1073e876f52514195e87512281a9d2d7bbefbd6c": - version "0.0.3" - resolved "https://github.com/plebbit/plebbit-js.git#1073e876f52514195e87512281a9d2d7bbefbd6c" - dependencies: - "@keyv/sqlite" "3.6.2" - "@plebbit/plebbit-logger" "github:plebbit/plebbit-logger" - "@types/node-fetch" "2.6.2" - "@types/proper-lockfile" "4.1.2" - "@types/uuid" "8.3.4" - assert "2.0.0" - async-wait-until "2.0.12" - buffer "6.0.3" - captcha-canvas "3.2.1" - err-code "3.0.1" - ethers "5.7.2" - file-type "16.5.4" - form-data "4.0.0" - hpagent "1.2.0" - ipfs-http-client "56.0.3" - ipfs-only-hash "4.0.0" - is-ipfs "6.0.2" - jose "4.11.0" - js-sha256 "0.9.0" - keyv "4.5.2" - knex "2.3.0" - libp2p-crypto "0.21.2" - limiter "2.1.0" - localforage "1.10.0" - lodash-es "4.17.21" - open-graph-scraper "5.2.3" - p-limit "3.1.0" - peer-id "0.16.0" - proper-lockfile "github:plebbit/node-proper-lockfile" - retry "0.13.1" - safe-stable-stringify "2.4.1" - skia-canvas "1.0.0" - sqlite3 "5.1.2" - tiny-typed-emitter "2.1.0" - tinycache "1.1.2" - ts-custom-error "3.3.1" - uuid "9.0.0" - "@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#bcf4ec7ba024fdd7dc0bb2fab76c27c93597dd50": version "0.0.3" resolved "https://github.com/plebbit/plebbit-js.git#bcf4ec7ba024fdd7dc0bb2fab76c27c93597dd50" @@ -2710,21 +2668,6 @@ dependencies: debug "4.3.3" -"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#91ea5a494fde74836b085e912f671cc5489ecf09": - version "0.0.1" - resolved "https://github.com/plebbit/plebbit-react-hooks.git#91ea5a494fde74836b085e912f671cc5489ecf09" - dependencies: - "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#1073e876f52514195e87512281a9d2d7bbefbd6c" - "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git" - assert "2.0.0" - ethers "5.6.9" - localforage "1.10.0" - lodash.isequal "4.5.0" - memoizee "0.4.15" - quick-lru "5.1.1" - uuid "8.3.2" - zustand "4.0.0" - "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#e602eda8080f2b3449388c2d5868d6e6da60c8f6": version "0.0.1" resolved "https://github.com/plebbit/plebbit-react-hooks.git#e602eda8080f2b3449388c2d5868d6e6da60c8f6"