fix: display no results when no submissions are found

src/pages/home/index.tsx

@@ -135,6 +135,46 @@ export const HomePage = () => {
   const [filter, setFilter] = useState<Filter>('Show all')
   const [sort, setSort] = useState<Sort>('desc')
 
+  const renderSubmissions = () => {
+    const submissions = Object.keys(parsedSigits)
+      .filter((s) => {
+        const { title, signedStatus } = parsedSigits[s]
+        const isMatch = title?.toLowerCase().includes(q.toLowerCase())
+        switch (filter) {
+          case 'Completed':
+            return signedStatus === SigitStatus.Complete && isMatch
+          case 'In-progress':
+            return signedStatus === SigitStatus.Partial && isMatch
+          case 'Show all':
+            return isMatch
+          default:
+            console.error('Filter case not handled.')
+        }
+      })
+      .sort((a, b) => {
+        const x = parsedSigits[a].createdAt ?? 0
+        const y = parsedSigits[b].createdAt ?? 0
+        return sort === 'desc' ? y - x : x - y
+      })
+
+    if (submissions.length) {
+      return submissions.map((key) => (
+        <DisplaySigit
+          key={`sigit-${key}`}
+          sigitCreateId={key}
+          parsedMeta={parsedSigits[key]}
+          meta={sigits[key]}
+        />
+      ))
+    } else {
+      return (
+        <div className={styles.noResults}>
+          <p>No results</p>
+        </div>
+      )
+    }
+  }
+
   return (
     <div {...getRootProps()} tabIndex={-1}>
       <Container className={styles.container}>
@@ -233,36 +273,8 @@ export const HomePage = () => {
             <label htmlFor="file-upload">Click or drag files to upload!</label>
           )}
         </button>
-        <div className={styles.submissions}>
+
-          {Object.keys(parsedSigits)
+        <div className={styles.submissions}>{renderSubmissions()}</div>
-            .filter((s) => {
-              const { title, signedStatus } = parsedSigits[s]
-              const isMatch = title?.toLowerCase().includes(q.toLowerCase())
-              switch (filter) {
-                case 'Completed':
-                  return signedStatus === SigitStatus.Complete && isMatch
-                case 'In-progress':
-                  return signedStatus === SigitStatus.Partial && isMatch
-                case 'Show all':
-                  return isMatch
-                default:
-                  console.error('Filter case not handled.')
-              }
-            })
-            .sort((a, b) => {
-              const x = parsedSigits[a].createdAt ?? 0
-              const y = parsedSigits[b].createdAt ?? 0
-              return sort === 'desc' ? y - x : x - y
-            })
-            .map((key) => (
-              <DisplaySigit
-                key={`sigit-${key}`}
-                sigitCreateId={key}
-                parsedMeta={parsedSigits[key]}
-                meta={sigits[key]}
-              />
-            ))}
-        </div>
       </Container>
       <Footer />
     </div>

src/pages/home/style.module.scss

@@ -99,3 +99,10 @@
   gap: 25px;
   grid-template-columns: repeat(auto-fit, minmax(365px, 1fr));
 }
+
+.noResults {
+  display: flex;
+  justify-content: center;
+  font-weight: normal;
+  color: #a1a1a1;
+}