Merge pull request #6054 from Abishekcs/refactor/student-view-navigat…

…ion-course-page Refactor components to use navigation utility hook for student details view
WikiEducationFoundation · Dec 17, 2024 · d0b9ec4 · d0b9ec4
2 parents 4d38f71 + ef80c36
commit d0b9ec4
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 26 deletions.
diff --git a/app/assets/javascripts/components/common/AssignmentLinks/AssignmentLinks.jsx b/app/assets/javascripts/components/common/AssignmentLinks/AssignmentLinks.jsx
@@ -59,9 +59,9 @@ const AssignmentLinks = ({ assignment, courseType, user, course, project, editMo
   let groupMembers;
   if (editors) {
     if (role === ASSIGNED_ROLE) {
-      groupMembers = <GroupMembersLink members={editors} />;
+      groupMembers = <GroupMembersLink members={editors} course={course} />;
     } else {
-      groupMembers = <EditorLink key={`editor-${id}`} editors={editors} />;
+      groupMembers = <EditorLink key={`editor-${id}`} editors={editors} course={course} />;
     }
   }
 

diff --git a/app/assets/javascripts/components/common/AssignmentLinks/EditorLink.jsx b/app/assets/javascripts/components/common/AssignmentLinks/EditorLink.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import AssignedToLink from '@components/overview/my_articles/common/AssignedToLink.jsx';
 
-export const EditorLink = ({ editors }) => {
-  return <AssignedToLink members={editors} name="editors" />;
+export const EditorLink = ({ editors, course }) => {
+  return <AssignedToLink members={editors} course={course} name="editors" />;
 };
 
 EditorLink.propTypes = {

diff --git a/app/assets/javascripts/components/common/AssignmentLinks/GroupMembersLink.jsx b/app/assets/javascripts/components/common/AssignmentLinks/GroupMembersLink.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import AssignedToLink from '@components/overview/my_articles/common/AssignedToLink.jsx';
 
-export const GroupMembersLink = ({ members }) => {
-  return <AssignedToLink members={members} name="group_members" />;
+export const GroupMembersLink = ({ members, course }) => {
+  return <AssignedToLink members={members} course={course} name="group_members" />;
 };
 
 GroupMembersLink.propTypes = {

diff --git a/app/assets/javascripts/components/overview/my_articles/common/AssignedToLink.jsx b/app/assets/javascripts/components/overview/my_articles/common/AssignedToLink.jsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import useNavigationsUtils from '../../../../hooks/useNavigationUtils';
 
-export const AssignedToLink = ({ name, members }) => {
+export const AssignedToLink = ({ name, members, course }) => {
   if (!members) return null;
 
   const label = <span key="label">{I18n.t(`assignments.${name}`)}: </span>;
   const list = [...members].sort((a, b) => a > b);
+  const { openStudentDetailsView } = useNavigationsUtils();
+
   const links = list.map((username, index, collection) => {
     return (
       <span key={username}>
-        <a href={`/users/${username}`}>
+        <a onClick={() => openStudentDetailsView(course.slug, username)} style={{ cursor: 'pointer' }}>
           {username}
         </a>
         {index < collection.length - 1 ? ', ' : null}

diff --git a/app/assets/javascripts/components/revisions/revision.jsx b/app/assets/javascripts/components/revisions/revision.jsx
@@ -5,19 +5,17 @@ import CourseUtils from '../../utils/course_utils.js';
 import { formatDateWithTime } from '../../utils/date_utils.js';
 import { trunc } from '../../utils/strings.js';
 import withRouter from '@components/util/withRouter.jsx';
+import useNavigationsUtils from '../../hooks/useNavigationUtils.js';
 
-const Revision = ({ revision, index, wikidataLabel, course, setSelectedIndex, lastIndex, selectedIndex, student, router }) => {
+const Revision = ({ revision, index, wikidataLabel, course, setSelectedIndex, lastIndex, selectedIndex, student }) => {
   const ratingClass = `rating ${revision.rating}`;
   const ratingMobileClass = `${ratingClass} tablet-only`;
   const formattedTitle = CourseUtils.formattedArticleTitle({ title: revision.title, project: revision.wiki.project, language: revision.wiki.language }, course.home_wiki, wikidataLabel);
   const subtitle = wikidataLabel ? `(${CourseUtils.removeNamespace(revision.title)})` : '';
   const isWikipedia = revision.wiki.project === 'wikipedia';
   const showRealName = student.real_name;
+  const { openStudentDetailsView } = useNavigationsUtils();
 
-  const openStudentDetails = () => {
-    const url = `/courses/${course.slug}/students/articles/${encodeURIComponent(student.username)}`;
-    router.navigate(url);
-  };
   return (
     <tr className="revision">
       <td className="tooltip-trigger desktop-only-tc">
@@ -38,7 +36,7 @@ const Revision = ({ revision, index, wikidataLabel, course, setSelectedIndex, la
             <strong>{trunc(student.real_name)}</strong>&nbsp;
             (
             <a
-              onClick={openStudentDetails} style={{
+              onClick={() => openStudentDetailsView(course.slug, student.username)} style={{
                 cursor: 'pointer'
               }}
             >
@@ -49,7 +47,7 @@ const Revision = ({ revision, index, wikidataLabel, course, setSelectedIndex, la
         ) : (
           <span>
             <a
-              onClick={openStudentDetails} style={{
+              onClick={() => openStudentDetailsView(course.slug, student.username)} style={{
                 cursor: 'pointer'
               }}
             >

diff --git a/app/assets/javascripts/components/students/shared/StudentList/Student/Student.jsx b/app/assets/javascripts/components/students/shared/StudentList/Student/Student.jsx
@@ -34,6 +34,7 @@ const Student = createReactClass({
     fetchTrainingStatus: PropTypes.func.isRequired,
     minimalView: PropTypes.bool,
     student: PropTypes.object.isRequired,
+    openStudentDetailsView: PropTypes.func.isRequired
   },
 
   setUploadFilters(selectedFilters) {
@@ -44,10 +45,9 @@ const Student = createReactClass({
     return e.stopPropagation();
   },
 
-  openStudentDetails() {
-    const { course, router, student } = this.props;
-    const url = `/courses/${course.slug}/students/articles/${encodeURIComponent(student.username)}`;
-    return router.navigate(url);
+  openStudentDetailsView() {
+    const { course, student, openStudentDetailsView } = this.props;
+    openStudentDetailsView(course.slug, student.username);
   },
 
   _shouldShowRealName() {
@@ -64,7 +64,7 @@ const Student = createReactClass({
     let recentRevisions;
     if (showRecent) {
       recentRevisions = (
-        <td className="desktop-only-tc" onClick={this.openStudentDetails} >
+        <td className="desktop-only-tc" onClick={this.openStudentDetailsView} >
           {student.recent_revisions}
         </td>
       );
@@ -111,7 +111,7 @@ const Student = createReactClass({
 
     return (
       <tr className="students">
-        <td onClick={this.openStudentDetails} style={{ minWidth: '250px' }}>
+        <td onClick={this.openStudentDetailsView} style={{ minWidth: '250px' }}>
           <div className="name">
             <StudentUsername current_user={current_user} student={student} />
           </div>
@@ -123,17 +123,17 @@ const Student = createReactClass({
           <ExerciseProgressDescription student={student} />
           <TrainingProgressDescription student={student} />
         </td>
-        <td className="desktop-only-tc" onClick={this.openStudentDetails}>
+        <td className="desktop-only-tc" onClick={this.openStudentDetailsView}>
           {assignButton}
         </td>
-        <td className="desktop-only-tc" onClick={this.openStudentDetails}>
+        <td className="desktop-only-tc" onClick={this.openStudentDetailsView}>
           {reviewButton}
         </td>
         {recentRevisions}
-        <td className="desktop-only-tc" onClick={this.openStudentDetails}>
+        <td className="desktop-only-tc" onClick={this.openStudentDetailsView}>
           <ContentAdded course={course} student={student} />
         </td>
-        <td className="desktop-only-tc" onClick={this.openStudentDetails}>
+        <td className="desktop-only-tc" onClick={this.openStudentDetailsView}>
           {student.references_count}
         </td>
         <td className="desktop-only-tc">

diff --git a/app/assets/javascripts/components/students/shared/StudentList/StudentRow.jsx b/app/assets/javascripts/components/students/shared/StudentList/StudentRow.jsx
@@ -2,10 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Student from './Student/Student.jsx';
+import useNavigationsUtils from '../../../../hooks/useNavigationUtils.js';
 
 export const StudentRow = ({
   assignments, course, current_user, editAssignments, showRecent, student, wikidataLabels
 }) => {
+  const { openStudentDetailsView } = useNavigationsUtils();
   return (
     <Student
       assignments={assignments}
@@ -15,6 +17,7 @@ export const StudentRow = ({
       showRecent={showRecent}
       student={student}
       wikidataLabels={wikidataLabels}
+      openStudentDetailsView={openStudentDetailsView}
     />
   );
 };

diff --git a/app/assets/javascripts/hooks/useNavigationUtils.js b/app/assets/javascripts/hooks/useNavigationUtils.js
@@ -0,0 +1,16 @@
+import { useNavigate } from 'react-router-dom';
+
+const useNavigationsUtils = () => {
+  const navigate = useNavigate();
+
+  const openStudentDetailsView = (courseSlug, studentUsername) => {
+    const url = `/courses/${courseSlug}/students/articles/${encodeURIComponent(studentUsername)}`;
+    navigate(url);
+  };
+
+  return {
+    openStudentDetailsView,
+  };
+};
+
+export default useNavigationsUtils;