Refactor /resources page to use React Query with search

Author: Linda Peng

src/components/Resources/index.js

@@ -10,7 +10,7 @@ import { getResources } from '../../utils/queries';
 function Resources() {
   const [searchValue, setSearchValue] = useState('');
   const { isLoading, data, isError, error } = useQuery(
-    ['resource', searchValue],
+    [searchValue],
     getResources
   );
 

src/components/Resources/index.test.js

@@ -14,7 +14,7 @@ jest.mock('axios');
 // search after clicking on search button
 describe('Resources', () => {
   test('renders correctly with resources', async () => {
-    const url = '/api/v1/resources';
+    const url = '/api/v1/resources/';
 
     axiosMock.get.mockResolvedValueOnce({
       data: {

src/utils/queries.js

@@ -8,11 +8,11 @@ const getResource = async (_key, id) => {
 };
 
 const getResources = async searchTerm => {
-  const { data } = await axios.get(
-    `${API_URL}/resources/?search=${searchTerm}`
-  );
-  console.log('get resources!!!!!');
-  console.log(data);
+  const url =
+    searchTerm !== ''
+      ? `${API_URL}/resources/?search=${searchTerm}` // Empty '' search term will return 0 results
+      : `${API_URL}/resources/`;
+  const { data } = await axios.get(url);
   return data;
 };