From 9160e5149d4594f8e23fbeed8850d43aa2a0f5d8 Mon Sep 17 00:00:00 2001
From: Garrett Rabian <57802560+gmrabian@users.noreply.github.com>
Date: Wed, 20 Mar 2024 11:41:13 -0400
Subject: [PATCH] Add pagination ability (#192)

* add pagination ability; needs rework with filters

* remove icon

* fixup filtering and tests
---
 src/app/[id]/apply/confirmation/page.tsx      |  13 +-
 src/app/[id]/page.tsx                         |  14 +-
 src/app/assets/icons/arrow_upward.svg         |  10 --
 src/app/components/cards/BannerCard.tsx       |   7 +-
 src/app/components/form/AppForm.tsx           |  10 +-
 src/app/components/layout/Browse.tsx          | 123 ++++++++++------
 src/app/components/modals/FilterModal.tsx     |  13 +-
 src/app/styles/browse.scss                    |  15 +-
 .../jest/frontend/ConfirmationPage.test.tsx   |   3 +
 .../jest/frontend/DetailsPage.test.tsx        |   2 +-
 .../testing/jest/frontend/Homepage.test.tsx   |  23 ++-
 .../components/cards/BannerCard.test.tsx      |   2 +-
 .../frontend/utils/libs/dynamodb-lib.test.ts  |   7 +
 src/app/utils/filtering.ts                    |   2 +-
 src/app/utils/institutions.ts                 | 132 +++++++++++-------
 src/app/utils/libs/dynamodb-lib.ts            |   3 +
 16 files changed, 240 insertions(+), 139 deletions(-)
 delete mode 100644 src/app/assets/icons/arrow_upward.svg

diff --git a/src/app/[id]/apply/confirmation/page.tsx b/src/app/[id]/apply/confirmation/page.tsx
index f99c799..14eb5e0 100644
--- a/src/app/[id]/apply/confirmation/page.tsx
+++ b/src/app/[id]/apply/confirmation/page.tsx
@@ -11,20 +11,17 @@ import ErrorPage from "@/src/app/error/page";
 // types
 import { College } from "@/src/app/types";
 
-const filterCollege = (institutionsArray: College[], id: number) => {
-  return institutionsArray.filter((college) => college.id == id)[0];
-};
-
 export default function ConfirmationPage({ params }: Props) {
-  const { institutionsArray } = useContext(InstitutionContext);
+  const { institutionsObject } = useContext(InstitutionContext);
   const [loading, setLoading] = useState(true);
   const [selectedCollege, setSelectedCollege] = useState<College>();
+
   useEffect(() => {
-    if (institutionsArray) {
-      setSelectedCollege(filterCollege(institutionsArray!, params.id));
+    if (institutionsObject) {
+      setSelectedCollege(institutionsObject[params.id]);
       setLoading(false);
     }
-  }, [institutionsArray, params.id]);
+  }, [institutionsObject, params.id]);
 
   const View = !selectedCollege ? (
     <ErrorPage />
diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx
index 507b105..065ccf9 100644
--- a/src/app/[id]/page.tsx
+++ b/src/app/[id]/page.tsx
@@ -11,30 +11,26 @@ import NotFound from "@/src/app/not-found";
 // types
 import { College } from "../types";
 
-const filterCollege = (institutionsArray: College[], id: number) => {
-  return institutionsArray.filter((college) => college.id == id)[0];
-};
-
 export default function InstitutionDetails({
   params,
 }: {
   params: { id: number };
 }) {
-  const { institutionsArray } = useContext(InstitutionContext);
+  const { institutionsObject } = useContext(InstitutionContext);
   const [loading, setLoading] = useState(true);
   const [selectedCollege, setSelectedCollege] = useState<College>();
   useEffect(() => {
-    if (institutionsArray) {
-      setSelectedCollege(filterCollege(institutionsArray!, params.id));
+    if (institutionsObject) {
+      setSelectedCollege(institutionsObject[params.id]);
       setLoading(false);
     }
-  }, [institutionsArray, params.id]);
+  }, [institutionsObject, params.id]);
 
   const View = !selectedCollege ? (
     <NotFound />
   ) : (
     <ul className="usa-card-group details_page">
-      <BannerCard key={params.id} college={selectedCollege} />
+      <BannerCard key={params.id} college={selectedCollege} id={params.id} />
       <DetailsCards key={`${params.id}-dets`} college={selectedCollege} />
     </ul>
   );
diff --git a/src/app/assets/icons/arrow_upward.svg b/src/app/assets/icons/arrow_upward.svg
deleted file mode 100644
index 3c4ac73..0000000
--- a/src/app/assets/icons/arrow_upward.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
-  xmlns="http://www.w3.org/2000/svg">
-  <g id="USWDS Components">
-    <g id="Icons">
-      <g id="Fill">
-        <path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M0 8L1.41 9.41L7 3.83V16H9V3.83L14.58 9.42L16 8L8 0L0 8Z" fill="white"/>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/src/app/components/cards/BannerCard.tsx b/src/app/components/cards/BannerCard.tsx
index a35e18d..1629830 100644
--- a/src/app/components/cards/BannerCard.tsx
+++ b/src/app/components/cards/BannerCard.tsx
@@ -21,13 +21,13 @@ import {
 //types
 import { College } from "../../types";
 
-export const BannerCard = ({ college }: Props) => {
+export const BannerCard = ({ college, id }: Props) => {
   return (
     <Card layout="flagDefault" headerFirst={true} className="card card_banner">
       <div className="card_banner-container">
         <CardMedia className="card_banner-image">
           <ImageWithFallback
-            src={`https://swift-institution-images-public.s3.amazonaws.com/${college.id}.png`}
+            src={`https://swift-institution-images-public.s3.amazonaws.com/${id}.png`}
             alt={`AI generated image of ${college.name}`}
             width={400}
             height={400}
@@ -64,7 +64,7 @@ export const BannerCard = ({ college }: Props) => {
           <CardFooter>
             <Link
               className="usa-button card_banner-apply-button"
-              href={`${college.id}/apply`}
+              href={`${id}/apply`}
               onClick={() => mixpanel.track("click_launch-application")}
               aria-label={`Apply to ${college.name}`}
             >
@@ -79,4 +79,5 @@ export const BannerCard = ({ college }: Props) => {
 
 type Props = {
   college: College;
+  id: number;
 };
diff --git a/src/app/components/form/AppForm.tsx b/src/app/components/form/AppForm.tsx
index e9d5da0..7e1b093 100644
--- a/src/app/components/form/AppForm.tsx
+++ b/src/app/components/form/AppForm.tsx
@@ -76,7 +76,7 @@ export const AppForm = ({ institutionId }: Props) => {
   const ApplicationView = !application ? (
     <NotFound />
   ) : (
-    <main className="application">
+    <div className="application">
       <USWDSForm
         initialValues={{
           "first-name": "",
@@ -187,7 +187,7 @@ export const AppForm = ({ institutionId }: Props) => {
                   <TextArea
                     id={"essay-question-1"}
                     label={essayQ1}
-                    name={"question-1"}
+                    name={"essay-question-1"}
                     required={false}
                   />
                 </fieldset>
@@ -204,7 +204,7 @@ export const AppForm = ({ institutionId }: Props) => {
                   <TextArea
                     id={"essay-question-2"}
                     label={essayQ2}
-                    name={"question-2"}
+                    name={"essay-question-2"}
                     required={false}
                   />
                 </fieldset>
@@ -222,7 +222,7 @@ export const AppForm = ({ institutionId }: Props) => {
                   <TextArea
                     id={"essay-question-3"}
                     label={essayQ3}
-                    name={"question-3"}
+                    name={"essay-question-3"}
                     required={false}
                   />
                 </fieldset>
@@ -239,7 +239,7 @@ export const AppForm = ({ institutionId }: Props) => {
           </ButtonGroup>
         </div>
       </USWDSForm>
-    </main>
+    </div>
   );
 
   return <main>{loading ? <Spinner /> : ApplicationView}</main>;
diff --git a/src/app/components/layout/Browse.tsx b/src/app/components/layout/Browse.tsx
index 532071f..96d209f 100644
--- a/src/app/components/layout/Browse.tsx
+++ b/src/app/components/layout/Browse.tsx
@@ -2,7 +2,6 @@
 import { useContext, useEffect, useState } from "react";
 // components
 import { Button } from "@trussworks/react-uswds";
-import Image from "next/image";
 import {
   CollegeCard,
   FilterModal,
@@ -10,17 +9,30 @@ import {
   Spinner,
   USWDSForm,
 } from "../../components";
+// types
+import { College } from "../../types";
 // utils
 import { filterInstitutions } from "../../utils/filtering";
-import { College } from "../../types";
-// icons
-import arrow_upward from "../../assets/icons/arrow_upward.svg";
+import { get20Institutions } from "../../utils/institutions";
+
+const defaultFilters = {
+  "filter-type": ["Public", "Private nonprofit", "Private for-profit"],
+  "filter-undergrad-pop": ["<2", "2-5", "5-10", "10-20", ">20"],
+  "filter-avg-cost-per-year": ["<10$", "10-20$", "20-40$", "40-60$", ">60$"],
+  "filter-state": "- Select -",
+  "filter-grad-rate": [">90", "60-90", "30-60", "<30"],
+};
 
 export const Browse = () => {
-  const { filteredInstitutions, institutionsArray, setFilteredInstitutions } =
+  const { institutionsArray, setFilteredInstitutions } =
     useContext(InstitutionContext);
+  const [instArray, setInstArray] = useState<College[]>([]);
+
+  const [loading, setLoading] = useState<boolean>(true);
+  const [lastScannedKey, setLastScannedKey] = useState<any | undefined>();
   const [scrollPosition, setScrollPosition] = useState<boolean>(false);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+  const [showPagination, setShowPagination] = useState<boolean>(true);
 
   useEffect(() => {
     const onScroll = (e: any) => {
@@ -39,56 +51,89 @@ export const Browse = () => {
   };
 
   const applyFilters = async (filters: any) => {
-    const filteredInstitutions = filterInstitutions(
-      institutionsArray!,
-      filters,
-    );
-    setFilteredInstitutions(filteredInstitutions);
+    if (JSON.stringify(filters) === JSON.stringify(defaultFilters)) {
+      await load20Institutions(true);
+    } else {
+      const filteredColleges = filterInstitutions(institutionsArray!, filters);
+      setFilteredInstitutions(filteredColleges);
+      setInstArray(filteredColleges);
+      setLastScannedKey(undefined);
+      setShowPagination(false);
+    }
     closeModal();
   };
 
-  if (!filteredInstitutions) return <Spinner />;
+  const load20Institutions = async (shouldReset?: boolean) => {
+    try {
+      let newArray;
+      const { colleges: result, lastKey } =
+        await get20Institutions(lastScannedKey);
+      if (shouldReset) {
+        newArray = Array(...result);
+      } else {
+        newArray = Array(...instArray, ...result);
+      }
+      setInstArray(newArray);
+      setLastScannedKey(lastKey);
+      setShowPagination(true);
+      setLoading(false);
+    } catch (e: any) {
+      throw new Error("Institution data could not be loaded.");
+    }
+  };
+
+  useEffect(() => {
+    // loads initial 20 institutions to display
+    load20Institutions();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const InstList = () => {
+    return (
+      <ul className="usa-card-group">
+        {instArray!.map((school: College) => (
+          <CollegeCard key={school.id} college={school} />
+        ))}
+      </ul>
+    );
+  };
+
+  if (loading) return <Spinner />;
   return (
     <>
-      {filteredInstitutions && (
-        <div className="browse_header">
-          <h2 className="browse_header-title">Browse colleges</h2>
-          <p className="site_text-intro browse_header-subtitle">
-            Find the college that’s right for you
-          </p>
-          <Button type="button" outline={true} onClick={launchModal}>
-            Add filters
-          </Button>
-        </div>
-      )}
-      <USWDSForm initialValues={{}} submit={applyFilters}>
+      <div className="browse_header">
+        <h2 className="browse_header-title">Browse colleges</h2>
+        <p className="site_text-intro browse_header-subtitle">
+          Find the college that’s right for you
+        </p>
+        <Button type="button" outline={true} onClick={launchModal}>
+          Add filters
+        </Button>
+      </div>
+      <USWDSForm initialValues={defaultFilters} submit={applyFilters}>
         {isModalVisible && <FilterModal closeHandler={closeModal} />}
       </USWDSForm>
-      {filteredInstitutions?.length > 0 ? (
-        <ul className="usa-card-group">
-          {filteredInstitutions.map((school: College) => (
-            <CollegeCard key={school.id} college={school} />
-          ))}
-        </ul>
+      {instArray.length > 0 ? (
+        InstList()
       ) : (
         <p className="site_text-intro browse_header-subtitle">
           No matches found for filters.
         </p>
       )}
-      {filteredInstitutions.length > 0 && scrollPosition && (
+      {showPagination && (
+        <Button
+          type="button"
+          className="browse_load-more-button"
+          onClick={() => load20Institutions()}
+        >
+          Load more
+        </Button>
+      )}
+      {scrollPosition && (
         <Button
           type="button"
-          className="browse_back-to-top-button"
+          className="usa-button usa-button--outline usa-button--unstyled browse_back-to-top-button"
           onClick={() => window.scrollTo(0, 0)}
         >
-          <Image
-            src={arrow_upward}
-            className="browse_back-to-top-button-icon"
-            height="16"
-            width="16"
-            alt="arrow_upward icon"
-            loading="eager"
-          />
           Back to Top
         </Button>
       )}
diff --git a/src/app/components/modals/FilterModal.tsx b/src/app/components/modals/FilterModal.tsx
index ecbbda2..75e9ee1 100644
--- a/src/app/components/modals/FilterModal.tsx
+++ b/src/app/components/modals/FilterModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { MouseEventHandler } from "react";
+import { MouseEventHandler, useContext } from "react";
 //components
 import Image from "next/image";
 import {
@@ -9,13 +9,18 @@ import {
   ModalFooter,
   ModalHeading,
 } from "@trussworks/react-uswds";
-import { CheckboxField, DropdownField } from "../../components";
+import {
+  CheckboxField,
+  DropdownField,
+  InstitutionContext,
+} from "../../components";
 //assets
 import close from "../../assets/icons/close.svg";
 //types
 import { CollegeType, stateOptions } from "../../types";
 
 export const FilterModal = ({ closeHandler }: Props) => {
+  const { institutionsArray } = useContext(InstitutionContext);
   return (
     <div
       role="dialog"
@@ -90,7 +95,9 @@ export const FilterModal = ({ closeHandler }: Props) => {
           </div>
           <ModalFooter>
             <ButtonGroup>
-              <Button type="submit">Apply Filters</Button>
+              <Button type="submit" disabled={!institutionsArray}>
+                {!institutionsArray ? "Loading data" : "Apply Filters"}
+              </Button>
               <Button
                 type="button"
                 onClick={closeHandler as MouseEventHandler}
diff --git a/src/app/styles/browse.scss b/src/app/styles/browse.scss
index 52eaeb3..347134d 100644
--- a/src/app/styles/browse.scss
+++ b/src/app/styles/browse.scss
@@ -44,8 +44,7 @@
   }
 }
 
-.browse_back-to-top-button {
-  position: sticky;
+.browse_load-more-button {
   bottom: 24px;
   margin: auto;
   display: flex;
@@ -57,9 +56,13 @@
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   font-weight: 700;
   transition: all 0.3s ease;
+}
 
-  &-icon {
-    @include u-margin(0.5);
-    @include u-margin-right(1);
-  }
+.browse_back-to-top-button {
+  margin: auto;
+  padding: 1rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
 }
diff --git a/src/app/testing/jest/frontend/ConfirmationPage.test.tsx b/src/app/testing/jest/frontend/ConfirmationPage.test.tsx
index b2c063d..bfedabb 100644
--- a/src/app/testing/jest/frontend/ConfirmationPage.test.tsx
+++ b/src/app/testing/jest/frontend/ConfirmationPage.test.tsx
@@ -13,6 +13,9 @@ const testParams = {
 
 const testContext: InstitutionContextShape = {
   institutionsArray: [mockCollege],
+  institutionsObject: { 0: mockCollege },
+  filteredInstitutions: [mockCollege],
+  setFilteredInstitutions: () => {},
 };
 
 const testConfirmationPageComponent = () => (
diff --git a/src/app/testing/jest/frontend/DetailsPage.test.tsx b/src/app/testing/jest/frontend/DetailsPage.test.tsx
index da33ad0..1df1e17 100644
--- a/src/app/testing/jest/frontend/DetailsPage.test.tsx
+++ b/src/app/testing/jest/frontend/DetailsPage.test.tsx
@@ -13,7 +13,7 @@ const testParams = {
 const testContext: InstitutionContextShape = {
   institutionsArray: [mockCollege],
   filteredInstitutions: [mockCollege],
-  institutionsObject: {},
+  institutionsObject: { 0: mockCollege },
   setFilteredInstitutions: () => {},
 };
 
diff --git a/src/app/testing/jest/frontend/Homepage.test.tsx b/src/app/testing/jest/frontend/Homepage.test.tsx
index 049374e..1bc10ac 100644
--- a/src/app/testing/jest/frontend/Homepage.test.tsx
+++ b/src/app/testing/jest/frontend/Homepage.test.tsx
@@ -19,19 +19,38 @@ jest.mock("../../../utils/institutions", () => ({
       avgCost: "5687.0",
     },
   ]),
+  get20Institutions: jest.fn().mockResolvedValue({
+    colleges: [
+      {
+        id: 123456,
+        img: "",
+        name: "Test College",
+        city: "Edtown",
+        state: "AZ",
+        description: "Description of college",
+        type: CollegeType.PUBLIC,
+        population: 0,
+        completionRate: "0.4784",
+        avgCost: "5687.0",
+      },
+    ],
+    lastKey: 123,
+  }),
 }));
 
 describe("Test Homepage", () => {
   test("Check that page renders", async () => {
-    render(await Home());
+    await act(async () => {
+      await render(await Home());
+    });
     expect(screen.queryAllByText("Browse colleges")[0]).toBeVisible();
   });
 });
 
 describe("Test Homepage accessibility", () => {
   it("Should not have basic accessibility issues", async () => {
-    const { container } = render(await Home());
     await act(async () => {
+      const { container } = await render(await Home());
       const results = await axe(container);
       expect(results).toHaveNoViolations();
     });
diff --git a/src/app/testing/jest/frontend/components/cards/BannerCard.test.tsx b/src/app/testing/jest/frontend/components/cards/BannerCard.test.tsx
index 2d146c4..cb6c5c3 100644
--- a/src/app/testing/jest/frontend/components/cards/BannerCard.test.tsx
+++ b/src/app/testing/jest/frontend/components/cards/BannerCard.test.tsx
@@ -18,7 +18,7 @@ jest.mock("mixpanel-browser", () => ({
 
 const component = (
   <ul>
-    <BannerCard college={mockCollege} />
+    <BannerCard college={mockCollege} id={0} />
   </ul>
 );
 
diff --git a/src/app/testing/jest/frontend/utils/libs/dynamodb-lib.test.ts b/src/app/testing/jest/frontend/utils/libs/dynamodb-lib.test.ts
index 71f8e71..fca9d5f 100644
--- a/src/app/testing/jest/frontend/utils/libs/dynamodb-lib.test.ts
+++ b/src/app/testing/jest/frontend/utils/libs/dynamodb-lib.test.ts
@@ -32,6 +32,13 @@ describe("Test DynamoDB lib", () => {
     expect(mockPut).toHaveBeenCalled();
   });
 
+  test("Can perform a single scan", async () => {
+    const mockItem = { foo: "bar" };
+    dynamoClientMock.on(ScanCommand).resolves({ Items: [mockItem] });
+    const result = await dynamoLib.singleScan({ TableName: "foos" });
+    expect(result.Items?.[0]).toBe(mockItem);
+  });
+
   test("Can scan all", async () => {
     const mockKey = {};
     const mockItem1 = { foo: "bar" };
diff --git a/src/app/utils/filtering.ts b/src/app/utils/filtering.ts
index 9e70f3d..6b11eae 100644
--- a/src/app/utils/filtering.ts
+++ b/src/app/utils/filtering.ts
@@ -6,7 +6,7 @@ export const filterInstitutions = (
 ) => {
   let filteredArr = instArr;
   // filter by state
-  if (filters["filter-state"]) {
+  if (filters["filter-state"] !== "- Select -") {
     filteredArr = filteredArr.filter(
       (el: College) => el.state === filters["filter-state"],
     );
diff --git a/src/app/utils/institutions.ts b/src/app/utils/institutions.ts
index 38981a0..8c5c918 100644
--- a/src/app/utils/institutions.ts
+++ b/src/app/utils/institutions.ts
@@ -5,6 +5,86 @@ import { College, degreeMap } from "../types";
 
 const INSTITUTIONS_TABLE_NAME = "institutions";
 
+function mapDbDataRecordToCollege(item: any) {
+  return {
+    // basics
+    id: item?.institutionId,
+    name: item?.institutionName,
+    city: item?.city,
+    state: item?.state,
+    zip: item?.zip,
+    url: item?.url,
+    type: item?.institutionType,
+    description: item?.description,
+    // focus
+    predominantUndergradDegree: mapToDegreeString(
+      item?.predominantUndergradDegree,
+    ),
+    highestDegreeAwarded: mapToDegreeString(item?.highestDegreeAwarded),
+    specialties: convertStringToBoolObject(item?.specialties),
+    // enrollment
+    population: parseInt(item?.studentPopulation),
+    demographics: convertFloatToObject(item?.raceDemographics),
+    // admissions
+    admissionRate: parseFloat(item?.admissionRate),
+    satScores: convertIntToObject(item?.satScores),
+    // cost
+    avgCost: parseInt(item?.averageAttendanceCost),
+    tuitionInState: parseInt(item?.tuitionInState),
+    tuitionOutOfState: parseInt(item?.tuitionOutOfState),
+    undergradWithFedLoan: parseFloat(item?.percentUndergradWithLoan),
+    npcUrl: item?.netPriceCalculatorUrl,
+    netPricePublic: convertIntToObject(item?.publicNetPrice),
+    netPricePrivate: convertIntToObject(item?.netPricePrivate),
+    // faculty & expenditures
+    facultyAvgSalary: parseInt(item?.facultyAverageSalary),
+    facultyEmployedFullTime: parseFloat(item?.facultyPercentageEmployedFull),
+    studentFacultyRatio: parseInt(item?.studentToFacultyRatio),
+    instructionalExpPerStudent: parseInt(item?.instructionalExpenditurePerSt),
+    // outcomes
+    completionRate: parseFloat(
+      item?.completionRates.fourYearInstitution ||
+        item?.completionRates.underFourYearInstitution,
+    ),
+    // awardIn8Yrs: "", TODO: Get after data ingestion update
+    earnings: convertIntToObject(item?.earnings),
+    retentionRate: parseFloat(
+      item?.retentionRate.fourYearInstitution ||
+        item?.retentionRate.underFourYearInstitution,
+    ),
+  };
+}
+
+export async function get20Institutions(startKey?: any) {
+  let colleges: College[] = [];
+  const params = {
+    TableName: INSTITUTIONS_TABLE_NAME,
+    FilterExpression: "recordType = :recordType",
+    ExpressionAttributeValues: { ":recordType": "data" },
+    ExclusiveStartKey: startKey ?? undefined,
+    Limit: 20,
+  };
+  const result = await dynamoClient.singleScan(params);
+  const lastKey = result.LastEvaluatedKey;
+  const items = result?.Items;
+
+  if (Array.isArray(items)) {
+    for (const item of items) {
+      const college = mapDbDataRecordToCollege(item);
+      colleges.push(college);
+    }
+  }
+
+  /*
+   * Sort colleges by name in alpha order, could optimize but inserting
+   * in sorted order if performance becomes an issue
+   */
+  colleges.sort((a, b) =>
+    a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1,
+  );
+  return { colleges, lastKey };
+}
+
 export async function getInstitutions() {
   let colleges: College[] = [];
   const params = {
@@ -16,57 +96,7 @@ export async function getInstitutions() {
 
   if (Array.isArray(items)) {
     for (const item of items) {
-      const college: College = {
-        // basics
-        id: item?.institutionId,
-        name: item?.institutionName,
-        city: item?.city,
-        state: item?.state,
-        zip: item?.zip,
-        url: item?.url,
-        type: item?.institutionType,
-        description: item?.description,
-        // focus
-        predominantUndergradDegree: mapToDegreeString(
-          item?.predominantUndergradDegree,
-        ),
-        highestDegreeAwarded: mapToDegreeString(item?.highestDegreeAwarded),
-        specialties: convertStringToBoolObject(item?.specialties),
-        // enrollment
-        population: parseInt(item?.studentPopulation),
-        demographics: convertFloatToObject(item?.raceDemographics),
-        // admissions
-        admissionRate: parseFloat(item?.admissionRate),
-        satScores: convertIntToObject(item?.satScores),
-        // cost
-        avgCost: parseInt(item?.averageAttendanceCost),
-        tuitionInState: parseInt(item?.tuitionInState),
-        tuitionOutOfState: parseInt(item?.tuitionOutOfState),
-        undergradWithFedLoan: parseFloat(item?.percentUndergradWithLoan),
-        npcUrl: item?.netPriceCalculatorUrl,
-        netPricePublic: convertIntToObject(item?.publicNetPrice),
-        netPricePrivate: convertIntToObject(item?.netPricePrivate),
-        // faculty & expenditures
-        facultyAvgSalary: parseInt(item?.facultyAverageSalary),
-        facultyEmployedFullTime: parseFloat(
-          item?.facultyPercentageEmployedFull,
-        ),
-        studentFacultyRatio: parseInt(item?.studentToFacultyRatio),
-        instructionalExpPerStudent: parseInt(
-          item?.instructionalExpenditurePerSt,
-        ),
-        // outcomes
-        completionRate: parseFloat(
-          item?.completionRates.fourYearInstitution ||
-            item?.completionRates.underFourYearInstitution,
-        ),
-        // awardIn8Yrs: "", TODO: Get after data ingestion update
-        earnings: convertIntToObject(item?.earnings),
-        retentionRate: parseFloat(
-          item?.retentionRate.fourYearInstitution ||
-            item?.retentionRate.underFourYearInstitution,
-        ),
-      };
+      const college = mapDbDataRecordToCollege(item);
       colleges.push(college);
     }
   }
diff --git a/src/app/utils/libs/dynamodb-lib.ts b/src/app/utils/libs/dynamodb-lib.ts
index 32eda27..9652f43 100644
--- a/src/app/utils/libs/dynamodb-lib.ts
+++ b/src/app/utils/libs/dynamodb-lib.ts
@@ -21,6 +21,9 @@ const dynamoClient = {
   },
   put: async (params: PutCommandInput) =>
     await client.send(new PutCommand(params)),
+  singleScan: async function (params: ScanCommandInput) {
+    return await client.send(new ScanCommand(params));
+  },
   scanAll: async function (params: ScanCommandInput) {
     let items: any[] = [];
     let ExclusiveStartKey: any;