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"