Upload files to "frontend/src/pages"
parent
b1ded0e922
commit
98485dc078
|
|
@ -0,0 +1,96 @@
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import { Header, Spinner, Request, Button } from "../components";
|
||||||
|
import { Error } from "../pages";
|
||||||
|
import { DreadBin, DreadBinResponse } from "../types";
|
||||||
|
import { QuestionMarkCircleIcon } from "@heroicons/react/solid";
|
||||||
|
|
||||||
|
const Bin = () => {
|
||||||
|
const { id } = useParams();
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [refresh, setRefresh] = useState(0);
|
||||||
|
const [error, setError] = useState<number | null>(null);
|
||||||
|
const [bin, setBin] = useState<DreadBin | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setRefresh(Math.random());
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const response = await fetch(`${process.env.REACT_APP_BASE_API_URL}/${id}`);
|
||||||
|
const body = await response.json() as DreadBinResponse;
|
||||||
|
|
||||||
|
if (response.ok)
|
||||||
|
setBin(body.bin);
|
||||||
|
else
|
||||||
|
setError(response.status);
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
} catch (_) {
|
||||||
|
setError(500);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, [id, refresh]);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
if (error === 404) {
|
||||||
|
return (
|
||||||
|
<Error code={404} message="A request bin could not be found with the ID provided"/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Error code={error} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="m-8">
|
||||||
|
<Header row={loading ? <Spinner /> : (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<p className="font-mono text-pink-500 font-bold select-none">
|
||||||
|
Your DreadBin endpoint:{" "}
|
||||||
|
<span className="font-mono select-all rounded-lg p-1 px-2 bg-black/25 text-neutral-300">
|
||||||
|
{process.env.REACT_APP_BASE_API_URL}/-/{id}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
className={
|
||||||
|
"flex items-center justify-center disabled:cursor-not-allowed shadow-lg tracking-tight " +
|
||||||
|
"rounded-md bg-cyan-600 hover:bg-cyan-700 text-white font-semibold text-lg px-4 py-1"}
|
||||||
|
text="Refresh"
|
||||||
|
textClassName="font-mono"
|
||||||
|
onClick={() => setRefresh(Math.random())}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)} />
|
||||||
|
{!loading && bin && (
|
||||||
|
Object.keys(bin.requests).length === 0 ? (
|
||||||
|
<div className="flex mt-8 gap-2">
|
||||||
|
<QuestionMarkCircleIcon className="h-6 w-6 text-white" />
|
||||||
|
<p className="font-bold text-white">No Requests Found</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex gap-4 mt-8 flex-col">
|
||||||
|
{Object
|
||||||
|
.keys(bin.requests)
|
||||||
|
.sort((a, b) => bin.requests[a].timestamp > bin.requests[b].timestamp ? -1 : 1)
|
||||||
|
.map(requestId => <Request key={requestId} request={bin.requests[requestId]} />)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Bin;
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Header } from "../components";
|
||||||
|
|
||||||
|
interface ErrorProps {
|
||||||
|
code: number,
|
||||||
|
message?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const Error = (props: ErrorProps) => {
|
||||||
|
const { code, message } = props;
|
||||||
|
|
||||||
|
let defaultMessage: string;
|
||||||
|
|
||||||
|
switch (code) {
|
||||||
|
case 404:
|
||||||
|
defaultMessage = "The requested resource could not be found";
|
||||||
|
break;
|
||||||
|
case 401 || 403:
|
||||||
|
defaultMessage = "You don't have permission to access this resource";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
defaultMessage = "An unknown error occurred";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="m-8 select-none">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<div className="mt-8">
|
||||||
|
<pre className="font-mono text-red-500 font-bold">
|
||||||
|
Code: {code}
|
||||||
|
</pre>
|
||||||
|
<pre className="font-mono text-red-500 font-bold">
|
||||||
|
Message: {message ? message : defaultMessage}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 flex gap-4">
|
||||||
|
<Link
|
||||||
|
className="font-mono font-bold text-cyan-600 underline cursor-pointer"
|
||||||
|
to="/"
|
||||||
|
>
|
||||||
|
Go to Homepage.
|
||||||
|
</Link>
|
||||||
|
<a
|
||||||
|
className="font-mono font-bold text-cyan-600 underline cursor-pointer"
|
||||||
|
href="mailto:klez@cocaine.ninja"
|
||||||
|
>
|
||||||
|
Report an Issue.
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Error;
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { Header, Button } from "../components";
|
||||||
|
import { ExclamationCircleIcon } from "@heroicons/react/solid";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { DreadBinResponse, ErrorResponse } from "../types";
|
||||||
|
|
||||||
|
const Landing = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleCreateBin = async () => {
|
||||||
|
setError(null);
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${process.env.REACT_APP_BASE_API_URL}/create`, {
|
||||||
|
method: "POST"
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const body = await response.json() as DreadBinResponse;
|
||||||
|
navigate(`/${body.bin.id}`);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await response.json() as ErrorResponse;
|
||||||
|
|
||||||
|
setError(body.message);
|
||||||
|
} catch (_) {
|
||||||
|
setError("An unknown error occurred");
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="m-8 select-none">
|
||||||
|
<Header row={<>
|
||||||
|
<Button
|
||||||
|
loading={loading}
|
||||||
|
className={
|
||||||
|
"flex items-center justify-center disabled:cursor-not-allowed shadow-lg tracking-tight " +
|
||||||
|
"rounded-md bg-cyan-600 hover:bg-cyan-700 text-white font-semibold text-lg px-4 py-1"}
|
||||||
|
onClick={handleCreateBin}
|
||||||
|
text="Create a Bin"
|
||||||
|
textClassName="font-mono"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p className="mt-3 font-bold font-mono text-red-600 text-sm flex gap-2 items-center">
|
||||||
|
<ExclamationCircleIcon className="w-5 h-5 inline-block" />
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</>} />
|
||||||
|
|
||||||
|
<div className="mt-16">
|
||||||
|
<h5 className="font-mono font-bold text-pink-600 mb-1">
|
||||||
|
# What can I do with this?
|
||||||
|
</h5>
|
||||||
|
<p className="ml-2 font-mono text-neutral-400 font-bold text-sm">
|
||||||
|
Anything you want really. Each request you make to the endpoint provided can be inspected, including:
|
||||||
|
</p>
|
||||||
|
<p className="ml-4 font-mono text-neutral-400 font-bold text-sm">- Request Method</p>
|
||||||
|
<p className="ml-4 font-mono text-neutral-400 font-bold text-sm">- Timestamp</p>
|
||||||
|
<p className="ml-4 font-mono text-neutral-400 font-bold text-sm">- Headers</p>
|
||||||
|
<p className="ml-4 font-mono text-neutral-400 font-bold text-sm">- Body (including formatting for common types)</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8">
|
||||||
|
<h5 className="font-mono font-bold text-pink-600 mb-1">
|
||||||
|
# Is it open-source?
|
||||||
|
</h5>
|
||||||
|
<p className="ml-2 font-mono text-neutral-400 font-bold text-sm">
|
||||||
|
Yes.{" "}
|
||||||
|
<a
|
||||||
|
className="font-mono text-cyan-600 underline cursor-pointer"
|
||||||
|
target="_blank" rel="noreferrer noopener"
|
||||||
|
href="https://fsdfsd.net/Klez/DreadBin.git"
|
||||||
|
>
|
||||||
|
https://fsdfsd.net/Klez/DreadBin.git
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8">
|
||||||
|
<h5 className="font-mono font-bold text-pink-600 mb-1">
|
||||||
|
# Who made this <span className="font-mono font-extrabold">*amazing*</span> tool?
|
||||||
|
</h5>
|
||||||
|
<p className="ml-2 font-mono text-neutral-400 font-bold text-sm">
|
||||||
|
Me.{" "}
|
||||||
|
<a
|
||||||
|
className="font-mono text-cyan-600 underline cursor-pointer"
|
||||||
|
target="_blank" rel="noreferrer noopener"
|
||||||
|
href="https://dreadfulservices.xyz"
|
||||||
|
>
|
||||||
|
https://dreadfulservices.xyz
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Landing;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import Landing from "./Landing";
|
||||||
|
import Error from "./Error";
|
||||||
|
import Bin from "./Bin";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Landing,
|
||||||
|
Error,
|
||||||
|
Bin
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue