Skip to content

Commit

Permalink
update artist artwork
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Sep 17, 2024
1 parent 0ca6a85 commit 3a8642b
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 79 deletions.
14 changes: 7 additions & 7 deletions public/config.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"REDIRECT_URL": "https://staging.punkga.me",
"REDIRECT_URL": "https://dev.punkga.me",
"CHAIN_ID": "aura_6321-3",
"CHAIN_INFO": {
"chainId": "aura_6321-3",
Expand All @@ -14,13 +14,13 @@
},
"explorer": "https://euphoria.aurascan.io"
},
"API_URL": "https://hasura.staging.punkga.me",
"AUTHORIZER_URL": "https://auth.staging.punkga.me",
"AUTHORIZER_CLIENT_ID": "06c9c437-15cd-4240-b435-5d16206b46c6",
"ADMIN_URL": "https://admin.staging.punkga.me",
"REST_API_URL": "https://api.staging.punkga.me",
"API_URL": "https://hasura.dev.punkga.me",
"AUTHORIZER_URL": "https://auth.dev.punkga.me",
"AUTHORIZER_CLIENT_ID": "abd40c73-3390-4613-bc44-b5bde4796d03",
"ADMIN_URL": "https://admin.dev.punkga.me",
"REST_API_URL": "https://api.dev.punkga.me",
"IN_MAINTENANCE_MODE": false,
"GTM_ID": "GTM-MMT4K22K",
"GTM_ID": "GTM-PF4MH72V",
"SEEKHYPE_URL": "https://staging.seekhype.io/",
"WALLET_CONNECT_PROJECT_ID": "ec40291093ad80fa0def54b1fb44c8ef"
}
198 changes: 126 additions & 72 deletions src/components/pages/artist/Artworks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Modal from 'components/Modal'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { getArtistArtworks } from 'src/services'
import { getArtistArtworkAlbums, getArtistArtworks, getArtworkAlbums } from 'src/services'
import useSWR from 'swr'

import 'swiper/css'
Expand All @@ -13,30 +13,16 @@ import 'swiper/css/navigation'
import 'swiper/css/pagination'
export default function ArtworkList({ id }) {
const [page, setPage] = useState(1)
const [open, setOpen] = useState(false)
const [selectedArtwork, setSelectedArtwork] = useState<any>(null)
const [selectedAlbum, setSelectedAlbum] = useState('')
const { data, isLoading } = useSWR(
{
key: 'fetch-artist-artworks',
key: 'fetch-artist-albums',
id,
},
({ id }) => (id ? getArtistArtworks(id) : null)
({ id }) => (id ? getArtistArtworkAlbums(id) : null)
)

const { t } = useTranslation()

const prevHandler = () => {
const idx = data?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
if (data?.artworks[idx - 1]) {
setSelectedArtwork(data?.artworks[idx - 1])
}
}
const nextHandler = () => {
const idx = data?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
if (data?.artworks[idx + 1]) {
setSelectedArtwork(data?.artworks[idx + 1])
}
}
useEffect(() => {
window.addEventListener('keydown', (e) => {
if (e.key == 'ArrowRight') {
Expand All @@ -60,70 +46,27 @@ export default function ArtworkList({ id }) {
</div>
)
}
if (selectedAlbum) return <Album id={selectedAlbum} setSelectedAlbum={setSelectedAlbum} />
return (
<div>
{data?.artworks?.length ? (
{data?.albums?.length ? (
<>
<Modal
open={open}
setOpen={setOpen}
preventClickOutsideToClose={false}
className='[&_.static]:!overflow-visible'>
<div className='relative'>
<Image
width={300}
height={300}
src={selectedArtwork?.url}
alt=''
className='w-auto h-full max-h-[80vh] rounded-md object-cover'
/>
<div>
<div
onClick={prevHandler}
id='prev'
className='absolute -bottom-14 lg:top-1/2 -scale-x-100 left-[calc(50%-20px)] lg:-left-[98px] -translate-x-1/2 lg:translate-x-0 -translate-y-1/2 cursor-pointer bg-[#FFFFFF] rounded-full text-[#B0B0B0] hover:text-border-brand-hover active:text-border-brand-focus w-8 lg:w-16 h-8 lg:h-16 grid place-items-center shadow-[0px_4px_4px_rgba(0,0,0,0.25)]'>
<svg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'>
<path
d='M1 1L6 6L1 11'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
</div>
<div
onClick={nextHandler}
id='next'
className='absolute -bottom-14 lg:top-1/2 right-[calc(50%-20px)] lg:-right-[98px] translate-x-1/2 lg:translate-x-0 -translate-y-1/2 cursor-pointer bg-[#FFFFFF] rounded-full text-[#B0B0B0] hover:text-border-brand-hover active:text-border-brand-focus w-8 lg:w-16 h-8 lg:h-16 grid place-items-center shadow-[0px_4px_4px_rgba(0,0,0,0.25)]'>
<svg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'>
<path
d='M1 1L6 6L1 11'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
</div>
</div>
</div>
</Modal>
<div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-4'>
{data?.artworks?.slice((page - 1) * 12, page * 12)?.map((artwork, index) => (
<div className='grid grid-cols-[repeat(auto-fill,minmax(330px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(380px,1fr))] gap-4 lg:gap-8'>
{data?.albums?.slice((page - 1) * 12, page * 12)?.map((album, index) => (
<div
key={index}
className='p-4 rounded-mlg space-y-4 border border-border-secondary cursor-pointer'
onClick={() => {
setSelectedArtwork(artwork)
setOpen(true)
setSelectedAlbum(album.id)
}}>
<Image
width={300}
height={300}
src={artwork.url}
src={album.thumbnail_url}
alt=''
className='w-full aspect-square rounded-md object-cover'
className='w-full aspect-[373/199] rounded-mlg object-cover'
/>
<div className='text-sm font-medium line-clamp-1'>{album.name}</div>
</div>
))}
<div></div>
Expand All @@ -135,9 +78,120 @@ export default function ArtworkList({ id }) {
) : (
<div className='flex flex-col items-center gap-4 py-8'>
<Image src={Mc} alt='' className='w-[160px] h-[160px]' />
<div className='font-medium'>{t('No artworks shared')}</div>
<div className='font-medium'>{t('No albums shared')}</div>
</div>
)}
{!!data?.albums_aggregate?.aggregate?.count && (
<div className='w-full flex justify-center'>
<Pagination
shape='rounded'
count={Math.ceil(data?.albums_aggregate?.aggregate?.count / 12)}
page={page}
onChange={(event: React.ChangeEvent<unknown>, value: number) => {
setPage(value)
}}
/>
</div>
)}
</div>
)
}
const Album = ({ id, setSelectedAlbum }) => {
const [page, setPage] = useState(1)
const [open, setOpen] = useState(false)
const { data: albums, isLoading } = useSWR(
{
key: 'fetch-albums',
id,
},
({ id }) => (id ? getArtworkAlbums(id) : null)
)
const { t } = useTranslation()
const [selectedArtwork, setSelectedArtwork] = useState<any>(null)
const prevHandler = () => {
const idx = data?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
if (data?.artworks[idx - 1]) {
setSelectedArtwork(data?.artworks[idx - 1])
}
}
const nextHandler = () => {
const idx = data?.artworks?.findIndex((artwork) => artwork.url == selectedArtwork.url)
if (data?.artworks[idx + 1]) {
setSelectedArtwork(data?.artworks[idx + 1])
}
}
const data = albums?.albums?.[0]
if (!data) return null
return (
<>
<Modal open={open} setOpen={setOpen} preventClickOutsideToClose={false} className='[&_.static]:!overflow-visible'>
<div className='relative'>
<Image
width={300}
height={300}
src={selectedArtwork?.url}
alt=''
className='w-auto h-full max-h-[80vh] rounded-md object-cover'
/>
<div>
<div
onClick={prevHandler}
id='prev'
className='absolute -bottom-14 lg:top-1/2 -scale-x-100 left-[calc(50%-20px)] lg:-left-[98px] -translate-x-1/2 lg:translate-x-0 -translate-y-1/2 cursor-pointer bg-[#FFFFFF] rounded-full text-[#B0B0B0] hover:text-border-brand-hover active:text-border-brand-focus w-8 lg:w-16 h-8 lg:h-16 grid place-items-center shadow-[0px_4px_4px_rgba(0,0,0,0.25)]'>
<svg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'>
<path
d='M1 1L6 6L1 11'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
</div>
<div
onClick={nextHandler}
id='next'
className='absolute -bottom-14 lg:top-1/2 right-[calc(50%-20px)] lg:-right-[98px] translate-x-1/2 lg:translate-x-0 -translate-y-1/2 cursor-pointer bg-[#FFFFFF] rounded-full text-[#B0B0B0] hover:text-border-brand-hover active:text-border-brand-focus w-8 lg:w-16 h-8 lg:h-16 grid place-items-center shadow-[0px_4px_4px_rgba(0,0,0,0.25)]'>
<svg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'>
<path
d='M1 1L6 6L1 11'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
</div>
</div>
</div>
</Modal>
<div className='flex items-center gap-1 mb-[18px] lg:mb-8 cursor-pointer' onClick={() => setSelectedAlbum('')}>
<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M15 17L10 12L15 7' stroke='#454545' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
</svg>
<div className='text-sm font-semibold'>{data.name}</div>
</div>
<div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-4'>
{data?.artworks?.slice((page - 1) * 12, page * 12)?.map((artwork, index) => (
<div
key={index}
onClick={() => {
setSelectedArtwork(artwork)
}}>
<Image
width={300}
height={300}
src={artwork.url}
alt=''
className='w-full aspect-square rounded-md object-cover'
/>
</div>
))}
<div></div>
<div></div>
<div></div>
<div></div>
</div>
{!!data?.artworks_aggregate?.aggregate?.count && (
<div className='w-full flex justify-center'>
<Pagination
Expand All @@ -150,6 +204,6 @@ export default function ArtworkList({ id }) {
/>
</div>
)}
</div>
</>
)
}
8 changes: 8 additions & 0 deletions src/services/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -660,6 +660,14 @@ export const getArtistArtworks = async (id: string) => {
.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/artworks?limit=99999&offset=0`)
.then((res) => res.data)
}
export const getArtistArtworkAlbums = async (id: string) => {
return await axios
.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/albums`)
.then((res) => res.data)
}
export const getArtworkAlbums = async (id: string) => {
return await axios.get(`${getConfig().API_URL}/api/rest/public/albums/${id}`).then((res) => res.data)
}
export const getArtistCollections = async (id: string) => {
const { data } = await axios.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/launchpad`)
const launchpadData = data.launchpad
Expand Down

0 comments on commit 3a8642b

Please sign in to comment.