adds support for save/restore (local browser storage) snippets (#270)

Cecilifier.Web/Pages/Index.cshtml

@@ -161,7 +161,7 @@
 </script>
 
 <script>
-    initializeSite("@Model.ErrorAccessingGist", "@fromGist", "@this.GetType().Assembly.GetName().Version");
+    initializeSite("@Model.ErrorAccessingGist", "@fromGist", "@Request.Path", "@Request.Query["remove"]", "@GetType().Assembly.GetName().Version");
 </script>
 
 <script>

Cecilifier.Web/Pages/Shared/_Layout.cshtml

@@ -4,6 +4,7 @@
     <script src="~/js/cecilifier.js"></script>
     <script src="~/js/cecilifier.settings.js"></script>
     <script src="~/js/cecilifier.hoverprovider.js"></script>
+    <script src="~/js/cecilifier.snippethandler.js"></script>
     <script src="~/js/il.opcodes.js"></script>
     <script src="~/js/release_notes.js"></script>
 

Cecilifier.Web/Startup.cs

@@ -85,7 +85,7 @@ public void ConfigureServices(IServiceCollection services)
                 options.MinimumSameSitePolicy = SameSiteMode.None;
             });
 
-            services.AddRazorPages();
+            services.AddRazorPages(options => options.Conventions.AddPageRoute("/index", "/{snippet-name}"));
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
@@ -123,7 +123,7 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 
             app.Use(async (context, next) =>
             {
-                if (context.Request.Path == "/ws")
+                if (context.Request.Path == "/connection/ws")
                 {
                     if (context.WebSockets.IsWebSocketRequest)
                     {

Cecilifier.Web/wwwroot/js/cecilifier.js

@@ -6,6 +6,7 @@ let focusedEditor; // either csharpCode or cecilifiedCode
 let blockMappings = null;
 let csharpCodeEditorWidthMultiplier = 0.3;
 let compilationErrorToast = null; // toast informing user about compilation errors. This reference is used to close the toast before cecilifying code.
+let onCecilifiySuccessCallbacks = [];
 
 const CecilifierResponseStatus = Object.freeze({
     Success: 0,
@@ -126,19 +127,13 @@ function decreaseFocusedEditorFontSize() {
     const newFontSize = options.fontSize -  1;
     focusedEditor.updateOptions({ fontSize: newFontSize });
 }
-function initializeSite(errorAccessingGist, gist, version) {
+function initializeSite(errorAccessingGist, gist, requestPath, removeStoredSnippet, version) {
     require.config({ paths: { vs: 'lib/node_modules/monaco-editor/min/vs' } });
 
     require(['vs/editor/editor.main'], function () {
         csharpCode = monaco.editor.create(document.getElementById('csharpcode'), {
             theme: "vs-dark",
-            value: [
-                `// Supported CSharp language version: ${document.getElementById('supportedCSharpVersion').innerText}\n// https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-${document.getElementById('supportedCSharpVersion').innerText}`,
-                'using System;', 
-                'class Foo', 
-                '{', 
-                '\tvoid Bar() => Console.WriteLine("Hello World!");', 
-                '}'].join('\n'),
+            value:"",
             language: 'csharp',
             minimap: { enabled: false },
             fontSize: 14,
@@ -176,7 +171,13 @@ function initializeSite(errorAccessingGist, gist, version) {
 
         initializeHoverProvider()
 
-        handleGist(gist, errorAccessingGist);
+        handleInitialSnippet(gist, errorAccessingGist, requestPath, removeStoredSnippet, 
+            `// Supported CSharp language version: ${document.getElementById('supportedCSharpVersion').innerText}\n// https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-${document.getElementById('supportedCSharpVersion').innerText}
+using System;
+class Foo
+{
+    void Bar() => Console.WriteLine("Hello World!");
+};`);
 
         csharpCode.focus();
         focusedEditor = csharpCode;
@@ -310,7 +311,7 @@ function retrieveListOfFixedIssuesInStagingServer(callback) {
                     message: `Unable to retrieve list of fixed issues in staging server.`,
                     dismissible: true,
                     status: "Warning",
-                    timeout: 120000,
+                    timeout: 30000,
                     icon: "exclamation"
                 });
 
@@ -745,7 +746,7 @@ function setAlert(div_id, msg) {
 function initializeWebSocket() {
     const scheme = document.location.protocol === "https:" ? "wss" : "ws";
     const port = document.location.port ? (":" + document.location.port) : "";
-    const connectionURL = scheme + "://" + document.location.hostname + port + "/ws";
+    const connectionURL = scheme + "://" + document.location.hostname + port + "/connection/ws";
 
     let newSocket = new WebSocket(connectionURL);
     newSocket.isRetryingToConnect = websocket === undefined ?  0 : websocket.isRetryingToConnect;
@@ -810,10 +811,15 @@ function initializeWebSocket() {
                 });
             }
             else {
-                cecilifiedCode.setValue(response.cecilifiedCode);                
+                cecilifiedCode.setValue(response.cecilifiedCode);
                 // save the returned mappings used to map between code snippet <-> Cecilified Code.
                 blockMappings = response.mappings;
             }
+
+            for(let i = 0; i < onCecilifiySuccessCallbacks.length; i++) {
+                onCecilifiySuccessCallbacks[i].callback(onCecilifiySuccessCallbacks[i].state);
+            }
+
         } else if (response.status === CecilifierResponseStatus.ConnectionEstablished) {
             let response = JSON.parse(event.data);
             updateUsageStatisticsToolTip(response);
@@ -836,8 +842,7 @@ function initializeWebSocket() {
                         function: removeMarkersFromCSharpCode
                     }
                 ]
-            });         
-
+            });
         } else if (response.status === CecilifierResponseStatus.InternalError) {
             ShowErrorDialog("", response.error, "We've got an internal error.");
         } else if (response.status === CecilifierResponseStatus.MissingAssemblies) {
@@ -961,42 +966,6 @@ function copyToClipboard(elementId) {
     navigator.clipboard.writeText(cecilifiedCode.getValue("\r\n"));
 }
 
-function cecilifyFromGist(counter) {
-    if (websocket.readyState !== WebSocket.OPEN) {
-        if (counter < 4) {
-            setTimeout(cecilifyFromGist, 500, counter + 1);
-        }
-    }
-    else {
-        simulateClick("sendbutton");
-    }
-}
-
-function handleGist(gist, errorAccessingGist) {
-    if (errorAccessingGist.length === 0) {
-        setValueFromGist(gist);
-    } else {
-        setError(errorAccessingGist);
-    }
-}
-
-function setValueFromGist(snippet) {
-    if (snippet === null || snippet.length === 0)
-        return;
-
-    csharpCode.setValue(
-            snippet
-            .replace(/&quot;/g, '"')
-            .replace(/&gt;/g, '>')
-            .replace(/&lt;/g, '<')
-            .replace(/&#x27;/g, "'")
-            .replace(/&#x2B;/g, '+')
-            .replace(/&#x38;/g, '&')
-            .replace(/&amp;/g, '&'));
-
-    cecilifyFromGist(1);
-}
-
 function showSpinner() {
     let spinnerDiv = document.getElementById("spinnerDiv");
     spinnerDiv.style.visibility = "inherit";

Cecilifier.Web/wwwroot/js/cecilifier.snippethandler.js

@@ -0,0 +1,71 @@
+function handleInitialSnippet(gist, errorAccessingGist, requestPath, removeStoredSnippet, defaultSnippet) {
+    let snippet = gist;
+    let autoCecilify = false;
+
+    if (snippet !== null && snippet.length > 0) {
+        if (errorAccessingGist.length !== 0)
+            setError(errorAccessingGist);
+        autoCecilify = true;
+    }
+    else {
+        let snippetName = requestPath !== "/" ? requestPath.substring(1) : "default";
+        if (removeStoredSnippet) {
+            window.localStorage.removeItem(snippetName);
+            SnackBar({
+                message: `Snippet ${snippetName} deleted from local storage.`,
+                dismissible: true,
+                status: "Success",
+                timeout: 10000,
+                icon: "exclamation"
+            });
+            return;
+        }
+
+        snippet = window.localStorage.getItem(snippetName);
+
+        if (snippet === null || snippet.length === 0) 
+            snippet = defaultSnippet;
+
+        onCecilifiySuccessCallbacks = onCecilifiySuccessCallbacks.concat(
+            [
+                {
+                    state: snippetName,
+                    callback: state => {
+                        window.localStorage.setItem(state, csharpCode.getValue("\r\n"));
+                    }
+                }
+            ]);
+    }
+    setValueFromSnippet(snippet, autoCecilify);
+}
+
+function setValueFromSnippet(snippet, autoCecilify) {
+    if (snippet === null || snippet.length === 0)
+        return;
+
+    csharpCode.setValue(
+        snippet
+            .replace(/"/g, '"')
+            .replace(/>/g, '>')
+            .replace(/&lt;/g, '<')
+            .replace(/&#x27;/g, "'")
+            .replace(/&#x2B;/g, '+')
+            .replace(/&#x38;/g, '&')
+            .replace(/&amp;/g, '&'));
+
+    if (autoCecilify)
+        cecilifyFromSnippet(1);
+}
+
+function cecilifyFromSnippet(counter) {
+    if (websocket.readyState !== WebSocket.OPEN) {
+        if (counter < 4) {
+            setTimeout(cecilifyFromSnippet, 500, counter + 1);
+        }
+        else {
+        }
+    }
+    else {
+        simulateClick("sendbutton");
+    }
+}

Cecilifier.Web/wwwroot/js/release_notes.js

@@ -58,7 +58,7 @@ function showReleaseNotes() {
                 message: `Error retrieving release notes.`,
                 dismissible: true,
                 status: "Warning",
-                timeout: 120000,
+                timeout: 45000,
                 icon: "exclamation"
             });