From c68aa905c71ae7bf25e93012b1930af4db8674b4 Mon Sep 17 00:00:00 2001
From: igormuba <igorm-uba@hotmail.com>
Date: Wed, 9 Aug 2023 16:16:15 -0300
Subject: [PATCH] visually show downloaded pin

---
 .../views/WatchView/WatchViewContent.tsx      | 50 +++++++++++++++----
 1 file changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/renderer/views/WatchView/WatchViewContent.tsx b/src/renderer/views/WatchView/WatchViewContent.tsx
index c4ffc30..99ed72b 100644
--- a/src/renderer/views/WatchView/WatchViewContent.tsx
+++ b/src/renderer/views/WatchView/WatchViewContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Container, Col, Row } from 'react-bootstrap'
 import { FollowWidget } from '../../components/widgets/FollowWidget'
 import { FaDownload } from 'react-icons/fa'
@@ -12,7 +12,10 @@ import { LoopCircleLoading } from 'react-loadingg'
 import DateTime from 'date-and-time'
 import DOMPurify from 'dompurify'
 import rehypeRaw from 'rehype-raw'
+import { usePinningUtils } from '../PinsView/pinningUtils'
 export const WatchViewContent = (props: any) => {
+  const [currentViewIsPinned, setCurrentViewIsPinned] = useState(false)
+
   const {
     loaded,
     videoInfo,
@@ -49,6 +52,20 @@ export const WatchViewContent = (props: any) => {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
   }
 
+  const { pinList } = usePinningUtils()
+
+  useEffect(() => {
+    checkPins()
+  }, [pinList, rootCid])
+  const checkPins = () => {
+    let pins = pinList.flatMap((obj) => obj.cids)
+
+    if (pins.includes(rootCid)) {
+      setCurrentViewIsPinned(true)
+    } else {
+      setCurrentViewIsPinned(false)
+    }
+  }
   return (
     <div>
       {loaded ? (
@@ -99,14 +116,29 @@ export const WatchViewContent = (props: any) => {
                   <Row>
                     <FollowWidget reflink={reflink} />
                     <div style={{ textAlign: 'center' }}>
-                      <a
-                        target="_blank"
-                        style={{ marginRight: '5px', marginLeft: '5px' }}
-                        className="btn btn-light btn-sm"
-                        onClick={PinLocally}
-                      >
-                        <FaDownload /> Download to IPFS node
-                      </a>
+                      {currentViewIsPinned ? (
+                        <button
+                          style={{ marginRight: '5px', marginLeft: '5px' }}
+                          className="btn btn-light btn-sm"
+                          disabled={currentViewIsPinned}
+                        >
+                          {'Downloaded on IPFS'}
+                        </button>
+                      ) : (
+                        <a
+                          target="_blank"
+                          style={{ marginRight: '5px', marginLeft: '5px' }}
+                          className="btn btn-light btn-sm"
+                          onClick={async () => {
+                            setCurrentViewIsPinned(true)
+                            await PinLocally()
+                            checkPins()
+                          }}
+                        >
+                          <FaDownload /> Download to IPFS node
+                        </a>
+                      )}
+
                       <div>{formatBytes(videoInfo.size)}</div>
                     </div>
                   </Row>