replace jquery from insturctor list with react state

classtranscribe · Jun 2, 2024 · ab62e43 · ab62e43
1 parent cd7f52e
commit ab62e43
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/screens/Admin/Instructors/InstructorList.jsx b/src/screens/Admin/Instructors/InstructorList.jsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import $ from 'jquery';
 import { Button } from 'semantic-ui-react';
 import { search } from 'utils';
 import * as KeyCode from 'keycode-js';
 import { AdminListItem } from '../Components';
 
 export default function InstructorList({ instructors, loading, currUni, onInactive }) {
   const [result, setResult] = useState([]);
+  const [searchText, setSearchText] = useState("");
 
   useEffect(() => {
     setResult(instructors);
@@ -15,7 +15,7 @@ export default function InstructorList({ instructors, loading, currUni, onInacti
   const onSearch = (keyCode) => {
     if (keyCode === KeyCode.KEY_RETURN) {
       setResult(
-        search.getResults(instructors, $('#inst-filter')[0].value, [
+        search.getResults(instructors, searchText, [
           'firstName',
           'lastName',
           'email',
@@ -26,7 +26,7 @@ export default function InstructorList({ instructors, loading, currUni, onInacti
 
   const onReset = () => {
     setResult(instructors);
-    $('#inst-filter')[0].value = '';
+    setSearchText('');
   };
 
   return (
@@ -36,6 +36,8 @@ export default function InstructorList({ instructors, loading, currUni, onInacti
           <input
             id="inst-filter"
             placeholder="Name or email"
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
             onKeyDown={({ keyCode }) => {
               return onSearch(keyCode);
             }}