Pk/mspca 46 animal availability frontend endpoint by pujitakalinadhabhotla · Pull Request #30 · Code-4-Community/mspca

pujitakalinadhabhotla · 2026-11-03T23:09:22Z

ℹ️ Issue

Closes https://mspca.atlassian.net/jira/software/projects/MSPCA/boards/1?filter=&groupBy=none&selectedIssue=MSPCA-46

📝 Description

Adds the Animal Availability page, where volunteers browse animals that need fostering, filter them, view details, and request to foster. Also adds the backend endpoint that supplies the animals.

Changes:

GET /api/animals (animals.controller.ts, animals.service.ts, animals.module.ts): returns all animals, or [] when there are none. Covered by new controller and service tests.
Match comments (1793300000000-AddMatchAdditionalComments.ts, matches.entity.ts, create-match.dto.ts, matches.service.ts): new optional additional_comments column on matches, accepted by POST /api/matches.
Routing (routes.ts, app.tsx): ROUTES.ANIMAL_AVAILABILITY = '/animal-availability', rendering the new page.
Page (pages/AnimalAvailability.tsx): fetches all animals once and shows a card grid with loading, error (with retry), and empty states. The map area is left blank.
components/AnimalCard.tsx: reusable card showing the photo (placeholder), name, breed, restriction tags, age, and location, with a "See More" button.
components/AnimalModal.tsx: opens from "See More" and shows full details plus a comments box. Apply sends the foster request through createMatch.
components/AnimalFilters.tsx, utils/animals.ts: filter panel for Animal Type, Restrictions, and Location with Apply/Cancel, chips, and Clear Filters. Filtering runs in the browser on the already-fetched list, so changing a filter makes no new API request.
components/RestrictionTag.tsx: colored tag pill used on the card and in the modal.
api/apiClient.ts: added getAnimals and createMatch.
theme.ts: added a card shadow token and the avatar purple from the Figma.
utils/mockRestrictions.ts: temporary mock tags (see notes). The logo, placeholder photo, and two icons are in assets/.

✔️ Verification

Run migrations: yarn typeorm:migrate

Add a few animals in psql (no seed migration), for example:

INSERT INTO animals (chameleon_animal_id, name, age, sex, breed, weight, location, foster_bio_memo) VALUES
 (1001,'Biscuit',2,'Male','{Golden Retriever}',55,'8 Address Street, Boston MA','Friendly and loves walks.'),
 (1002,'Mochi',1,'Female','{Domestic Shorthair}',9,'22 Elm Street, Quincy MA','Playful tabby.');

Start the apps: npx nx serve backend and npx nx serve frontend
Open http://localhost:4200/animal-availability and check:
- Cards render. Stopping the backend shows the error state, and an empty animals table shows the empty state.
- The filter button opens the panel. Ticked options appear as chips, Apply updates the grid, and Cancel and Clear Filters reset it.
- "See More" opens the modal. Entering a comment and pressing Apply shows "Request submitted!" and adds a row to matches.
Run tests: npx jest apps/backend/src/animals apps/backend/src/matches

dburkhart07

some initial comments. can you please merge main in so this diff gets cleaned up a bit?

dburkhart07 · 2026-11-05T21:44:44Z

    brown: '#5e3638',
  },
+  purple: {
+    avatar: '#b57bf8',


can you check the figma again? i think this is supposed to be a different hexcode: https://www.figma.com/design/NNzZhw8n4UWmG3UeJTLEwD/MSPCA?node-id=633-8125&m=dev

dburkhart07 · 2026-11-05T21:45:22Z

@@ -0,0 +1,16 @@
+// TEMPORARY: the animals API doesn't return restriction tags yet, so these are


we should have restrictions returned, so we shouldnt need any mock data anymore. lets just add the data into the db ourselves and taht should have all the schema we need

dburkhart07 · 2026-11-05T21:49:14Z

Fairly certain we are going to be using lucide-react icons. can we use those corresponding ones from the figma instead of this and the list filter?

dburkhart07 · 2026-11-05T21:49:55Z

 const defaultBaseUrl =
  import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3000';

+export interface Animal {


lets create a separate types.ts file within frontend/src and put all the interfaces in there.

dburkhart07 · 2026-11-05T21:52:12Z


+export interface Animal {
+  animalId: number;
+  chameleonAnimalId: number;


this is a string now

dburkhart07 · 2026-11-05T21:52:30Z

+  location: string;
+  picture: string | null;
+  fosterBioMemo: string | null;
+  // Restriction tag labels (e.g. 'Dog-Free Home'). Not returned by the API yet;


this will also need updating since we do return it

dburkhart07 · 2026-11-05T21:52:50Z

 const defaultBaseUrl =
  import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3000';

+export interface Animal {


lets also just make sure all of these schemas are exactly right with what the backend entities are

dburkhart07 · 2026-11-05T21:54:10Z

@@ -1,108 +1,24 @@
 import { MigrationInterface, QueryRunner } from 'typeorm';

 export class CreateAnimals1792897315518 implements MigrationInterface {


we should already have this migration. can you make sure this goes away when we update it? the entity is different now too

dburkhart07 · 2026-11-05T21:58:50Z

+  @IsPositive()
+  chameleonAnimalId!: number;
+
+  @IsOptional()


this should have the new docstring of @IsNonEmptyString, as well as specific ValidateIf. we should be able to still accept null values for this though

dburkhart07

for right now, can we comment out the stuff in main.tsx so that we only use the nonauthenticated frontend? we will adjust this later when we implement sign-in.

sorry theres so many comments 😭 lmk if you have any questions on any of them. tysm pujita, really good work on this so far, ik it was lowk a huge pr!

dburkhart07 · 2026-11-09T06:18:16Z

+  // Remaining months of age, e.g. 5 for "4Y5M"
+  ageMonth: number;
+  sex: string;
+  // 'Dog' | 'Cat' | 'Small Animals' | 'Baby Bottle Animals' | 'Farm Animals'


nit: we can delete these comments tbh

dburkhart07 · 2026-11-09T06:18:24Z

+  matchId: number;
+  volunteerId: number;
+  chameleonAnimalId: string;
+  // 'Pending' | 'Active' | 'Complete' | 'Denied' | 'Withdrawn' | 'Canceled'


dburkhart07 · 2026-11-09T06:25:38Z


+    it('does not update preferences when an added animal does not exist', async () => {
+      const error = new NotFoundException(
+        'Animals with Chameleon IDs not found: 998, 999',


nit: this error should be A998 and A999

dburkhart07 · 2026-11-09T06:27:34Z

        'At least one of added or removed must be provided',
      );
    }
+    await this.animalsService.checkAllExistOrFail(dto.added ?? []);


this is already being checked in the service, can we just keep it there?

dburkhart07 · 2026-11-09T06:28:57Z

    description: 'No volunteer or animal exists with the given ID.',
  })
  async createMatch(@Body() body: CreateMatchDto): Promise<Match> {
+    await this.animalsService.findByChameleonIdOrFail(body.chameleonAnimalId);


we should move this check into the service as well, and therefore we shouldnt have a diff for this file or the controller tests

dburkhart07 · 2026-11-09T07:41:39Z

+  locations: string[];
+}
+
+const ChevronIcon: React.FC<{ open: boolean }> = ({ open }) => (


why do we need this? can we just use a lucide icon instead?

dburkhart07 · 2026-11-09T07:44:57Z

+          align="stretch"
+          gap="4"
+        >
+          {options.length === 0 ? (


options will always have something available.

dburkhart07 · 2026-11-09T07:47:29Z

+  { label: 'Requires Medication', color: 'trello.requiresMedication' },
+];
+
+export const getRestriction = (label: string): Restriction | undefined =>


this is a Restriction enum

dburkhart07 · 2026-11-09T07:48:21Z

+        label,
+        color:
+          key === 'restrictions'
+            ? getRestriction(label)?.color ?? 'neutrals.black'


when would this ever fail?

dburkhart07 · 2026-11-09T07:50:13Z

+          Clear Filters
+        </Button>
+      </Flex>
+      {chips.map((chip) => (


these are supposed to have a buttons to view them horizontally, rather than overflowing into the next line. id check the figma design again on this

shreeyaadhikari and others added 7 commits October 24, 2026 23:01

added animal entity

d558e32

add migration to create animal table

574967c

added animal service logic w chameloen id existence checks

d6f7cbf

validate animal exists in post/recommendations

13af06a

validate animal exists in post/matches

c01e1ec

validate added animals exist in patch/volunteers/id/animal-preference

4d31981

Add animal availability page with filters, animal card, and modal

2f8c81a

pujitakalinadhabhotla requested review from Juwang110 and dburkhart07 November 3, 2026 23:11

dburkhart07 assigned dburkhart07 and Juwang110 Nov 4, 2026

dburkhart07 requested changes Nov 5, 2026

View reviewed changes

Juwang110 mentioned this pull request Nov 6, 2026

MSPCA-51 Add navbar to the app layout #31

Draft

Merge main and address review feedback on animal availability

3d04de3

pujitakalinadhabhotla requested a review from dburkhart07 November 7, 2026 19:33

Update animal availability UI to match latest designs

b0280f6

dburkhart07 requested changes Nov 9, 2026

View reviewed changes

		@@ -0,0 +1,16 @@
		// TEMPORARY: the animals API doesn't return restriction tags yet, so these are

		@@ -1,108 +1,24 @@
		import { MigrationInterface, QueryRunner } from 'typeorm';

		export class CreateAnimals1792897315518 implements MigrationInterface {

Conversation

pujitakalinadhabhotla commented Nov 3, 2026

ℹ️ Issue

📝 Description

✔️ Verification

Uh oh!

dburkhart07 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dburkhart07 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants