From 02bb71409afe195d8d0344cc60f42342cab3321c Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 20 Aug 2024 09:44:04 +0200
Subject: [PATCH] fix(create-page): show other file types in content

---
 src/components/DrawPDFFields/index.tsx        | 37 ++++++++++++-------
 .../DrawPDFFields/style.module.scss           | 12 ++++++
 src/utils/meta.ts                             |  8 ++++
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index 7e87cb3..8fb921d 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -21,7 +21,7 @@ import {
   DrawTool
 } from '../../types/drawing'
 import { truncate } from 'lodash'
-import { hexToNpub } from '../../utils'
+import { extractFileExtension, hexToNpub } from '../../utils'
 import { toPdfFiles } from '../../utils/pdf.ts'
 PDFJS.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -478,25 +478,34 @@ export const DrawPDFFields = (props: Props) => {
 
   return (
     <div className={styles.view}>
-      {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
+      {selectedFiles.map((file, i) => {
+        const name = file.name
+        const extension = extractFileExtension(name)
+        const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
         return (
-          <React.Fragment key={pdfFile.file.name}>
+          <React.Fragment key={name}>
             <div
               className={`${styles.fileWrapper} ${styles.scrollTarget}`}
-              id={`file-${pdfFile.file.name}`}
+              id={`file-${name}`}
             >
-              {getPdfPages(pdfFile, pdfFileIndex)}
-              {pdfFileIndex < pdfFiles.length - 1 && (
-                <Divider
-                  sx={{
-                    fontSize: '12px',
-                    color: 'rgba(0,0,0,0.15)'
-                  }}
-                >
-                  File Separator
-                </Divider>
+              {pdfFile ? (
+                getPdfPages(pdfFile, i)
+              ) : (
+                <div className={styles.otherFile}>
+                  This is a {extension} file
+                </div>
               )}
             </div>
+            {i < selectedFiles.length - 1 && (
+              <Divider
+                sx={{
+                  fontSize: '12px',
+                  color: 'rgba(0,0,0,0.15)'
+                }}
+              >
+                File Separator
+              </Divider>
+            )}
           </React.Fragment>
         )
       })}
diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss
index 8c888ec..142f88a 100644
--- a/src/components/DrawPDFFields/style.module.scss
+++ b/src/components/DrawPDFFields/style.module.scss
@@ -104,3 +104,15 @@
   flex-direction: column;
   gap: 25px;
 }
+
+.otherFile {
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 14px;
+}
diff --git a/src/utils/meta.ts b/src/utils/meta.ts
index 276f049..0bee969 100644
--- a/src/utils/meta.ts
+++ b/src/utils/meta.ts
@@ -190,3 +190,11 @@ export const extractFileExtensions = (fileNames: string[]) => {
 
   return { extensions, isSame }
 }
+
+/**
+ * @param fileName - Filename to check
+ * @returns Extension string
+ */
+export const extractFileExtension = (fileName: string) => {
+  return fileName.split('.').pop()
+}