Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Add fetch courses-user endpoints #1303

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Feat: Add fetch courses-user endpoints #1303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ea16a52
Feat: Add fetch courses-user endpoints
kyleecodes Feb 10, 2025
ba729d1
Merge branch 'develop' into api/get_courses_user
kyleecodes Feb 16, 2025
d835025
Merge branch 'develop' into api/get_courses_user
kyleecodes Feb 19, 2025
8eb4da6
Api: Add fetch courses-user to storyblok page components
kyleecodes Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions components/pages/CoursesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Column from '@/components/common/Column';
import LoadingContainer from '@/components/common/LoadingContainer';
import Row from '@/components/common/Row';
import Header from '@/components/layout/Header';
import { useGetUserCoursesQuery } from '@/lib/api';
import {
EMAIL_REMINDERS_FREQUENCY,
PROGRESS_STATUS,
Expand Down Expand Up @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

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

I would continue using the state rather than using the result of the query useGetUserQuery below.

const searchParams = useSearchParams();
const sectionQueryParam = searchParams.get('section');
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
Expand All @@ -71,6 +71,10 @@ export default function CoursesPage({ courseStories, conversations, shorts }: Pr
imageAlt: 'alt.personSitting',
};

const { data: userCourses } = useGetUserCoursesQuery(undefined, {
Copy link
Contributor

Choose a reason for hiding this comment

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

I would put this query inside a useEffect otherwise it will run on component refresh. https://react.dev/reference/react/useEffect.

skip: !userId,
});

useEffect(() => {
logEvent(COURSE_LIST_VIEWED);
}, []);
Expand Down Expand Up @@ -132,10 +136,10 @@ export default function CoursesPage({ courseStories, conversations, shorts }: Pr
setLoadedCourses(coursesWithAccess);
setLoadedShorts(shortsWithAccess);

if (courses) {
if (userCourses) {
let courseCoursesStarted: Array<number> = [];
let courseCoursesCompleted: Array<number> = [];
courses.map((course) => {
userCourses.map((course) => {
if (course.completed) {
courseCoursesCompleted.push(course.storyblokId);
} else {
Expand All @@ -145,7 +149,15 @@ export default function CoursesPage({ courseStories, conversations, shorts }: Pr
setCoursesStarted(courseCoursesStarted);
setCoursesCompleted(courseCoursesCompleted);
}
}, [partnerAccesses, partnerAdmin, courseStories, courses, shorts, entryPartnerReferral, userId]);
}, [
partnerAccesses,
partnerAdmin,
courseStories,
userCourses,
shorts,
entryPartnerReferral,
userId,
]);

const getCourseProgress = (courseId: number) => {
return coursesStarted.includes(courseId)
Expand Down
6 changes: 3 additions & 3 deletions components/session/SessionProgressDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import { useGetUserCoursesQuery } from '@/lib/api';
import { PROGRESS_STATUS } from '@/lib/constants/enums';
import { useTypedSelector } from '@/lib/hooks/store';
import { Course } from '@/lib/store/coursesSlice';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import DonutLargeIcon from '@mui/icons-material/DonutLarge';
Expand All @@ -20,10 +20,10 @@ export const SessionProgressDisplay = (props: SessionProgressDisplayProps) => {
PROGRESS_STATUS.NOT_STARTED,
);

const courses = useTypedSelector((state) => state.courses);
const { data: courses } = useGetUserCoursesQuery(undefined);
Copy link
Contributor

Choose a reason for hiding this comment

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

Same comment as above!


useEffect(() => {
const userCourse = courses.find((course: Course) => course.storyblokId === storyblokCourseId);
const userCourse = courses?.find((course: Course) => course.storyblokId === storyblokCourseId);

if (userCourse) {
const matchingSession = userCourse.sessions?.find(
Expand Down
7 changes: 5 additions & 2 deletions components/storyblok/StoryblokCoursePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { ContentUnavailable } from '@/components/common/ContentUnavailable';
import CourseHeader from '@/components/course/CourseHeader';
import CourseIntroduction from '@/components/course/CourseIntroduction';
import { Link as i18nLink } from '@/i18n/routing';
import { useGetUserCoursesQuery } from '@/lib/api';
import { PROGRESS_STATUS } from '@/lib/constants/enums';
import { COURSE_OVERVIEW_VIEWED } from '@/lib/constants/events';
import { useTypedSelector } from '@/lib/hooks/store';
Expand Down Expand Up @@ -69,12 +70,14 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
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);
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, {
Copy link
Contributor

Choose a reason for hiding this comment

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

Same as above!

skip: !isLoggedIn,
});

useEffect(() => {
const storyPartners = included_for_partners;
Expand All @@ -91,7 +94,7 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
}, [partnerAccesses, partnerAdmin, included_for_partners, entryPartnerReferral, isLoggedIn]);

useEffect(() => {
setCourseProgress(determineCourseProgress(courses, storyId));
setCourseProgress(determineCourseProgress(courses || [], storyId));
}, [courses, storyId]);

useEffect(() => {
Expand Down
7 changes: 5 additions & 2 deletions components/storyblok/StoryblokSessionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { SessionCompleteButton } from '@/components/session/SessionCompleteButto
import { SessionHeader } from '@/components/session/SessionHeader';
import { SessionVideo } from '@/components/session/SessionVideo';
import { Link as i18nLink } from '@/i18n/routing';
import { useGetUserCoursesQuery } from '@/lib/api';
import { PROGRESS_STATUS } from '@/lib/constants/enums';
import { useTypedSelector } from '@/lib/hooks/store';
import { getChatAccess } from '@/lib/utils/getChatAccess';
Expand Down Expand Up @@ -79,7 +80,9 @@ const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
const isLoggedIn = useTypedSelector((state) => Boolean(state.user.id));
const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
const courses = useTypedSelector((state) => state.courses);
const { data: courses } = useGetUserCoursesQuery(undefined, {
skip: !isLoggedIn,
});

const [userAccess, setUserAccess] = useState<boolean>();
const [sessionId, setSessionId] = useState<string>(); // database Session id
Expand Down Expand Up @@ -128,7 +131,7 @@ const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
]);

useEffect(() => {
getSessionCompletion(course, courses, storyId, setSessionProgress, setSessionId);
getSessionCompletion(course, courses || [], storyId, setSessionProgress, setSessionId);
}, [courses, course, storyId, storyUuid]);

if (userAccess === undefined) return <LoadingContainer />;
Expand Down
9 changes: 9 additions & 0 deletions lib/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,14 @@ export const api = createApi({
};
},
}),
getUserCourses: builder.query<Courses, void>({
query() {
return {
url: 'courses-user',
method: 'GET',
};
},
}),
}),
});

Expand All @@ -287,4 +295,5 @@ export const {
useCreateResourceFeedbackMutation,
useStartResourceMutation,
useCompleteResourceMutation,
useGetUserCoursesQuery,
} = api;
3 changes: 3 additions & 0 deletions lib/store/coursesSlice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

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!

return payload;
});
},
});

Expand Down
Loading