107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { useRef, useState } from "react"
|
|
|
|
import { trpc } from "@/lib/trpc/client"
|
|
|
|
import { RewardIcon } from "@/components/Blocks/DynamicContent/Rewards/RewardIcon"
|
|
import ScriptedRewardText from "@/components/Blocks/DynamicContent/Rewards/ScriptedRewardText"
|
|
import Pagination from "@/components/MyPages/Pagination"
|
|
import Grids from "@/components/TempDesignSystem/Grids"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import Redeem from "../Redeem"
|
|
|
|
import styles from "./current.module.css"
|
|
|
|
import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
|
|
import type {
|
|
Reward,
|
|
RewardWithRedeem,
|
|
} from "@/server/routers/contentstack/reward/output"
|
|
|
|
export default function ClientCurrentRewards({
|
|
rewards: initialData,
|
|
pageSize,
|
|
showRedeem,
|
|
membershipNumber,
|
|
}: CurrentRewardsClientProps) {
|
|
const lang = useLang()
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const [currentPage, setCurrentPage] = useState(1)
|
|
|
|
const { data } = trpc.contentstack.rewards.current.useQuery<{
|
|
rewards: (Reward | RewardWithRedeem)[]
|
|
}>(
|
|
{
|
|
lang,
|
|
},
|
|
{
|
|
initialData: { rewards: initialData },
|
|
}
|
|
)
|
|
|
|
if (!data) {
|
|
return null
|
|
}
|
|
|
|
const rewards = data.rewards
|
|
|
|
const totalPages = Math.ceil(rewards.length / pageSize)
|
|
const startIndex = (currentPage - 1) * pageSize
|
|
const endIndex = startIndex + pageSize
|
|
const currentRewards = rewards.slice(startIndex, endIndex)
|
|
|
|
function handlePageChange(page: number) {
|
|
requestAnimationFrame(() => {
|
|
setCurrentPage(page)
|
|
containerRef.current?.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
inline: "nearest",
|
|
})
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div ref={containerRef} className={styles.container}>
|
|
<Grids.Stackable>
|
|
{currentRewards.map((reward, idx) => (
|
|
<article className={styles.card} key={`${reward.reward_id}-${idx}`}>
|
|
<div className={styles.content}>
|
|
<RewardIcon rewardId={reward.reward_id} />
|
|
{showRedeem && (
|
|
<ScriptedRewardText
|
|
rewardType={reward.rewardType}
|
|
rewardTierLevel={reward.rewardTierLevel}
|
|
/>
|
|
)}
|
|
<Title
|
|
as="h4"
|
|
level="h3"
|
|
textAlign="center"
|
|
textTransform="regular"
|
|
>
|
|
{reward.label}
|
|
</Title>
|
|
</div>
|
|
{showRedeem && "redeem_description" in reward && (
|
|
<div className={styles.btnContainer}>
|
|
<Redeem reward={reward} membershipNumber={membershipNumber} />
|
|
</div>
|
|
)}
|
|
</article>
|
|
))}
|
|
</Grids.Stackable>
|
|
{totalPages > 1 && (
|
|
<Pagination
|
|
pageCount={totalPages}
|
|
currentPage={currentPage}
|
|
handlePageChange={handlePageChange}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|