Skip to content

feat: fetch and display tasks from the API - #31

Merged
Alejandroq12 merged 5 commits into
devfrom
feature/tasks-query
Aug 7, 2026
Merged

feat: fetch and display tasks from the API#31
Alejandroq12 merged 5 commits into
devfrom
feature/tasks-query

Conversation

@Alejandroq12

@Alejandroq12 Alejandroq12 commented Aug 6, 2026

Copy link
Copy Markdown
Owner

Phase 3 (Get): tasks query with generated types, five status columns fed by real data, loading/error/empty
states. All 20 tests green; verified live against the API through the dev proxy.

Summary by CodeRabbit

  • New Features

    • Tasks now load from the API and appear in grouped board views with real assignees, tags, estimates, and due dates.
    • Added loading skeletons, empty-task messaging, and failure alerts with retry support.
    • Improved task display formatting, including overdue indicators and neutral tag styling.
  • Bug Fixes

    • GraphQL connections now resolve correctly using the current application origin.
  • Documentation

    • Updated the API connection checklist and clarified that reaction icons are decorative.

First real codegen run against the introspected schema. DateTime is
  mapped to string so dueDate types honestly instead of unknown. Generated
graphql-request v7 constructs new URL(endpoint) without a base, so the
  relative '/graphql' threw TypeError: Invalid URL synchronously — no request
  ever reached the network. Resolving against window.location.origin keeps
  the same-origin proxy design in dev, preview, and any future deploy.
… empty states

TasksView owns the four query states: skeleton board while pending,
  role=alert with retry on failure, empty state, and the board grouped by the
  Status enum onto the five required columns, position-sorted. task-display.ts
  translates schema values (point enums, tags, due dates) into the design's
  vocabulary. Tests mock the transport seam with API-shaped fixtures; the
  three state tests pin the three requirement bullets. Sample data retired.
@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 34aaf3dc-9e14-41f1-8651-25c0ca16bebc

📥 Commits

Reviewing files that changed from the base of the PR and between 9a97b64 and 8764477.

📒 Files selected for processing (1)
  • src/app/router.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/app/router.test.tsx

📝 Walkthrough

Walkthrough

The task pages now fetch tasks through GraphQL and React Query. They render loading, error with retry, empty, and grouped board states. Task cards use API data and shared formatting helpers. Tests cover fetched content and query states.

Changes

API-driven task board

Layer / File(s) Summary
Task data contract and display mapping
src/features/tasks/queries.ts, src/features/tasks/types.ts, src/features/tasks/task-display.ts, codegen.ts
The GraphQL task query and generated types define the API task shape. Helpers group tasks, format points and dates, and map tags to labels and tones.
Task fetching and query states
src/lib/graphql-client.ts, src/features/tasks/useTasks.ts, src/features/tasks/TasksView.tsx
The task hook fetches tasks from /graphql. TasksView renders loading, error with retry, empty, or grouped board states.
API task card integration
src/features/tasks/Dashboard.tsx, src/features/tasks/MyTask.tsx, src/features/tasks/TaskCard.tsx
Dashboard and MyTask now render TasksView. TaskCard displays API task fields, computed metadata, assignee details, and fallback values.
Task flow validation and completion tracking
src/test/fixtures.ts, src/app/router.test.tsx, README.md
Fixtures and GraphQL mocks support tests for fetched content, loading, retry, failure, and empty states. The API checklist records these states as complete.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant TaskPage
  participant TasksView
  participant useTasks
  participant GraphQLAPI
  participant TaskBoard
  TaskPage->>TasksView: render task view
  TasksView->>useTasks: request tasks
  useTasks->>GraphQLAPI: fetch TasksDocument
  GraphQLAPI-->>useTasks: return tasks or error
  useTasks-->>TasksView: provide query state
  TasksView->>TaskBoard: render grouped tasks
Loading

Possibly related PRs

Suggested labels: ui

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: fetching tasks from the API and displaying them.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/tasks-query

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/features/tasks/TaskCard.tsx`:
- Around line 55-60: Remove the hardcoded fork and comment metrics from the task
card, including the corresponding icons or wrappers if they have no remaining
content. Update the JSX in TaskCard so it does not display fabricated values,
rather than adding unsupported fields to ApiTask.

In `@src/test/fixtures.ts`:
- Around line 5-8: Make the relative-date fixture deterministic by updating
daysFromNow and its fixtureTasks callers to use an injected or fixed reference
date instead of the current time at module load. Ensure router tests
consistently use that stable date so the Twitter task’s expected relative-day
value cannot change across midnight.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ae2d5236-08fb-422e-bc8c-db3f981e3fb6

📥 Commits

Reviewing files that changed from the base of the PR and between ea0f914 and dba0f9e.

⛔ Files ignored due to path filters (4)
  • src/graphql/generated/fragment-masking.ts is excluded by !**/generated/**
  • src/graphql/generated/gql.ts is excluded by !**/generated/**
  • src/graphql/generated/graphql.ts is excluded by !**/generated/**
  • src/graphql/generated/index.ts is excluded by !**/generated/**
📒 Files selected for processing (14)
  • README.md
  • codegen.ts
  • src/app/router.test.tsx
  • src/features/tasks/Dashboard.tsx
  • src/features/tasks/MyTask.tsx
  • src/features/tasks/TaskCard.tsx
  • src/features/tasks/TasksView.tsx
  • src/features/tasks/queries.ts
  • src/features/tasks/sample-tasks.ts
  • src/features/tasks/task-display.ts
  • src/features/tasks/types.ts
  • src/features/tasks/useTasks.ts
  • src/lib/graphql-client.ts
  • src/test/fixtures.ts
💤 Files with no reviewable changes (1)
  • src/features/tasks/sample-tasks.ts

Comment thread src/features/tasks/TaskCard.tsx Outdated
Comment thread src/test/fixtures.ts
@claude

claude Bot commented Aug 7, 2026

Copy link
Copy Markdown

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

Repository owner deleted a comment from coderabbitai Bot Aug 7, 2026
Repository owner deleted a comment from coderabbitai Bot Aug 7, 2026
@Alejandroq12
Alejandroq12 merged commit 82a74a6 into dev Aug 7, 2026
7 checks passed
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.

1 participant