Log (#12)

* log tags

docs/todo.md

@@ -13,18 +13,6 @@
 - [X] button import
 - [X] compile typescript
 
-## Phase - Fix
-
-- [ ] Copy to clipboard functionality is broken. It looks like the permissions were recently removed from the iframe policy? `<iframe src="index.html" allow="clipboard-read; clipboard-write"></iframe>`
-    - [X] Workaround - use the command API
-
-## Phase - UI Polish
-
-- [X] Resizable Editor that adjusts to screen size
-    - Find a better way to do this. The current way works but is not ideal. using 100vh on the container CSS and 90vh on the editor CSS.
-
-
-
 ## Phase - Multiple Files
 
 - [ ] multiple local snip
@@ -65,6 +53,17 @@
 - [ ] display compile errors
     - typescript pre emit diagnostics require program construction
 
+## Phase - Fix
+
+- [ ] Copy to clipboard functionality is broken. It looks like the permissions were recently removed from the iframe policy? `<iframe src="index.html" allow="clipboard-read; clipboard-write"></iframe>`
+    - [X] Workaround - use the command API
+
+## Phase - UI Polish
+
+- [X] Resizable Editor that adjusts to screen size
+    - [ ] Find a better way to do this. The current way works but is not ideal. using 100vh on the container CSS and 90vh on the editor CSS.
+
+
 ## Phase - test
 
 - [ ] always an open snip
@@ -89,7 +88,7 @@
 - [ ] button - run in editor
     - Is there a point to this?
 
-## Phase Document
+## Phase - Document
 
 - [X] dependencies.md
     - why each dependency

src/components/Editor.tsx

@@ -50,7 +50,7 @@ export function Editor({ fileId, snip, updateSnip }: { fileId: string; snip: Sni
 
     // runs setup once
     useEffect(() => {
-        console.log("effect");
+        console.log("editor component effect");
         if (container.current) {
             const file = snip.files[fileId];
             editor = monaco.editor.create(container.current, {

src/components/ImportButton.tsx

@@ -13,6 +13,7 @@ import { TooltipButton } from "./TooltipButton";
 import { ArrowDownloadRegular } from "@fluentui/react-icons";
 
 import { makeStyles, tokens, useId, Label, Textarea } from "@fluentui/react-components";
+import { LogTag, log } from "../core/log";
 
 const useStyles = makeStyles({
     base: {
@@ -30,7 +31,7 @@ export function ImportButton({ setImport }: { setImport: (value: string) => void
 
     function onClickImport(event: React.FormEvent) {
         event.preventDefault();
-        console.log("import");
+        log(LogTag.ButtonImport, "import");
         const value = (document.getElementById(textareaId) as HTMLTextAreaElement).value;
         setImport(value);
     }

src/components/PageEditor.tsx

@@ -20,6 +20,7 @@ import { ImportButton } from "./ImportButton";
 import { deleteSnipById, saveSnip } from "../core/database";
 import { newDefaultSnip } from "../core/newDefaultSnip";
 import { copyTextToClipboard } from "../core/copyTextToClipboard";
+import { LogTag, log } from "../core/log";
 
 export function PageEditor({ initialSnip }: { initialSnip: Snip }) {
     const [fileId, setFileId] = useState("typescript");
@@ -55,7 +56,7 @@ export function PageEditor({ initialSnip }: { initialSnip: Snip }) {
      * Copy the current snip to the clipboard
      */
     function buttonCopySnipToClipboard() {
-        console.log("button - copy to clipboard");
+        log(LogTag.ButtonCopy, "button - copy to clipboard");
 
         const text = JSON.stringify(snip, null, 4);
         copyTextToClipboard(text);
@@ -65,7 +66,7 @@ export function PageEditor({ initialSnip }: { initialSnip: Snip }) {
      * Delete the current snip, replace it with the default snip
      */
     function buttonDeleteSnip() {
-        console.log("button - delete");
+        log(LogTag.ButtonDelete, "button - delete");
         const previousId = snip.id;
         const newSnip = newDefaultSnip();
         updateSnip(newSnip);

src/core/Snip.tsx

@@ -96,14 +96,17 @@ export function getSnipFromJson(value: string): Snip | undefined {
 }
 
 export function completeSnip(piece: PrunedSnip): Snip {
+    const now = Date.now();
+
+    // Unique ID is the timestamp
+    const id = `${now}`;
+    // Modified is when it was created
+    const modified = now;
+
     const complete = {
-        id: createNewSnipId(),
-        modified: Date.now(),
+        id,
+        modified,
         ...piece,
     };
     return complete;
 }
-
-function createNewSnipId(): string {
-    return `${Date.now()}`;
-}

src/core/database.ts

@@ -1,6 +1,7 @@
 // Indexed DB database
 
 import { Snip, SnipMetadata } from "./Snip";
+import { LogTag, log } from "./log";
 import { newDefaultSnip } from "./newDefaultSnip";
 
 // Key, Name, SnipJson
@@ -108,8 +109,9 @@ export async function getAllSnipMetadata(): Promise<SnipMetadata[]> {
  */
 export async function getMostRecentlyModifiedSnipId(): Promise<string | undefined> {
     const allMetadata = await getAllSnipMetadata();
-    console.log("allMetadata");
-    console.log(allMetadata);
+    log(LogTag.MostRecentlyModifiedMetadata, "allMetadata");
+    log(LogTag.MostRecentlyModifiedMetadata, allMetadata);
+
     // Find most recently modified (largest date)
     let mostRecent: SnipMetadata | undefined = undefined;
     for (const metadata of allMetadata) {

src/core/log.ts

@@ -10,9 +10,16 @@ export function log(tag: LogTag, ...data: unknown[]) {
         console.log("Tag Unknown");
         return;
     }
-    console.log(...data);
+    // Only log specific tags
+    if (tagsToLog.has(tag)) {
+        console.log(...data);
+    }
 }
 
+// TODO: add timer between start and end tags with same prefix.
+
+const tagsToLog = new Set<LogTag>([]);
+
 export enum LogTag {
     /**
      * Setup Sequence for editor
@@ -30,4 +37,11 @@ export enum LogTag {
     CopyToClipboard = "copyToClipboard",
 
     LocalStorage = "storage",
+
+    MostRecentlyModifiedMetadata = "mostRecentlyModifiedMetadata",
+    UpdateMonacoLibs = "updateMonacoLibs",
+    ButtonImport = "ButtonImport",
+    ButtonCopy = "ButtonCopy",
+    ButtonDelete = "ButtonDelete",
+    LoadMonacoLibs = "LoadMonacoLibs",
 }

src/core/updateMonacoLibs.tsx

@@ -1,5 +1,6 @@
 import * as monaco from "monaco-editor";
 import { parseLibraries } from "./parseLibraries";
+import { LogTag, log } from "./log";
 
 // Update intellisense for monaco
 
@@ -35,7 +36,8 @@ function loadMonacoLibs(libs: string[]) {
 
     const readyLibs = loadedLibs
         .map(({ name, value }) => {
-            console.log(`${name} - ${value === undefined ? "?" : "loaded"}`);
+            // Display a log message for if the library is loaded.
+            log(LogTag.LoadMonacoLibs, `${name} - ${value === undefined ? "?" : "loaded"}`);
             return value || "";
         })
         .filter((value) => value !== "");
@@ -56,7 +58,7 @@ function loadCurrentLibraries() {
  * @param libraries text
  */
 export function updateMonacoLibs(libraries: string) {
-    console.log(`updateMonacoLibs\n${libraries}`);
+    log(LogTag.UpdateMonacoLibs, `updateMonacoLibs\n${libraries}`);
     const { dts } = parseLibraries(libraries);
 
     globalCurrentLibraries.sort();

src/edit.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./components/App";
-import { loadCurrentSnipId, saveCurrentSnipId } from "./core/storage";
+import { deleteCurrentSnipId, loadCurrentSnipId, saveCurrentSnipId } from "./core/storage";
 import { getMostRecentlyModifiedSnipId, getSnipById, saveSnip } from "./core/database";
 import { newDefaultSnip } from "./core/newDefaultSnip";
 import { log, LogTag } from "./core/log";
+import { Snip } from "./core/Snip";
 
 async function initializeCurrentId(): Promise<string> {
     let currentId = loadCurrentSnipId();
@@ -23,16 +24,29 @@ async function initializeCurrentId(): Promise<string> {
     return currentId;
 }
 
-async function setup() {
-    log(LogTag.SetupStart);
+async function getInitialSnip(): Promise<Snip> {
     const currentId = await initializeCurrentId();
     log(LogTag.Setup, "currentId - complete");
     const initialSnip = await getSnipById(currentId);
     log(LogTag.Setup, "initialSnip - complete");
+
     if (initialSnip === undefined) {
-        // Should be impossible?
-        throw new Error("Failed to load initial snip");
+        // Reset the current id and try again.
+        deleteCurrentSnipId();
+        const currentId = await initializeCurrentId();
+        const initialSnip = await getSnipById(currentId);
+        if (initialSnip === undefined) {
+            // Should be impossible?
+            throw new Error("Failed to load initial snip");
+        }
+        return initialSnip;
     }
+    return initialSnip;
+}
+
+async function setup() {
+    log(LogTag.SetupStart);
+    const initialSnip = await getInitialSnip();
 
     // Start Render AFTER we have the current snip id
     const container = document.getElementById("container")!;
@@ -44,7 +58,7 @@ async function setup() {
 setup();
 
 Office.onReady(({ host, platform }) => {
-    console.log("Office is ready");
-    console.log("Host: ", host);
-    console.log("Platform: ", platform);
+    console.log(`Office is ready
+Host: ${host}
+Platform: ${platform}`);
 });