feat: add realtime update

Author: duongdev

.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_URL=http://localhost:3000

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_URL=${VERCEL_URL}

src/app/_components/crypto-bubbles.tsx

@@ -11,10 +11,10 @@ if (typeof Highcharts === 'object') {
   HC_more(Highcharts)
 }
 
-import { Crypto } from '../types'
+import { CryptoData } from '../../lib/types'
 
 export type CryptoBubblesProps = {
-  cryptos: Crypto[]
+  cryptos: CryptoData[]
   className?: string
 }
 

src/app/_components/crypto-table/columns.tsx

@@ -1,25 +1,25 @@
 'use client'
 
-import { Crypto } from '@/app/types'
+import { CryptoData } from '@/lib/types'
 import { ColumnDef } from '@tanstack/react-table'
 import Image from 'next/image'
 import numeral from 'numeral'
 
-export const columns: ColumnDef<Crypto>[] = [
+export const columns: ColumnDef<CryptoData>[] = [
   {
     header: '',
-    // accessorFn: (row) => ({ rank: row.rank, image: row.image }),
     accessorKey: 'rank',
     cell: ({ row }) => (
-      <div className="flex items-center gap-2">
-        <div className="min-w-4 text-right">
+      <div className="flex items-center gap-2 pr-2">
+        <div className="min-w-6 shrink-0 text-right">
           {numeral(row.getValue('rank')).format('0,0')}
         </div>
         <Image
           src={row.original.image}
           width={32}
           height={32}
           alt={row.original.symbol}
+          className="shrink-0"
         />
       </div>
     ),

src/app/_components/realtime-crypto-wrapper.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { REFRESH_INTERVAL } from '@/lib/constants'
+import { CryptoData } from '@/lib/types'
+import { getCryptoData } from '@/services/cryptos'
+import { FC, useEffect, useState } from 'react'
+import { CryptoBubbles } from './crypto-bubbles'
+import { CryptoDataTable } from './crypto-table/crypto-table'
+import { columns } from './crypto-table/columns'
+
+export type RealtimeCryptoWrapperProps = {
+  initialCryptos: CryptoData[]
+  top: number
+}
+
+export const RealtimeCryptoWrapper: FC<RealtimeCryptoWrapperProps> = ({
+  initialCryptos,
+  top,
+}) => {
+  const [cryptos, setCryptos] = useState<CryptoData[]>(initialCryptos)
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      getCryptoData(top).then(setCryptos)
+    }, REFRESH_INTERVAL)
+
+    return () => clearInterval(interval)
+  }, [top])
+
+  return (
+    <>
+      <CryptoBubbles
+        cryptos={cryptos}
+        className="h-[calc(100dvh-56px)] bg-slate-900"
+      />
+      <div className="container py-6">
+        <CryptoDataTable columns={columns} data={cryptos} />
+      </div>
+    </>
+  )
+}

src/app/api/cryptos/route.ts

@@ -0,0 +1,20 @@
+import { CRYPTO_DATA_URL } from '@/lib/constants'
+import { CryptoData } from '@/lib/types'
+import { getCryptoData } from '@/services/cryptos'
+import { orderBy } from 'lodash-es'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(request: Request) {
+  const top = parseInt(new URL(request.url).searchParams.get('top') || '100')
+
+  const response = await fetch(CRYPTO_DATA_URL)
+  const data: CryptoData[] = await response.json()
+
+  const cryptos = orderBy(data, 'rank', 'asc').slice(
+    Math.max(0, top - 100),
+    top,
+  )
+
+  return Response.json(cryptos)
+}