import React, { PureComponent } from "react";
|
|
import AppContext from "./AppContext";
|
import { fetchCancelable, getCookie } from "../utils";
|
|
export class Fetcher extends PureComponent {
|
static defaultProps = {
|
url: "",
|
path: "",
|
method: "GET",
|
onBindRefresh: () => {},
|
onError: () => {},
|
onLoad: () => {}
|
};
|
|
state = {
|
isLoading: true,
|
isError: false
|
};
|
|
cancelableFetch = null;
|
|
fetch = () => {
|
const {
|
url,
|
path,
|
onError,
|
onLoad,
|
refresh,
|
children,
|
params,
|
...options
|
} = this.props;
|
|
let queryURL = `${url}/${path}`;
|
if (params !== undefined) {
|
const serializedParams = `?${Object.keys(params)
|
.map(key =>
|
[key, params[key]].map(encodeURIComponent).join("=")
|
)
|
.join("&")}`;
|
queryURL = queryURL.replace(/[\/\?]+$/, "");
|
queryURL += serializedParams;
|
}
|
|
this.cancelableFetch = fetchCancelable(queryURL, options);
|
return this.cancelableFetch.promise
|
.then(res => {
|
if (res.status !== 200) throw new Error(res.status);
|
return res.json();
|
})
|
.then(data => {
|
this.setState({ data, isLoading: false });
|
onLoad(data);
|
})
|
.catch(out => {
|
if (out.isCanceled) return;
|
this.setState({ error: out, isLoading: false, isError: true });
|
onError(out);
|
})
|
.finally(() => (this.cancelableFetch = null));
|
};
|
|
componentDidMount() {
|
this.fetch();
|
this.props.onBindRefresh(this.fetch);
|
}
|
|
componentWillUnmount() {
|
this.props.onBindRefresh(null);
|
if (this.cancelableFetch === null) return;
|
this.cancelableFetch.cancel();
|
this.cancelableFetch = null;
|
}
|
|
render() {
|
const { children } = this.props;
|
if (children == null) return null;
|
if (typeof children !== "function")
|
return React.cloneElement(children, this.state);
|
else return children(this.state);
|
}
|
}
|
|
const ImplicitFetcher = ({
|
url,
|
getURL = null,
|
getOptions = null,
|
...options
|
}) => (
|
<AppContext.Consumer>
|
{context => (
|
<Fetcher
|
url={getURL !== null ? getURL(context, options) : url}
|
{...(getOptions !== null ? getOptions(context, options) : {})}
|
{...options}
|
/>
|
)}
|
</AppContext.Consumer>
|
);
|
|
const APIFetcher = props => (
|
<Fetcher
|
url={"/api"}
|
credentials={"same-origin"}
|
headers={{
|
"X-CSRFToken": getCookie("csrftoken"),
|
Accept: "application/json",
|
"Content-Type": "application/json"
|
}}
|
{...props}
|
/>
|
);
|
|
const ImplicitTaskFetcher = props => (
|
<ImplicitFetcher
|
getURL={({ apiURL, task }) => `/api${apiURL}/task/${task.id}`}
|
credentials={"same-origin"}
|
headers={{
|
"X-CSRFToken": getCookie("csrftoken"),
|
Accept: "application/json",
|
"Content-Type": "application/json"
|
}}
|
{...props}
|
/>
|
);
|
|
const ImplicitIonFetcher = props => (
|
<ImplicitFetcher
|
getURL={({ ionURL }) => ionURL}
|
getOptions={({ token }) => ({
|
headers: {
|
Authorization: `Bearer ${token}`
|
}
|
})}
|
{...props}
|
/>
|
);
|
|
export { APIFetcher, ImplicitTaskFetcher, ImplicitIonFetcher };
|
