From 2a5a3126fef33cf2bd57eef2c91a276096684fbe Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Thu, 26 Sep 2024 11:51:48 +0200 Subject: [PATCH] fix: refactor OverviewTableClient --- app/api/web/revalidate/loyaltyConfig/route.ts | 17 +--- .../DynamicContent/OverviewTable/Client.tsx | 88 +---------------- .../OverviewTable/LargeTable/index.tsx | 49 ++++++---- .../OverviewTable/RewardList/index.tsx | 4 +- .../DynamicContent/OverviewTable/reducer.ts | 95 +++++++++++++++++++ .../Rewards/CurrentLevel/Client.tsx | 24 +++-- server/routers/contentstack/reward/input.ts | 2 +- 7 files changed, 146 insertions(+), 133 deletions(-) create mode 100644 components/Blocks/DynamicContent/OverviewTable/reducer.ts diff --git a/app/api/web/revalidate/loyaltyConfig/route.ts b/app/api/web/revalidate/loyaltyConfig/route.ts index da036cbd6..d7b770bf9 100644 --- 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}`) diff --git a/components/Blocks/DynamicContent/OverviewTable/Client.tsx b/components/Blocks/DynamicContent/OverviewTable/Client.tsx index b7d82badf..1754fce72 100644 --- 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) { diff --git a/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx b/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx index 1b1780787..f19b42444 100644 --- 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 ( @@ -32,27 +32,34 @@ export default function LargeTable({ Select={Select} /> - {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 ( - - - {levels.map((level, idx) => { - const rewardIdsInGroup = groupedRewards.map((b) => b.reward_id) - const reward = findAvailableRewards(rewardIdsInGroup, level) - return ( - - ) - })} - - ) - })} + return ( + + + {levels.map((level, idx) => { + const rewardIdsInGroup = groupedRewards.map( + (b) => b.reward_id + ) + const reward = findAvailableRewards(rewardIdsInGroup, level) + return ( + + ) + })} + + ) + } + )}
- - - -
+ + + +
) diff --git a/components/Blocks/DynamicContent/OverviewTable/RewardList/index.tsx b/components/Blocks/DynamicContent/OverviewTable/RewardList/index.tsx index b0a72a3bd..fcfad53ba 100644 --- 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) diff --git a/components/Blocks/DynamicContent/OverviewTable/reducer.ts b/components/Blocks/DynamicContent/OverviewTable/reducer.ts new file mode 100644 index 000000000..b2fd7372d --- /dev/null +++ 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 + } +} diff --git a/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx b/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx index 471a39ede..a57e5e160 100644 --- 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 ? ( - - ) : rewards.length ? ( + + if (isLoading) { + return + } + + if (!rewards.length) { + return null + } + + return (
{rewards.map((reward, idx) => ( @@ -58,13 +65,12 @@ export default function ClientCurrentRewards({ ))} - {hasNextPage ? ( - isFetching ? ( + {hasNextPage && + (isFetching ? ( ) : ( - - ) - ) : null} + + ))}
- ) : null + ) } diff --git a/server/routers/contentstack/reward/input.ts b/server/routers/contentstack/reward/input.ts index 43da34bed..bf02e9255 100644 --- 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(), })