feat: download custom texts (@fehmer)

frontend/src/ts/components/modals/SavedTextsModal.tsx

@@ -2,8 +2,13 @@ import { createSignal, For, Index, JSXElement, Setter, Show } from "solid-js";
 
 import * as CustomTextState from "../../legacy-states/custom-text-name";
 import { hideModal } from "../../states/modals";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
 import { showSimpleModal } from "../../states/simple-modal";
 import * as CustomText from "../../test/custom-text";
+import { download } from "../../utils/misc";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Button } from "../common/Button";
 import { Separator } from "../common/Separator";
@@ -81,6 +86,18 @@ export function SavedTextsModal(props: {
     });
   };
 
+  const handleDownload = (name: string, long: boolean) => {
+    const text = CustomText.getCustomText(name, long);
+
+    try {
+      const data = new Blob([text.join(" ")], { type: "text/plain" });
+      download({ filename: `${name}.txt`, data });
+      showSuccessNotification("custom text downloaded");
+    } catch (e) {
+      showErrorNotification(`failed to download custom text: ${e}`);
+    }
+  };
+
   return (
     <AnimatedModal
       id="SavedTexts"
@@ -102,9 +119,16 @@ export function SavedTextsModal(props: {
                   class="flex-1"
                   onClick={() => handleNameClick(name, false)}
                 />
+                <Button
+                  variant="button"
+                  balloon={{ text: "download" }}
+                  fa={{ icon: "fa-file-download", fixedWidth: true }}
+                  onClick={() => handleDownload(name, false)}
+                />
                 <Button
                   variant="button"
                   fa={{ icon: "fa-trash", fixedWidth: true }}
+                  balloon={{ text: "delete" }}
                   onClick={() => handleDelete(name, false)}
                 />
               </div>
@@ -142,9 +166,16 @@ export function SavedTextsModal(props: {
                     disabled={!hasProgress()}
                     onClick={() => handleResetProgress(name())}
                   />
+                  <Button
+                    variant="button"
+                    balloon={{ text: "download" }}
+                    fa={{ icon: "fa-file-download", fixedWidth: true }}
+                    onClick={() => handleDownload(name(), true)}
+                  />
                   <Button
                     variant="button"
                     fa={{ icon: "fa-trash", fixedWidth: true }}
+                    balloon={{ text: "delete" }}
                     onClick={() => handleDelete(name(), true)}
                   />
                 </div>

frontend/src/ts/test/test-screenshot.ts

@@ -18,6 +18,7 @@ import { convertRemToPixels } from "../utils/numbers";
 import * as TestState from "./test-state";
 import { qs, qsa } from "../utils/dom";
 import { getTheme } from "../states/theme";
+import { download as downloadFile } from "../utils/misc";
 
 let revealReplay = false;
 
@@ -310,26 +311,16 @@ async function getBlob(): Promise<Blob | null> {
 
 export async function download(): Promise<void> {
   try {
-    const blob = await getBlob();
+    const data = await getBlob();
 
-    if (!blob) {
+    if (!data) {
       showErrorNotification("Failed to generate screenshot data");
       return;
     }
-
-    const url = URL.createObjectURL(blob);
-
-    const link = document.createElement("a");
-    link.href = url;
-
     const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
-    link.download = `monkeytype-result-${timestamp}.png`;
-
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    const filename = `monkeytype-result-${timestamp}.png`;
 
-    URL.revokeObjectURL(url);
+    downloadFile({ data, filename });
 
     showSuccessNotification("Screenshot download started");
   } catch (error) {

frontend/src/ts/utils/misc.ts

@@ -317,16 +317,20 @@ export async function downloadResultsCSV(array: Result<Mode>[]): Promise<void> {
     .join("\n");
 
   const blob = new Blob([csvString], { type: "text/csv" });
+  download({ filename: "results.csv", data: blob });
+}
 
-  const href = window.URL.createObjectURL(blob);
-
+export function download(options: { filename: string; data: Blob }): void {
+  const url = URL.createObjectURL(options.data);
   const link = document.createElement("a");
-  link.setAttribute("href", href);
-  link.setAttribute("download", "results.csv");
-  document.body.appendChild(link); // Required for FF
+  link.href = url;
+  link.download = options.filename;
 
+  document.body.appendChild(link);
   link.click();
-  link.remove();
+  document.body.removeChild(link);
+
+  URL.revokeObjectURL(url);
 }
 
 export function isElementVisible(query: string): boolean {