fix: refactor OverviewTableClient

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) {

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>
   )

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)

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
+  }
+}