feat: grid limit to 200 and adjust toast

This commit is contained in:
jinhojang6 2024-12-16 21:33:10 +09:00
parent 74ab5bf9c9
commit 3c7e9c5f76
2 changed files with 91 additions and 58 deletions

View File

@ -13,6 +13,7 @@ interface OperatorGridProps {
}
const OFFSET = 18
const LIMIT = 200
const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
const [itemsCount, setItemsCount] = useState(18)
@ -24,7 +25,12 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
const handleObserver = useCallback(
(entries: IntersectionObserverEntry[]) => {
const target = entries[0]
if (target.isIntersecting && itemsCount < data.length) {
// Less than 200 operators
if (
target.isIntersecting &&
itemsCount < data.length &&
itemsCount < LIMIT
) {
setItemsCount((prevCount) => prevCount + OFFSET)
}
},
@ -37,7 +43,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
observerRef.current = new IntersectionObserver(handleObserver, {
root: null,
rootMargin: '20px',
threshold: 1.0,
threshold: 0.8,
})
if (lastElementRef.current)
@ -57,6 +63,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
))}
</GridContainer>
) : (
<>
<GridContainer>
{data.slice(0, itemsCount).map((operator, index) => {
if (index === itemsCount - 1) {
@ -82,6 +89,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
<Link
href={`/operators/${operator?.id}`}
key={'explore-operator-' + index}
prefetch={false}
>
<GridItem>
<img
@ -98,6 +106,10 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({ data, isLoading }) => {
}
})}
</GridContainer>
{itemsCount >= LIMIT && (
<GridLimit>Please refresh the page to see other Operators.</GridLimit>
)}
</>
)
}
@ -138,4 +150,15 @@ const Placeholder = styled.div`
opacity: 0.5;
`
const GridLimit = styled.p`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
color: white;
padding-top: 32px;
padding-bottom: 64px;
`
export default OperatorGrid

View File

@ -1,6 +1,7 @@
import { breakpoints } from '@/configs/ui.configs'
import styled from '@emotion/styled'
import { useAtomValue } from 'jotai'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { userInfoAtom } from '../../../atoms/userInfo'
@ -45,6 +46,12 @@ const Toast: React.FC = () => {
return () => clearInterval(interval)
}, [])
const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
e.stopPropagation()
setShowTopToast(false)
}
return userInfo?.alert_message?.length > 0 ? (
<ToastContainer showTopToast={showTopToast}>
{/* <div>Logos Operators Ordinals Mint Is Live</div>
@ -53,23 +60,25 @@ const Toast: React.FC = () => {
</a> */}
{userInfo.alert_message}
<div>
<button className="close-button" onClick={() => setShowTopToast(false)}>
<button className="close-button" onClick={handleClose}>
<img src="/assets/close-orange.svg" alt="close" />
</button>
</div>
</ToastContainer>
) : (
<CustomLink
href="https://gamma.io/ordinals/collections/logos-operators"
target="_blank"
>
<ToastContainer showTopToast={showTopToast}>
<span>
Logos Ordinals Mint Begins 16th December, 2024 at 1PM UTC
<TimeRemaining>Time remaining : {time}</TimeRemaining>
</span>
<span>Logos Operators mint is LIVE</span>
<div>
<button className="close-button" onClick={() => setShowTopToast(false)}>
<button className="close-button" onClick={handleClose}>
<img src="/assets/close-orange.svg" alt="close" />
</button>
</div>
</ToastContainer>
</CustomLink>
)
}
@ -93,7 +102,7 @@ const ToastContainer = styled.div<{ showTopToast: boolean }>`
a {
color: #fe740c;
margin-left: 20px;
margin-left: 8px;
}
.close-button {
@ -129,8 +138,9 @@ const ToastContainer = styled.div<{ showTopToast: boolean }>`
}
`
const TimeRemaining = styled.div`
margin-left: 20px;
const CustomLink = styled(Link)`
text-decoration: none;
color: inherit;
`
export default Toast