Implements useQuery & request data fetching utilities (used in Location Management page)

[rithviknishad]

WHAT

🤖 Generated by Copilot at b035fd4

This pull request adds new types, functions, and components to improve the fetching and rendering of paginated data from the API. It introduces a request function and a useQuery hook for performing generic fetch requests, and a PaginatedList component for displaying paginated lists of data. It also adds a TRes property to the route objects to specify the expected response types, and refactors the LocationManagement component to use the new features. It also modifies some existing files to export and import the new types and components.

Proposed Changes

• Adds useQuery to perform GET operations on-mount.
• Adds request utility to perform any HTTP request.
• Adds PaginatedList component to articulate paginated queries and list items and handle state management for pagination (along with filters)

Example usage:

export default function LocationManagement({ facilityId }: Props) {
  return (
    <PaginatedList
      route={routes.listFacilityAssetLocation}
      pathParams={{ facility_external_id: facilityId }}
    >
      {() => (
        <Page
          title="Location Management"
          backUrl={`/facility/${facilityId}`}
          options={
            <div className="flex justify-end gap-2">
              <PaginatedList.Refresh />

              <ButtonV2
                href={`/facility/${facilityId}/location/add`}
                authorizeFor={NonReadOnlyUsers}
              >
                <CareIcon icon="l-plus" className="text-lg" />
                Add New Location
              </ButtonV2>
            </div>
          }
        >
          <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
            <span>No locations available</span>
          </PaginatedList.WhenEmpty>

          <PaginatedList.WhenLoading>
            <Loading />
          </PaginatedList.WhenLoading>

          <PaginatedList.Items<LocationModel> className="m-8 flex grow flex-col gap-3">
            {(item) => <Location {...item} />}
          </PaginatedList.Items>

          <div className="flex w-full items-center justify-center">
            <PaginatedList.Paginator />
          </div>
        </Page>
      )}
    </PaginatedList>
  );
}

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

HOW

🤖 Generated by Copilot at b035fd4

• Add a custom component for rendering paginated lists of data fetched from an API (link)

• Import and use the CommonButtonProps type from the ButtonV2.tsx file for the Refresh component (link)

• Simplify the LocationManagement.tsx file by using the PaginatedList component instead of the custom logic and components for fetching and rendering the locations data (link)
• Add a new property TRes to each route object in the api.tsx file to specify the expected response type of the route (link)
  • Add the TRes property to the listFacilityAssetLocation route object with the PaginatedResponse<LocationModel> type (link)
  • Add the as const assertion to the routes object, which makes the object and its properties readonly and prevents accidental mutations (link)
• Add a default function request that performs a generic fetch request to an API route with the given options (link)
• Add some types and interfaces related to the request and route objects in the types.ts file (link)
• Add a default function useQuery that is a custom hook for fetching data from an API route with the given options (link)
• Add some utility functions for the request and route objects in the utils.ts file (link)
• Use the default export of the LocationManagement component instead of the named export in the AppRouter.tsx file, since the component file was changed to use the default export syntax (link)
• Add an interface PaginatedResponse that defines the expected response type for paginated queries in the usePaginatedQuery.ts file (link)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 13, 2023 5:38pm

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	c18637a
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/6501f2f98b3fc000076fe1c0
😎 Deploy Preview	https://deploy-preview-6269--care-egov-staging.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cypress]

Passing run #1246 ↗︎

0

71

0

0

0

Details:

Merge c18637a into cc6b570...
Project: CARE	Commit: c2820c0742 ℹ️
Status: Passed	Duration: 08:49 💡
Started: Sep 13, 2023 5:41 PM	Ended: Sep 13, 2023 5:50 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[github-actions]

@rithviknishad We truly appreciate your efforts. Thank you for taking the time to contribute; this is a very valuable contribution to us 🥇. We always welcome your contribution 🙂, so feel free to contribute to anything anytime, and never lose that spirit of innovation 🙌.