Merge pull request #6 from aswanthabam/dev

Bug fixes and optimization
aswanthabam · Jun 20, 2024 · 3f63705 · 3f63705
2 parents db55e2e + 04762a2
commit 3f63705
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 82 deletions.
diff --git a/app/main.tsx b/app/main.tsx
@@ -3,7 +3,7 @@ import { FileProvider } from "@/context/FileContext";
 import "./globals.css";
 import styles from "./main.module.css";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import bgIllustration from "../public/bg-illustration.svg";
 import Image from "next/image";
 import { LoaderContextType, LoaderProvider } from "@/context/LoaderContext";
@@ -28,8 +28,9 @@ export default function MainContainer({
     visible: false,
     icon: "bi bi-info",
   });
+  const [statusLoaded, setStatusLoaded] = useState(false);
   useEffect(() => {
-    console.log("Page loaded (MAIN)");
+    console.log("Page loaded (MAIN)", process.env.NODE_ENV);
     document.body.style.setProperty("--x", "0px");
     document.body.style.setProperty("--y", "0px");
     document.body.style.setProperty(
@@ -40,26 +41,34 @@ export default function MainContainer({
         rgba(175, 224, 228, 1)
       )`
     );
-    fetch(`${process.env.NEXT_PUBLIC_API_URL}/server/status`)
-      .then(async (res) => {
-        if (res.status != 200) {
-          router.push("/offline");
-          setLoader!({ text: "", visible: false });
-        } else {
-          var data = await res.json();
-          console.log(data);
-          if (data.status != "success" || data.data.status == false) {
-            setLoader!({ text: "", visible: false });
+    if (!statusLoaded) {
+      setLoader!({ text: "Awaking Server", visible: true });
+      fetch(`${process.env.NEXT_PUBLIC_API_URL}/server/status`)
+        .then(async (res) => {
+          setStatusLoaded(true);
+          if (res.status != 200) {
             router.push("/offline");
-          } else {
             setLoader!({ text: "", visible: false });
+          } else {
+            var data = await res.json();
+            console.log(data);
+            if (data.status != "success" || data.data.status == false) {
+              setLoader!({ text: "", visible: false });
+              router.push("/offline");
+            } else {
+              if (window.location.pathname.includes("offline")) {
+                router.push("/");
+              }
+              setLoader!({ text: "", visible: false });
+            }
           }
-        }
-      })
-      .catch(() => {
-        router.push("/offline");
-        setLoader!({ text: "", visible: false });
-      });
+        })
+        .catch(() => {
+          setStatusLoaded(true);
+          router.push("/offline");
+          setLoader!({ text: "", visible: false });
+        });
+    }
   }, []);
   const [file, setFile] = useState<File | null>(null);
   const mainMouseMove = (event: React.MouseEvent) => {
@@ -94,9 +103,14 @@ export default function MainContainer({
     setLoader!({ text: "Loading...", visible: true });
     mainDragEnd();
     if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
-      if (event.dataTransfer.files[0].size > 50000000) {
+      if (event.dataTransfer.files[0].size > (50 * 1024 * 1024)) {
         setLoader!({ text: "", visible: false });
-        showPopup(setPopup!, "File size is too large (Maximum 50 MB)", "bi bi-x-circle", 2000);
+        showPopup(
+          setPopup!,
+          "File size is too large (Maximum 50 MB)",
+          "bi bi-x-circle",
+          2000
+        );
         return;
       }
       setFile!(event.dataTransfer.files[0]);

diff --git a/app/page.tsx b/app/page.tsx
@@ -4,54 +4,64 @@ import styles from "./page.module.css";
 import MainContainer from "./main";
 import { FileContext } from "@/context/FileContext";
 import { useRouter } from "next/navigation";
+import { LoaderContext } from "@/context/LoaderContext";
 
 export default function Home() {
   useEffect(() => {
     console.log("Page loaded(HOME)");
   }, []);
   const router = useRouter();
+  const { setLoader } = useContext(LoaderContext);
   const fileContext = useContext(FileContext);
   const filePicRef = useRef<HTMLInputElement>(null);
   return (
-    <MainContainer>
-      <div className={styles.titleSection}>
-        <h1 className={styles.title}>Instant File Sharing</h1>
-        <p className={styles.description}>
-          DropIT lets you share files quickly and securely with a code or link.
-          No sign-ups, no hassle—just drop it, share the code, receive.
-          Experience effortless file sharing today!
-        </p>
-        <div className={styles.buttonContainer}>
-          <button onClick={()=>{
+    <div className={styles.titleSection}>
+      <h1 className={styles.title}>Instant File Sharing</h1>
+      <p className={styles.description}>
+        DropIT lets you share files quickly and securely with a code or link. No
+        sign-ups, no hassle—just drop it, share the code, receive. Experience
+        effortless file sharing today!
+      </p>
+      <div className={styles.buttonContainer}>
+        <button
+          onClick={() => {
             filePicRef.current?.click();
-          }} className={styles.button}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              className={styles.icon}
-              viewBox="0 0 16 16"
-            >
-              <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z" />
-            </svg>
-            Send a File
-          </button>
-          <button onClick={()=>{
+          }}
+          className={styles.button}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            className={styles.icon}
+            viewBox="0 0 16 16"
+          >
+            <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z" />
+          </svg>
+          Send a File
+        </button>
+        <button
+          onClick={() => {
+            setLoader!({ text: "", visible: true });
             router.push("/receive");
-          }} className={styles.button}>Receive</button>
-          <input  
-            ref={filePicRef}
-            onChange={(e) => {
-              const file = e.target.files?.[0];
-              if (file) {
-                fileContext.setFile!(file);
-                router.push("/share");
-              }
-            }}
-            type="file"
-            hidden
-          />
-        </div>
+          }}
+          className={styles.button}
+        >
+          Receive
+        </button>
+        <input
+          ref={filePicRef}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) {
+              setLoader!({ text: "", visible: true });
+              fileContext.setFile!(file);
+              router.push("/share");
+            }
+          }}
+          type="file"
+          hidden
+        />
       </div>
-    </MainContainer>
+    </div>
   );
 }
diff --git a/app/receive/page.module.css b/app/receive/page.module.css
@@ -122,6 +122,7 @@
         justify-content: center;
         flex-direction: column;
         height: 100%;
+        text-align: center;
         gap: 1rem;
         padding: 1rem;
         border-radius: 0.5rem;
@@ -132,6 +133,24 @@
           font-size: 4rem;
           color: #999;
         }
+        .progressContainer {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.7rem;
+          flex-direction: column;
+          width: 100%;
+
+          .progress {
+            width: calc(100% - 4rem);
+          }
+
+          .progressText {
+            color: #29845e;
+            font-size: 0.8rem;
+            font-weight: 600;
+          }
+        }
         .previewText {
           color: #999;
         }
@@ -145,6 +164,9 @@
           text-align: center;
           word-break: break-all;
         }
+        .type {
+          text-align: center;
+        }
         .size {
           font-size: 1rem;
           font-weight: 400;

diff --git a/app/receive/page.tsx b/app/receive/page.tsx
@@ -1,31 +1,56 @@
 "use client";
-import { use, useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import styles from "./page.module.css";
-import MainContainer from "../main";
-import { FileContext } from "@/context/FileContext";
-import { useRouter } from "next/navigation";
-import { LoaderContext, LoaderContextType } from "@/context/LoaderContext";
+import { LoaderContext } from "@/context/LoaderContext";
 import Link from "next/link";
 import { PopupContext, showPopup } from "@/context/PopupContext";
 
+type ProgressType = {
+  buffering: boolean;
+  percent: number;
+  total: number;
+  loaded: number;
+};
+
+const formatBytes = (bytes: number): string => {
+  if (bytes === 0) return "0 KB";
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(2)}`;
+};
+
+const progressBytes = (progress: ProgressType) => {
+  const sizes = ["KB", "MB"];
+  if (progress.total <= 1024) {
+    return `${progress.loaded} / ${progress.total} B`;
+  }
+  const i = Math.floor(Math.log(progress.total) / Math.log(1024));
+  return `${formatBytes(progress.loaded)} / ${formatBytes(progress.total)} ${
+    i == 1 || i == 2 ? sizes[i - 1] : sizes[0]
+  }`;
+};
+
 export default function Share() {
   const { setPopup } = useContext(PopupContext);
   const [fileIcon, setFileIcon] = useState("bi bi-filetype-");
   const [fileSize, setFileSize] = useState("0MB");
   const [code, setCode] = useState<string>("");
   const inputRef = useRef<HTMLInputElement>(null);
-  const progressRef = useRef<HTMLProgressElement>(null);
   const { setLoader } = useContext(LoaderContext);
   const [fileInfo, setFileInfo] = useState<FileInfo | null>(null);
   const [downloading, setDownloading] = useState(false);
+  const [progress, setProgress] = useState<ProgressType>({
+    buffering: false,
+    percent: 0,
+    total: 0,
+    loaded: 0,
+  });
   type FileInfo = {
     name: string;
     type: string;
     size: number;
     uploadedBy: string | null;
     fileUrl: string;
   };
-  const router = useRouter();
   useEffect(() => {
     console.log("Page loaded (RECEIVE)");
     inputRef.current?.focus();
@@ -146,32 +171,37 @@ export default function Share() {
     }
     var url = `${process.env.NEXT_PUBLIC_DOWNLOAD_URL}${fileInfo.fileUrl}`;
     setDownloading(true);
+    setProgress({ buffering: true, percent: 0, total: 0, loaded: 0 });
     setCode("");
     fetch(url)
       .then((response) => {
         if (!response.ok) {
-          throw new Error("Network response was not ok");
+          return Promise.reject("Download failed");
         }
         const contentLength = response.headers.get("Content-Length");
         if (!contentLength) {
-          throw new Error("Content-Length header is missing");
+          return Promise.reject("Download failed");
         }
         const total = parseInt(contentLength, 10);
-        console.log("Total size:", total);
         let loaded = 0;
+        setProgress({ buffering: false, percent: 0, total, loaded });
+        showPopup(setPopup!, "Downloading ...", "bi bi-download", 1000);
         const reader = response.body!.getReader();
         const stream = new ReadableStream({
           start(controller) {
             function push() {
               reader.read().then(({ done, value }) => {
-                console.log("Read chunk:", value);
-                console.log("Done:", done);
                 if (done) {
                   controller.close();
                   return;
                 }
                 loaded += value.length;
-                progressRef.current!.value = (loaded / total) * 100;
+                setProgress({
+                  buffering: false,
+                  percent: (loaded / total) * 100,
+                  total,
+                  loaded,
+                });
                 controller.enqueue(value);
                 push();
               });
@@ -184,7 +214,7 @@ export default function Share() {
       })
       .then((response) => response.blob())
       .then((blob) => {
-        console.log("Download complete:", blob);
+        setProgress({ ...progress, buffering: true });
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement("a");
         a.style.display = "none";
@@ -193,10 +223,17 @@ export default function Share() {
         document.body.appendChild(a);
         a.click();
         window.URL.revokeObjectURL(url);
+        showPopup(setPopup!, "Downloaded", "bi bi-check2");
+        setFileInfo(null);
+        setFileSize("0MB");
+        setFileIcon("bi bi-filetype-");
+        setCode("");
         setDownloading(false);
       })
       .catch((error) => {
         console.error("Download failed:", error);
+        showPopup(setPopup!, "Download failed", "bi bi-exclamation-triangle");
+        setDownloading(false);
       });
   };
   return (
@@ -282,12 +319,16 @@ export default function Share() {
                   </span>
                 </span>
                 {downloading && (
-                  <progress
-                    ref={progressRef}
-                    className={styles.progress}
-                    value="0"
-                    max="100"
-                  ></progress>
+                  <div className={styles.progressContainer}>
+                    <progress
+                      className={styles.progress}
+                      value={progress.buffering ? undefined : progress.loaded}
+                      max={progress.total}
+                    ></progress>
+                    <span className={styles.progressText}>
+                      {progressBytes(progress)}
+                    </span>
+                  </div>
                 )}
                 <div className={styles.buttonContainer}>
                   <button onClick={downloadFile} className={styles.button}>

diff --git a/app/share/page.module.css b/app/share/page.module.css
@@ -98,6 +98,7 @@
         background: #f1f1f182;
         margin: 1.5rem;
         overflow: hidden;
+        text-align: center;
         .icon {
           font-size: 4rem;
         }