fix: refactor OverviewTableClient

2024-09-26 11:51:48 +02:00
parent 56cd02f90b
commit 2a5a3126fe
7 changed files with 146 additions and 133 deletions
--- a/app/api/web/revalidate/loyaltyConfig/route.ts
+++ b/app/api/web/revalidate/loyaltyConfig/route.ts
@@ -5,7 +5,7 @@ import { z } from "zod"

 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
-import { internalServerError } from "@/server/errors/next"
+import { badRequest, internalServerError, notFound } from "@/server/errors/next"

 import { generateLoyaltyConfigTag } from "@/utils/generateTag"

@@ -37,15 +37,7 @@ export async function POST(request: NextRequest) {
    if (secret !== env.REVALIDATE_SECRET) {
      console.error(`Invalid Secret`)
      console.error({ secret })
-      return Response.json(
-        {
-          now: Date.now(),
-          revalidated: false,
-        },
-        {
-          status: 400,
-        }
-      )
+      return badRequest({ revalidated: false, now: Date.now() })
    }

    const data = await request.json()
@@ -85,10 +77,7 @@ export async function POST(request: NextRequest) {
      )
    } else {
      console.error("Invalid content_type")
-      return Response.json(
-        { revalidated: false, now: Date.now() },
-        { status: 404 }
-      )
+      return notFound({ revalidated: false, now: Date.now() })
    }

    console.info(`Revalidating loyalty config tag: ${tag}`)
--- a/components/Blocks/DynamicContent/OverviewTable/Client.tsx
+++ b/components/Blocks/DynamicContent/OverviewTable/Client.tsx
@@ -10,10 +10,10 @@ import {

 import MembershipLevelIcon from "@/components/Levels/Icon"
 import Select from "@/components/TempDesignSystem/Select"
-import { getSteppedUpLevel } from "@/utils/user"

 import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
+import { getInitialState, getLevel, reducer } from "./reducer"
 import RewardList from "./RewardList"
 import YourLevel from "./YourLevelScript"

@@ -24,11 +24,9 @@ import type { Key } from "react-aria-components"
 import {
  ComparisonLevel,
  DesktopSelectColumns,
-  LevelWithRewards,
  type MobileColumnHeaderProps,
  OverviewTableActionsEnum,
  type OverviewTableClientProps,
-  OverviewTableReducerAction,
 } from "@/types/components/overviewTable"

 function getLevelNamesForSelect(level: MembershipLevel, levelName: string) {
@@ -36,89 +34,7 @@ function getLevelNamesForSelect(level: MembershipLevel, levelName: string) {
  return [levelToNumber, levelName].join(" - ")
 }

-function getLevel(
-  membershipLevel: MembershipLevel,
-  levels: LevelWithRewards[]
-) {
-  return levels.find((level) => level.level_id === membershipLevel)!
-}
-
-function getInitialState({
-  activeMembership,
-  levels,
-}: OverviewTableClientProps) {
-  if (!activeMembership) {
-    return {
-      selectedLevelAMobile: getLevel(MembershipLevelEnum.L1, levels),
-      selectedLevelBMobile: getLevel(MembershipLevelEnum.L2, levels),
-      selectedLevelADesktop: getLevel(MembershipLevelEnum.L1, levels),
-      selectedLevelBDesktop: getLevel(MembershipLevelEnum.L2, levels),
-      selectedLevelCDesktop: getLevel(MembershipLevelEnum.L3, levels),
-    }
-  }
-  const level = MembershipLevelEnum[activeMembership]
-
-  switch (level) {
-    case MembershipLevelEnum.L6:
-      return {
-        selectedLevelAMobile: getLevel(MembershipLevelEnum.L6, levels),
-        selectedLevelBMobile: getLevel(MembershipLevelEnum.L7, levels),
-        selectedLevelADesktop: getLevel(MembershipLevelEnum.L5, levels),
-        selectedLevelBDesktop: getLevel(MembershipLevelEnum.L6, levels),
-        selectedLevelCDesktop: getLevel(MembershipLevelEnum.L7, levels),
-      }
-    case MembershipLevelEnum.L7:
-      return {
-        selectedLevelAMobile: getLevel(MembershipLevelEnum.L6, levels),
-        selectedLevelBMobile: getLevel(MembershipLevelEnum.L7, levels),
-        selectedLevelADesktop: getLevel(MembershipLevelEnum.L6, levels),
-        selectedLevelBDesktop: getLevel(MembershipLevelEnum.L7, levels),
-        selectedLevelCDesktop: getLevel(MembershipLevelEnum.L1, levels),
-      }
-    default:
-      return {
-        selectedLevelAMobile: getLevel(level, levels),
-        selectedLevelBMobile: getLevel(getSteppedUpLevel(level, 1), levels),
-        selectedLevelADesktop: getLevel(level, levels),
-        selectedLevelBDesktop: getLevel(getSteppedUpLevel(level, 1), levels),
-        selectedLevelCDesktop: getLevel(getSteppedUpLevel(level, 2), levels),
-      }
-  }
-}
-
-function reducer(state: any, action: OverviewTableReducerAction) {
-  switch (action.type) {
-    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE:
-      return {
-        ...state,
-        selectedLevelAMobile: action.payload,
-      }
-    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE:
-      return {
-        ...state,
-        selectedLevelBMobile: action.payload,
-      }
-    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP:
-      return {
-        ...state,
-        selectedLevelADesktop: action.payload,
-      }
-    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP:
-      return {
-        ...state,
-        selectedLevelBDesktop: action.payload,
-      }
-    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP:
-      return {
-        ...state,
-        selectedLevelCDesktop: action.payload,
-      }
-    default:
-      return state
-  }
-}
-
-export default function OverviewTable({
+export default function OverviewTableClient({
  activeMembership,
  levels,
 }: OverviewTableClientProps) {
--- a/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
+++ b/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
@@ -22,7 +22,7 @@ export default function LargeTable({
  activeLevel,
  Select,
 }: LargeTableProps) {
-  const groupedRewards = getGroupedRewards(levels)
+  const keyedGroupedRewards = getGroupedRewards(levels)

  return (
    <table className={styles.table}>
@@ -32,27 +32,34 @@ export default function LargeTable({
        Select={Select}
      />
      <tbody className={styles.tbody}>
-        {Object.entries(groupedRewards).map(([key, groupedRewards], idx) => {
-          const { label, description } =
-            getGroupedLabelAndDescription(groupedRewards)
+        {Object.entries(keyedGroupedRewards).map(
+          ([key, groupedRewards], idx) => {
+            const { label, description } =
+              getGroupedLabelAndDescription(groupedRewards)

-          return (
-            <tr key={key + idx} className={styles.tr}>
-              <th scope={"row"} className={styles.rewardTh}>
-                <RewardTableHeader name={label} description={description} />
-              </th>
-              {levels.map((level, idx) => {
-                const rewardIdsInGroup = groupedRewards.map((b) => b.reward_id)
-                const reward = findAvailableRewards(rewardIdsInGroup, level)
-                return (
-                  <td key={`${reward?.reward_id}-${idx}`} className={styles.td}>
-                    <RewardValue reward={reward} />
-                  </td>
-                )
-              })}
-            </tr>
-          )
-        })}
+            return (
+              <tr key={key + idx} className={styles.tr}>
+                <th scope={"row"} className={styles.rewardTh}>
+                  <RewardTableHeader name={label} description={description} />
+                </th>
+                {levels.map((level, idx) => {
+                  const rewardIdsInGroup = groupedRewards.map(
+                    (b) => b.reward_id
+                  )
+                  const reward = findAvailableRewards(rewardIdsInGroup, level)
+                  return (
+                    <td
+                      key={`${reward?.reward_id}-${idx}`}
+                      className={styles.td}
+                    >
+                      <RewardValue reward={reward} />
+                    </td>
+                  )
+                })}
+              </tr>
+            )
+          }
+        )}
      </tbody>
    </table>
  )
--- a/components/Blocks/DynamicContent/OverviewTable/RewardList/index.tsx
+++ b/components/Blocks/DynamicContent/OverviewTable/RewardList/index.tsx
@@ -11,9 +11,9 @@ import styles from "./rewardList.module.css"
 import type { RewardListProps } from "@/types/components/overviewTable"

 export default function RewardList({ levels }: RewardListProps) {
-  const groupedRewards = getGroupedRewards(levels)
+  const keyedGroupedRewards = getGroupedRewards(levels)

-  return Object.values(groupedRewards).map((groupedRewards) => {
+  return Object.values(keyedGroupedRewards).map((groupedRewards) => {
    const rewardIdsInGroup = groupedRewards.map((b) => b.reward_id)

    const { label, description } = getGroupedLabelAndDescription(groupedRewards)
--- a/components/Blocks/DynamicContent/OverviewTable/reducer.ts
+++ b/components/Blocks/DynamicContent/OverviewTable/reducer.ts
@@ -0,0 +1,95 @@
+import {
+  type MembershipLevel,
+  MembershipLevelEnum,
+} from "@/constants/membershipLevels"
+
+import { getSteppedUpLevel } from "@/utils/user"
+
+import {
+  type LevelWithRewards,
+  OverviewTableActionsEnum,
+  type OverviewTableClientProps,
+  OverviewTableReducerAction,
+} from "@/types/components/overviewTable"
+
+export function getLevel(
+  membershipLevel: MembershipLevel,
+  levels: LevelWithRewards[]
+) {
+  return levels.find((level) => level.level_id === membershipLevel)!
+}
+
+export function getInitialState({
+  activeMembership,
+  levels,
+}: OverviewTableClientProps) {
+  if (!activeMembership) {
+    return {
+      selectedLevelAMobile: getLevel(MembershipLevelEnum.L1, levels),
+      selectedLevelBMobile: getLevel(MembershipLevelEnum.L2, levels),
+      selectedLevelADesktop: getLevel(MembershipLevelEnum.L1, levels),
+      selectedLevelBDesktop: getLevel(MembershipLevelEnum.L2, levels),
+      selectedLevelCDesktop: getLevel(MembershipLevelEnum.L3, levels),
+    }
+  }
+  const level = MembershipLevelEnum[activeMembership]
+
+  switch (level) {
+    case MembershipLevelEnum.L6:
+      return {
+        selectedLevelAMobile: getLevel(MembershipLevelEnum.L6, levels),
+        selectedLevelBMobile: getLevel(MembershipLevelEnum.L7, levels),
+        selectedLevelADesktop: getLevel(MembershipLevelEnum.L5, levels),
+        selectedLevelBDesktop: getLevel(MembershipLevelEnum.L6, levels),
+        selectedLevelCDesktop: getLevel(MembershipLevelEnum.L7, levels),
+      }
+    case MembershipLevelEnum.L7:
+      return {
+        selectedLevelAMobile: getLevel(MembershipLevelEnum.L6, levels),
+        selectedLevelBMobile: getLevel(MembershipLevelEnum.L7, levels),
+        selectedLevelADesktop: getLevel(MembershipLevelEnum.L6, levels),
+        selectedLevelBDesktop: getLevel(MembershipLevelEnum.L7, levels),
+        selectedLevelCDesktop: getLevel(MembershipLevelEnum.L1, levels),
+      }
+    default:
+      return {
+        selectedLevelAMobile: getLevel(level, levels),
+        selectedLevelBMobile: getLevel(getSteppedUpLevel(level, 1), levels),
+        selectedLevelADesktop: getLevel(level, levels),
+        selectedLevelBDesktop: getLevel(getSteppedUpLevel(level, 1), levels),
+        selectedLevelCDesktop: getLevel(getSteppedUpLevel(level, 2), levels),
+      }
+  }
+}
+
+export function reducer(state: any, action: OverviewTableReducerAction) {
+  switch (action.type) {
+    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE:
+      return {
+        ...state,
+        selectedLevelAMobile: action.payload,
+      }
+    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE:
+      return {
+        ...state,
+        selectedLevelBMobile: action.payload,
+      }
+    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP:
+      return {
+        ...state,
+        selectedLevelADesktop: action.payload,
+      }
+    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP:
+      return {
+        ...state,
+        selectedLevelBDesktop: action.payload,
+      }
+    case OverviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP:
+      return {
+        ...state,
+        selectedLevelCDesktop: action.payload,
+      }
+    default:
+      return state
+  }
+}
--- a/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx
@@ -40,9 +40,16 @@ export default function ClientCurrentRewards({
  const filteredRewards =
    data?.pages.filter((page) => page && page.rewards) ?? []
  const rewards = filteredRewards.flatMap((page) => page?.rewards) as Reward[]
-  return isLoading ? (
-    <LoadingSpinner />
-  ) : rewards.length ? (
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  if (!rewards.length) {
+    return null
+  }
+
+  return (
    <div>
      <Grids.Stackable>
        {rewards.map((reward, idx) => (
@@ -58,13 +65,12 @@ export default function ClientCurrentRewards({
          </article>
        ))}
      </Grids.Stackable>
-      {hasNextPage ? (
-        isFetching ? (
+      {hasNextPage &&
+        (isFetching ? (
          <LoadingSpinner />
        ) : (
-          <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
-        )
-      ) : null}
+          <ShowMoreButton loadMoreData={loadMoreData} />
+        ))}
    </div>
-  ) : null
+  )
 }
--- a/server/routers/contentstack/reward/input.ts
+++ b/server/routers/contentstack/reward/input.ts
@@ -13,7 +13,7 @@ export const rewardsAllInput = z
  .default({ unique: false })

 export const rewardsCurrentInput = z.object({
-  limit: z.number().min(0).default(3),
+  limit: z.number().min(1).default(3),
  cursor: z.number().optional().default(0),
  lang: z.nativeEnum(Lang).optional(),
 })