Update saved-grants page and docs

documentation/frontend/development.md

@@ -133,6 +133,25 @@ It's recommended that developers configure their code editor to auto run these t
 - `npm run format-check`: Check files for prettier formatting violations without fixing them
 - `npm run all-checks`: Runs linting, typescript check, unit testing, and creates a build - simulating locally tests that are run on PRs in Github Actions, other than e2e tests
 
+#### Frontend coding conventions
+
+Some common uses and conventions are not covered in formatting and linting tools or widely agreed upon across the industry.
+
+##### Naming resolved and unresolved promises
+
+Constants that represent unresolved promises should be named `varNamePromise(s)`.
+
+Constants that represent resolved promises should be named `resolvedVarName(s)`
+
+For example:
+
+```javascript
+
+const bunnyPromises = getBunnyPromises();
+const resolvedBunnies = Promise.all(bunnyPromies);
+```
+
+
 ### 🖼️ Storybook
 
 Storybook is a [frontend workshop](https://bradfrost.com/blog/post/a-frontend-workshop-environment/) for developing and documenting pages and components in isolation. It allows you to render the same React components and files in the `src/` directory in a browser, without the need for a server or database. This allows you to develop and manually test components without having to run the entire Next.js application.

frontend/src/app/[locale]/saved-grants/page.tsx

@@ -30,9 +30,13 @@ const SavedOpportunitiesList = ({
   return (
     <ul className="usa-prose usa-list--unstyled">
       {opportunities.map((opportunity) => (
-        <li key={opportunity?.opportunity_id}>
-          <SearchResultsListItem opportunity={opportunity} saved={true} />
-        </li>
+        <>
+          {opportunity && (
+            <li key={opportunity.opportunity_id}>
+              <SearchResultsListItem opportunity={opportunity} saved={true} />
+            </li>
+          )}
+        </>
       ))}
     </ul>
   );
@@ -65,13 +69,15 @@ export default async function SavedGrants({ params }: LocalizedPageProps) {
   const { locale } = await params;
   const t = await getTranslations({ locale });
   const savedOpportunities = await fetchSavedOpportunities();
-  const opportunities = savedOpportunities.map(async (savedOpportunity) => {
-    const { data: opportunityData } = await getOpportunityDetails(
-      String(savedOpportunity.opportunity_id),
-    );
-    return opportunityData;
-  });
-  const resolvedOpportunities = await Promise.all(opportunities);
+  const opportunityPromises = savedOpportunities.map(
+    async (savedOpportunity) => {
+      const { data: opportunityData } = await getOpportunityDetails(
+        String(savedOpportunity.opportunity_id),
+      );
+      return opportunityData;
+    },
+  );
+  const resolvedOpportunities = await Promise.all(opportunityPromises);
 
   return (
     <>

frontend/src/services/fetch/fetchers/savedOpportunityFetcher.ts

@@ -1,3 +1,5 @@
+"server-only";
+
 import { getSession } from "src/services/auth/session";
 import { userSavedOpportunity } from "src/services/fetch/fetchers/fetchers";
 import { SavedOpportunity } from "src/types/saved-opportunity/savedOpportunityResponseTypes";