[Issue 143] Refactor /resources page to use React Query

src/components/Resources/index.js

@@ -1,26 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import axios from 'axios';
+import { useQuery } from 'react-query';
 import PersonalMenu from '../PersonalMenu';
 import Search from '../Search';
 import Grid from '@material-ui/core/Grid';
 import { ResourceCard } from './ResourceCard';
+import { getResources } from '../../utils/queries';
 
-function Resources({ getResourcesUrl }) {
-  const [resources, setResources] = useState([]);
+function Resources() {
+  const { isLoading, data } = useQuery('resources', getResources);
 
-  useEffect(() => {
-    axios
-      .get(getResourcesUrl)
-      .then(function(response) {
-        // handle success
-        setResources(response.data.results);
-      })
-      .catch(function(error) {
-        // handle error
-        console.log(error);
-      });
-  }, [getResourcesUrl]);
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
 
   return (
     <>
@@ -33,7 +25,7 @@ function Resources({ getResourcesUrl }) {
           <Search label="Search resources" />
           <br />
           <Grid container spacing={1}>
-            {resources.map(resource => {
+            {data.results.map(resource => {
               return (
                 <Grid item lg={3} key={resource.guid}>
                   <ResourceCard {...resource} />

src/components/Resources/submitResource.js

@@ -84,6 +84,7 @@ const SubmitResource = () => {
   const classes = useStyles();
   const inputLabel = useRef(null);
   const [labelWidth, setLabelWidth] = useState(0);
+
   useEffect(() => {
     setLabelWidth(inputLabel.current.offsetWidth);
   }, []);

src/utils/queries.js

@@ -7,4 +7,9 @@ const getResource = async (_key, id) => {
   return data;
 };
 
-export { getResource };
+const getResources = async () => {
+  const { data } = await axios.get(`${API_URL}/resources`);
+  return data;
+};
+
+export { getResource, getResources };