Countdown machinery (#44)

* MainAuctionCard

* trending auctions

* fix scroll, reduce padding

* fixing errors/warnings and formatting

* formatting & sold auctions

* artists cards

* initial presale banner. move sample data to own file

* new home layout

* presale banner image fix

* countdown implementation

Co-authored-by: B <264380+bartosz-lipinski@users.noreply.github.com>

packages/metavinci/src/components/ItemCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { Card, Row, Col } from 'antd'
 
@@ -8,8 +8,35 @@ import './index.less'
 
 
 export const ItemCard = ({ art }: { art: Art }) => {
+  const [minutes, setMinutes] = useState<number>(59)
+  const [seconds, setSeconds] = useState<number>(59)
+
   const history = useHistory()
 
+  useEffect(() => {
+    if (art.endingTS) {
+      const interval = setInterval(() => {
+        const now = (new Date()).getTime()
+        let delta = Math.abs(art.endingTS as number - now) / 1000
+  
+        const days = Math.floor(delta / 86400)
+        delta -= days * 86400
+  
+        const hours = Math.floor(delta / 3600) % 24
+        delta -= hours * 3600
+  
+        const minutes = Math.floor(delta / 60) % 60
+        delta -= minutes * 60
+
+        const seconds = Math.floor(delta % 60)
+  
+        setMinutes(minutes)
+        setSeconds(seconds)
+      }, 1000)
+      return () => clearInterval(interval)
+    }
+  }, [])
+
   const handleCoverClick = async () => {
     history.push(art.link)
   }
@@ -33,7 +60,7 @@ export const ItemCard = ({ art }: { art: Art }) => {
           <Col span={12}>
             {art.endingTS && <>
               <div>Ending in</div>
-              <div>53m 4s</div>
+              <div>{minutes}m {seconds}s</div>
             </>}
           </Col>
         </Row>

packages/metavinci/src/components/PreSaleBanner/index.tsx

@@ -18,10 +18,21 @@ export const PreSaleBanner = ({ artistName, productName, preSaleTS, image }: IPr
 
   useEffect(() => {
     const interval = setInterval(() => {
-      // TODO: compute remaining days, hours and minutes from preSaleTS
-      setDays(12)
-      setHours(23)
-      setMinutes(8)
+      const now = (new Date()).getTime()
+      let delta = Math.abs(preSaleTS - now) / 1000
+
+      const days = Math.floor(delta / 86400)
+      delta -= days * 86400
+
+      const hours = Math.floor(delta / 3600) % 24
+      delta -= hours * 3600
+
+      const minutes = Math.floor(delta / 60) % 60
+      delta -= minutes * 60
+
+      setDays(days)
+      setHours(hours)
+      setMinutes(minutes)
     }, 1000)
     return () => clearInterval(interval)
   }, [])

packages/metavinci/src/views/home/sampleData.ts

@@ -109,11 +109,56 @@ export const sampleArts: Array<Art> = [
     priceUSD: 24,
     endingTS: 1617843346000,
   },
+  {
+    image: "http://localhost:3000/img/auction4.jpg",
+    link: "/art/1234abcd",
+    title: "ONE #1/1",
+    artist: "RAC",
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617843346000,
+  },
+  {
+    image: "http://localhost:3000/img/auction1.jpg",
+    link: "/art/1234abcd",
+    title: "Cryptokitty #4823923",
+    artist: "cryptokitties",
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617843346000,
+  },
+  {
+    image: "http://localhost:3000/img/auction2.jpg",
+    link: "/art/1234abcd",
+    title: "Here Comes Trouble",
+    artist: "artworkwizard",
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617843346000,
+  },
+  {
+    image: "http://localhost:3000/img/auction3.jpg",
+    link: "/art/1234abcd",
+    title: "“ALL-DEAD” CHUCK 70s",
+    artist: "NFTSNEAKERS",
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617843346000,
+  },
+  {
+    image: "http://localhost:3000/img/auction3.jpg",
+    link: "/art/1234abcd",
+    title: "“ALL-DEAD” CHUCK 70s",
+    artist: "NFTSNEAKERS",
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617843346000,
+  },
   {
     image: 'img/auction2.jpg',
     link: '/art/1234abcd',
     title: 'Here Comes Trouble',
-    artist: '@artworkwizard',
+    artist: 'artworkwizard',
     priceSOL: 1.1,
     priceUSD: 24,
     endingTS: 1617843346000,
@@ -136,4 +181,31 @@ export const sampleArts: Array<Art> = [
     priceUSD: 24,
     endingTS: 1617843346000,
   },
-];
+  {
+    image: "http://localhost:3000/img/auction4.jpg",
+    link: "/art/1234abcd",
+    title: "ONE #1/1",
+    artist: "RAC",
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617843346000,
+  },
+  {
+    image: "http://localhost:3000/img/auction1.jpg",
+    link: "/art/1234abcd",
+    title: "Cryptokitty #4823923",
+    artist: "cryptokitties",
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617843346000,
+  },
+  {
+    image: "http://localhost:3000/img/auction2.jpg",
+    link: "/art/1234abcd",
+    title: "Here Comes Trouble",
+    artist: "artworkwizard",
+    priceSOL: 1.1,
+    priceUSD: 24,
+    endingTS: 1617843346000,
+  },
+]