feat(status): Add status view on RequestList (#18)

Author: hyp3rflow

src/pages/index/RequestList/index.module.scss

@@ -6,16 +6,46 @@
 }
 
 .request-list-item {
-  .service-path {
-    font-size: 0.7em;
-  }
-  .rpc-name {
-    font-weight: bold;
-  }
-  .service-path,
-  .rpc-name {
+  display: flex;
+  justify-content: space-between;
+
+  .list-main {
+    .service-path {
+      font-size: 0.7em;
+    }
+    .rpc-name {
+      font-weight: bold;
+    }
+
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
+  .list-status {
+    flex-shrink: 0;
+    position: relative;
+    color: var(--pb-fg-active);
+
+    .payload-circle {
+      background-color: var(--oc-green-8);
+    }
+
+    .error-circle {
+      background-color: var(--oc-red-8);
+    }
+
+    .payload-circle,
+    .error-circle {
+      margin-left: 0.25em;
+
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+    }
+  }
 }

src/pages/index/RequestList/index.tsx

@@ -13,17 +13,29 @@ const RequestList: React.FC<RequestListProps> = () => {
   );
   return (
     <div className={style["request-list"]}>
-      {requestList.map(({ key, servicePath, rpcName }) => (
-        <Button
-          key={key}
-          className={style["request-list-item"]}
-          data-selected={key === selectedRequestKey}
-          onClick={() => setSelectedRequestKey(key)}
-        >
-          <div className={style["service-path"]}>{servicePath}</div>
-          <div className={style["rpc-name"]}>{rpcName}</div>
-        </Button>
-      ))}
+      {requestList.map(
+        ({ key, servicePath, rpcName, responsePayloads, responseError }) => (
+          <Button
+            key={key}
+            className={style["request-list-item"]}
+            data-selected={key === selectedRequestKey}
+            onClick={() => setSelectedRequestKey(key)}
+          >
+            <div className={style["list-main"]}>
+              <div className={style["service-path"]}>{servicePath}</div>
+              <div className={style["rpc-name"]}>{rpcName}</div>
+            </div>
+            <div className={style["list-status"]}>
+              {responsePayloads.length > 0 && (
+                <div className={style["payload-circle"]}>
+                  {responsePayloads.length}
+                </div>
+              )}
+              {responseError && <div className={style["error-circle"]} />}
+            </div>
+          </Button>
+        )
+      )}
     </div>
   );
 };
@@ -32,7 +44,10 @@ export default memo(RequestList);
 const requestListAtom = atom((get) => {
   const requests = get(requestsAtom);
   return Object.keys(requests).map((key) => {
-    const { servicePath, rpcName } = get(requests[key]);
-    return { key, servicePath, rpcName };
+    const { servicePath, rpcName, responsePayloadsAtom, responseError } = get(
+      requests[key]
+    );
+    const responsePayloads = get(responsePayloadsAtom);
+    return { key, servicePath, rpcName, responsePayloads, responseError };
   });
 });

src/pages/index/Settings/index.tsx

@@ -23,7 +23,6 @@ const Settings: React.FC<SettingsProps> = () => {
         isChecked={preserveLog}
         onChange={(v) => {
           setPreserveLog(v);
-          console.log(v);
         }}
       >
         Preserve log