Adding MaterialUI.Typography JSX tags to resource page (#123)

Create Resource Page.
Add React Query library.
Add Axios to utility query.

Co-authored-by: Ben Davis <[email protected]>
Co-authored-by: Linda Peng <[email protected]>
Co-authored-by: Angelo Cordon <[email protected]>

Author: 3 people

.env.example

@@ -1 +1 @@
-SKIP_PREFLIGHT_CHECK = true
+SKIP_PREFLIGHT_CHECK=true

.eslintrc.json

@@ -28,6 +28,7 @@
     "react/prop-types": "error",
     "react/no-unescaped-entities": 0,
     "comma-dangle": ["error", "only-multiline"],
-    "no-unused-vars": [2, { "vars": "all", "args": "after-used" }]
+    "no-unused-vars": [2, { "vars": "all", "args": "after-used" }],
+    "camelcase": 0
   }
 }

package-lock.json

@@ -18,8 +18,8 @@
   },
   "proxy": "http://localhost:8000",
   "dependencies": {
+    "@babel/runtime": "^7.9.2",
     "@hapi/joi": "17.1.1",
-    "@babel/runtime": "^7.11.2",
     "@material-ui/core": "4.11.0",
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
@@ -30,8 +30,9 @@
     "react": "16.11.0",
     "react-dom": "16.11.0",
     "react-hook-form": "5.5.1",
-    "react-router-dom": "5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-query": "^2.5.14",
+    "react-router-dom": "5.1.2",
+    "react-scripts": "^3.4.0",
     "react-select": "3.0.8",
     "unfurl.js": "5.0.1"
   },
@@ -89,4 +90,4 @@
       "git add"
     ]
   }
-}
+}

package.json

@@ -1,48 +1,104 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import { useQuery } from 'react-query';
 import { Link } from 'react-router-dom';
-import axios from 'axios';
+import { getResource } from '../../utils/queries';
 import PersonalMenu from '../PersonalMenu';
-import { Grid, Breadcrumbs, Typography } from '@material-ui/core';
+import { Grid, Breadcrumbs, Typography, Chip, Box } from '@material-ui/core';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  subtitle: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+});
 
 function ResourcePage({ matchProps }) {
-  const [resource, setResource] = useState({});
-
-  useEffect(() => {
-    axios
-      .get('/api/v1/resources/' + matchProps.match.params.guid)
-      .then(function(response) {
-        // handle success
-        setResource(response.data);
-      })
-      .catch(function(error) {
-        // handle error
-        console.log(error);
-      });
-  }, [matchProps.match.params.id]);
+  const resourceId = matchProps.match.params.guid;
+  // TODO: Handle Error cases
+  const { isLoading, data } = useQuery(['resource', resourceId], getResource);
+  const classes = useStyles();
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+
+  const {
+    title,
+    url,
+    author,
+    tags,
+    media_type,
+    description,
+    user,
+    date_published,
+    modified,
+    paid,
+  } = data;
 
   return (
-    <>
-      <Grid container spacing={1}>
-        <Grid item lg={3}>
-          <PersonalMenu />
-        </Grid>
-        <Grid item lg={9}>
-          <Breadcrumbs
-            separator={<NavigateNextIcon fontSize="small" />}
-            aria-label="breadcrumb"
-          >
-            <Link color="inherit" to="/resources">
-              Resources
+    <Grid container spacing={1}>
+      <Grid item lg={3}>
+        <PersonalMenu />
+      </Grid>
+      <Grid item lg={9}>
+        <Breadcrumbs
+          separator={<NavigateNextIcon fontSize="small" />}
+          aria-label="breadcrumb"
+        >
+          <Link color="inherit" to="/resources">
+            Resources
+          </Link>
+          <Typography color="textPrimary">{title}</Typography>
+        </Breadcrumbs>
+
+        <Typography variant="h2" gutterBottom>
+          {title}
+        </Typography>
+
+        <div className={classes.subtitle}>
+          <Typography variant="subtitle1" gutterBottom>
+            <Link target="_blank" rel="noopener noreferrer" to={url}>
+              {url}
             </Link>
-            <Typography color="textPrimary">{resource.title}</Typography>
-          </Breadcrumbs>
-          <h2>{resource.title}</h2>
-          <pre>{JSON.stringify(resource, 0, 2)}</pre>
-        </Grid>
+          </Typography>
+          <Typography variant="subtitle1" gutterBottom>
+            <strong>Author:</strong> {author}
+          </Typography>
+        </div>
+
+        {tags &&
+          tags.map(tag => {
+            return <Chip key={tag.slug} label={tag.name} />;
+          })}
+
+        <div>
+          <Box pt={3}>
+            <Typography variant="subtitle1" gutterBottom>
+              Paid: {paid ? 'yes' : 'no'}
+            </Typography>
+          </Box>
+          <Typography variant="subtitle1" gutterBottom>
+            Media Type: {media_type}
+          </Typography>
+          <Typography variant="subtitle2" gutterBottom>
+            Added by <strong>{user.username}</strong> on {date_published}
+          </Typography>
+        </div>
+
+        <Typography variant="subtitle2" gutterBottom>
+          Modified by <strong>"someone"</strong> {modified}
+        </Typography>
+
+        <br></br>
+
+        <Typography variant="body1" gutterBottom>
+          {description}
+        </Typography>
       </Grid>
-    </>
+    </Grid>
   );
 }
 

src/components/Resources/ResourcePage.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.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);
+  });
+});