chore: Move "recently used" list into the server storage (microsoft#4909

) Co-authored-by: Andy Brown <[email protected]>
meonBot · Nov 20, 2020 · 9ec8735 · 9ec8735
1 parent fba8138
commit 9ec8735
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 34 deletions.
diff --git a/extensions/packageManager/src/client/Library.tsx b/extensions/packageManager/src/client/Library.tsx
@@ -16,7 +16,6 @@ import { LibraryRef, LibraryList } from './libraryList';
 import { WorkingModal } from './workingModal';
 
 const DEFAULT_CATEGORY = formatMessage('Available');
-const RECENTLY_USED_KEY = 'recentlyUsedItems';
 
 const docsUrl = `https://aka.ms/composer-use-package-library`;
 
@@ -112,38 +111,10 @@ const Library: React.FC = () => {
     return (component.language === programmingLanguageSelection);
   }
 
-  /**
-   * This method will eventually be moved to the server, when we can store this list on disk via an extension mechanism.
-   * For now, we're doing it in the client, using LocalStorage.
-   * The goal is to capture a list of recently used components, and offer them up across projects
-   * @param componentList
-   */
-  const updateRecentlyUsed = (componentList) => {
-
-    componentList.forEach((component) => {
-      if (!recentlyUsed.find((used) => used.name === component.name)) {
-        recentlyUsed.unshift({...component, language: runtimeLanguage });
-      }
-    });
-
-    window.localStorage.setItem(RECENTLY_USED_KEY, JSON.stringify(recentlyUsed));
-    setRecentlyUsed(recentlyUsed);
-
-  }
-
   useEffect(() => {
 
 
     getLibraries();
-    const recent = window.localStorage.getItem(RECENTLY_USED_KEY);
-    if (recent) {
-      try {
-        const list = JSON.parse(recent);
-        setRecentlyUsed(list);
-      } catch(err) {
-        window.localStorage.removeItem(RECENTLY_USED_KEY);
-      }
-    }
 
     if (settings.runtime && settings.runtime.customRuntime === true && settings.runtime.path) {
       setEjectedRuntime(true);
@@ -263,8 +234,6 @@ const Library: React.FC = () => {
       } else {
         updateInstalledComponents(results.data.components);
 
-        updateRecentlyUsed(results.data.components);
-
         // reload modified content
         await reloadProject();
       }
@@ -281,7 +250,8 @@ const Library: React.FC = () => {
   const getLibraries = async () => {
     try {
       const response = await getLibraryAPI();
-      updateAvailableLibraries(response.data);
+      updateAvailableLibraries(response.data.available);
+      setRecentlyUsed(response.data.recentlyUsed);
     } catch (err) {
       setApplicationLevelError({
         status: err.response.status,

diff --git a/extensions/packageManager/src/node/index.ts b/extensions/packageManager/src/node/index.ts
@@ -10,6 +10,17 @@ import { SchemaMerger } from '@microsoft/bf-dialog/lib/library/schemaMerger';
 const API_ROOT = '/api';
 
 export default async (composer: IExtensionRegistration): Promise<void> => {
+
+  const updateRecentlyUsed = (componentList, runtimeLanguage) => {
+    const recentlyUsed = composer.store.read('recentlyUsed') as any[] || [];
+    componentList.forEach((component) => {
+      if (!recentlyUsed.find((used) => used.name === component.name)) {
+        recentlyUsed.unshift({...component, language: runtimeLanguage });
+      }
+    });
+    composer.store.write('recentlyUsed', recentlyUsed);
+  }
+
   const LibraryController = {
     getLibrary: async function (req, res) {
       // read the list of sources from the config file.
@@ -38,7 +49,14 @@ export default async (composer: IExtensionRegistration): Promise<void> => {
           composer.log(err);
         }
       }
-      res.json(combined);
+
+      // add recently used
+      const recentlyUsed = composer.store.read('recentlyUsed') as any[] || [];
+
+      res.json({
+        available: combined,
+        recentlyUsed: recentlyUsed,
+      });
     },
     getComponents: async function (req, res) {
       const user = await composer.context.getUserFromRequest(req);
@@ -82,6 +100,7 @@ export default async (composer: IExtensionRegistration): Promise<void> => {
         });
       }
     },
+
     import: async function (req, res) {
       const user = await composer.context.getUserFromRequest(req);
       const projectId = req.params.projectId;
@@ -156,11 +175,20 @@ export default async (composer: IExtensionRegistration): Promise<void> => {
             );
 
             const mergeResults = await realMerge.merge();
+            const installedComponents = mergeResults.components.filter((c) => c.includesSchema || c.includesExports);
             if (mergeResults) {
               res.json({
                 success: true,
-                components: mergeResults.components.filter((c) => c.includesSchema || c.includesExports),
+                components: installedComponents,
               });
+
+              let runtimeLanguage = 'c#';
+              if (currentProject.settings.runtime.key === 'node-azurewebapp') {
+                runtimeLanguage = 'js';
+              }
+              updateRecentlyUsed(installedComponents, runtimeLanguage);
+
+
             } else {
               res.json({
                 success: false,