From 82ebb805aa98980fff7bf8959e3d0a0ccf8d0ec2 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Fri, 24 Feb 2023 10:34:01 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20=F0=9F=9A=B8=20documents?=
 =?UTF-8?q?=20list=20performance=20and=20empty=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/pages/documents.tsx | 322 ++++++++++++++++++-----------------
 1 file changed, 166 insertions(+), 156 deletions(-)

diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index f3fb52239..5f7a0db18 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -8,6 +8,7 @@ import {
   CheckIcon,
   DocumentPlusIcon,
   EnvelopeIcon,
+  FunnelIcon,
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
@@ -23,6 +24,8 @@ import prisma from "@documenso/prisma";
 const DocumentsPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
   const [documents, setDocuments]: any[] = useState([]);
+  const [filterdDocuments, setFilteredDocuments] = useState([]);
+
   const [loading, setLoading] = useState(true);
   const statusFilters = [
     { label: "All", value: "ALL" },
@@ -70,6 +73,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
     });
   }, []);
 
+  useEffect(() => {
+    setFilteredDocuments(filterDocumentes(documents));
+  }, [selectedStatusFilter, selectedCreatedFilter]);
+
   function showDocument(documentId: number) {
     router.push(`/documents/${documentId}/recipients`);
   }
@@ -132,8 +139,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
         </div>
         <div className="mt-3 mb-12">
           <div className="w-fit block float-right ml-3 mt-7">
-            {filterDocumentes(documents).length > 1
-              ? filterDocumentes(documents).length + " Documents"
+            {filterdDocuments.length != 1
+              ? filterdDocuments.length + " Documents"
               : "1 Document"}
           </div>
           <SelectBox
@@ -214,173 +221,176 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-gray-200 bg-white">
-                    {filterDocumentes(documents).map(
-                      (document: any, index: number) => (
-                        <tr
-                          key={document.id}
-                          className="hover:bg-gray-100 cursor-pointer"
-                          onClick={(event) => showDocument(document.id)}
-                        >
-                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                            {document.title || "#" + document.id}
-                          </td>
-                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                            {document.Recipient.map((item: any) => (
-                              <div key={item.id}>
-                                {item.sendStatus === "NOT_SENT" ? (
+                    {filterdDocuments.map((document: any, index: number) => (
+                      <tr
+                        key={document.id}
+                        className="hover:bg-gray-100 cursor-pointer"
+                        onClick={(event) => showDocument(document.id)}
+                      >
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {document.title || "#" + document.id}
+                        </td>
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {document.Recipient.map((item: any) => (
+                            <div key={item.id}>
+                              {item.sendStatus === "NOT_SENT" ? (
+                                <span
+                                  id="sent_icon"
+                                  className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
+                                >
+                                  {item.name
+                                    ? item.name + " <" + item.email + ">"
+                                    : item.email}
+                                </span>
+                              ) : (
+                                ""
+                              )}
+                              {item.sendStatus === "SENT" &&
+                              item.readStatus !== "OPENED" ? (
+                                <span id="sent_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
+                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
                                   >
+                                    <EnvelopeIcon className="inline h-5 mr-1"></EnvelopeIcon>
                                     {item.name
                                       ? item.name + " <" + item.email + ">"
                                       : item.email}
                                   </span>
-                                ) : (
-                                  ""
-                                )}
-                                {item.sendStatus === "SENT" &&
-                                item.readStatus !== "OPENED" ? (
-                                  <span id="sent_icon">
-                                    <span
-                                      id="sent_icon"
-                                      className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
-                                    >
-                                      <EnvelopeIcon className="inline h-5 mr-1"></EnvelopeIcon>
-                                      {item.name
-                                        ? item.name + " <" + item.email + ">"
-                                        : item.email}
-                                    </span>
+                                </span>
+                              ) : (
+                                ""
+                              )}
+                              {item.readStatus === "OPENED" &&
+                              item.signingStatus === "NOT_SIGNED" ? (
+                                <span id="read_icon">
+                                  <span
+                                    id="sent_icon"
+                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
+                                  >
+                                    <CheckIcon className="inline h-5 -mr-2"></CheckIcon>
+                                    <CheckIcon className="inline h-5 mr-1"></CheckIcon>
+                                    {item.name
+                                      ? item.name + " <" + item.email + ">"
+                                      : item.email}
                                   </span>
-                                ) : (
-                                  ""
-                                )}
-                                {item.readStatus === "OPENED" &&
-                                item.signingStatus === "NOT_SIGNED" ? (
-                                  <span id="read_icon">
-                                    <span
-                                      id="sent_icon"
-                                      className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
-                                    >
-                                      <CheckIcon className="inline h-5 -mr-2"></CheckIcon>
-                                      <CheckIcon className="inline h-5 mr-1"></CheckIcon>
-                                      {item.name
-                                        ? item.name + " <" + item.email + ">"
-                                        : item.email}
-                                    </span>
+                                </span>
+                              ) : (
+                                ""
+                              )}
+                              {item.signingStatus === "SIGNED" ? (
+                                <span id="signed_icon">
+                                  <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                    <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
+                                    {item.email}
                                   </span>
-                                ) : (
-                                  ""
-                                )}
-                                {item.signingStatus === "SIGNED" ? (
-                                  <span id="signed_icon">
-                                    <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
-                                      <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
-                                      {item.email}
-                                    </span>
-                                  </span>
-                                ) : (
-                                  ""
-                                )}
-                              </div>
-                            ))}
-                            {document.Recipient.length === 0 ? "-" : null}
-                            <ReactTooltip
-                              anchorId="sent_icon"
-                              place="bottom"
-                              content="Document was sent to recipient."
-                            />
-                            <ReactTooltip
-                              anchorId="read_icon"
-                              place="bottom"
-                              content="Document was opened but not signed yet."
-                            />
-                            <ReactTooltip
-                              anchorId="signed_icon"
-                              place="bottom"
-                              content="Document was signed by the recipient."
-                            />
-                          </td>
-                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                            {formatDocumentStatus(document.status)}
-                            <p>
-                              <small hidden={document.Recipient.length === 0}>
-                                {document.Recipient.filter(
-                                  (r: any) => r.signingStatus === "SIGNED"
-                                ).length || 0}
-                                /{document.Recipient.length || 0}
-                              </small>
-                            </p>
-                          </td>
-                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                            {new Date(document.created).toLocaleDateString()}
-                          </td>
-                          <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
-                            <div>
-                              <IconButton
-                                icon={PencilSquareIcon}
-                                className="mr-2"
-                                onClick={(event: any) => {
-                                  event.preventDefault();
-                                  event.stopPropagation();
-                                  router.push("/documents/" + document.id);
-                                }}
-                              >
-                                Edit
-                              </IconButton>
-                              <IconButton
-                                icon={ArrowDownTrayIcon}
-                                className="mr-2"
-                                onClick={(event: any) => {
-                                  event.preventDefault();
-                                  event.stopPropagation();
-                                  router.push("/api/documents/" + document.id);
-                                }}
-                              >
-                                Download
-                              </IconButton>
-                              <IconButton
-                                icon={TrashIcon}
-                                onClick={(event: any) => {
-                                  event.preventDefault();
-                                  event.stopPropagation();
-                                  if (
-                                    confirm(
-                                      "Are you sure you want to delete this document"
-                                    )
-                                  ) {
-                                    const documentsWithoutIndex = [
-                                      ...documents,
-                                    ];
-                                    const removedItem: any =
-                                      documentsWithoutIndex.splice(index, 1);
-                                    setDocuments(documentsWithoutIndex);
-                                    fetch(`/api/documents/${document.id}`, {
-                                      method: "DELETE",
-                                    })
-                                      .catch((err) => {
-                                        documentsWithoutIndex.splice(
-                                          index,
-                                          0,
-                                          removedItem
-                                        );
-                                        setDocuments(documentsWithoutIndex);
-                                      })
-                                      .then(() => {
-                                        getDocuments();
-                                      });
-                                  }
-                                }}
-                              ></IconButton>
-                              <span className="sr-only">, {document.name}</span>
+                                </span>
+                              ) : (
+                                ""
+                              )}
                             </div>
-                          </td>
-                        </tr>
-                      )
-                    )}
+                          ))}
+                          {document.Recipient.length === 0 ? "-" : null}
+                          <ReactTooltip
+                            anchorId="sent_icon"
+                            place="bottom"
+                            content="Document was sent to recipient."
+                          />
+                          <ReactTooltip
+                            anchorId="read_icon"
+                            place="bottom"
+                            content="Document was opened but not signed yet."
+                          />
+                          <ReactTooltip
+                            anchorId="signed_icon"
+                            place="bottom"
+                            content="Document was signed by the recipient."
+                          />
+                        </td>
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {formatDocumentStatus(document.status)}
+                          <p>
+                            <small hidden={document.Recipient.length === 0}>
+                              {document.Recipient.filter(
+                                (r: any) => r.signingStatus === "SIGNED"
+                              ).length || 0}
+                              /{document.Recipient.length || 0}
+                            </small>
+                          </p>
+                        </td>
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                          {new Date(document.created).toLocaleDateString()}
+                        </td>
+                        <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                          <div>
+                            <IconButton
+                              icon={PencilSquareIcon}
+                              className="mr-2"
+                              onClick={(event: any) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                router.push("/documents/" + document.id);
+                              }}
+                            >
+                              Edit
+                            </IconButton>
+                            <IconButton
+                              icon={ArrowDownTrayIcon}
+                              className="mr-2"
+                              onClick={(event: any) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                router.push("/api/documents/" + document.id);
+                              }}
+                            >
+                              Download
+                            </IconButton>
+                            <IconButton
+                              icon={TrashIcon}
+                              onClick={(event: any) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                if (
+                                  confirm(
+                                    "Are you sure you want to delete this document"
+                                  )
+                                ) {
+                                  const documentsWithoutIndex = [...documents];
+                                  const removedItem: any =
+                                    documentsWithoutIndex.splice(index, 1);
+                                  setDocuments(documentsWithoutIndex);
+                                  fetch(`/api/documents/${document.id}`, {
+                                    method: "DELETE",
+                                  })
+                                    .catch((err) => {
+                                      documentsWithoutIndex.splice(
+                                        index,
+                                        0,
+                                        removedItem
+                                      );
+                                      setDocuments(documentsWithoutIndex);
+                                    })
+                                    .then(() => {
+                                      getDocuments();
+                                    });
+                                }
+                              }}
+                            ></IconButton>
+                            <span className="sr-only">, {document.name}</span>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
                   </tbody>
                 </table>
               </div>
+              <div
+                hidden={filterdDocuments.length > 0}
+                className="mx-auto w-fit mt-12 p-3"
+              >
+                <FunnelIcon className="w-5 inline mr-1 align-middle" /> Nothing
+                here. Maybe try a different filter.
+              </div>
             </div>
           </div>
         </div>