Package Update and Code Refactoring (#248)

* Install new language server package

* Update activeEditor on project updates

* Prettify

* Refactor model change synchronization

* Update color of the status dots

Author: MaxStalker

package-lock.json

@@ -13,7 +13,7 @@
     "@apollo/react-hooks": "^3.1.3",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
-    "@onflow/cadence-language-server": "^0.20.2",
+    "@onflow/cadence-language-server": "^0.23.0",
     "@reach/router": "^1.3.4",
     "@types/file-saver": "^2.0.1",
     "apollo-cache-inmemory": "^1.6.6",

package.json

@@ -3,8 +3,8 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 import { useProject } from 'providers/Project/projectHooks';
 import { EntityType } from 'providers/Project';
-import debounce from 'util/debounce';
 import configureCadence, { CADENCE_LANGUAGE_ID } from 'util/cadence';
+import debounce from 'util/debounce';
 
 import Notifications from './Notifications';
 import ControlPanel from './ControlPanel';
@@ -86,18 +86,17 @@ const CadenceEditor = (props: any) => {
 
   // Method to use, when model was changed
   const debouncedModelChange = debounce(() => {
-    // we will ignore text line, cause onChange is different for readme and other scripts
-    // @ts-ignore
-    project.active.onChange(editor.getValue());
-  }, 50);
+    if (project.project?.accounts) {
+      // we will ignore text line, cause onChange is based on active type
+      // @ts-ignore
+      project.active.onChange(editor.getValue());
+    }
+  }, 100);
 
-  useEffect(configureCadence, []);
-  useEffect(() => {
-    // TODO: save/restore view state with:
-    //  - use ref to track current active id
-    //  - const oldState = editor.saveViewState();
-    if (editor) {
-      // Remove tracking of model updates to prevent re-rendering
+  //@ts-ignore
+  const setupEditor = () => {
+    const projectExist = project && project.project.accounts;
+    if (editor && projectExist) {
       if (editorOnChange.current) {
         editorOnChange.current.dispose();
       }
@@ -116,6 +115,11 @@ const CadenceEditor = (props: any) => {
         editor.focus();
       } else {
         // - Add new line at the end of the model
+        // Remove tracking of model updates to prevent re-rendering
+        if (editorOnChange.current) {
+          editorOnChange.current.dispose();
+        }
+
         newState.model.setValue(code + '\n');
         lastEdit.current = {
           type: project.active.type,
@@ -126,19 +130,27 @@ const CadenceEditor = (props: any) => {
         editor.setModel(newState.model);
         editor.restoreViewState(newState.viewState);
         editor.focus();
-
         editor.layout();
 
-        setTimeout(()=>{
-          console.log("Restore back!")
+        setTimeout(() => {
           newState.model.setValue(code);
-        }, 150)
+        }, 150);
       }
+      editorOnChange.current = editor.onDidChangeModelContent(
+        debouncedModelChange,
+      );
+    }
+  };
 
-      editorOnChange.current =
-        editor.onDidChangeModelContent(debouncedModelChange);
+  useEffect(() => {
+    configureCadence();
+  }, []);
+
+  useEffect(() => {
+    if (editor) {
+      setupEditor();
     }
-  }, [project.active, project.project.accounts]);
+  }, [editor, project.active.index, project.active.type]);
 
   // "initEditor" will create new instance of Monaco Editor and set it up
   const initEditor = async () => {
@@ -168,6 +180,7 @@ const CadenceEditor = (props: any) => {
 
     // Save editor in component state
     setEditor(editor);
+    setupEditor();
   };
 
   // "destroyEditor" is used to dispose of Monaco Editor instance, when the component is unmounted (for any reasons)

src/components/CadenceEditor/index.tsx

@@ -28,7 +28,7 @@ export const Dot = styled.div<DotType>`
   height: var(--size);
   border-radius: var(--size);
   background-color: ${({ active = false }) => {
-    return active === 'OFF' ? '#ff006f' : '#00ff76';
+    return active === 'OFF' ? '#ee431e' : '#00ff76';
   }};
 `;
 

src/components/CadenceVersion.tsx

@@ -1,10 +1,9 @@
-import {useEffect, useState, useMemo} from 'react';
+import { useEffect, useState } from 'react';
 import { CadenceLanguageServer, Callbacks } from 'util/language-server';
 import { MonacoServices } from 'monaco-languageclient/lib/monaco-services';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { createCadenceLanguageClient } from 'util/language-client';
 import { useProject } from 'providers/Project/projectHooks';
-import debounce from "util/debounce";
 
 let monacoServicesInstalled = false;
 
@@ -20,17 +19,13 @@ async function startLanguageServer(callbacks: any, getCode: any, ops) {
         callbacks.getAddressCode = getCode;
         setCallbacks(callbacks);
         setLanguageServer(server);
-        console.log("%c LS: Is Up!",'color: #00FF00')
+        console.log('%c LS: Is Up!', 'color: #00FF00');
       }
     }, 100);
   });
 }
 
-const launchLanguageClient = async (
-  callbacks,
-  languageServer,
-  setLanguageClient,
-) => {
+const launchLanguageClient = async (callbacks, languageServer, setLanguageClient) => {
   if (languageServer) {
     const newClient = createCadenceLanguageClient(callbacks);
     newClient.start();
@@ -84,28 +79,19 @@ export default function useLanguageServer() {
   };
 
   const restartServer = () => {
-    console.log("Restarting server...")
+    console.log('Restarting server...');
 
     startLanguageServer(callbacks, getCode, {
       setLanguageServer,
       setCallbacks,
     });
   };
 
-  const debouncedServerRestart = useMemo(
-      () => debounce(restartServer, 150),
-      [languageServer]
-  )
-
-  useEffect(()=>{
-    if(languageServer){
-      languageServer.updateCodeGetter(getCode)
+  useEffect(() => {
+    if (languageServer) {
+      languageServer.updateCodeGetter(getCode);
     }
-  },[project.project.accounts])
-
-  // TODO: Disable this, once the cadence language server package is updated
-  useEffect(debouncedServerRestart, [project.project.accounts, project.active]);
-
+  }, [project.project.accounts]);
 
   useEffect(() => {
     // The Monaco Language Client services have to be installed globally, once.
@@ -122,7 +108,7 @@ export default function useLanguageServer() {
   }, []);
 
   useEffect(() => {
-    if(!languageClient){
+    if (!languageClient) {
       launchLanguageClient(callbacks, languageServer, setLanguageClient).then();
     }
   }, [languageServer]);

src/hooks/useLanguageServer.ts

@@ -351,7 +351,7 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
 
   const activeEditor = useMemo(
       getActiveEditor,
-      [active.type, active.index]
+      [active.type, active.index, project]
   )
 
   const location = useLocation();