fix: added no results bar to topics tab and search info to learners tab (#239)

Co-authored-by: adeel.tajamul <adeel.tajamul@arbisoft.com>

src/components/Search.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 
 import camelCase from 'lodash/camelCase';
 import { useDispatch, useSelector } from 'react-redux';
@@ -18,9 +18,23 @@ function Search({ intl }) {
   const { page } = useContext(DiscussionContext);
   const postSearch = useSelector(({ threads }) => threads.filters.search);
   const topicSearch = useSelector(({ topics }) => topics.filter);
+  const learnerSearch = useSelector(({ learners }) => learners.usernameSearch);
   const isPostSearch = ['posts', 'my-posts'].includes(page);
+  const isTopicSearch = 'topics'.includes(page);
   let searchValue = '';
 
+  const currentValue = useMemo(() => {
+    let value = '';
+    if (isPostSearch) {
+      value = postSearch;
+    } else if (isTopicSearch) {
+      value = topicSearch;
+    } else {
+      value = learnerSearch;
+    }
+    return value;
+  }, [isPostSearch, isTopicSearch, learnerSearch]);
+
   const onClear = () => {
     dispatch(setSearchQuery(''));
     dispatch(setTopicFilter(''));
@@ -48,7 +62,7 @@ function Search({ intl }) {
         onClear={onClear}
         onChange={onChange}
         onSubmit={onSubmit}
-        value={isPostSearch ? postSearch : topicSearch}
+        value={currentValue}
       >
         <SearchField.Label />
         <SearchField.Input

src/components/SearchInfo.jsx

@@ -14,7 +14,7 @@ function SearchInfo({
   onClear,
 }) {
   return (
-    <div className="d-flex flex-row">
+    <div className="d-flex flex-row border-bottom">
       <Icon src={Search} className="justify-content-start ml-3.5 mr-2 mb-2 mt-2.5" />
       <Button variant="" size="inline">
         {intl.formatMessage(messages.searchInfo, { count, text })}

src/discussions/learners/LearnersView.jsx

@@ -8,8 +8,10 @@ import {
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Spinner } from '@edx/paragon';
 
+import SearchInfo from '../../components/SearchInfo';
 import { RequestStatus, Routes } from '../../data/constants';
 import { selectconfigLoadingStatus, selectLearnersTabEnabled } from '../data/selectors';
+import NoResults from '../posts/NoResults';
 import {
   learnersLoadingStatus,
   selectAllLearners,
@@ -17,6 +19,7 @@ import {
   selectLearnerSorting,
   selectUsernameSearch,
 } from './data/selectors';
+import { setUsernameSearch } from './data/slices';
 import { fetchLearners } from './data/thunks';
 import { LearnerCard, LearnerFilterBar } from './learner';
 import messages from './messages';
@@ -55,7 +58,8 @@ function LearnersView({ intl }) {
 
   return (
     <div className="d-flex flex-column border-right border-light-300 h-100">
-      <LearnerFilterBar />
+      { !usernameSearch && <LearnerFilterBar /> }
+      { usernameSearch && <SearchInfo text={usernameSearch} count={learners.length} onClear={() => dispatch(setUsernameSearch(''))} /> }
       <div className="list-group list-group-flush learner">
         {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && !learnersTabEnabled && (
         <Redirect
@@ -65,9 +69,12 @@ function LearnersView({ intl }) {
           }}
         />
         )}
-        {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && learnersTabEnabled && learners.map((learner) => (
-          <LearnerCard learner={learner} key={learner.username} courseId={courseId} />
-        ))}
+        {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL
+          && learnersTabEnabled
+          && learners.map((learner, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <LearnerCard learner={learner} key={index} courseId={courseId} />
+          ))}
         {loadingStatus === RequestStatus.IN_PROGRESS ? (
           <div className="d-flex justify-content-center p-4">
             <Spinner animation="border" variant="primary" size="lg" />
@@ -79,6 +86,7 @@ function LearnersView({ intl }) {
             </Button>
           )
         )}
+        { usernameSearch !== '' && learners.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
       </div>
     </div>
   );

src/discussions/posts/NoResults.jsx

@@ -6,18 +6,21 @@ import { selectAreThreadsFiltered } from '../data/selectors';
 import messages from '../messages';
 
 function NoResults({ intl }) {
-  const isFiltered = useSelector(selectAreThreadsFiltered);
+  const postsFiltered = useSelector(selectAreThreadsFiltered);
+  const topicsFilter = useSelector(({ topics }) => topics.filter);
   const filters = useSelector((state) => state.threads.filters);
+  const learnersFilter = useSelector(({ learners }) => learners.usernameSearch);
+  const isFiltered = postsFiltered || (topicsFilter !== '') || (learnersFilter !== null);
 
   let helpMessage = messages.removeFilters;
   if (!isFiltered) {
     return null;
-  } if (filters.search) {
+  } if (filters.search || topicsFilter || learnersFilter) {
     helpMessage = messages.removeKeywords;
   }
 
   return (
-    <div className="h-100 mt-5 align-self-center w-50 d-flex flex-column justify-content-center text-center">
+    <div className="h-100 mt-5 align-self-center mx-auto w-50 d-flex flex-column justify-content-center text-center">
       <h4>{intl.formatMessage(messages.noResultsFound)}</h4>
       <small>{intl.formatMessage(helpMessage)}</small>
     </div>

src/discussions/topics/TopicsView.jsx

@@ -4,10 +4,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
 
 import SearchInfo from '../../components/SearchInfo';
-import { DiscussionProvider } from '../../data/constants';
+import { DiscussionProvider, RequestStatus } from '../../data/constants';
 import { selectSequences } from '../../data/selectors';
 import { DiscussionContext } from '../common/context';
 import { selectDiscussionProvider } from '../data/selectors';
+import NoResults from '../posts/NoResults';
 import { selectCategories, selectNonCoursewareTopics, selectTopicFilter } from './data/selectors';
 import { setFilter, setTopicsCount } from './data/slices';
 import { fetchCourseTopics } from './data/thunks';
@@ -71,6 +72,7 @@ function TopicsView() {
   const topicFilter = useSelector(selectTopicFilter);
   const topicsSelector = useSelector(({ topics }) => topics);
   const filteredTopicsCount = useSelector(({ topics }) => topics.results.count);
+  const loadingStatus = useSelector(({ topics }) => topics.status);
   const { courseId } = useContext(DiscussionContext);
   const dispatch = useDispatch();
 
@@ -87,18 +89,23 @@ function TopicsView() {
   }, [topicFilter]);
 
   return (
-    <div
-      className="discussion-topics d-flex flex-column card"
-      data-testid="topics-view"
-    >
-      {
-        topicFilter && <SearchInfo text={topicFilter} count={filteredTopicsCount} onClear={() => dispatch(setFilter(''))} />
-      }
-      <div className="list-group list-group-flush">
-        <CourseWideTopics />
-        {provider === DiscussionProvider.OPEN_EDX && <CoursewareTopics />}
-        {provider === DiscussionProvider.LEGACY && <LegacyCoursewareTopics />}
+    <div>
+      <div
+        className="discussion-topics d-flex flex-column card"
+        data-testid="topics-view"
+      >
+        {
+          topicFilter && <SearchInfo text={topicFilter} count={filteredTopicsCount} onClear={() => dispatch(setFilter(''))} />
+        }
+        <div className="list-group list-group-flush">
+          <CourseWideTopics />
+          {provider === DiscussionProvider.OPEN_EDX && <CoursewareTopics />}
+          {provider === DiscussionProvider.LEGACY && <LegacyCoursewareTopics />}
+        </div>
       </div>
+      {
+        filteredTopicsCount === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />
+      }
     </div>
   );
 }