feat: use app router for site nft page
This commit is contained in:
DIYgod
parent
f1a53f3679
commit
ecb271c2b3
|
|
@ -1,63 +0,0 @@
|
|||
import { Asset } from "unidata.js"
|
||||
|
||||
import { IPFS_GATEWAY } from "~/lib/env"
|
||||
import { cacheGet, getRedis } from "~/lib/redis.server"
|
||||
import { NextServerResponse, getQuery } from "~/lib/server-helper"
|
||||
import { getNFTs } from "~/models/site.model"
|
||||
|
||||
export async function GET(req: Request): Promise<Response> {
|
||||
const query = getQuery(req)
|
||||
const res = new NextServerResponse()
|
||||
if (!query.address) {
|
||||
return res.status(400).end()
|
||||
}
|
||||
|
||||
const redis = await getRedis()
|
||||
const redisKey = `nfts/${query.address}`
|
||||
|
||||
let cache
|
||||
try {
|
||||
cache = await redis?.get(redisKey)
|
||||
} catch (error) {}
|
||||
if (cache) {
|
||||
return res.status(200).json(JSON.parse(cache))
|
||||
} else {
|
||||
const result = await getNFTs(query.address as string)
|
||||
await Promise.all(
|
||||
result.list.map(async (nft: Asset) => {
|
||||
if (!nft.items?.[0].mime_type && nft.items?.[0]?.address) {
|
||||
try {
|
||||
new URL(nft.items[0].address)
|
||||
} catch (error) {
|
||||
return nft
|
||||
}
|
||||
try {
|
||||
const mime_type = await cacheGet({
|
||||
key: `nft-mimetype/${nft.items[0].address}`,
|
||||
getValueFun: async () => {
|
||||
const head = await fetch(
|
||||
`${nft.items![0].address!.replace(
|
||||
IPFS_GATEWAY,
|
||||
"https://gateway.ipfs.io/ipfs/",
|
||||
)}`,
|
||||
{
|
||||
method: "HEAD",
|
||||
},
|
||||
)
|
||||
return head.headers.get("content-type")
|
||||
},
|
||||
})
|
||||
nft.items[0].mime_type = mime_type
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
}
|
||||
}
|
||||
return nft
|
||||
}),
|
||||
)
|
||||
redis?.set(redisKey, JSON.stringify(result), "EX", 60 * 60 * 24)
|
||||
return res.status(200).json({
|
||||
list: [],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import Script from "next/script"
|
||||
import type { Asset } from "unidata.js"
|
||||
|
||||
import { UniLink } from "~/components/ui/UniLink"
|
||||
import { UniMedia } from "~/components/ui/UniMedia"
|
||||
import { useTranslation } from "~/lib/i18n"
|
||||
import getQueryClient from "~/lib/query-client"
|
||||
import { fetchGetSite, getNFTs } from "~/queries/site.server"
|
||||
|
||||
export default async function SiteNFTPage({
|
||||
params,
|
||||
}: {
|
||||
params: {
|
||||
site: string
|
||||
}
|
||||
}) {
|
||||
const queryClient = getQueryClient()
|
||||
|
||||
const site = await fetchGetSite(params.site, queryClient)
|
||||
const { t } = await useTranslation("common")
|
||||
|
||||
const nfts = await getNFTs(site?.owner)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Script
|
||||
type="module"
|
||||
src="https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer.min.js"
|
||||
></Script>
|
||||
<h2 className="text-xl font-bold page-title">NFT {t("Showcase")}</h2>
|
||||
<div className="mt-8">
|
||||
<div className="grid grid-cols-3 md:grid-cols-4 gap-10">
|
||||
{nfts.list
|
||||
?.filter((nft: Asset) => nft.items?.[0]?.address)
|
||||
.map((nft: Asset) => (
|
||||
<UniLink
|
||||
key={nft.metadata?.proof}
|
||||
className="xlog-nft flex items-center flex-col"
|
||||
href={nft.related_urls?.[nft.related_urls.length - 1]}
|
||||
data-collection={nft.metadata?.collection_address}
|
||||
data-network={nft.metadata?.network}
|
||||
data-token-id={nft.metadata?.token_id}
|
||||
data-name={nft.name}
|
||||
>
|
||||
<UniMedia
|
||||
src={nft.items?.[0]?.address || ""}
|
||||
mime_type={nft.items?.[0].mime_type}
|
||||
/>
|
||||
<div className="text-xs mt-2 text-center font-medium">
|
||||
{nft.name}
|
||||
</div>
|
||||
</UniLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
"use client"
|
||||
|
||||
import React, { useState } from "react"
|
||||
|
||||
import { Image } from "~/components/ui/Image"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { Asset } from "unidata.js"
|
||||
|
||||
import { QueryClient } from "@tanstack/react-query"
|
||||
|
||||
import { cacheGet } from "~/lib/redis.server"
|
||||
import { IPFS_GATEWAY } from "~/lib/env"
|
||||
import { cacheGet, getRedis } from "~/lib/redis.server"
|
||||
import * as siteModel from "~/models/site.model"
|
||||
|
||||
export const prefetchGetSite = async (
|
||||
|
|
@ -88,3 +91,52 @@ export const fetchGetComments = async (
|
|||
}) as Promise<ReturnType<typeof siteModel.getCommentsBySite>>
|
||||
})
|
||||
}
|
||||
|
||||
export const getNFTs = async (address?: string) => {
|
||||
const redis = await getRedis()
|
||||
const redisKey = `nfts/${address}`
|
||||
|
||||
let cache
|
||||
try {
|
||||
cache = await redis?.get(redisKey)
|
||||
} catch (error) {}
|
||||
if (cache) {
|
||||
return JSON.parse(cache)
|
||||
} else {
|
||||
const result = await siteModel.getNFTs(address as string)
|
||||
await Promise.all(
|
||||
result.list.map(async (nft: Asset) => {
|
||||
if (!nft.items?.[0].mime_type && nft.items?.[0]?.address) {
|
||||
try {
|
||||
new URL(nft.items[0].address)
|
||||
} catch (error) {
|
||||
return nft
|
||||
}
|
||||
try {
|
||||
const mime_type = await cacheGet({
|
||||
key: `nft-mimetype/${nft.items[0].address}`,
|
||||
getValueFun: async () => {
|
||||
const head = await fetch(
|
||||
`${nft.items![0].address!.replace(
|
||||
IPFS_GATEWAY,
|
||||
"https://gateway.ipfs.io/ipfs/",
|
||||
)}`,
|
||||
{
|
||||
method: "HEAD",
|
||||
},
|
||||
)
|
||||
return head.headers.get("content-type")
|
||||
},
|
||||
})
|
||||
nft.items[0].mime_type = mime_type
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
}
|
||||
}
|
||||
return nft
|
||||
}),
|
||||
)
|
||||
redis?.set(redisKey, JSON.stringify(result), "EX", 60 * 60 * 24)
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -280,22 +280,6 @@ export function useRemoveOperator() {
|
|||
)
|
||||
}
|
||||
|
||||
export const useGetNFTs = (address?: string) => {
|
||||
return useQuery(["getNFTs", address], async () => {
|
||||
if (!address) {
|
||||
return null
|
||||
}
|
||||
return await (
|
||||
await fetch(
|
||||
"/api/nfts?" +
|
||||
new URLSearchParams({
|
||||
address,
|
||||
} as any),
|
||||
)
|
||||
).json()
|
||||
})
|
||||
}
|
||||
|
||||
export const useGetStat = (
|
||||
data: Partial<Parameters<typeof siteModel.getStat>[0]>,
|
||||
) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue