fix state labels to reflect precise state

src/components/PendingLabel.jsx

@@ -1,19 +1,8 @@
-import React
+import React from "react";
-// , { useState, useEffect }
- from "react";
 import { useAccountComment } from "@plebbit/plebbit-react-hooks";
-// import useStateString from "../hooks/useStateString";
 
 const PendingLabel = ({ commentIndex }) => {
   const comment = useAccountComment({commentIndex: commentIndex});
-  // const stateString = useStateString(comment);
-
-  // const [isLoading, setIsLoading] = useState(true);
-
-  // useEffect(() => {
-  //   const timer = setTimeout(() => setIsLoading(false), 2000);
-  //   return () => clearTimeout(timer);
-  // }, []);
 
   if (commentIndex === undefined) return null;
   
@@ -21,16 +10,16 @@ const PendingLabel = ({ commentIndex }) => {
     comment.cid ? (
       <span>{comment.cid.slice(2, 14)}</span>
     ) : (
-      (comment.state === "failed" 
+      comment.state === "pending" ? (
-      // || (stateString === undefined && !isLoading)
-      ) ? (
-        <span style={{color: 'red', fontWeight: '700'}}>
-          Failed
-        </span>
-      ) : (
         <span style={{color: 'red', fontWeight: '700'}}>
           Pending
         </span>
+      ) : (
+        comment.state === "failed" ? (
+          <span style={{color: 'red', fontWeight: '700'}}>
+            Failed
+          </span>
+        ) : null 
       )
     )
   );

src/components/StateLabel.jsx

@@ -21,13 +21,7 @@ const StateLabel = ({ commentIndex, className }) => {
         null
       ) : (
         stateString === undefined && !isLoading && comment.cid === undefined ? (
-          <span className="ttl">
+          null
-            <br />
-            (
-              <span className={className}>
-              </span>
-            )
-          </span>
         ) : (
         <span className="ttl">
           <br />