added errors and load state

src/App.tsx

@@ -29,31 +29,35 @@ function App(props: Props) {
   const [content,setContent] = useState<string>("");
   const [title,setTitle] = useState<string>("");
   const [lang,setLang] = useState<string>("text");
+  const [appState,setAppState] = useState<string>("loading");
 
   useEffect(()=>{
     (async ()=>{
+
+      if (!props.shareID){
+        // No share defined
+        setAppState("noID");
+        return
+      }
+
       const response = await fetch(`/index.php/s/${props.shareID}/download`);
 
       if (response.status === 404){
         // File not found
-        // TODO display error
+        setAppState("notFound");
         return;
       }
 
-      const contentLength = parseInt(response.headers.get("content-length")!,10);
       const filename = parseFilename(response.headers);
       setTitle(filename);
       document.title = filename;
 
       setLang(getLangFromFilename(filename) || "text")
 
-      if (contentLength <= 20000) {
       const text = await response.text()
       setContent(text);
+      setAppState("done");
 
-      }else{
-        // TODO display error
-      }
     })()
   },[props.shareID])
 
@@ -61,6 +65,18 @@ function App(props: Props) {
     window.open(`/index.php/s/${props.shareID}/download`, "_self");
   }
 
+  // Handle error/loading cases
+  switch (appState) {
+    case "loading":
+      return <div></div>;
+    case "notFound":
+      return <div className="error">404</div>
+    case "noID":
+      return <div className="error">NO ID PROVIDED</div>
+    default:
+      break;
+  }
+
   return (
       <div className="fileContainer">
         <div className="headerContainer">

src/style.css

@@ -51,6 +51,19 @@
     color: #50545b !important;
 }
 
+.error {
+    /*Center element*/
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+
+    font-size: 5rem;
+    font-family: sans-serif;
+    color: #58a6ff;
+}
+
 body {
     background-color: #0d1117;
 }