Feat: Add fetch courses-user endpoints #1303
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Updated frontend to call the new GET /courses_user endpoint on the course page. - Added matchers in the coursesSlice to populate state with fetched data. - New getUsersCourses endpoint in API client. Purpose: These changes improve performance by reducing the payload size of the main user endpoint and provides more focused course progress data. To test: Run locally and verify /courses-user endpoint in Chrome devtools Network tab.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@kyleecodes this looks good. I will approve once StoryblokSessionPage and StoryblokCoursePage also have the endpoint called. |
eleanorreem
reviewed
Feb 24, 2025
| @@ -71,6 +71,10 @@ export default function CoursesPage({ courseStories, conversations, shorts }: Pr | |||
| imageAlt: 'alt.personSitting', | |||
| }; | |||
|
|
|||
| const { data: userCourses } = useGetUserCoursesQuery(undefined, { | |||
There was a problem hiding this comment.
I would put this query inside a useEffect otherwise it will run on component refresh. https://react.dev/reference/react/useEffect.
eleanorreem
reviewed
Feb 24, 2025
| @@ -56,7 +57,6 @@ export default function CoursesPage({ courseStories, conversations, shorts }: Pr | |||
| const entryPartnerReferral = useTypedSelector((state) => state.user.entryPartnerReferral); | |||
| const partnerAccesses = useTypedSelector((state) => state.partnerAccesses); | |||
| const partnerAdmin = useTypedSelector((state) => state.partnerAdmin); | |||
| const courses = useTypedSelector((state) => state.courses); | |||
There was a problem hiding this comment.
I would continue using the state rather than using the result of the query useGetUserQuery below.
eleanorreem
reviewed
Feb 24, 2025
| @@ -20,10 +20,10 @@ export const SessionProgressDisplay = (props: SessionProgressDisplayProps) => { | |||
| PROGRESS_STATUS.NOT_STARTED, | |||
| ); | |||
|
|
|||
| const courses = useTypedSelector((state) => state.courses); | |||
| const { data: courses } = useGetUserCoursesQuery(undefined); | |||
There was a problem hiding this comment.
Same comment as above!
eleanorreem
reviewed
Feb 24, 2025
| const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id)); | ||
| const [userAccess, setUserAccess] = useState<boolean>(); | ||
| const [courseProgress, setCourseProgress] = useState<PROGRESS_STATUS>( | ||
| PROGRESS_STATUS.NOT_STARTED, | ||
| ); | ||
| const { data: courses } = useGetUserCoursesQuery(undefined, { |
eleanorreem
reviewed
Feb 24, 2025
| @@ -88,6 +88,9 @@ const slice = createSlice({ | |||
| builder.addMatcher(api.endpoints.startSession.matchFulfilled, (state, { payload }) => { | |||
| return mergeUpdatedCourse(state, payload); | |||
| }); | |||
| builder.addMatcher(api.endpoints.getUserCourses.matchFulfilled, (state, { payload }) => { | |||
There was a problem hiding this comment.
This matcher populates state when the api endpoint is called. This means you don't need ot use the return value of the api call above. Hope that makes sense!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #1223
What changes did you make and why did you make them?
(Delayed due to NextJS app router migration).
Previously, courses data was fetched as part of the larger
getUserdata payload on every page load viauseTypedSelector. With this update, it's fetched separately only when needed on course and session pages, via newuseGetUserCoursesQuery. This PR helps improve performance by reducing payload size of the main user endpoint, and provides a more focused course progress data function.Changelog:
api.tsx: adds the GET request to the new endpoint courses-user, returns type Courses & generates a useGetUserCoursesQuery hook for components to use.CoursesPage.tsx: fetches and courses-user data from useGetUserCoursesQuery, with skip condition for logged out users. Processes data the same as previous endpoint.coursesSlice.tsx: adds new matcher that updates courses state when getUserCourses query is successful.SessioProgressDisplay.tsx: migrated from useTypedSelector to useGetUserCoursesQuery to track session progress.StoryblokCoursePage.tsx: similar updates as CoursesPage.tsxStoryblokSessionPage.tsx: similar updates as CoursesPage.tsxTesting:
To-Do:
course-session-behavior.Did you run tests? Share screenshot of results:
Unit & integration pass, implementing unit tests for this in a separate issue.
How did you find us? (GitHub, Google search, social media, etc.):
N/A