From d463c45f7613aaf82de6f10aaa7f329dece0355a Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 24 Jan 2023 18:31:35 +0100
Subject: [PATCH] upload ux

---
 apps/web/pages/dashboard.tsx | 28 ++++++++++++++-------
 apps/web/pages/documents.tsx | 49 ++++++++++++++++++++++--------------
 2 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/apps/web/pages/dashboard.tsx b/apps/web/pages/dashboard.tsx
index 7bd0b6335..ee40f2e38 100644
--- a/apps/web/pages/dashboard.tsx
+++ b/apps/web/pages/dashboard.tsx
@@ -16,6 +16,7 @@ import {
 import { FormProvider, useForm } from "react-hook-form";
 import Router from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
+import toast from "react-hot-toast";
 
 type FormValues = {
   document: File;
@@ -66,16 +67,25 @@ const DashboardPage: NextPageWithLayout = () => {
       const body = new FormData();
       const document = event.target.files[0];
       body.append("document", document || "");
-      const response: any = await fetch("/api/documents", {
-        method: "POST",
-        body,
-      }).then((response: Response) => {
-        response.json().then((createdDocumentIdFromBody) => {
-          Router.push(
-            `${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
-          );
+      const response: any = await toast
+        .promise(
+          fetch("/api/documents", {
+            method: "POST",
+            body,
+          }),
+          {
+            loading: "Uploading document...",
+            success: "Document uploaded successfully.",
+            error: "Could not upload document :/",
+          }
+        )
+        .then((response: Response) => {
+          response.json().then((createdDocumentIdFromBody) => {
+            Router.push(
+              `${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
+            );
+          });
         });
-      });
     }
   };
 
diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index 4b62084b9..20c2c6ee9 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -9,6 +9,7 @@ import { getUserFromToken } from "@documenso/lib/server";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
+import toast from "react-hot-toast";
 
 const DocumentsPage: NextPageWithLayout = (req, res) => {
   const router = useRouter();
@@ -39,16 +40,25 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
       const body = new FormData();
       const document = event.target.files[0];
       body.append("document", document || "");
-      const response: any = await fetch("/api/documents", {
-        method: "POST",
-        body,
-      }).then((response: Response) => {
-        response.json().then((createdDocumentIdFromBody) => {
-          router.push(
-            `${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
-          );
+      const response: any = await toast
+        .promise(
+          fetch("/api/documents", {
+            method: "POST",
+            body,
+          }),
+          {
+            loading: "Uploading document...",
+            success: "Document uploaded successfully.",
+            error: "Could not upload document :/",
+          }
+        )
+        .then((response: Response) => {
+          response.json().then((createdDocumentIdFromBody) => {
+            router.push(
+              `${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
+            );
+          });
         });
-      });
     }
   };
 
@@ -58,22 +68,23 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
         <title>Documents | Documenso</title>
       </Head>
       <div className="px-4 sm:px-6 lg:px-8" hidden={!documents.length}>
-        <div className="sm:flex sm:items-center">
+        <div className="sm:flex sm:items-center mt-10">
           <div className="sm:flex-auto">
-            <div className="pt-10 max-sm:px-4">
-              <header>
-                <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
-                  Documents
-                </h1>
-              </header>
-            </div>
+            <header>
+              <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
+                Documents
+              </h1>
+            </header>
           </div>
           <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
             <button
               type="button"
-              className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              className="inline-flex items-center justify-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+              onClick={() => {
+                document?.getElementById("fileUploadHelper")?.click();
+              }}
             >
-              Add user
+              Add Document
             </button>
           </div>
         </div>