fix: VAN-1080 - Users getting already enrolled courses recommendations

This commit is contained in:
Shafqat Farhan
2022-09-17 07:13:37 +05:00
parent bdb0e4d8ad
commit 0bb47bf87e
2 changed files with 56 additions and 31 deletions

View File

@@ -373,8 +373,17 @@ class CourseRecommendationApiView(APIView):
return Response(status=400)
recommended_courses = []
user_enrolled_course_keys = set()
fields = ['title', 'owners', 'marketing_url']
for course_id in course_keys:
course_enrollments = CourseEnrollment.enrollments_for_user(request.user)
for course_enrollment in course_enrollments:
course_key = f'{course_enrollment.course_id.org}+{course_enrollment.course_id.course}'
user_enrolled_course_keys.add(course_key)
# Pick 5 course keys, excluding the user's already enrolled course(s).
enrollable_course_keys = list(set(course_keys).difference(user_enrolled_course_keys))[:5]
for course_id in enrollable_course_keys:
course_data = get_course_data(course_id, fields)
if course_data:
recommended_courses.append({
@@ -384,4 +393,5 @@ class CourseRecommendationApiView(APIView):
'marketing_url': course_data.get('marketing_url')
})
segment.track(user_id, 'edx.bi.user.recommendations.count', {'count': len(recommended_courses)})
return Response({'courses': recommended_courses, 'is_personalized_recommendation': not is_control}, status=200)

View File

@@ -10,6 +10,7 @@ class RecommendationsPanel extends React.Component {
this.onCourseSelect = this.onCourseSelect.bind(this);
this.getCourseList = this.getCourseList.bind(this);
this.state = {
isLoading: true,
isPersonalizedRecommendation: false,
coursesList: [],
};
@@ -51,6 +52,7 @@ class RecommendationsPanel extends React.Component {
});
this.setState({
isLoading: false,
coursesList: coursesRecommendationData.courses,
isPersonalizedRecommendation: coursesRecommendationData.is_personalized_recommendation
});
@@ -60,44 +62,57 @@ class RecommendationsPanel extends React.Component {
this.getCourseList();
};
render() {
return (
<div className="p-4 panel-background">
<div className="recommend-heading mb-4">{gettext('Recommendations for you')}</div>
<div className={this.state.coursesList.length ? '' : 'spinner-container'}>
{this.state.coursesList.length ? this.state.coursesList.map(course => (
<a href={course.marketing_url} className="course-link"
onClick={() => this.onCourseSelect(course.course_key)}>
<div className="course-card box-shadow-down-1 bg-white mb-3">
<div className="box-shadow-down-1 image-box">
<img
className="panel-course-img"
src={course.logo_image_url}
alt="course image"
/>
</div>
<div className="course-title pl-3">
{course.title}
</div>
</div>
</a>
)) : (
<div className="d-flex justify-content-center align-items-center">
{this.state.isLoading ? (
<div>
<div className="recommend-heading mb-4">{gettext('Recommendations for you')}</div>
<div className="d-flex justify-content-center align-items-center spinner-container">
<div role="status" className="spinner">
<span className="sr-only">{gettext('loading')}</span>
</div>
</div>
)}
</div>
</div>
) : (
<div>
{this.state.coursesList.length ? (
<div>
<div className="recommend-heading mb-4">{gettext('Recommendations for you')}</div>
<div>
{this.state.coursesList.map(course => (
<a href={course.marketing_url} className="course-link"
onClick={() => this.onCourseSelect(course.course_key)}>
<div className="course-card box-shadow-down-1 bg-white mb-3">
<div className="box-shadow-down-1 image-box">
<img
className="panel-course-img"
src={course.logo_image_url}
alt="course image"
/>
</div>
<div className="course-title pl-3">
{course.title}
</div>
</div>
</a>
))}
</div>
</div>
) : null}
</div>
)}
{this.props.exploreCoursesUrl ? (
<div className="d-flex justify-content-center">
<a href={this.props.exploreCoursesUrl}
className="panel-explore-courses justify-content-center align-items-center">
{gettext('Explore courses')}
<span className="icon fa fa-search search-icon" aria-hidden="true"/>
</a>
<div>
{!(this.state.coursesList.length || this.state.isLoading) &&
<div className="recommend-heading mb-2 ml-2 mr-2">{gettext('Browse recently launched courses and see what\'s new in your favorite subjects.')}</div>}
<div className="d-flex justify-content-center">
<a href={this.props.exploreCoursesUrl}
className="panel-explore-courses justify-content-center align-items-center">
{gettext('Explore courses')}
<span className="icon fa fa-search search-icon" aria-hidden="true"/>
</a>
</div>
</div>
) : null}
</div>