Fix useFetch dependencies and unused variables
This commit is contained in:
parent
abc548569d
commit
03f8ffbe09
@ -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>
|
||||
);
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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 ];
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user