Refactor PinRows.tsx to fetch and display the status of pinned items.

spknetwork · Jul 6, 2023 · ccd8e80 · ccd8e80
1 parent c444b49
commit ccd8e80
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 15 deletions.
diff --git a/src/renderer/views/PinsView/PinRows.tsx b/src/renderer/views/PinsView/PinRows.tsx
@@ -1,22 +1,53 @@
-// PinRows.tsx
-import React, { useMemo } from 'react';
-import { Button } from 'react-bootstrap';
-import { bytesAsString, millisecondsAsString } from '../../../common/utils/unit-conversion.functions';
-import PinCids from './PinCids';
-import RefLink from '../../../main/RefLink';
+import React from 'react';
+import { bytesAsString, millisecondsAsString } from '../../../common/utils/unit-conversion.functions'
+import RefLink from '../../../main/RefLink'
+import { IoIosRadioButtonOn } from 'react-icons/io'
+import PinCids from './PinCids'
+import { Button } from 'react-bootstrap'
 
 export const pinRows = (pinList: any[], removePin: any) => {
+  const [cidStatus, setCidStatus] = React.useState({});
+  console.log('pinRows.tsx cidStatus: ', cidStatus);
+  const fetchCIDStatus = async (cid) => {
+    let firstCid;
+    if (Array.isArray(cid)) {
+      firstCid = cid[0];
+    } else {
+      firstCid = cid.split(',')[0];
+    }
+    console.log('pinRows.tsx fetchCIDStatus cid: ', firstCid);
+    const response = await fetch(`http://spk.tv/CID?key=${firstCid}`);
+    console.log('pinRows.tsx fetchCIDStatus response: ', response);
+    const data = await response.json();
+    return data;
+  };
+
+  React.useEffect(() => {
+    const intervalId = setInterval(async () => {
+      const newCidStatus = {};
+      for (let pin of pinList) {
+        if (pin.meta) {
+          const status = await fetchCIDStatus(pin.cids);
+          console.log('pinRows.tsx status: ', status);
+          newCidStatus[pin.cids] = status;
+        }
+      }
+      setCidStatus(newCidStatus);
+    }, 3000); // Every 30 seconds
+
+    return () => clearInterval(intervalId); // Clear interval on unmount
+  }, [pinList]);
+
   return (
     <>
       {pinList.map((pin) => {
-          if(pin.meta) {
-          console.log('pinRows.tsx pin: ', pin);
-            const sizeBest = bytesAsString(pin.size);
-            const expireText = pin.expire
-              ? `In ${millisecondsAsString((pin.expire = new Date().getTime()))}`
-              : 'Permanent';
-            const pinDateText = pin.meta.pin_date ? new Date(pin.meta.pin_date).toLocaleString() : null;
-            console.log('pinRows.tsx pinDateText: ', pinDateText);
+        if(pin.meta) {
+          const sizeBest = bytesAsString(pin.size);
+          const expireText = pin.expire
+            ? `In ${millisecondsAsString((pin.expire = new Date().getTime()))}`
+            : 'Permanent';
+          const pinDateText = pin.meta.pin_date ? new Date(pin.meta.pin_date).toLocaleString() : null;
+          const currentStatus = cidStatus[pin.cids];
             return (
               <tr key={pin._id}>
                 <td>
@@ -38,6 +69,10 @@ export const pinRows = (pinList: any[], removePin: any) => {
                     X
                   </Button>
                 </td>
+                <td>
+                  <IoIosRadioButtonOn style={{ color: currentStatus && currentStatus.status ? 'green' : 'red' }} />
+                  {currentStatus && `${currentStatus.percentage}%`}
+                </td>
               </tr>
             );
 

diff --git a/src/renderer/views/PinsView/PinsViewComponent.tsx b/src/renderer/views/PinsView/PinsViewComponent.tsx
@@ -1,3 +1,4 @@
+// Path: src\renderer\views\PinsView\PinsViewComponent.tsx
 import React from 'react';
 import { Button, Col, Dropdown, Row, Table } from 'react-bootstrap'
 import { CustomPinsViewToggle } from './CustomToggle'
@@ -55,6 +56,7 @@ export const PinsViewComponent: React.FC<PinsViewProps> =
             <th>Pin Date</th>
             <th>Size/Status</th>
             <th>Remove?</th>
+            <th>SPoA</th>
           </tr>
           </thead>
           <tbody>{pinRows}</tbody>

diff --git a/src/renderer/views/PinsView/pinningUtils.tsx b/src/renderer/views/PinsView/pinningUtils.tsx
@@ -188,7 +188,7 @@ export const usePinningUtils = () => {
   useEffect(() => {
     document.title = '3Speak - Tokenised video communities';
     generate();
-    pid.current = setInterval(generate, 1500);
+    pid.current = setInterval(generate, 40000);
     updateSearchTables();
 
     return () => {