feat: handle empty download directory

Signed-off-by: Alexander Alemayhu <alexander@alemayhu.com>

src/controllers/DownloadController.ts

@@ -5,9 +5,9 @@ import { Request, Response } from 'express';
 import path from 'path';
 import { sendError } from '../lib/error/sendError';
 import StorageHandler from '../lib/storage/StorageHandler';
-import { DownloadPage } from '../pages/DownloadPage';
 import DownloadService from '../services/DownloadService';
 import { canAccess } from '../lib/misc/canAccess';
+import { DownloadPage } from '../ui/pages/DownloadPage';
 
 class DownloadController {
   constructor(private service: DownloadService) {}

src/ui/components/download/DownloadDescription.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface DownloadMessageProps {
+  hasFiles: boolean;
+}
+
+const DownloadMessage: React.FC<DownloadMessageProps> = ({ hasFiles }) => {
+  return (
+    <p>
+      {hasFiles ? (
+        'This is the list of Anki decks detected from your upload.'
+      ) : (
+        <>
+          No Anki decks found. Learn more about creating valid flashcards at{' '}
+          <a href="https://docs.2anki.net/">2anki.net documentation</a>.
+        </>
+      )}
+    </p>
+  );
+};
+
+export default DownloadMessage;

src/ui/components/download/DownloadFooter.tsx

@@ -0,0 +1,8 @@
+export const DownloadFooter = () => {
+  return (
+    <p>
+      This folder will be automatically deleted. Return to{' '}
+      <a href="https://2anki.net">2anki.net</a>
+    </p>
+  );
+};

src/ui/components/download/DownloadList.tsx

@@ -0,0 +1,38 @@
+import path from 'path';
+import React from 'react';
+
+interface DownloadListProps {
+  apkgFiles: string[];
+  id: string;
+  styles: {
+    downloadList: React.CSSProperties;
+    downloadItem: React.CSSProperties;
+    downloadItemName: React.CSSProperties;
+    downloadItemLink: React.CSSProperties;
+  };
+}
+
+const DownloadList: React.FC<DownloadListProps> = ({
+  apkgFiles,
+  id,
+  styles,
+}) => {
+  return (
+    <ul style={styles.downloadList}>
+      {apkgFiles.map((file) => (
+        <li key={file} style={styles.downloadItem}>
+          <span style={styles.downloadItemName}>{file}</span>
+          <a
+            style={styles.downloadItemLink}
+            download={`${path.basename(file)}`}
+            href={`${id}/${file}`}
+          >
+            Download
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default DownloadList;

src/ui/components/download/DownloadTitle.tsx

@@ -0,0 +1,7 @@
+interface DownloadTitleProps {
+  hasFiles: boolean;
+}
+
+export const DownloadTitle = ({ hasFiles }: DownloadTitleProps) => {
+  return hasFiles ? 'Your downloads are ready' : 'No downloads available';
+};

src/ui/components/download/styles.tsx

@@ -0,0 +1,36 @@
+export const styles = {
+  downloadContainer: {
+    margin: '0 auto',
+    maxWidth: '800px',
+    padding: '20px',
+    border: '1px solid #ccc',
+  },
+  downloadHeader: {
+    fontSize: '24px',
+    marginBottom: '20px',
+  },
+  downloadList: {
+    listStyle: 'none',
+    padding: '0',
+    margin: '0',
+  },
+  downloadItem: {
+    marginBottom: '10px',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  downloadItemName: {
+    display: 'block',
+    padding: '10px 20px',
+    backgroundColor: '#eee',
+    textDecoration: 'none',
+    color: '#000',
+    maxWidth: '80%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  downloadItemLinkHover: {
+    backgroundColor: '#ddd',
+  },
+  downloadItemLink: {},
+};

src/ui/pages/DownloadPage.tsx

@@ -0,0 +1,38 @@
+import ReactDOMServer from 'react-dom/server';
+import { DownloadTitle } from '../components/download/DownloadTitle';
+import DownloadMessage from '../components/download/DownloadDescription';
+import DownloadList from '../components/download/DownloadList';
+import { DownloadFooter } from '../components/download/DownloadFooter';
+import { styles } from '../components/download/styles';
+
+interface DownloadPageProps {
+  id: string;
+  files: string[];
+}
+
+export const DownloadPage = ({ id, files }: DownloadPageProps) => {
+  const apkgFiles = files.filter((file) => file.endsWith('.apkg'));
+  const hasFiles = apkgFiles.length > 0;
+
+  return ReactDOMServer.renderToStaticMarkup(
+    <html>
+      <head>
+        <title>
+          <DownloadTitle hasFiles={hasFiles} />
+        </title>
+      </head>
+      <body style={styles.downloadContainer}>
+        <header style={{ padding: '1rem' }}>
+          <h1 style={styles.downloadHeader}>
+            <DownloadTitle hasFiles={hasFiles} />
+          </h1>
+          <DownloadMessage hasFiles={hasFiles} />
+        </header>
+        <main>
+          <DownloadList apkgFiles={apkgFiles} id={id} styles={styles} />
+        </main>
+        {hasFiles && <DownloadFooter />}
+      </body>
+    </html>
+  );
+};