Update StateLabel.jsx

src/components/StateLabel.jsx

@@ -1,48 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { useComment } from "@plebbit/plebbit-react-hooks";
+import useStateString from "../hooks/useStateString";
 
 
 const StateLabel = ({ commentCid, className }) => {
   const comment = useComment({commentCid});
-  const [stateString, setStateString] = useState(null);
-
-  useEffect(() => {
-    if (comment.clients) {
-      for (const ipfsGatewayUrl in comment.clients?.ipfsGateways) {
-        const ipfsGateway = comment.clients?.ipfsGateways[ipfsGatewayUrl]
-        if (ipfsGateway.state === 'fetching-ipfs') {
-          setStateString(`Fetching IPFS from ${ipfsGatewayUrl}`)
-        }
-        if (ipfsGateway.state === 'fetching-ipns-update') {
-          setStateString(`Fetching IPNS from ${ipfsGatewayUrl}`)
-        }
-        if (ipfsGateway.state === 'succeeded') {
-          setStateString(`Fetched comment from ${ipfsGatewayUrl}`)
-        }
-      }
-      
-      for (const ipfsClientUrl in comment.clients?.ipfsClients) {
-        const ipfsClient = comment.clients?.ipfsClients[ipfsClientUrl]
-        if (ipfsClient.state === 'fetching-ipfs') {
-          setStateString(`Fetching IPFS from ${ipfsClient.peers.length} peers`)
-        }
-        if (ipfsClient.state === 'fetching-ipns-update') {
-          setStateString(`Fetching IPNS from ${ipfsClient.peers.length} peers`)
-        }
-        if (ipfsClient.state === 'succeeded') {
-          setStateString(`Fetched comment from ${ipfsClient.peers.length} peers`)
-        }
-      }
-    }
-  }, [comment.clients])
-
+  const stateString = useStateString(comment);
 
   return (
     comment.state === "succeeded" ? null : (
     <span className={className}>
         <>
           <br />
-          {stateString || comment.state}
+          {stateString || comment.state.charAt(0).toUpperCase() + comment.state.slice(1)}
         </>
     </span>
     )