blob: 83c6ff1916d30696e2e0ff3c0de6f8976b279ea8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import React, {useEffect, useState} from 'react';
import axios from "axios";
import Loader from "./Loader";
import CopyButton from "./CopyButton";
function Response(props){
const CancelToken = axios.CancelToken;
const [requestState, setRequestState] = useState({loading: true, cancel: CancelToken.source()});
useEffect(() => {
axios.post('/', {url: "https://" + props.url}, {cancelToken: requestState.cancel.token})
.then((r) => {
setRequestState({loading: false, hash: r.data.hash, cancel: requestState.cancel});
}).catch((e) => {
if (!axios.isCancel(e)) {
setRequestState({loading: false, error: true, cancel: requestState.cancel});
}
});
return () => {
requestState.cancel.cancel();
};
}, [props.url, requestState.cancel])
let text;
if (!requestState.loading) {
if (!requestState.error) {
if (props.url.length < 20) {
text =
<span>The short link for <strong>{props.url}</strong> is<br/><strong>sho.rest/{requestState.hash}</strong></span>;
} else {
text =
<span>The short link for your URL is<br/><strong>sho.rest/{requestState.hash}</strong></span>;
}
} else {
text = <span>There was an error.</span>
}
} else {
text = <Loader/>
}
return (
<div className={"response-container" + (requestState.error ? " disabled" : "")}>
<div className={"title response-text" + (requestState.error ? " disabled" : "")}>{text}</div>
{requestState.error || requestState.loading ? "" : <CopyButton hash={requestState.hash}/>}
</div>
)
}
export default Response;
|
