1 files changed, 54 insertions, 0 deletions
diff --git a/paste-ui/src/view.js b/paste-ui/src/view.js
new file mode 100644
index 0000000..e3bf0df
--- /dev/null
+++ b/paste-ui/src/view.js
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { useEffect } from "react";
+
+
+export default function View(props) {
+    const [error, setError] = useState(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [item, setItems] = useState([]);
+
+    // Note: the empty deps array [] means
+    // this useEffect will run once
+    // similar to componentDidMount()
+    useEffect(() => {
+        fetch("http://localhost:6130/api/v1/view/" + props.id)
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    setIsLoaded(true);
+                    setItems(result);
+                },
+                // Note: it's important to handle errors here
+                // instead of a catch() block so that we don't swallow
+                // exceptions from actual bugs in components.
+                (error) => {
+                    setIsLoaded(true);
+                    setError(error);
+                }
+            )
+    }, [])
+
+    if (error) {
+        return <div>Error: {error.message}</div>;
+    } else if (!isLoaded) {
+        return <div>Loading...</div>;
+    } else {
+        if ('Code' in item && item.Code != 200) {
+            return (
+                <p>
+                    Error: {item.Code} {item.Msg}
+                </p>
+            );
+        }
+        return (
+            <div className="content">
+            <h2>ID: {props.id}</h2>
+            <pre>
+                <code>
+                    {item.Content}
+                </code>
+            </pre>
+            </div>
+        );
+    }
+}
+\ No newline at end of file