diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 1a29021..f7166e2 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -135,6 +135,46 @@ export const HomePage = () => { const [filter, setFilter] = useState('Show all') const [sort, setSort] = useState('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) => ( + + )) + } else { + return ( +
+

No results

+
+ ) + } + } + return (
@@ -233,36 +273,8 @@ export const HomePage = () => { )} -
- {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 - }) - .map((key) => ( - - ))} -
+ +
{renderSubmissions()}
diff --git a/src/pages/home/style.module.scss b/src/pages/home/style.module.scss index 63917a0..5efd4fd 100644 --- a/src/pages/home/style.module.scss +++ b/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; +}