Update for async params

frontend/src/app/[locale]/opportunity/[id]/page.tsx

@@ -23,7 +23,7 @@ import OpportunityLink from "src/components/opportunity/OpportunityLink";
 import OpportunityStatusWidget from "src/components/opportunity/OpportunityStatusWidget";
 
 type OpportunityListingProps = {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 } & WithFeatureFlagProps;
 
 export const revalidate = 600; // invalidate ten minutes
@@ -96,7 +96,8 @@ function emptySummary() {
 }
 
 async function OpportunityListing({ params }: OpportunityListingProps) {
-  const idForParsing = Number(params.id);
+  const { id } = await params;
+  const idForParsing = Number(id);
   const breadcrumbs = Object.assign([], OPPORTUNITY_CRUMBS);
   // Opportunity id needs to be a number greater than 1
   if (isNaN(idForParsing) || idForParsing < 1) {
@@ -105,7 +106,7 @@ async function OpportunityListing({ params }: OpportunityListingProps) {
 
   let opportunityData = {} as Opportunity;
   try {
-    const response = await fetchOpportunity({ subPath: params.id });
+    const response = await fetchOpportunity({ subPath: id });
     opportunityData = response.data;
   } catch (error) {
     if (parseErrorStatus(error as ApiRequestError) === 404) {

frontend/src/app/[locale]/search/layout.tsx

@@ -1,21 +1,24 @@
 import { SEARCH_CRUMBS } from "src/constants/breadcrumbs";
 
 import { setRequestLocale } from "next-intl/server";
+import { use } from "react";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
 import SearchCallToAction from "src/components/search/SearchCallToAction";
 
 export default function SearchLayout({
   children,
-  params: { locale },
+  params
 }: {
   children: React.ReactNode;
-  params: {
+  params: Promise<{
     locale: string;
-  };
+  }>
 }) {
+  const { locale } = use(params);
   setRequestLocale(locale);
+
   return (
     <>
       <BetaAlert containerClasses="margin-top-5" />

frontend/src/app/[locale]/search/page.tsx

@@ -27,26 +27,27 @@ export async function generateMetadata({ params }: LocalizedPageProps) {
   return meta;
 }
 type SearchPageProps = {
-  searchParams: SearchParamsTypes;
+  searchParams: Promise<SearchParamsTypes>;
   params: Promise<{ locale: string }>;
 };
 
 function Search({ searchParams, params }: SearchPageProps) {
   const { locale } = use(params);
+  const searchParamsRead = use(searchParams);
   setRequestLocale(locale);
   const t = useTranslations("Search");
 
-  const convertedSearchParams = convertSearchParamsToProperTypes(searchParams);
+  const convertedSearchParams = convertSearchParamsToProperTypes(searchParamsRead);
   const { agency, category, eligibility, fundingInstrument, query, status } =
     convertedSearchParams;
 
-  if (!("page" in searchParams)) {
-    searchParams.page = "1";
+  if (!("page" in searchParamsRead)) {
+    searchParamsRead.page = "1";
   }
 
   return (
     <>
-      <SearchAnalytics params={searchParams} />
+      <SearchAnalytics params={searchParamsRead} />
       <QueryProvider>
         <div className="grid-container">
           <div className="search-bar">

frontend/src/hoc/withFeatureFlag.tsx

@@ -20,16 +20,17 @@ const withFeatureFlag = <P, R>(
   }
 
   // top level component to grab search params from the top level page props
-  const ComponentWithFeatureFlagAndSearchParams = (
+  const ComponentWithFeatureFlagAndSearchParams = async (
     props: P & WithFeatureFlagProps,
   ) => {
-    const searchParams = props.searchParams || {};
+    const searchParams = await props.searchParams || {};
+    const cookiesRead = await cookies();
     const ComponentWithFeatureFlag = (props: P & WithFeatureFlagProps) => {
       if (
         featureFlagsManager.isFeatureEnabled(
           featureFlagName,
-          cookies(),
-          props.searchParams,
+          cookiesRead,
+          searchParams,
         )
       ) {
         onEnabled();
@@ -38,7 +39,7 @@ const withFeatureFlag = <P, R>(
 
       return <WrappedComponent {...props} />;
     };
-    return <ComponentWithFeatureFlag {...props} searchParams={searchParams} />;
+    return <ComponentWithFeatureFlag {...props} searchParams={props.searchParams} />;
   };
 
   return ComponentWithFeatureFlagAndSearchParams;

frontend/src/i18n/request.ts

@@ -21,6 +21,7 @@ export default getRequestConfig(async ({ requestLocale }) => {
     locale = defaultLocale;
   }
   return {
+    locale,
     formats,
     messages: await getMessagesWithFallbacks(locale),
     timeZone,

frontend/src/types/uiTypes.ts

@@ -13,7 +13,7 @@ export enum Breakpoints {
 }
 
 export type WithFeatureFlagProps = {
-  searchParams: ServerSideSearchParams;
+  searchParams: Promise<ServerSideSearchParams>;
 };
 
 export interface ErrorProps {