diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Client.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/Client.tsx deleted file mode 100644 index 3041bff55..000000000 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Client.tsx +++ /dev/null @@ -1,45 +0,0 @@ -"use client" - -import { trpc } from "@/lib/trpc/client" - -import DesktopTable from "./Desktop" -import MobileTable from "./Mobile" - -import type { - ClientEarnAndBurnProps, - TransactionsNonNullResponseObject, -} from "@/types/components/myPages/myPage/earnAndBurn" - -export default function ClientEarnAndBurn({ - initialData, - lang, -}: ClientEarnAndBurnProps) { - /** - * desctruct fetchNextPage, hasNextPage once pagination is - * possible through API - */ - const { data } = trpc.user.transaction.friendTransactions.useInfiniteQuery( - { limit: 5 }, - { - getNextPageParam: (lastPage) => lastPage?.nextCursor, - initialData: { - pageParams: [undefined, 1], - pages: [initialData], - }, - } - ) - - // TS having a hard time with the filtered type. - // This is only temporary as we will not return null - // later on when we handle errors appropriately. - const filteredTransactions = (data?.pages.filter( - (page) => page && page.data - ) ?? []) as unknown as TransactionsNonNullResponseObject[] - const transactions = filteredTransactions.flatMap((page) => page.data) - return ( - <> - - - - ) -} diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx index 1ee31be53..20e3088f6 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx +++ b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx @@ -1,13 +1,13 @@ -import { useIntl } from "react-intl" - import { dt } from "@/lib/dt" +import { getIntl } from "@/i18n" + import styles from "./row.module.css" import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn" -export default function Row({ transaction, lang }: RowProps) { - const { formatMessage } = useIntl() +export default async function Row({ transaction, lang }: RowProps) { + const { formatMessage } = await getIntl() const description = transaction.hotelName && transaction.city ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}` diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx index 714e226a4..317e0200b 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx +++ b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx @@ -1,6 +1,5 @@ -import { useIntl } from "react-intl" - import Body from "@/components/TempDesignSystem/Text/Body" +import { getIntl } from "@/i18n" import Row from "./Row" @@ -16,8 +15,8 @@ const tableHeadings = [ "Points", ] -export default function DesktopTable({ lang, transactions }: TableProps) { - const { formatMessage } = useIntl() +export default async function DesktopTable({ lang, transactions }: TableProps) { + const { formatMessage } = await getIntl() return (
{transactions.length ? ( diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx index 725f502c2..c792af191 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx +++ b/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx @@ -1,15 +1,14 @@ -import { useIntl } from "react-intl" - import { dt } from "@/lib/dt" import Body from "@/components/TempDesignSystem/Text/Body" +import { getIntl } from "@/i18n" import styles from "./mobile.module.css" import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn" -export default function MobileTable({ lang, transactions }: TableProps) { - const { formatMessage } = useIntl() +export default async function MobileTable({ lang, transactions }: TableProps) { + const { formatMessage } = await getIntl() return (
@@ -42,9 +41,7 @@ export default function MobileTable({ lang, transactions }: TableProps) { {`${transaction.nights} ${formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`} - diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx index a7b1d9457..ae02fb27e 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx +++ b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx @@ -4,7 +4,8 @@ import SectionContainer from "@/components/Section/Container" import SectionHeader from "@/components/Section/Header" import SectionLink from "@/components/Section/Link" -import ClientEarnAndBurn from "./Client" +import DesktopTable from "./Desktop" +import MobileTable from "./Mobile" import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage" @@ -14,15 +15,16 @@ export default async function EarnAndBurn({ subtitle, title, }: AccountPageComponentProps) { - const initialTransactions = - await serverClient().user.transaction.friendTransactions({ limit: 5 }) - if (!initialTransactions) { + const transactions = + await serverClient().user.transaction.friendTransactions() + if (!transactions) { return null } return ( - + + ) diff --git a/server/routers/user/input.ts b/server/routers/user/input.ts index d3a54e353..56a8fe385 100644 --- a/server/routers/user/input.ts +++ b/server/routers/user/input.ts @@ -18,8 +18,3 @@ export const soonestUpcomingStaysInput = z limit: z.number().int().positive(), }) .default({ limit: 3 }) - -export const friendTransactionsInput = z.object({ - cursor: z.number().int().nullish(), - limit: z.number().min(0).default(5), -}) diff --git a/server/routers/user/output.ts b/server/routers/user/output.ts index e4d7174db..5a6638d0b 100644 --- a/server/routers/user/output.ts +++ b/server/routers/user/output.ts @@ -162,9 +162,6 @@ export const getFriendTransactionsSchema = z.object({ links: z .object({ self: z.string(), - offset: z.number(), - limit: z.number(), - totalCount: z.number(), }) .nullable(), }) diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts index ef45c2edf..8dc506be7 100644 --- a/server/routers/user/query.ts +++ b/server/routers/user/query.ts @@ -12,11 +12,7 @@ import * as maskValue from "@/utils/maskValue" import { getMembership, getMembershipCards } from "@/utils/user" import encryptValue from "../utils/encryptValue" -import { - friendTransactionsInput, - getUserInputSchema, - staysInput, -} from "./input" +import { getUserInputSchema, staysInput } from "./input" import { getCreditCardsSchema, getFriendTransactionsSchema, @@ -365,75 +361,53 @@ export const userQueryRouter = router({ }), }), transaction: router({ - friendTransactions: protectedProcedure - .input(friendTransactionsInput) - .query(async (opts) => { - const { limit, cursor } = opts.input + friendTransactions: protectedProcedure.query(async (opts) => { + const apiResponse = await api.get(api.endpoints.v1.friendTransactions, { + headers: { + Authorization: `Bearer ${opts.ctx.session.token.access_token}`, + }, + }) - const params = new URLSearchParams() - params.set("limit", limit.toString()) + if (!apiResponse.ok) { + // switch (apiResponse.status) { + // case 400: + // throw badRequestError() + // case 401: + // throw unauthorizedError() + // case 403: + // throw forbiddenError() + // default: + // throw internalServerError() + // } + console.info(`API Response Failed - Getting Friend Transactions`) + console.info(`User: (${JSON.stringify(opts.ctx.session.user)})`) + console.error(apiResponse) + return null + } - if (cursor) { - params.set("offset", cursor.toString()) - } + const apiJson = await apiResponse.json() + const verifiedData = getFriendTransactionsSchema.safeParse(apiJson) + if (!verifiedData.success) { + console.info(`Failed to validate Friend Transactions Data`) + console.info(`User: (${JSON.stringify(opts.ctx.session.user)})`) + console.error(verifiedData.error) + return null + } - const apiResponse = await api.get( - api.endpoints.v1.friendTransactions, - { - headers: { - Authorization: `Bearer ${opts.ctx.session.token.access_token}`, - }, - }, - params - ) - - if (!apiResponse.ok) { - // switch (apiResponse.status) { - // case 400: - // throw badRequestError() - // case 401: - // throw unauthorizedError() - // case 403: - // throw forbiddenError() - // default: - // throw internalServerError() - // } - console.info(`API Response Failed - Getting Friend Transactions`) - console.info(`User: (${JSON.stringify(opts.ctx.session.user)})`) - console.error(apiResponse) - return null - } - - const apiJson = await apiResponse.json() - const verifiedData = getFriendTransactionsSchema.safeParse(apiJson) - if (!verifiedData.success) { - console.info(`Failed to validate Friend Transactions Data`) - console.info(`User: (${JSON.stringify(opts.ctx.session.user)})`) - console.error(verifiedData.error) - return null - } - - const nextCursor = - verifiedData.data.links && - verifiedData.data.links.offset < verifiedData.data.links.totalCount - ? verifiedData.data.links.offset - : undefined - - return { - data: verifiedData.data.data.map(({ attributes }) => { - return { - awardPoints: attributes.awardPoints, - checkinDate: attributes.checkinDate, - checkoutDate: attributes.checkoutDate, - city: attributes.hotelInformation?.city, - confirmationNumber: attributes.confirmationNumber, - hotelName: attributes.hotelInformation?.name, - nights: attributes.nights, - } - }), - nextCursor, - } - }), + return { + data: verifiedData.data.data.map(({ attributes }) => { + return { + awardPoints: attributes.awardPoints, + checkinDate: attributes.checkinDate, + checkoutDate: attributes.checkoutDate, + city: attributes.hotelInformation?.city, + confirmationNumber: attributes.confirmationNumber, + hotelName: attributes.hotelInformation?.name, + nights: attributes.nights, + } + }), + } + }), }), creditCards: protectedProcedure.query(async function ({ ctx }) {
+ {`${transaction.awardPoints} P`}