Fix useFetch dependencies and unused variables

frontend/src/RulePage.js

@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
-import { useState } from 'react';
 import { useFetch } from './utils/useFetch';
 
 
@@ -17,27 +16,31 @@ const useStyles = makeStyles((theme) => ({
 export function RulePage(props) {
   const ruleid = props.match.params.ruleid;
   const language = props.match.params.language;
-  const [ruleDesc, setRuleDesc] = useState("loading...");
-  const [ruleMeta, setRuleMeta] = useState("loading...");
 
   const classes = useStyles();
 
   const descUrl = process.env.PUBLIC_URL + '/rules/' + ruleid + "/" + language + "-description.html";
   const metadataUrl = process.env.PUBLIC_URL + '/rules/' + ruleid + "/" + language + "-metadata.json";
 
-  const [descHTML, descError, descIsLoading] = useFetch(descUrl, null, (res) => res.text());
+  const [descHTML, descError, descIsLoading] = useFetch(descUrl, null, false);
   const [metadataJSON, metadataError, metadataIsLoading] = useFetch(metadataUrl);
 
-  let metadata = null;
+  let metadata = <Typography variant="h2" component="h3">Loading...</Typography>;
   if (!metadataIsLoading && !metadataError) {
     metadata = <Typography variant="h2" component="h3">{metadataJSON.title}</Typography>
   }
 
+  let description = <div>Loading...</div>;
+  if (!descIsLoading && !descError) {
+    description = <div dangerouslySetInnerHTML={{__html: descHTML}}/>;
+  }
+
+
   return (
     <Container maxWidth="md">
       {metadata}
       <Typography className={classes.description}>
-        <div dangerouslySetInnerHTML={{__html: descHTML}}/>
+        {description}
       </Typography>
     </Container>
   );

frontend/src/TopBar.js

@@ -3,7 +3,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 

frontend/src/utils/useFetch.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function useFetch(url, options=null, handleResponse=(res) => res.json()) {
+export function useFetch(url, options=null, parseJSON=true) {
   const [response, setResponse] = React.useState(null);
   const [error, setError] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
@@ -9,7 +9,12 @@ export function useFetch(url, options=null, handleResponse=(res) => res.json())
     const fetchData = async () => {
       try {
         const res = await fetch(url, options);
-        const content = await handleResponse(res);
+        let content = null;
+        if (parseJSON) {
+          content = await res.json();
+        } else {
+          content = await res.text();
+        }
         setResponse(content);
         setIsLoading(false)
       } catch (exception) {
@@ -17,7 +22,7 @@ export function useFetch(url, options=null, handleResponse=(res) => res.json())
       }
     };
     fetchData();
-  }, [url]);
+  }, [url, options, parseJSON]);
 
   return [ response, error, isLoading ];
 }