Add logics to store the selectedDrives list to get it back when the d…

…ialog is closed and reopened and change the components interfaces to avoid the duplication of methods used to update the the seledtedDrives.
QuantStack · Nov 3, 2023 · eb55f35 · eb55f35
1 parent 781da3a
commit eb55f35
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 88 deletions.
diff --git a/src/drivelistmanager.tsx b/src/drivelistmanager.tsx
@@ -18,9 +18,10 @@ export interface IDrive {
 }
 
 export interface IDriveInputProps {
+  isName: boolean;
   value: string;
   getValue: (event: any) => void;
-  updateSelectedDrives: (item: string) => void;
+  updateSelectedDrives: (item: string, isName: boolean) => void;
 }
 export function DriveInputComponent(props: IDriveInputProps) {
   return (
@@ -33,7 +34,7 @@ export function DriveInputComponent(props: IDriveInputProps) {
         <Button
           className="input-add-drive-button"
           onClick={() => {
-            props.updateSelectedDrives(props.value);
+            props.updateSelectedDrives(props.value, props.isName);
           }}
         >
           add drive
@@ -43,9 +44,11 @@ export function DriveInputComponent(props: IDriveInputProps) {
   );
 }
 interface ISearchListProps {
+  isName: boolean;
+  value: string;
   filteredList: Array<string>;
   filter: (value: any) => void;
-  updateSelectedDrives: (item: string) => void;
+  updateSelectedDrives: (item: string, isName: boolean) => void;
 }
 
 export function DriveSearchListComponent(props: ISearchListProps) {
@@ -67,7 +70,7 @@ export function DriveSearchListComponent(props: ISearchListProps) {
               <Button
                 className="search-add-drive-button"
                 onClick={() => {
-                  props.updateSelectedDrives(item);
+                  props.updateSelectedDrives(item, true);
                 }}
               >
                 add drive
@@ -152,30 +155,18 @@ export function DriveListManagerComponent(props: IProps) {
     return isIncluded;
   };
 
-  const updateDrivesSelectedByName = (item: string) => {
+  const updateSelectedDrives = (item: string, isName: boolean) => {
     updatedSelectedDrives = [...props.model.selectedDrives];
-    const pickedDrive: IDrive = { name: driveName, url: '' };
-    const checkDrive = isDriveAlreadySelected(
-      pickedDrive,
-      updatedSelectedDrives
-    );
-    if (checkDrive === false) {
-      updatedSelectedDrives.push(pickedDrive);
+    let pickedDrive: IDrive;
+    if (isName) {
+      pickedDrive = { name: driveName, url: '' };
     } else {
-      console.log('The selected drive is already in the list');
-    }
-
-    setSelectedDrives(updatedSelectedDrives);
-    props.model.selectedDrives = updatedSelectedDrives;
-  };
-
-  const updateDrivesSelectedByUrl = (item: string) => {
-    updatedSelectedDrives = [...props.model.selectedDrives];
-    if (item !== driveUrl) {
-      setDriveUrl(item);
+      if (item !== driveUrl) {
+        setDriveUrl(item);
+      }
+      pickedDrive = { name: '', url: driveUrl };
     }
 
-    const pickedDrive: IDrive = { name: '', url: driveUrl };
     const checkDrive = isDriveAlreadySelected(
       pickedDrive,
       updatedSelectedDrives
@@ -187,7 +178,7 @@ export function DriveListManagerComponent(props: IProps) {
     }
 
     setSelectedDrives(updatedSelectedDrives);
-    props.model.selectedDrives = updatedSelectedDrives;
+    props.model.setSelectedDrives(updatedSelectedDrives);
   };
 
   const getValue = (event: any) => {
@@ -220,17 +211,24 @@ export function DriveListManagerComponent(props: IProps) {
             <label> Enter a drive URL</label>
             <label> </label>
             <DriveInputComponent
+              isName={false}
               value={driveUrl}
               getValue={getValue}
-              updateSelectedDrives={updateDrivesSelectedByUrl}
+              updateSelectedDrives={(value, isName) =>
+                updateSelectedDrives(value, isName)
+              }
             />
 
             <label> Select drive(s) from list</label>
             <label> </label>
             <DriveSearchListComponent
+              isName={true}
+              value={driveName}
               filteredList={nameFilteredList}
               filter={filter}
-              updateSelectedDrives={updateDrivesSelectedByName}
+              updateSelectedDrives={(value, isName) =>
+                updateSelectedDrives(value, isName)
+              }
             />
           </div>
 
@@ -257,6 +255,9 @@ export class DriveListModel extends VDomModel {
     this.availableDrives = availableDrives;
     this.selectedDrives = selectedDrives;
   }
+  setSelectedDrives(selectedDrives: IDrive[]) {
+    this.selectedDrives = selectedDrives;
+  }
 }
 
 export class DriveListView extends VDomRenderer<DriveListModel> {

diff --git a/src/index.ts b/src/index.ts
@@ -51,74 +51,86 @@ const openDriveDialogPlugin: JupyterFrontEndPlugin<void> = {
     const { commands } = app;
     const { tracker } = factory;
     const trans = translator.load('jupyter_drives');
+    const selectedDrivesModelMap = new Map<IDrive[], DriveListModel>();
 
-    commands.addCommand(CommandIDs.openDrivesDialog, {
-      execute: args => {
-        const widget = tracker.currentWidget;
-        const selectedDrives: IDrive[] = [
-          {
-            name: 'CoconutDrive',
-            url: '/coconut/url'
-          }
-        ];
+    let selectedDrives: IDrive[] = [
+      {
+        name: 'CoconutDrive',
+        url: '/coconut/url'
+      }
+    ];
 
-        const availableDrives: IDrive[] = [
-          {
-            name: 'CoconutDrive',
-            url: '/coconut/url'
-          },
-          {
-            name: 'PearDrive',
-            url: '/pear/url'
-          },
-          {
-            name: 'StrawberryDrive',
-            url: '/strawberrydrive/url'
-          },
-          {
-            name: 'BlueberryDrive',
-            url: '/blueberrydrive/url'
-          },
-          {
-            name: '',
-            url: '/mydrive/url'
-          },
-          {
-            name: 'RaspberryDrive',
-            url: '/raspberrydrive/url'
-          },
+    const availableDrives: IDrive[] = [
+      {
+        name: 'CoconutDrive',
+        url: '/coconut/url'
+      },
+      {
+        name: 'PearDrive',
+        url: '/pear/url'
+      },
+      {
+        name: 'StrawberryDrive',
+        url: '/strawberrydrive/url'
+      },
+      {
+        name: 'BlueberryDrive',
+        url: '/blueberrydrive/url'
+      },
+      {
+        name: '',
+        url: '/mydrive/url'
+      },
+      {
+        name: 'RaspberryDrive',
+        url: '/raspberrydrive/url'
+      },
 
-          {
-            name: 'PineAppleDrive',
-            url: ''
-          },
+      {
+        name: 'PineAppleDrive',
+        url: ''
+      },
 
-          { name: 'PomeloDrive', url: '/https://pomelodrive/url' },
-          {
-            name: 'OrangeDrive',
-            url: ''
-          },
-          {
-            name: 'TomatoDrive',
-            url: ''
-          },
-          {
-            name: '',
-            url: 'superDrive/url'
-          },
-          {
-            name: 'AvocadoDrive',
-            url: ''
-          }
-        ];
+      { name: 'PomeloDrive', url: '/https://pomelodrive/url' },
+      {
+        name: 'OrangeDrive',
+        url: ''
+      },
+      {
+        name: 'TomatoDrive',
+        url: ''
+      },
+      {
+        name: '',
+        url: 'superDrive/url'
+      },
+      {
+        name: 'AvocadoDrive',
+        url: ''
+      }
+    ];
+    let model = selectedDrivesModelMap.get(selectedDrives);
+
+    //const model = new DriveListModel(availableDrives, selectedDrives);
 
-        const model = new DriveListModel(availableDrives, selectedDrives);
+    commands.addCommand(CommandIDs.openDrivesDialog, {
+      execute: args => {
+        const widget = tracker.currentWidget;
 
+        if (!model) {
+          model = new DriveListModel(availableDrives, selectedDrives);
+          selectedDrivesModelMap.set(selectedDrives, model);
+        } else {
+          selectedDrives = model.selectedDrives;
+          selectedDrivesModelMap.set(selectedDrives, model);
+        }
         if (widget) {
-          showDialog({
-            body: new DriveListView(model),
-            buttons: [Dialog.cancelButton()]
-          });
+          if (model) {
+            showDialog({
+              body: new DriveListView(model),
+              buttons: [Dialog.cancelButton()]
+            });
+          }
         }
       },