diff --git a/pages/items/[itemId]/trades/offering.tsx b/pages/items/[itemId]/trades/offering.tsx
index 1fb16a6..3e6a4a6 100644
--- a/pages/items/[itemId]/trades/offering.tsx
+++ b/pages/items/[itemId]/trades/offering.tsx
@@ -1,5 +1,54 @@
+import { GetServerSideProps } from "next";
import { ItemTradesOfferingPage } from "../../../../src/app/ItemTradesPage";
+import { gql, loadGraphqlQuery } from "../../../../src/server/ssr-graphql";
+// @ts-ignore doesn't understand module.exports
+import { oneDay, oneWeek } from "../../../../src/server/util";
export default function ItemTradesOfferingPageWrapper() {
return ;
}
+
+export const getServerSideProps: GetServerSideProps = async ({
+ params,
+ res,
+}) => {
+ if (params?.itemId == null) {
+ throw new Error(`assertion error: itemId param is missing`);
+ }
+
+ // Load the most important, most stable item data to get onto the page ASAP.
+ // We'll cache it real hard, to help it load extra-fast for popular items!
+ const { errors, graphqlState } = await loadGraphqlQuery({
+ query: gql`
+ query ItemsTradesOffering_GetServerSideProps($itemId: ID!) {
+ item(id: $itemId) {
+ id
+ name
+ thumbnailUrl
+ description
+ isNc
+ isPb
+ createdAt
+ }
+ }
+ `,
+ variables: { itemId: params.itemId },
+ });
+ if (errors) {
+ console.warn(
+ `[SSR: /items/[itemId]/trades/offering] Skipping GraphQL preloading, got errors:`
+ );
+ for (const error of errors) {
+ console.warn(`[SSR: /items/[itemId]/trades/offering]`, error);
+ }
+ return { props: { graphqlState: {} } };
+ }
+
+ // Cache this very aggressively, because it's such stable data!
+ res.setHeader(
+ "Cache-Control",
+ `public, s-maxage=${oneDay}, stale-while-revalidate=${oneWeek}`
+ );
+
+ return { props: { graphqlState } };
+};
diff --git a/pages/items/[itemId]/trades/seeking.tsx b/pages/items/[itemId]/trades/seeking.tsx
index d6d7c5e..f8fa05b 100644
--- a/pages/items/[itemId]/trades/seeking.tsx
+++ b/pages/items/[itemId]/trades/seeking.tsx
@@ -1,5 +1,54 @@
+import { GetServerSideProps } from "next";
import { ItemTradesSeekingPage } from "../../../../src/app/ItemTradesPage";
+import { gql, loadGraphqlQuery } from "../../../../src/server/ssr-graphql";
+// @ts-ignore doesn't understand module.exports
+import { oneDay, oneWeek } from "../../../../src/server/util";
export default function ItemTradesSeekingPageWrapper() {
return ;
}
+
+export const getServerSideProps: GetServerSideProps = async ({
+ params,
+ res,
+}) => {
+ if (params?.itemId == null) {
+ throw new Error(`assertion error: itemId param is missing`);
+ }
+
+ // Load the most important, most stable item data to get onto the page ASAP.
+ // We'll cache it real hard, to help it load extra-fast for popular items!
+ const { errors, graphqlState } = await loadGraphqlQuery({
+ query: gql`
+ query ItemsTradesSeeking_GetServerSideProps($itemId: ID!) {
+ item(id: $itemId) {
+ id
+ name
+ thumbnailUrl
+ description
+ isNc
+ isPb
+ createdAt
+ }
+ }
+ `,
+ variables: { itemId: params.itemId },
+ });
+ if (errors) {
+ console.warn(
+ `[SSR: /items/[itemId]/trades/seeking] Skipping GraphQL preloading, got errors:`
+ );
+ for (const error of errors) {
+ console.warn(`[SSR: /items/[itemId]/trades/seeking]`, error);
+ }
+ return { props: { graphqlState: {} } };
+ }
+
+ // Cache this very aggressively, because it's such stable data!
+ res.setHeader(
+ "Cache-Control",
+ `public, s-maxage=${oneDay}, stale-while-revalidate=${oneWeek}`
+ );
+
+ return { props: { graphqlState } };
+};
diff --git a/src/app/ItemTradesPage.js b/src/app/ItemTradesPage.js
index db1a74f..25c15f1 100644
--- a/src/app/ItemTradesPage.js
+++ b/src/app/ItemTradesPage.js
@@ -13,10 +13,11 @@ import { useQuery } from "@apollo/client";
import Link from "next/link";
import { useRouter } from "next/router";
-import { Heading2, usePageTitle } from "./util";
+import { Heading2 } from "./util";
import ItemPageLayout from "./ItemPageLayout";
import useCurrentUser from "./components/useCurrentUser";
import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
+import Head from "next/head";
export function ItemTradesOfferingPage() {
return (
@@ -111,24 +112,31 @@ function ItemTradesPage({
{ variables: { itemId }, returnPartialData: true }
);
- usePageTitle(`${data?.item?.name} | ${title}`, { skip: !data?.item?.name });
-
if (error) {
return {error.message};
}
return (
-
-
- {title}
-
-
-
+ <>
+
+ {data?.item?.name && (
+
+ {data?.item?.name} | {title} | Dress to Impress
+
+ )}
+
+
+
+ {title}
+
+
+
+ >
);
}