Fix useFetch dependencies and unused variables

This commit is contained in:
Nicolas Harraudeau 2020-06-30 09:22:25 +02:00
parent abc548569d
commit 03f8ffbe09
3 changed files with 18 additions and 11 deletions

View File

@ -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>
);

View File

@ -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';

View File

@ -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 ];
}