Integrated new wrapper class of settings api to our codebase and refactored our codebase

Author: jahn96

package.json

@@ -94,7 +94,7 @@
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.20.4",
-    "husky": "^4.2.5",
+    "husky": "^5.1.1",
     "jest": "^26.6.3",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^10.2.13",

src/CodeSnippetDisplay.tsx

@@ -154,6 +154,7 @@ interface ICodeSnippetDisplayProps {
   getCurrentWidget: () => Widget;
   openCodeSnippetEditor: (args: any) => void;
   editorServices: IEditorServices;
+  updateCodeSnippetWidget: () => void;
 }
 
 /**
@@ -179,7 +180,7 @@ export class CodeSnippetDisplay extends React.Component<
   constructor(props: ICodeSnippetDisplayProps) {
     super(props);
     this.state = {
-      codeSnippets: this.props.codeSnippets,
+      codeSnippets: props.codeSnippets,
       matchIndices: [],
       searchValue: '',
       filterTags: []
@@ -398,10 +399,13 @@ export class CodeSnippetDisplay extends React.Component<
     new_element.onblur = async (): Promise<void> => {
       if (target.innerHTML !== new_element.value) {
         const newName = new_element.value;
-        try {
-          await this.props.codeSnippetManager.renameSnippet(oldName, newName);
-        } catch (error) {
-          if (error.message === 'Duplicate Name of Code Snippet'){
+        this.props.codeSnippetManager.renameSnippet(oldName, newName).then(async (res:boolean) => {
+          if (res){
+            console.log(target);
+            console.log(new_element);
+            target.innerHTML = new_element.value;
+          }
+          else{
             new_element.replaceWith(target);
 
             await showDialog({
@@ -411,8 +415,7 @@ export class CodeSnippetDisplay extends React.Component<
             });
             return;
           }
-        }
-        target.innerHTML = new_element.value;
+        });
       }
       new_element.replaceWith(target);
     };
@@ -1217,19 +1220,24 @@ export class CodeSnippetDisplay extends React.Component<
   };
 
   static getDerivedStateFromProps(
-    props: ICodeSnippetDisplayProps,
-    state: ICodeSnippetDisplayState
+    nextProps: ICodeSnippetDisplayProps,
+    prevState: ICodeSnippetDisplayState
   ): ICodeSnippetDisplayState {
-    if (state.searchValue === '' && state.filterTags.length === 0) {
+    console.log('getDerivedStateFromProps');
+    console.log(prevState);
+    console.log(nextProps);
+
+    // this is why state doesn't change
+    if (prevState.searchValue === '' && prevState.filterTags.length === 0) {
       return {
-        codeSnippets: props.codeSnippets,
+        codeSnippets: nextProps.codeSnippetManager.snippets,
         matchIndices: [],
         searchValue: '',
         filterTags: []
       };
     }
 
-    if (state.searchValue !== '' || state.filterTags.length !== 0) {
+    if (prevState.searchValue !== '' || prevState.filterTags.length !== 0) {
       // const newSnippets = props.codeSnippets.filter(codeSnippet => {
       //   return (
       //     state.matchIndices[codeSnippet.id] !== null ||
@@ -1242,10 +1250,10 @@ export class CodeSnippetDisplay extends React.Component<
       //   );
       // });
       return {
-        codeSnippets: state.codeSnippets,
-        matchIndices: state.matchIndices,
-        searchValue: state.searchValue,
-        filterTags: state.filterTags
+        codeSnippets: prevState.codeSnippets,
+        matchIndices: prevState.matchIndices,
+        searchValue: prevState.searchValue,
+        filterTags: prevState.filterTags
       };
     }
     return null;
@@ -1360,22 +1368,24 @@ export class CodeSnippetDisplay extends React.Component<
         if (editor) {
           editor.dispose();
         }
-
         // deleting snippets when there is one snippet active
-        this.props.codeSnippetManager.deleteSnippet(codeSnippet.id).then(snippets => {
-
-          console.log('delete');
-          console.log(snippets);
-          console.log(this.props.codeSnippetManager.snippets);
+        this.props.codeSnippetManager.deleteSnippet(codeSnippet.id).then((result: boolean) => {
+          if (result){
+            this.props.updateCodeSnippetWidget();
+          }
+          else{
+            console.log('Error in deleting the snippet');
+            return;
+          }
 
           // active tags after delete
-          const activeTags = this.getActiveTags();
+          // const activeTags = this.getActiveTags();
 
           // filterTags: only the tags that are still being used
-          this.setState(state => ({
-            codeSnippets: snippets,
-            filterTags: state.filterTags.filter(tag => activeTags.includes(tag))
-          }), () => console.log(this.state));
+          // this.setState(state => ({
+          //   codeSnippets: snippets,
+          //   filterTags: state.filterTags.filter(tag => activeTags.includes(tag))
+          // }), () => console.log(this.state));
         });
         // this.props._codeSnippetWidgetModel.deleteSnippet(codeSnippet.id);
         // this.props._codeSnippetWidgetModel.reorderSnippet();
@@ -1467,7 +1477,7 @@ export class CodeSnippetDisplay extends React.Component<
                 description: '',
                 language: 'Python',
                 code: [],
-                id: -1,
+                id: 0,
                 allTags: this.getActiveTags(),
                 fromScratch: true
               });

src/CodeSnippetEditor.tsx

@@ -436,11 +436,24 @@ export class CodeSnippetEditor extends ReactWidget {
 
     // add new snippet
     if(this._codeSnippetEditorMetaData.fromScratch){
-      await this.contentsService.addSnippet(newSnippet);
+      this.contentsService.addSnippet(newSnippet).then((res: boolean) => {
+        if (!res){
+          console.log("Error in adding snippet");
+          return false;
+        }
+      });
     }
     // modify existing snippet
     else{
-      await this.contentsService.modifyExistingSnippet(oldName, newSnippet);
+      console.log('modify existing snippet');
+      console.log(oldName);
+      console.log(newSnippet);
+      this.contentsService.modifyExistingSnippet(oldName, newSnippet).then((res: boolean) => {
+        if (!res){
+          console.log("Error in modifying snippet");
+          return false;
+        }
+      });
     }
 
     this.saved = true;

src/CodeSnippetInputDialog.ts

@@ -84,6 +84,8 @@ export function CodeSnippetInputDialog(
       return null;
     }
 
+    console.log(idx);
+
     if (validateForm(result) === false) {
       return CodeSnippetInputDialog(codeSnippetWidget, code, idx); // This works but it wipes out all the data they entered previously...
     } else {
@@ -129,7 +131,12 @@ function createNewSnippet(
   newSnippet: ICodeSnippet,
   codeSnippetManager: CodeSnippetService
 ): void {
-  codeSnippetManager.addSnippet(newSnippet);
+  codeSnippetManager.addSnippet(newSnippet).then((res: boolean) => {
+    if (!res) {
+      console.log('Error in adding snippet');
+      return;
+    }
+  });
 
   console.log('add');
   console.log(codeSnippetManager.snippets);
@@ -173,11 +180,21 @@ async function saveOverWriteFile(
     if (value) {
       newSnippet.id = oldSnippet.id;
 
-      codeSnippetManager.deleteSnippet(oldSnippet.id);
-      codeSnippetManager.addSnippet(newSnippet);
+      codeSnippetManager.deleteSnippet(oldSnippet.id).then((res: boolean) => {
+        if (!res) {
+          console.log('Error in overwriting a snippet (delete)');
+          return;
+        }
+      });
+      codeSnippetManager.addSnippet(newSnippet).then((res: boolean) => {
+        if (!res) {
+          console.log('Error in overwriting a snippet (add)');
+          return;
+        }
+      });
       return codeSnippetManager.snippets;
     }
-    return Promise.reject('File not renamed');
+    return null;
   });
 }
 

src/CodeSnippetService.ts

@@ -86,25 +86,33 @@ export class CodeSnippetService {
 
   // }
 
-  async addSnippet(snippet: ICodeSnippet): Promise<void> {
-    const numSnippets = this.codeSnippetList.length;
+  async addSnippet(snippet: ICodeSnippet): Promise<boolean> {
     const id = snippet.id;
+    console.log(id);
     this.codeSnippetList.splice(id, 0, snippet);
 
-    let i = id;
+    console.log(this.codeSnippetList);
+
+    const numSnippets = this.codeSnippetList.length;
+
+    // update id's of snippets.
+    let i = id + 1;
     for (; i < numSnippets; i++) {
       this.codeSnippetList[i].id += 1;
     }
 
+    console.log(this.codeSnippetList);
+
     console.log(this.codeSnippetList);
     await this.settingManager
       .set('snippets', (this.codeSnippetList as unknown) as PartialJSONValue)
-      .catch(e => {
-        throw e;
+      .catch(_ => {
+        return false;
       });
+    return true;
   }
 
-  async deleteSnippet(id: number): Promise<ICodeSnippet[]> {
+  async deleteSnippet(id: number): Promise<boolean> {
     let numSnippets = this.codeSnippetList.length;
 
     // should never satisfy this condition
@@ -126,18 +134,19 @@ export class CodeSnippetService {
 
     await this.settingManager
       .set('snippets', (this.codeSnippetList as unknown) as PartialJSONValue)
-      .catch(e => {
-        throw e;
+      .catch(_ => {
+        return false;
       });
 
-    return this.codeSnippetList;
+    return true;
   }
 
-  async renameSnippet(oldName: string, newName: string): Promise<void> {
+  async renameSnippet(oldName: string, newName: string): Promise<boolean> {
+    console.log('renaming');
     try {
       this.duplicateNameExists(newName);
     } catch (e) {
-      throw e;
+      return false;
     }
 
     for (const snippet of this.codeSnippetList) {
@@ -148,9 +157,10 @@ export class CodeSnippetService {
     }
     await this.settingManager
       .set('snippets', (this.codeSnippetList as unknown) as PartialJSONValue)
-      .catch(e => {
-        throw e;
+      .catch(_ => {
+        return false;
       });
+    return true;
   }
 
   duplicateNameExists(newName: string): void {
@@ -164,22 +174,28 @@ export class CodeSnippetService {
   async modifyExistingSnippet(
     oldName: string,
     newSnippet: ICodeSnippet
-  ): Promise<void> {
+  ): Promise<boolean> {
+    console.log(this.codeSnippetList);
     for (let snippet of this.codeSnippetList) {
       if (snippet.name == oldName) {
-        snippet = newSnippet;
+        this.codeSnippetList.splice(snippet.id, 1, newSnippet);
         break;
       }
     }
 
+    console.log(this.codeSnippetList);
+
     await this.settingManager
       .set('snippets', (this.codeSnippetList as unknown) as PartialJSONValue)
-      .catch(e => {
-        throw e;
+      .catch(_ => {
+        return false;
       });
+    return true;
   }
 
-  async moveSnippet(fromIdx: number, toIdx: number): Promise<void> {
+  async moveSnippet(fromIdx: number, toIdx: number): Promise<boolean> {
+    console.log(fromIdx);
+    console.log(toIdx);
     if (toIdx > fromIdx) {
       toIdx = toIdx - 1;
     }
@@ -188,26 +204,43 @@ export class CodeSnippetService {
       return;
     }
 
+    const snippetToMove = this.codeSnippetList[fromIdx];
+    this.deleteSnippet(fromIdx).then((res: boolean) => {
+      if (!res) {
+        console.log('Error in moving snippet(delete)');
+        return false;
+      }
+    });
+    snippetToMove.id = toIdx;
+    this.addSnippet(snippetToMove).then((res: boolean) => {
+      if (!res) {
+        console.log('Error in moving snippet(add)');
+        return false;
+      }
+    });
+
     await this.settingManager
       .set('snippets', (this.codeSnippetList as unknown) as PartialJSONValue)
-      .catch(e => {
-        throw e;
+      .catch(_ => {
+        return false;
       });
+    return true;
   }
 
   private sortSnippets(): void {
     this.codeSnippetList.sort((a, b) => a.id - b.id);
   }
 
   // order snippets just in case when it gets shared between users
-  async orderSnippets(): Promise<void> {
+  async orderSnippets(): Promise<boolean> {
     this.sortSnippets();
     this.codeSnippetList.forEach((snippet, i) => (snippet.id = i));
 
     await this.settingManager
       .set('snippets', (this.codeSnippetList as unknown) as PartialJSONValue)
-      .catch(e => {
-        throw e;
+      .catch(_ => {
+        return false;
       });
+    return true;
   }
 }