add accurate loading states in all views

src/components/views/Board.jsx

@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 import { Virtuoso } from 'react-virtuoso';
-import { useAccount, useAccountComments, useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useAccountComments, useFeed, usePublishComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -16,6 +16,7 @@ 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';
@@ -63,6 +64,7 @@ const Board = () => {
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
 
   const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
 
@@ -322,6 +324,7 @@ const Board = () => {
     navigate(`/p/${selected}`);
   };
 
+  
   const handleSubscribe = async () => {
     try {
       if (subscribed === false) {
@@ -333,6 +336,7 @@ const Board = () => {
       setErrorMessage(error);
     }
   };
+
   
   return (
     <>
@@ -505,7 +509,7 @@ const Board = () => {
             </>
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
-              <span>Fetching IPFS...</span>
+              <span>{formatState(subplebbit.state)}</span>
             </div>
           )}
           <div id="catalog-button-mobile">

src/components/views/Catalog.jsx

@@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useEffect, 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 { useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
+import { useFeed, usePublishComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
@@ -12,6 +12,7 @@ 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';
@@ -49,6 +50,7 @@ const Catalog = () => {
   const [visible, setVisible] = useState(true);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
   const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
 
   const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
 
@@ -248,6 +250,7 @@ const Catalog = () => {
     }
   };
 
+
   return (
     <>
       <Helmet>
@@ -418,7 +421,7 @@ const Catalog = () => {
           </>
           ) : (
             <div id="stats" style={{float: "right", marginTop: "5px"}}>
-              <span>Fetching IPFS...</span>
+              <span>{formatState(subplebbit.state)}</span>
             </div>
           )}
           <div id="return-button-mobile">
@@ -426,9 +429,6 @@ const Catalog = () => {
               <Link to={`/p/${selectedAddress}`}>Return</Link>
             </span>
           </div>
-          <div id="stats" style={{float: "right", marginTop: "5px"}}>
-            {feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)}
-          </div>
           <hr />
         </TopBar>
         <Threads selectedStyle={selectedStyle}>

src/components/views/Pending.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
@@ -35,6 +35,7 @@ const Pending = () => {
 
   const account = useAccount();
   const comment = useAccountComment({commentIndex: index});
+  const { publishingState } = useAccountComment({commentIndex: index});
   
   const [visible] = useState(true);
   const [errorMessage] = useState(null);
@@ -169,7 +170,7 @@ const Pending = () => {
             <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
             ]
           </span>
-            <span className="reply-stat">{formatState(comment.state)}</span>
+            <span className="reply-stat">{formatState(publishingState)}</span>
           <hr />
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />

src/components/views/Subscriptions.jsx

@@ -152,10 +152,6 @@ const Subscriptions = () => {
     navigate(`/p/${selected}`);
   };
 
-  useEffect(() => {
-    console.log(feed);
-  }, [feed]);
-  
 
   return (
     <>

src/utils/formatState.js

@@ -1,18 +1,27 @@
 function formatState(str) {
-  return (
-    str
-      .replace(/-/g, " ")
-      .split(" ")
-      .map((word) => {
-        word = word.toLowerCase();
-        if (word === "ipfs" || word === "ipns") {
-          return word.toUpperCase();
-        } else {
-          return word.charAt(0).toUpperCase() + word.slice(1);
-        }
-      })
-      .join(" ") + "..."
-  );
+  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.includes("Failed")) {
+    return formattedWords.join(" ") + ".";
+  }
+
+  return formattedWords.join(" ") + "...";
 }
 
 export default formatState;

src/utils/isValidUrl.js

@@ -0,0 +1,10 @@
+const isValidUrl = (url) => {
+  try {
+    new URL(url);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+export default isValidUrl;