Skip to content

PR 2/6: React Migration — API Layer & Auth Context#43

Open
devanshi-gpta wants to merge 1 commit into
react-migration/scaffoldingfrom
react-migration/api-and-context
Open

PR 2/6: React Migration — API Layer & Auth Context#43
devanshi-gpta wants to merge 1 commit into
react-migration/scaffoldingfrom
react-migration/api-and-context

Conversation

@devanshi-gpta

@devanshi-gpta devanshi-gpta commented Jun 24, 2026

Copy link
Copy Markdown

Summary

Second PR in the 6-part Angular→React migration. Ports all Angular services to plain async fetch functions and creates a React Context for authentication state management.

API layer (src/api/):

  • agent.ts — base request() helper wrapping fetch with JWT auth header injection and error normalization (matches Angular's apiInterceptor + tokenInterceptor + errorInterceptor)
  • articles.tsqueryArticles, getArticle, createArticle, updateArticle, deleteArticle, favoriteArticle, unfavoriteArticle
  • comments.tsgetComments, addComment, deleteComment
  • tags.tsgetTags
  • profile.tsgetProfile, followUser, unfollowUser
  • auth.tslogin, register, getCurrentUser, updateUser

Auth context (src/context/AuthContext.tsx):

  • Replaces Angular's UserService + JwtService singleton pair
  • Same state machine: loading → authenticated | unauthenticated | unavailable
  • Exponential backoff retry on 5XX (2s → 4s → 8s → 16s cap)
  • Exposes window.__conduit_debug__ for e2e test compatibility
  • useAuth() hook for consuming components

Utilities (src/utils/):

  • defaultImage() — replaces DefaultImagePipe
  • formatDate() — replaces Angular DatePipe usage
  • renderMarkdown() — replaces MarkdownPipe (lazy-imports marked)

Link to Devin session: https://app.devin.ai/sessions/6215127f80d4463cad3055cf81b87f0c
Requested by: @devanshi-gpta


Devin Review

Status Commit
⚪ Not started

Run Devin Review

Open in Devin Review (Staging)

- Port Angular services to plain async fetch functions in src/api/
  - agent.ts: base request helper with JWT auth headers
  - articles.ts: CRUD operations, favorite/unfavorite
  - comments.ts: get, add, delete comments
  - tags.ts: fetch all tags
  - profile.ts: get profile, follow/unfollow
  - auth.ts: login, register, getCurrentUser, updateUser
- Create AuthContext (src/context/AuthContext.tsx):
  - AuthProvider with useState for user/authState
  - Auto-retry with exponential backoff on 5XX errors
  - Exposes useAuth() hook
  - window.__conduit_debug__ interface for e2e tests
- Port Angular pipes as utility functions (src/utils/):
  - defaultImage, formatDate, renderMarkdown

Co-Authored-By: Devanshi Gupta <devanshi.gupta@cognition.ai>
@devin-ai-integration

Copy link
Copy Markdown

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

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