feat(SW-353): dynamic rewards

2024-09-25 15:59:16 +02:00
parent 6a85cfd19c
commit 56cd02f90b
78 changed files with 1568 additions and 4587 deletions
@@ -0,0 +1,70 @@
+"use client"
+
+import { trpc } from "@/lib/trpc/client"
+import { Reward } from "@/server/routers/contentstack/reward/output"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
+import Grids from "@/components/TempDesignSystem/Grids"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
+
+import styles from "./current.module.css"
+
+type CurrentRewardsClientProps = {
+  initialCurrentRewards: { rewards: Reward[]; nextCursor: number | undefined }
+}
+export default function ClientCurrentRewards({
+  initialCurrentRewards,
+}: CurrentRewardsClientProps) {
+  const lang = useLang()
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.contentstack.rewards.current.useInfiniteQuery(
+      {
+        limit: 3,
+        lang,
+      },
+      {
+        getNextPageParam: (lastPage) => lastPage?.nextCursor,
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialCurrentRewards],
+        },
+      }
+    )
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+  const filteredRewards =
+    data?.pages.filter((page) => page && page.rewards) ?? []
+  const rewards = filteredRewards.flatMap((page) => page?.rewards) as Reward[]
+  return isLoading ? (
+    <LoadingSpinner />
+  ) : rewards.length ? (
+    <div>
+      <Grids.Stackable>
+        {rewards.map((reward, idx) => (
+          <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
+            <Title
+              as="h4"
+              level="h3"
+              textAlign="center"
+              textTransform="regular"
+            >
+              {reward.label}
+            </Title>
+          </article>
+        ))}
+      </Grids.Stackable>
+      {hasNextPage ? (
+        isFetching ? (
+          <LoadingSpinner />
+        ) : (
+          <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+        )
+      ) : null}
+    </div>
+  ) : null
+}