Resolved issue of event listeners piling up and not being removed after use

Author: tsully

app/electron/preload.js

@@ -5,7 +5,8 @@ const { existsSync, writeFileSync, mkdirSync, writeFile } = require('fs');
 const formatCode = require('./preloadFunctions/format');
 const {
   chooseAppDir,
-  appDirChosen
+  addAppDirChosenListener,
+  removeAllAppDirChosenListeners
 } = require('./preloadFunctions/chooseAppDir');
 
 // Expose protected methods that allow the renderer process to use
@@ -19,7 +20,8 @@ const {
 contextBridge.exposeInMainWorld('api', {
   formatCode: formatCode,
   chooseAppDir: chooseAppDir,
-  appDirChosen: appDirChosen,
+  addAppDirChosenListener: addAppDirChosenListener,
+  removeAllAppDirChosenListeners: removeAllAppDirChosenListeners,
   existsSync: existsSync,
   writeFileSync: writeFileSync,
   mkdirSync: mkdirSync,

app/electron/preloadFunctions/chooseAppDir.js

@@ -6,10 +6,20 @@ const chooseAppDir = () => {
 
 // once an app directory is chosen, the main process will send an "app_dir_selected" event
 // when this event occurs, exucte the callback passed in by the user
-const appDirChosen = callback => {
+const addAppDirChosenListener = callback => {
   return ipcRenderer.on('app_dir_selected', (event, path) => {
     callback(path);
   });
 };
 
-module.exports = { chooseAppDir, appDirChosen };
+// removes all listeners for the app_dir_selected event
+// this is important because otherwise listeners will pile up and events will trigger multiple events
+const removeAllAppDirChosenListeners = () => {
+  ipcRenderer.removeAllListeners('app_dir_selected');
+};
+
+module.exports = {
+  chooseAppDir,
+  addAppDirChosenListener,
+  removeAllAppDirChosenListeners
+};

app/src/containers/LeftContainer.tsx

@@ -79,7 +79,6 @@ const LeftContainer = (): JSX.Element => {
         primBtnAction: null,
         primBtnLabel: null,
         secBtnAction: () => {
-          // TODO: Create reducer to delete components from state
           closeModal();
         }
       })
@@ -95,17 +94,6 @@ const LeftContainer = (): JSX.Element => {
             key={i}
             button
             onClick={() => chooseGenOptions(i)}
-            // onClick={() =>
-            //   createApplication({
-            //     // path,
-            //     // trying this with an absolute path because the electron dialogue box isn't working
-            //     path: '/Users/tylersullberg/',
-            //     components,
-            //     genOption,
-            //     appName: 'reactype_app',
-            //     exportAppBool: null
-            //   })
-            // }
             style={{
               border: '1px solid #3f51b5',
               marginBottom: '2%',
@@ -117,38 +105,32 @@ const LeftContainer = (): JSX.Element => {
         ))}
       </List>
     );
-    // const chooseAppDir = () => {
-    //   console.log('CALLED CHOOSE APP DIR: ', genOption);
-    //   window.api.chooseAppDir();
-    // };
-    
+
     // helper function called by showGenerateAppModal
     // this function will prompt the user to choose an app directory once they've chosen their export option
     const chooseGenOptions = (genOpt: number) => {
       // set export option: 0 --> export only components, 1 --> export full project
-      
-      // setGenOption(genOpt);
       genOption = genOpt;
-      console.log('CALLED CHOOSE GEN OPTION: ', genOption);
-      // closeModal
-      // exportProject('/Users', 'NEW PROJECT', genOpt, state.components, state.rootComponents);
-      // closeModal();
-      // Choose app dir
-      // window.api.chooseAppDir;
-      
       window.api.chooseAppDir();
-      
-      // closeModal
-
       closeModal();
     };
 
+    // removes all listeners for the app_dir_selected event
+    // this is important because otherwise listeners will pile up and events will trigger multiple events
+    window.api.removeAllAppDirChosenListeners();
+
     // add listener for when an app directory is chosen
     // when a directory is chosen, the callback will export the project to the chosen folder
     // Note: this listener is imported from the main process via preload.js
-    window.api.appDirChosen(path => {
+    window.api.addAppDirChosenListener(path => {
       console.log('CALLED APPDIRCHOSEN: ', genOption);
-      exportProject(path, 'NEW PROJECT', genOption, state.components, state.rootComponents);
+      exportProject(
+        path,
+        'NEW PROJECT',
+        genOption,
+        state.components,
+        state.rootComponents
+      );
     });
 
     setModal(