Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

Commit

Permalink
Format fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@acouch
acouch committed Jul 3, 2024
1 parent ffbb23b commit 0299c2e
Show file tree
Hide file tree
Showing 22 changed files with 997 additions and 965 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/[locale]/research/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use server";
import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs";
import ResearchIntro from "src/app/[locale]/research/ResearchIntro";

import Breadcrumbs from "src/components/Breadcrumbs";
import PageSEO from "src/components/PageSEO";
import BetaAlert from "src/components/BetaAlert";
Expand Down
80 changes: 45 additions & 35 deletions frontend/src/app/[locale]/search/QueryProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
"use client"
import { createContext, useCallback, useMemo, useState } from 'react';
"use client";
import { createContext, useCallback, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";

interface QueryContextParams {
Expand All @@ -11,43 +11,53 @@ interface QueryContextParams {
updateTotalResults: (total: string) => void;
}

export const QueryContext = createContext( {} as QueryContextParams );
export const QueryContext = createContext({} as QueryContextParams);

export default function QueryProvider({
children,
}: {
children: React.ReactNode
}) {
const searchParams = useSearchParams() || undefined;
const defaultTerm = searchParams?.get('query');
const [queryTerm, setQueryTerm] = useState(defaultTerm);
const [totalPages, setTotalPages] = useState('na');
const [totalResults, setTotalResults] = useState('');

const updateQueryTerm = useCallback((term: string) => {
setQueryTerm(term);
}, []);

const updateTotalResults = useCallback((total: string) => {
setTotalResults(total);
}, []);

const updateTotalPages = useCallback((page: string) => {
setTotalPages(page);
}, []);

const contextValue = useMemo(() => ({
children,
}: {
children: React.ReactNode;
}) {
const searchParams = useSearchParams() || undefined;
const defaultTerm = searchParams?.get("query");
const [queryTerm, setQueryTerm] = useState(defaultTerm);
const [totalPages, setTotalPages] = useState("na");
const [totalResults, setTotalResults] = useState("");

const updateQueryTerm = useCallback((term: string) => {
setQueryTerm(term);
}, []);

const updateTotalResults = useCallback((total: string) => {
setTotalResults(total);
}, []);

const updateTotalPages = useCallback((page: string) => {
setTotalPages(page);
}, []);

const contextValue = useMemo(
() => ({
queryTerm,
updateQueryTerm,
totalPages,
updateTotalPages,
totalResults,
updateTotalResults
}), [queryTerm, updateQueryTerm, totalPages, updateTotalPages, totalResults, updateTotalResults]);

return (
<QueryContext.Provider value={contextValue}>
{children}
</QueryContext.Provider>
)
}
updateTotalResults,
}),
[
queryTerm,
updateQueryTerm,
totalPages,
updateTotalPages,
totalResults,
updateTotalResults,
],
);

return (
<QueryContext.Provider value={contextValue}>
{children}
</QueryContext.Provider>
);
}
113 changes: 63 additions & 50 deletions frontend/src/app/[locale]/search/error.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ import SearchCallToAction from "src/components/search/SearchCallToAction";
import SearchFilterAccordion from "src/components/search/SearchFilterAccordion/SearchFilterAccordion";
import SearchOpportunityStatus from "src/components/search/SearchOpportunityStatus";
import SearchResultsHeader from "src/components/search/SearchResultsHeader";
import { agencyOptions, categoryOptions, eligibilityOptions, fundingOptions } from "src/components/search/SearchFilterAccordion/SearchFilterOptions";
import {
agencyOptions,
categoryOptions,
eligibilityOptions,
fundingOptions,
} from "src/components/search/SearchFilterAccordion/SearchFilterOptions";
import { SEARCH_CRUMBS } from "src/constants/breadcrumbs";
import { QueryParamData } from "src/services/search/searchfetcher/SearchFetcher";
import { useEffect } from "react";
Expand Down Expand Up @@ -49,65 +54,73 @@ export default function Error({ error }: ErrorProps) {
parsedErrorData.searchInputs,
);
}
const { agency, category, eligibility, fundingInstrument, query, sortby, status } = convertedSearchParams;
const {
agency,
category,
eligibility,
fundingInstrument,
query,
sortby,
status,
} = convertedSearchParams;

useEffect(() => {
console.error(error);
}, [error]);

return (
<>
return (
<>
<PageSEO
title="Search Funding Opportunities"
description="Try out our experimental search page."
/>
<BetaAlert />
<Breadcrumbs breadcrumbList={SEARCH_CRUMBS} />
<SearchCallToAction />
<QueryProvider>
<div className="grid-container">
<div className="search-bar">
<SearchBar query={query}/>
</div>
<div className="grid-row grid-gap">
<div className="tablet:grid-col-4">
<SearchOpportunityStatus query={status} />
<SearchFilterAccordion
options={fundingOptions}
title="Funding instrument"
queryParamKey="fundingInstrument"
query={fundingInstrument}
/>
<SearchFilterAccordion
options={eligibilityOptions}
title="Eligibility"
queryParamKey="eligibility"
query={eligibility}
/>
<SearchFilterAccordion
options={agencyOptions}
title="Agency"
queryParamKey="agency"
query={agency}
/>
<SearchFilterAccordion
options={categoryOptions}
title="Category"
queryParamKey="category"
query={category}
/>
</div>
<div className="tablet:grid-col-8">
<SearchResultsHeader sortby={sortby} />
<div className="usa-prose">
<BetaAlert />
<Breadcrumbs breadcrumbList={SEARCH_CRUMBS} />
<SearchCallToAction />
<QueryProvider>
<div className="grid-container">
<div className="search-bar">
<SearchBar query={query} />
</div>
<div className="grid-row grid-gap">
<div className="tablet:grid-col-4">
<SearchOpportunityStatus query={status} />
<SearchFilterAccordion
options={fundingOptions}
title="Funding instrument"
queryParamKey="fundingInstrument"
query={fundingInstrument}
/>
<SearchFilterAccordion
options={eligibilityOptions}
title="Eligibility"
queryParamKey="eligibility"
query={eligibility}
/>
<SearchFilterAccordion
options={agencyOptions}
title="Agency"
queryParamKey="agency"
query={agency}
/>
<SearchFilterAccordion
options={categoryOptions}
title="Category"
queryParamKey="category"
query={category}
/>
</div>
<div className="tablet:grid-col-8">
<SearchResultsHeader sortby={sortby} />
<div className="usa-prose">
<SearchErrorAlert />
</div>
</div>
</div>
</div>
</QueryProvider>
</>
);
</div>
</div>
</div>
</div>
</QueryProvider>
</>
);
}

function convertSearchInputArraysToSets(
Expand Down
112 changes: 67 additions & 45 deletions frontend/src/app/[locale]/search/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,18 @@ import SearchPagination from "src/components/search/SearchPagination";
import SearchPaginationLoader from "src/components/search/SearchPaginationLoader";
import SearchResultsHeader from "src/components/search/SearchResultsHeader";
import withFeatureFlag from "src/hoc/search/withFeatureFlag";
import { agencyOptions, categoryOptions, eligibilityOptions, fundingOptions } from "src/components/search/SearchFilterAccordion/SearchFilterOptions";
import {
agencyOptions,
categoryOptions,
eligibilityOptions,
fundingOptions,
} from "src/components/search/SearchFilterAccordion/SearchFilterOptions";
import { convertSearchParamsToProperTypes } from "src/utils/search/convertSearchParamsToProperTypes";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
import { Metadata } from "next";
import { useTranslations } from "next-intl";
import { SEARCH_CRUMBS } from "src/constants/breadcrumbs";
import { Suspense } from 'react';
import { Suspense } from "react";

export async function generateMetadata() {
const t = await getTranslations({ locale: "en" });
Expand All @@ -41,22 +46,27 @@ interface searchParamsTypes {
[key: string]: string | undefined;
}

function Search({
searchParams,
}: {
searchParams: searchParamsTypes;
}) {
function Search({ searchParams }: { searchParams: searchParamsTypes }) {
unstable_setRequestLocale("en");
const t = useTranslations("Process");
const convertedSearchParams = convertSearchParamsToProperTypes(searchParams);
const { agency, category, eligibility, fundingInstrument, page, query, sortby, status } = convertedSearchParams;

if (!('page' in searchParams)) {
searchParams.page = '1';
const {
agency,
category,
eligibility,
fundingInstrument,
page,
query,
sortby,
status,
} = convertedSearchParams;

if (!("page" in searchParams)) {
searchParams.page = "1";
}
const key = Object.entries(searchParams).join(',');
const pager1key = Object.entries(searchParams).join('-') + 'pager1';
const pager2key = Object.entries(searchParams).join('-') + 'pager2';
const key = Object.entries(searchParams).join(",");
const pager1key = Object.entries(searchParams).join("-") + "pager1";
const pager2key = Object.entries(searchParams).join("-") + "pager2";

return (
<>
Expand All @@ -67,47 +77,59 @@ function Search({
<QueryProvider>
<div className="grid-container">
<div className="search-bar">
<SearchBar query={query}/>
<SearchBar query={query} />
</div>
<div className="grid-row grid-gap">
<div className="tablet:grid-col-4">
<SearchOpportunityStatus query={status} />
<SearchFilterAccordion
options={fundingOptions}
title="Funding instrument"
queryParamKey="fundingInstrument"
query={fundingInstrument}
/>
<SearchFilterAccordion
options={eligibilityOptions}
title="Eligibility"
queryParamKey="eligibility"
query={eligibility}
/>
<SearchFilterAccordion
options={agencyOptions}
title="Agency"
queryParamKey="agency"
query={agency}
/>
<SearchFilterAccordion
options={categoryOptions}
title="Category"
queryParamKey="category"
query={category}
/>
<SearchOpportunityStatus query={status} />
<SearchFilterAccordion
options={fundingOptions}
title="Funding instrument"
queryParamKey="fundingInstrument"
query={fundingInstrument}
/>
<SearchFilterAccordion
options={eligibilityOptions}
title="Eligibility"
queryParamKey="eligibility"
query={eligibility}
/>
<SearchFilterAccordion
options={agencyOptions}
title="Agency"
queryParamKey="agency"
query={agency}
/>
<SearchFilterAccordion
options={categoryOptions}
title="Category"
queryParamKey="category"
query={category}
/>
</div>
<div className="tablet:grid-col-8">
<SearchResultsHeader sortby={sortby} />
<div className="usa-prose">
<Suspense key={pager1key} fallback={<SearchPaginationLoader page={page}/>}>
<SearchPagination searchParams={convertedSearchParams} scroll={false} />
<Suspense
key={pager1key}
fallback={<SearchPaginationLoader page={page} />}
>
<SearchPagination
searchParams={convertedSearchParams}
scroll={false}
/>
</Suspense>
<Suspense key={key} fallback={<Loading />}>
<SearchResultsList searchParams={convertedSearchParams} />
</Suspense>
<Suspense key={pager2key} fallback={<SearchPaginationLoader page={page}/>}>
<SearchPagination searchParams={convertedSearchParams} scroll={true}/>
<Suspense
key={pager2key}
fallback={<SearchPaginationLoader page={page} />}
>
<SearchPagination
searchParams={convertedSearchParams}
scroll={true}
/>
</Suspense>
</div>
</div>
Expand All @@ -119,4 +141,4 @@ function Search({
}

// Exports page behind a feature flag
export default withFeatureFlag(Search, "showSearchV0");
export default withFeatureFlag(Search, "showSearchV0");
Loading

0 comments on commit 0299c2e

Please sign in to comment.