Refactor Backend API Interface #6
Conversation
…ws to review_count
There was a problem hiding this comment.
Pull request overview
This pull request refactors the backend API interface by consolidating API calls into composables and updating the endpoint structure. The changes move authentication logic from utils/auth.js to composables/useAuth.js, introduce a centralized apiFetch utility, and update API endpoints from singular (/api/course/) to plural (/api/courses/) naming conventions.
Changes:
- Centralized API calls through a new
apiFetchutility function with configurable base URL - Moved authentication functions from utils to composables for better organization
- Updated all API endpoints to use RESTful plural resource naming (e.g.,
/api/courses/,/api/reviews/) - Added new composables:
useLandingand expandeduseCourseswithfetchCoursefunction
Reviewed changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.js | Removed commented-out proxy rewrite configuration |
| src/views/Login.vue | Updated to use loginWithPassword from useAuth composable instead of utils |
| src/views/Home.vue | Integrated useLanding composable to fetch landing data |
| src/views/CourseReviewSearch.vue | Refactored to use searchCourseReviews from useReviews and fetchCourse from useCourses |
| src/views/CourseDetail.vue | Updated review submission/deletion to use new API endpoints and improved error handling |
| src/views/AuthCallback.vue | Updated to use verifyCallback from useAuth composable |
| src/utils/auth.js | Removed auth functions (moved to composables), kept only helper functions and constants |
| src/utils/api.js | Replaced authentication check with new apiFetch utility for centralized API calls |
| src/composables/useReviews.js | Updated all endpoints to new URL structure and added searchCourseReviews function |
| src/composables/useLanding.js | New composable for landing page data fetching |
| src/composables/useCourses.js | Added fetchCourse function and updated to handle DRF pagination format |
| src/composables/useAuth.js | Consolidated authentication functions moved from utils with apiFetch integration |
| src/components/SetPasswordForm.vue | Updated to use setPassword from useAuth composable |
| src/components/ReviewCard.vue | Removed console.error statement in error handling |
| src/components/CourseList.vue | Updated sort field name from "num_reviews" to "review_count" and added padding to input |
| src/components/AuthInitiate.vue | Updated to use initiateAuth from useAuth composable |
| bun.lock | Updated dependency versions from "latest" to specific semantic versions |
| .env.example | Added VITE_API_BASE_URL environment variable for configurable API base URL |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 17 out of 18 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/views/CourseReviewSearch.vue
Outdated
| searchQuery.value = route.query.q || ""; | ||
| await checkAuthentication(); | ||
| await fetchCourseInfo(); | ||
| await fetchReviews(); |
There was a problem hiding this comment.
The watch effect on route.query.q has immediate: true, and onMounted also calls fetchReviews(). This means fetchReviews() will be called twice on component mount - once from the watch with immediate: true and once from onMounted. This is inefficient and could cause race conditions or duplicate API calls. Consider removing the fetchReviews() call from onMounted since the watch with immediate: true will handle the initial fetch.
| await fetchReviews(); |
…seAuth.js r-only in other files)
Implement:
#3
#7 (comment)
#9