Add Axios to utility query

Add query utility function using Axios.

Co-authored-by: Linda Peng <linda.peng@alumni.duke.edu>

Author: angelocordon

src/components/Resources/ResourcePage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { Link } from 'react-router-dom';
+import { getResource } from '../../utils/queries';
 import PersonalMenu from '../PersonalMenu';
 import { Grid, Breadcrumbs, Typography, Chip, Box } from '@material-ui/core';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
@@ -15,13 +16,9 @@ const useStyles = makeStyles({
 });
 
 function ResourcePage({ matchProps }) {
+  const resourceId = matchProps.match.params.guid;
   // TODO: Handle Error cases
-  const { isLoading, data } = useQuery('resourceData', () =>
-    fetch(`/api/v1/resources/${matchProps.match.params.guid}`).then(res =>
-      res.json()
-    )
-  );
-
+  const { isLoading, data } = useQuery(['resource', resourceId], getResource);
   const classes = useStyles();
 
   if (isLoading) {

src/components/Resources/ResourcePage.test.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ResourcePage from './ResourcePage';
+
+describe('ResourcePage', () => {});

src/utils/queries.js

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const API_URL = '/api/v1';
+
+const getResource = async (_key, id) => {
+  const { data } = await axios.get(`${API_URL}/resources/${id}`);
+  return data;
+};
+
+export { getResource };

src/utils/queries.test.js

@@ -0,0 +1,34 @@
+import { getResource } from './queries';
+import axios from 'axios';
+
+jest.mock('axios');
+
+describe('getResource', () => {
+  it('returns `data` object when successfully fetched', async () => {
+    const data = {
+      title: 'Just You Wait',
+      url: 'www.manythingstodo.com',
+      author: 'Alexander Hamilton',
+      media_type: 'song',
+      description: '3 hour epic ballad',
+      user: 'harrypotter321',
+      date_published: '10-11-2020',
+    };
+
+    axios.get.mockImplementationOnce(() => Promise.resolve({ data }));
+
+    await expect(getResource('resourceQuery', 'resource-url')).resolves.toEqual(
+      data
+    );
+  });
+
+  it('returns `error` object when unable to fetch', async () => {
+    const errorMessage = 'No such resource';
+    axios.get.mockImplementationOnce(() =>
+      Promise.reject(new Error(errorMessage))
+    );
+    await expect(
+      getResource('resourceQuery', 'a-very-wrong-url')
+    ).rejects.toThrow(errorMessage);
+  });
+});