From ed7acd6cb4c73ee2907fb5062a10dbb8d369f7c9 Mon Sep 17 00:00:00 2001
From: Eugene <eugene@nostrdev.com>
Date: Thu, 15 Aug 2024 15:35:37 +0300
Subject: [PATCH] feat(pdf-marking): adds file validity check

---
 src/components/FileList/index.tsx         | 12 ++++++++++--
 src/components/FileList/style.module.scss | 23 +++++++++++++++++++++++
 src/pages/sign/index.tsx                  |  2 +-
 src/types/file.ts                         |  1 +
 src/utils/utils.ts                        |  7 +++++--
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/components/FileList/index.tsx b/src/components/FileList/index.tsx
index f1fdcd8..7cd30eb 100644
--- a/src/components/FileList/index.tsx
+++ b/src/components/FileList/index.tsx
@@ -1,6 +1,8 @@
 import { CurrentUserFile } from '../../types/file.ts'
 import styles from './style.module.scss'
 import { Button } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
 
 interface FileListProps {
   files: CurrentUserFile[]
@@ -26,8 +28,14 @@ const FileList = ({
               className={`${styles.fileItem} ${isActive(file) && styles.active}`}
               onClick={() => setCurrentFile(file)}
             >
-              <span className={styles.fileNumber}>{file.id}</span>
-              <span className={styles.fileName}>{file.filename}</span>
+              <div className={styles.fileNumber}>{file.id}</div>
+              <div className={styles.fileInfo}>
+                <div className={styles.fileName}>{file.filename}</div>
+              </div>
+
+              <div className={styles.fileVisual}>
+                {file.isHashValid && <FontAwesomeIcon icon={faCheck} />}
+              </div>
             </li>
           ))}
         </ul>
diff --git a/src/components/FileList/style.module.scss b/src/components/FileList/style.module.scss
index 40b83a3..6f7b64a 100644
--- a/src/components/FileList/style.module.scss
+++ b/src/components/FileList/style.module.scss
@@ -21,6 +21,12 @@ ul {
   padding: 0;            /* Removes default padding */
 }
 
+li {
+  list-style-type: none; /* Removes the bullets */
+  margin: 0; /* Removes any default margin */
+  padding: 0; /* Removes any default padding */
+}
+
 
 .wrap {
   display: flex;
@@ -83,6 +89,12 @@ ul {
   color: white;
 }
 
+.fileInfo {
+  flex-grow: 1;
+  font-size: 16px;
+  font-weight: 500;
+}
+
 .fileName {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -97,4 +109,15 @@ ul {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 10px;
+}
+
+.fileVisual {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 25px;
+  width: 25px;
 }
\ No newline at end of file
diff --git a/src/pages/sign/index.tsx b/src/pages/sign/index.tsx
index 9f2ab7c..a762292 100644
--- a/src/pages/sign/index.tsx
+++ b/src/pages/sign/index.tsx
@@ -952,7 +952,7 @@ export const SignPage = () => {
 
   return (
     <PdfMarking
-      files={getCurrentUserFiles(files, currentFileHashes)}
+      files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
       currentUserMarks={currentUserMarks}
       setIsReadyToSign={setIsReadyToSign}
       setCurrentUserMarks={setCurrentUserMarks}
diff --git a/src/types/file.ts b/src/types/file.ts
index 0f2c127..cb1a7ff 100644
--- a/src/types/file.ts
+++ b/src/types/file.ts
@@ -5,4 +5,5 @@ export interface CurrentUserFile {
   pdfFile: PdfFile
   filename: string
   hash?: string
+  isHashValid: boolean
 }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e201c41..bde528b 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -72,17 +72,20 @@ export const timeout = (ms: number = 60000) => {
  * including its name, hash, and content
  * @param files
  * @param fileHashes
+ * @param creatorFileHashes
  */
 export const getCurrentUserFiles = (
   files: { [filename: string]: PdfFile },
-  fileHashes: { [key: string]: string | null }
+  fileHashes: { [key: string]: string | null },
+  creatorFileHashes: { [key: string]: string }
 ): CurrentUserFile[] => {
   return Object.entries(files).map(([filename, pdfFile], index) => {
     return {
       pdfFile,
       filename,
       id: index + 1,
-      ...(!!fileHashes[filename] && { hash: fileHashes[filename]! })
+      ...(!!fileHashes[filename] && { hash: fileHashes[filename]! }),
+      isHashValid: creatorFileHashes[filename] === fileHashes[filename]
     }
   })
 }