diff --git a/frontend/src/components/search/SearchBar.tsx b/frontend/src/components/search/SearchBar.tsx index 6da973957..aad6e6c45 100644 --- a/frontend/src/components/search/SearchBar.tsx +++ b/frontend/src/components/search/SearchBar.tsx @@ -3,7 +3,7 @@ import { Icon } from "@trussworks/react-uswds"; import { QueryContext } from "src/app/[locale]/search/QueryProvider"; import { useContext } from "react"; import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater"; -import { useTranslations } from "next-intl"; +import { useTranslations } from "next-intl"; interface SearchBarProps { query: string | null | undefined; @@ -27,7 +27,9 @@ export default function SearchBar({ query }: SearchBarProps) { > {t.rich("bar.label", { strong: (chunks) => {chunks}, - small: (chunks) => {chunks}, + small: (chunks) => ( + {chunks} + ), })}
diff --git a/frontend/src/components/search/SearchCallToAction.tsx b/frontend/src/components/search/SearchCallToAction.tsx index 613f9410c..f5d08cbd9 100644 --- a/frontend/src/components/search/SearchCallToAction.tsx +++ b/frontend/src/components/search/SearchCallToAction.tsx @@ -1,20 +1,20 @@ import { GridContainer } from "@trussworks/react-uswds"; import React from "react"; -import { useTranslations } from "next-intl" +import { useTranslations } from "next-intl"; const SearchCallToAction: React.FC = () => { - const t = useTranslations("Search") + const t = useTranslations("Search"); return ( <> {/* */}

- {t("callToAction.title")} + {t("callToAction.title")}

{t.rich("callToAction.description", { - mail: (chunks) => {chunks} + mail: (chunks) => {chunks}, })}

diff --git a/frontend/src/components/search/SearchFilterAccordion/SearchFilterToggleAll.tsx b/frontend/src/components/search/SearchFilterAccordion/SearchFilterToggleAll.tsx index b43c2631b..e1de28e60 100644 --- a/frontend/src/components/search/SearchFilterAccordion/SearchFilterToggleAll.tsx +++ b/frontend/src/components/search/SearchFilterAccordion/SearchFilterToggleAll.tsx @@ -1,5 +1,5 @@ "use client"; -import { useTranslations } from "next-intl" +import { useTranslations } from "next-intl"; interface SearchFilterToggleAllProps { isAllSelected: boolean; @@ -14,7 +14,7 @@ const SearchFilterToggleAll: React.FC = ({ isAllSelected, isNoneSelected, }) => { - const t = useTranslations("Search") + const t = useTranslations("Search"); return (
@@ -27,7 +27,7 @@ const SearchFilterToggleAll: React.FC = ({ }} disabled={isAllSelected} > - {t("filterToggleAll.select")} + {t("filterToggleAll.select")}
diff --git a/frontend/src/components/search/SearchOpportunityStatus.tsx b/frontend/src/components/search/SearchOpportunityStatus.tsx index 55240405d..c9bc65c8b 100644 --- a/frontend/src/components/search/SearchOpportunityStatus.tsx +++ b/frontend/src/components/search/SearchOpportunityStatus.tsx @@ -3,7 +3,7 @@ import { Checkbox } from "@trussworks/react-uswds"; import { QueryContext } from "src/app/[locale]/search/QueryProvider"; import { useContext } from "react"; import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater"; -import { useTranslations } from "next-intl" +import { useTranslations } from "next-intl"; interface StatusOption { id: string; @@ -15,7 +15,6 @@ interface SearchOpportunityStatusProps { query: Set; } - export default function SearchOpportunityStatus({ query, }: SearchOpportunityStatusProps) { @@ -28,18 +27,36 @@ export default function SearchOpportunityStatus({ updateQueryParams(updated, "status", queryTerm); }; - const t = useTranslations("Search") + const t = useTranslations("Search"); const statusOptions: StatusOption[] = [ - { id: "status-forecasted", label: t("opportunityStatus.label.forecasted"), value: "forecasted" }, - { id: "status-posted", label: t("opportunityStatus.label.posted"), value: "posted" }, - { id: "status-closed", label: t("opportunityStatus.label.closed"), value: "closed" }, - { id: "status-archived", label: t("opportunityStatus.label.archived"), value: "archived" }, + { + id: "status-forecasted", + label: t("opportunityStatus.label.forecasted"), + value: "forecasted", + }, + { + id: "status-posted", + label: t("opportunityStatus.label.posted"), + value: "posted", + }, + { + id: "status-closed", + label: t("opportunityStatus.label.closed"), + value: "closed", + }, + { + id: "status-archived", + label: t("opportunityStatus.label.archived"), + value: "archived", + }, ]; return ( <> -

{t("opportunityStatus.title")}

+

+ {t("opportunityStatus.title")} +

{statusOptions.map((option) => { return ( diff --git a/frontend/src/components/search/SearchResultsHeader.tsx b/frontend/src/components/search/SearchResultsHeader.tsx index e29be2c77..24e74b27a 100644 --- a/frontend/src/components/search/SearchResultsHeader.tsx +++ b/frontend/src/components/search/SearchResultsHeader.tsx @@ -2,7 +2,7 @@ import SearchSortyBy from "./SearchSortBy"; import { QueryContext } from "src/app/[locale]/search/QueryProvider"; import { useContext } from "react"; -import { useTranslations} from "next-intl" +import { useTranslations } from "next-intl"; export default function SearchResultsHeader({ sortby, @@ -25,12 +25,12 @@ export default function SearchResultsHeader({ ]; if (loading) gridRowClasses.push("opacity-50"); - const t = useTranslations("Search") + const t = useTranslations("Search"); return (

- {t("resultsHeader.message", {count: total})} + {t("resultsHeader.message", { count: total })}

+ > {t("resultsListItem.award_ceiling")} ${opportunity?.summary?.award_ceiling?.toLocaleString() || "--"} diff --git a/frontend/src/components/search/SearchSortBy.tsx b/frontend/src/components/search/SearchSortBy.tsx index 3f18ce635..94d1963ab 100644 --- a/frontend/src/components/search/SearchSortBy.tsx +++ b/frontend/src/components/search/SearchSortBy.tsx @@ -3,15 +3,13 @@ import { Select } from "@trussworks/react-uswds"; import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater"; import { QueryContext } from "src/app/[locale]/search/QueryProvider"; import { useContext } from "react"; -import { useTranslations } from "next-intl" +import { useTranslations } from "next-intl"; type SortOption = { label: string; value: string; }; - - interface SearchSortByProps { queryTerm: string | null | undefined; sortby: string | null; @@ -25,19 +23,31 @@ export default function SearchSortBy({ }: SearchSortByProps) { const { updateQueryParams } = useSearchParamUpdater(); const { updateTotalResults } = useContext(QueryContext); - const t = useTranslations("Search") + const t = useTranslations("Search"); const SORT_OPTIONS: SortOption[] = [ { label: t("sortBy.options.posted_date_desc"), value: "postedDateDesc" }, { label: t("sortBy.options.posted_date_asc"), value: "postedDateAsc" }, { label: t("sortBy.options.close_date_desc"), value: "closeDateDesc" }, { label: t("sortBy.options.close_date_asc"), value: "closeDateAsc" }, - { label: t("sortBy.options.opportunity_title_asc"), value: "opportunityTitleAsc" }, - { label: t("sortBy.options.opportunity_title_desc"), value: "opportunityTitleDesc" }, + { + label: t("sortBy.options.opportunity_title_asc"), + value: "opportunityTitleAsc", + }, + { + label: t("sortBy.options.opportunity_title_desc"), + value: "opportunityTitleDesc", + }, { label: t("sortBy.options.agency_asc"), value: "agencyAsc" }, { label: t("sortBy.options.agency_desc"), value: "agencyDesc" }, - { label: t("sortBy.options.opportunity_number_desc"), value: "opportunityNumberDesc" }, - { label: t("sortBy.options.opportunity_number_asc"), value: "opportunityNumberAsc" }, + { + label: t("sortBy.options.opportunity_number_desc"), + value: "opportunityNumberDesc", + }, + { + label: t("sortBy.options.opportunity_number_asc"), + value: "opportunityNumberAsc", + }, ]; const handleChange = (event: React.ChangeEvent) => { diff --git a/frontend/src/i18n/messages/en/index.ts b/frontend/src/i18n/messages/en/index.ts index 4ac9ea9ed..125f16606 100644 --- a/frontend/src/i18n/messages/en/index.ts +++ b/frontend/src/i18n/messages/en/index.ts @@ -394,12 +394,14 @@ export const messages = { }, }, bar: { - label: "Search terms Enter keywords, opportunity numbers, or assistance listing numbers", + label: + "Search terms Enter keywords, opportunity numbers, or assistance listing numbers", button: "Search", }, callToAction: { title: "Search funding opportunities", - description: "We’re incrementally improving this experimental search page. How can we make it easier to discover grants that are right for you? Let us know at simpler@grants.gov.", + description: + "We’re incrementally improving this experimental search page. How can we make it easier to discover grants that are right for you? Let us know at simpler@grants.gov.", }, opportunityStatus: { title: "Opportunity status", @@ -411,12 +413,13 @@ export const messages = { }, }, resultsHeader: { - message: "{count, plural, =1 {1 Opportunity} other {# Opportunities}}" + message: "{count, plural, =1 {1 Opportunity} other {# Opportunities}}", }, resultsListFetch: { title: "Your search did not return any results.", body: "
  • Check any terms you've entered for typos
  • Try different keywords
  • Make sure you've selected the right statuses
  • Try resetting filters or selecting fewer options
    • ", - paginationError: "You're trying to access opportunity results that are beyond the last page of data." + paginationError: + "You're trying to access opportunity results that are beyond the last page of data.", }, resultsListItem: { status: { @@ -450,7 +453,7 @@ export const messages = { }, filterToggleAll: { select: "Select All", - clear: "Clear All" + clear: "Clear All", }, }, };