Hook search up to the backend

src/components/Gradebook/index.jsx

@@ -285,12 +285,9 @@ export default class Gradebook extends React.Component {
                   <a href="https://www.google./com">Download Grade Report</a>
                 </div>
                 <SearchField
-                  onSubmit={() => this.setState({ grades: this.mapUserEnteriesPercent(this.props.results).filter(entry => entry.username === '' || entry.username.includes(this.state.filterValue)) }) }
+                  onSubmit={value => this.props.searchForUser(this.props.match.params.courseId, value)}
                   onChange={filterValue => this.setState({ filterValue })}
-                  onClear={() => this.setState({
-                    grades: this.mapUserEnteriesPercent(this.props.results)
-                      .sort(this.sortAlphaDesc),
-                  })}
+                  onClear={() => this.props.getUserGrades(this.props.match.params.courseId)}
                   value={this.state.filterValue}
                 />
               </div>

src/containers/GradebookPage/index.jsx

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import Gradebook from '../../components/Gradebook';
-import { fetchGrades } from '../../data/actions/grades';
+import { fetchGrades, fetchMatchingUserGrades } from '../../data/actions/grades';
 
 const mapStateToProps = state => (
   {
@@ -14,6 +14,9 @@ const mapDispatchToProps = dispatch => (
     getUserGrades: (courseId) => {
       dispatch(fetchGrades(courseId));
     },
+    searchForUser: (courseId, searchText) => {
+      dispatch(fetchMatchingUserGrades(courseId, searchText));
+    },
   }
 );
 

src/data/actions/grades.js

@@ -21,7 +21,22 @@ const fetchGrades = courseId => (
         dispatch(finishedFetchingGrades());
       })
       .catch((error) => {
-        dispatch(errorFetchingGrades())
+        dispatch(errorFetchingGrades());
+      });
+  }
+);
+
+const fetchMatchingUserGrades = (courseId, searchText) => (
+  (dispatch) => {
+    dispatch(startedFetchingGrades());
+    return LmsApiService.fetchGradebookData(courseId, searchText)
+      .then(response => response.data)
+      .then((data) => {
+        dispatch(gotGrades(data.results));
+        dispatch(finishedFetchingGrades());
+      })
+      .catch((error) => {
+        dispatch(errorFetchingGrades());
       });
   }
 );
@@ -32,4 +47,5 @@ export {
   errorFetchingGrades,
   gotGrades,
   fetchGrades,
+  fetchMatchingUserGrades,
 };

src/data/services/LmsApiService.js

@@ -4,9 +4,11 @@ import { configuration } from '../../config';
 class LmsApiService {
   static baseUrl = configuration.LMS_BASE_URL;
 
-  static fetchGradebookData(courseId) {
-    const fixedCourseId = 'course-v1:edX+DemoX+Demo_Course';  // TODO: get rid of this in favor of courseId
-    const gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${fixedCourseId}/`;
+  static fetchGradebookData(courseId, searchText) {
+    let gradebookUrl = `${LmsApiService.baseUrl}/api/grades/v1/gradebook/${courseId}/`;
+    if (searchText) {
+      gradebookUrl += `?username_contains=${searchText}`;
+    }
     return apiClient.get(gradebookUrl);
   }
 }

src/index.jsx

@@ -21,32 +21,3 @@ const App = () => (
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-// const App = () => (
-//   <Provider store={store}>
-//     <Router>
-//       <div>
-//         <header>
-//           <nav>
-//             <ul className="nav">
-//               <li className="nav-item"><Link className="nav-link" to="/">Home</Link></li>
-//               <li className="nav-item"><Link className="nav-link" to="/posts">Posts</Link></li>
-//               <li className="nav-item"><Link className="nav-link" to="/disclosure">Disclosure</Link></li>
-//               <li className="nav-item"><Link className="nav-link" to="/comment-search">Comment Search</Link></li>
-//             </ul>
-//           </nav>
-//         </header>
-//         <main>
-//           <Switch>
-//             <Route exact path="/" component={() => <span>Hello World</span>} />
-//             <Route path="/posts" component={PostsPage} />
-//             <Route path="/disclosure" component={DisclosurePage} />
-//             <Route path="/comment-search" component={CommentSearchPage} />
-//           </Switch>
-//         </main>
-//       </div>
-//     </Router>
-//   </Provider>
-// );
-
-// ReactDOM.render(<App />, document.getElementById('root'));