Skip to content

wire frontend to real APIs - #303

Open
shreeyaadhikari wants to merge 5 commits into
mainfrom
Replace-mock-data-with-real-API-calls
Open

wire frontend to real APIs#303
shreeyaadhikari wants to merge 5 commits into
mainfrom
Replace-mock-data-with-real-API-calls

Conversation

@shreeyaadhikari

@shreeyaadhikari shreeyaadhikari commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

ℹ️ Issue

Closes #248

📝 Description

Wire frontend pages to the real backend APIs and make tests CI-friendly by adding deterministic auth + API mocks so typecheck/tests don't fail when calling protected endpoints.

Briefly list the changes made to the code:

  1. Replaced hardcoded mock arrays with real API calls using useApi() in:
  • apps/frontend/src/app/donors/page.tsx
  • apps/frontend/src/app/donations/page.tsx
  • apps/frontend/src/app/accounts/page.tsx
  1. Made component tests deterministic and async safe:
  • Added per-test auth + fetch mocks for Donors, Donations, and AccountsPage tests so they no longer fail with 401s.
  • Updated assertions to use findBy / waitFor where needed.

✔️ Verification

image image image

🏕️ (Optional) Future Work / Notes

  • I could not test the authenticated flow because I don't have login credentials or a valid access token.

  • The donations route returned {"message":"Handler 'donations' not found"} when I tried GET /donations.

@shreeyaadhikari
shreeyaadhikari marked this pull request as ready for review August 3, 2026 23:56
@github-actions
github-actions Bot requested a review from mehanana August 3, 2026 23:57
github-actions Bot added a commit that referenced this pull request Aug 3, 2026
@shreeyaadhikari shreeyaadhikari self-assigned this Aug 3, 2026

@nourshoreibah nourshoreibah left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments on pieces I think may be broken! Would you please add the test-environment label to this pr and test your pr with the account i sent in proj-branch? just to make sure the linking actually workss


const mockDonors = ['Green Future Foundation', 'Horizon Trust', 'Bright Path Nonprofit', 'Unity Giving Circle', 'Sunrise Community Fund'];
const mockProjects = ['Clean Water Initiative', 'Youth Mentorship Program', 'Food Security Drive', 'Urban Garden Project', 'STEM Education Fund'];
const donorsBase = 'http://localhost:3003';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hard coding this will give invalid URL. we set a global base url that is either localhost or the api gateway url, so you should just be able to append to it

const [error, setError] = useState<string | null>(null);

useEffect(() => {
async function fetchUsers() {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'd want to put this fetch in a custom hook

useEffect(() => {
async function fetchUsers() {
try {
const json = await api.get<User[] | { data: User[] }>('http://localhost:3001/users');

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this response shape may be wrong since user can be paginated

@@ -16,26 +16,40 @@ type Donor = {
num_projects: number;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think this needs to be updated. i dont think we give num_projects

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Replace mock data with real API calls (donors, donations, accounts)

2 participants