Integrate and Finalize My Tasks Page

[uhohgio]

Now that the backend task system is complete, integrate and finalize the My Tasks page.

The My Tasks page should be polished and fully integrated according to the user story.

User Story

A user should be able to view, edit, delete, and update the status of tasks they have created, as well as accept and reach out to people who have applied to help them.

If they have no tasks, it should be clear how to create one, and they should be redirected to the create-task page.

Requirements Checklist

My Tasks Page

• Page must only be accessible by authenticated users (people who are logged in).

  • if no authToken exists, redirect to login

• Connect to backend, fetch all tasks with GET /tasks endpoint

  • Filter tasks where creator_id matches the logged-in user id (from AuthContext)

• On successful fetch:

  • Display a list of tasks created by the logged-in user.

• Update all info on the page as necessary to match backend names for object attributes

• Add:

  • Loading state while fetching tasks.
  • Error state if the request fails.
  • Proper conditional rendering (loading, empty, populated states).

---

Edit Task Functionality

• Connect to backend with PUT /tasks/<task_id> endpoint.
• Only update on save.
• On successful update:
  • Update task in local state without full refresh.
• On failure:
  • Display backend error message ( would look nice as a window.alert ).

---

Delete Task Functionality

• Connect to backend with DELETE /tasks/<task_id> endpoint.
• Only allow deletion if:
  • Logged-in user is the task creator.
• On successful deletion:
  • Remove task from UI immediately.
• On failure:
  • Display backend error message.

---

Applicant Management

For each task:

• Display list of users who have applied (if applicable).
• Accept action:
  • Connect to backend endpoint (will update when implemented)
  • Update task state to reflect accepted helper.
  • Update application
  • Update helper_id
• Don't forget to update the contact attribute (and the rest of the information) on the accepted card as well as the list of cards
• Mark Task as completed when completed
  • Connect to backend with POST /tasks/<task_id>/complete
  • On success:
    • Update task status in local state
  • On failure:
    • Display backend error message

---

Acceptance Criteria

• Fully integrated with backend task endpoints.
• Only authenticated users can access My Tasks page.
• Tasks are fetched from the backend and filtered correctly. (Only displays tasks belonging to the authenticated user)
• Users can:
  • Edit their own tasks.
  • Delete their own tasks.
  • View accepted helpers.
  • Mark tasks as completed.
• UI updates immediately after successful actions.
• Handles loading, empty, success, and error states properly.
• Applicant accept/reach-out functionality works correctly.
• If the user has no tasks:
  • Clear messaging is displayed.
  • Create Task button redirects to /create-task.
• All protected requests must include: Authorization: Bearer <authToken>