UI (#63)

* Less padding on Open menu. * Generic Import Button
wandyezj · Jul 9, 2024 · 59b31c6 · 59b31c6
1 parent 2444068
commit 59b31c6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 34 deletions.
diff --git a/src/components/ButtonImport.tsx b/src/components/ButtonImport.tsx
@@ -9,12 +9,11 @@ import {
     DialogContent,
     Button,
 } from "@fluentui/react-components";
-import { TooltipButton } from "./TooltipButton";
-import { ArrowImportRegular } from "@fluentui/react-icons";
 
 import { makeStyles, tokens, useId, Label, Textarea } from "@fluentui/react-components";
 import { LogTag, log } from "../core/log";
-import { isValidSnipExportJson } from "../core/Snip";
+import { SnipWithSource, completeSnip, getExportSnipFromExportJson, isValidSnipExportJson } from "../core/Snip";
+import { saveSnip } from "../core/snipStorage";
 
 const useStyles = makeStyles({
     base: {
@@ -103,30 +102,61 @@ async function getImportSnip(value: string): Promise<string | undefined> {
     return undefined;
 }
 
-export function ButtonImport({ setImport }: { setImport: (value: string) => void }) {
+async function importSnip(value: string): Promise<SnipWithSource | undefined> {
+    console.log("Import snip");
+    console.log(value);
+    const newSnip = getExportSnipFromExportJson(value);
+    console.log(newSnip);
+    if (newSnip) {
+        // create a new snip with the imported snip
+        const complete = completeSnip(newSnip);
+        const source = "local";
+        complete.modified = Date.now();
+        const importSnip: SnipWithSource = { ...complete, source };
+
+        const saved = await saveSnip(importSnip);
+        return saved;
+    } else {
+        console.error("import failed - invalid snip");
+    }
+    return undefined;
+}
+
+export function ButtonImport({
+    openSnip,
+    children,
+}: {
+    openSnip: (openSnip: SnipWithSource) => void;
+    children: JSX.Element;
+}) {
     const textareaId = useId("import-textarea");
     const styles = useStyles();
 
+    async function doImport(value: string) {
+        const snip = await importSnip(value);
+        if (snip) {
+            openSnip(snip);
+        }
+    }
+
     async function onClickImport(event: React.FormEvent) {
         event.preventDefault();
         log(LogTag.ButtonImport, "import");
         const value = (document.getElementById(textareaId) as HTMLTextAreaElement).value;
         const snipText = await getImportSnip(value);
         if (snipText) {
-            setImport(snipText);
+            doImport(snipText);
         }
         // otherwise invalid.
     }
 
     return (
         <Dialog>
-            <DialogTrigger disableButtonEnhancement>
-                <TooltipButton tip="Import" icon={<ArrowImportRegular />} />
-            </DialogTrigger>
+            <DialogTrigger disableButtonEnhancement>{children}</DialogTrigger>
             <DialogSurface>
                 <form onSubmit={onClickImport}>
                     <DialogBody>
-                        <DialogTitle>Import Snip Json</DialogTitle>
+                        <DialogTitle>Import Snip</DialogTitle>
                         <DialogContent>
                             <div className={styles.base}>
                                 <Label className={styles.label} htmlFor={textareaId}>

diff --git a/src/components/ButtonOpenMenu.tsx b/src/components/ButtonOpenMenu.tsx
@@ -40,7 +40,7 @@ export function ButtonOpenMenu({ openSnip }: { openSnip: (snip: SnipWithSource)
                 </MenuTrigger>
 
                 <MenuPopover>
-                    <MenuList>
+                    <MenuList hasIcons={true}>
                         <MenuItem
                             data-testid={getId(idEditButtonOpenSnip)}
                             icon={<DocumentFolderRegular />}

diff --git a/src/components/PageEdit.tsx b/src/components/PageEdit.tsx
@@ -10,9 +10,10 @@ import {
     // BookDefault28Regular,
     DocumentRegular,
     DocumentFolderRegular,
+    ArrowImportRegular,
     // SettingsRegular,
 } from "@fluentui/react-icons";
-import { SnipSource, SnipWithSource, completeSnip, getExportSnipFromExportJson, getSnipExportJson } from "../core/Snip";
+import { SnipSource, SnipWithSource, getSnipExportJson } from "../core/Snip";
 import { saveCurrentSnipReference, saveCurrentSnipToRun } from "../core/storage";
 import { TooltipButton } from "./TooltipButton";
 import { updateMonacoLibs } from "../core/updateMonacoLibs";
@@ -68,20 +69,6 @@ export function PageEdit({ initialSnip }: { initialSnip: SnipWithSource }) {
         setSnip(setupSnip);
     };
 
-    const setImport = (value: string) => {
-        console.log("Import snip");
-        console.log(value);
-        const newSnip = getExportSnipFromExportJson(value);
-        console.log(newSnip);
-        if (newSnip) {
-            const complete = completeSnip(newSnip);
-            const source = "local";
-            updateSnip({ ...complete, source });
-        } else {
-            console.error("import failed - invalid snip");
-        }
-    };
-
     /**
      * Copy the current snip to the clipboard
      */
@@ -108,7 +95,7 @@ export function PageEdit({ initialSnip }: { initialSnip: SnipWithSource }) {
 
     return (
         <>
-            <Toolbar>
+            <Toolbar size="medium" style={{ paddingLeft: "0px", paddingRight: "0px" }}>
                 <ButtonOpenMenu openSnip={openSnip}></ButtonOpenMenu>
                 <Tooltip content={snip.name} relationship="label">
                     <Input
@@ -135,7 +122,9 @@ export function PageEdit({ initialSnip }: { initialSnip: SnipWithSource }) {
                     onClick={buttonCopySnipToClipboard}
                 />
 
-                <ButtonImport setImport={setImport} />
+                <ButtonImport openSnip={openSnip}>
+                    <TooltipButton tip="Import" icon={<ArrowImportRegular />} />
+                </ButtonImport>
                 {embedEnabled() ? <ButtonEmbedCopy snip={snip} /> : <></>}
                 {/*
                 <TooltipButton tip="Settings" icon={<SettingsRegular />} />

diff --git a/src/core/database.ts b/src/core/database.ts
@@ -220,14 +220,14 @@ export async function getSnipById(id: string | undefined): Promise<Snip | undefi
 //     });
 // }
 
-export async function saveSnip(snip: Snip): Promise<void> {
+export async function saveSnip(snip: Snip): Promise<Snip> {
     const db = await openDatabase();
     return new Promise((resolve, reject) => {
         const objectStore = getTableSnips(db, "readwrite");
 
         const request = objectStore.put(snip);
         request.onsuccess = () => {
-            resolve();
+            resolve(snip);
             // const target = event.target;
             // if (target instanceof IDBRequest) {
             //     resolve(target.result);

diff --git a/src/core/snipStorage.ts b/src/core/snipStorage.ts
@@ -11,14 +11,17 @@ import {
     getSnipById as getSnipByIdInEmbed,
 } from "./source/embedSnip";
 
-export async function saveSnip(snip: SnipWithSource): Promise<void> {
+export async function saveSnip(snip: SnipWithSource): Promise<SnipWithSource> {
+    const saved = await saveSnipToSource(snip);
+    return { ...saved, source: snip.source };
+}
+
+async function saveSnipToSource(snip: SnipWithSource): Promise<Snip> {
     switch (snip.source) {
         case "local":
-            await saveSnipInDatabase(snip);
-            break;
+            return saveSnipInDatabase(snip);
         case "embed":
-            await saveSnipInEmbed(snip);
-            break;
+            return saveSnipInEmbed(snip);
     }
 }