Remove pnp from RecentTab.

Refactor. Fix bugs.

Author: Piotr Siatka

src/controls/filePicker/FilePicker.tsx

@@ -25,11 +25,13 @@ import { OneDriveFilesTab } from './OneDriveFilesTab';
 import { OneDriveService } from '../../services/OneDriveService';
 import { OrgAssetsService } from '../../services/OrgAssetsService';
 import { IFilePickerResult } from './FilePicker.types';
+import { FilesSearchService } from '../../services/FilesSearchService';
 
 export class FilePicker extends React.Component<IFilePickerProps, IFilePickerState> {
   private fileBrowserService: FileBrowserService;
   private oneDriveService: OneDriveService;
   private orgAssetsService: OrgAssetsService;
+  private fileSearchService: FilesSearchService;
 
   constructor(props: IFilePickerProps) {
     super(props);
@@ -38,6 +40,7 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
     this.fileBrowserService = new FileBrowserService(props.webPartContext);
     this.oneDriveService = new OneDriveService(props.webPartContext);
     this.orgAssetsService = new OrgAssetsService(props.webPartContext);
+    this.fileSearchService = new FilesSearchService(props.webPartContext, this.props.bingAPIKey);
 
     this.state = {
       panelOpen: false,
@@ -65,8 +68,8 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
       accepts: accepts,
       context: this.props.webPartContext,
       onClose: () => this._handleClosePanel(),
-      onSave: (value: IFilePickerResult) => { this._handleSave(value) }
-    }
+      onSave: (value: IFilePickerResult) => { this._handleSave(value); }
+    };
 
     return (
       <div >
@@ -131,7 +134,7 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
             {
               this.state.selectedTab === "keyWeb" &&
               <WebSearchTab
-                bingAPIKey={this.props.bingAPIKey}
+                bingSearchService={this.fileSearchService}
                 {...linkTabProps}
               />
             }
@@ -145,6 +148,7 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
             {
               this.state.selectedTab === "keyRecent" &&
               <RecentFilesTab
+                fileSearchService={this.fileSearchService}
                 {...linkTabProps}
               />
             }

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

@@ -11,6 +11,7 @@ import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/compone
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 
 // PnP
+//TODO: Remove pnp
 import { FetchClient } from "@pnp/common";
 
 // Localized strings

src/controls/filePicker/RecentFilesTab/IRecentFilesTabProps.ts

@@ -1,3 +1,6 @@
 import { IFilePickerTab } from "..";
+import { FilesSearchService } from "../../../services/FilesSearchService";
 
-export interface IRecentFilesTabProps extends IFilePickerTab { }
+export interface IRecentFilesTabProps extends IFilePickerTab {
+  fileSearchService: FilesSearchService;
+}

src/controls/filePicker/RecentFilesTab/IRecentFilesTabState.ts

@@ -1,5 +1,5 @@
-import { IRecentFile } from ".";
 import { IFilePickerResult } from "../FilePicker.types";
+import { IRecentFile } from "../../../services/FilesSearchService.types";
 
 export interface IRecentFilesTabState {
   results: IRecentFile[];

src/controls/filePicker/RecentFilesTab/RecentFilesTab.tsx

@@ -15,15 +15,14 @@ import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { Check } from 'office-ui-fabric-react/lib/Check';
 
 // Custom props and states
-import { IRecentFilesTabProps, IRecentFilesTabState, IRecentFile } from '.';
+import { IRecentFilesTabProps, IRecentFilesTabState } from '.';
 
 // Localized resources
 import * as strings from 'ControlStrings';
 
 // PnP
-import { sp, SearchResults, SearchResult } from "@pnp/sp";
 import { Placeholder } from '../../../Placeholder';
-import { IFilePickerResult } from '../FilePicker.types';
+import { IRecentFile } from '../../../services/FilesSearchService.types';
 
 /**
  * Rows per page
@@ -87,81 +86,13 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
   /**
    * Gets the most recently used files
    */
-  public componentDidMount(): void {
-    const { absoluteUrl } = this.props.context.pageContext.web;
+  public async componentDidMount() {
+    const recentFilesResult = await this.props.fileSearchService.executeRecentSearch(this.props.accepts);
+    this._selection.setItems(recentFilesResult, true);
 
-    // Build a filter criteria for each accepted file type, if applicable
-    const fileFilter: string = this._getFileFilter();
-
-    // // This is how you make two promises at once and wait for both results to return
-    // // TODO: research to see if there is a way to get this info in one call. Perhaps as context info?
-    sp.setup({
-      sp: { baseUrl: absoluteUrl }
-    });
-    const getContext: [Promise<any[]>, Promise<any[]>] = [sp.web.select("Id").get(), sp.site.select("Id").get()];
-
-
-    // TODO: Replace @pnpjs
-    Promise.all(getContext).then((results: any[]) => {
-      // retrieve site id and web id
-      const webId: string = results[0].Id;
-      const siteId: string = results[1].Id;
-
-      // build a query template
-      const queryTemplate: string = `((SiteID:${siteId} OR SiteID: {${siteId}}) AND (WebId: ${webId} OR WebId: {${webId}})) AND LastModifiedTime < {Today} AND -Title:OneNote_DeletedPages AND -Title:OneNote_RecycleBin${fileFilter}`;
-
-      // search for recent changes with accepted file types
-      sp.search({
-        QueryTemplate: queryTemplate,
-        RowLimit: 20,
-        SelectProperties: [
-          "Title",
-          "Path",
-          "Filename",
-          "FileExtension",
-          "FileType",
-          "Created",
-          "Author",
-          "LastModifiedTime",
-          "EditorOwsUser",
-          "ModifiedBy",
-          "LinkingUrl",
-          "SiteTitle",
-          "ParentLink",
-          "DocumentPreviewMetadata",
-          "ListID",
-          "ListItemID",
-          "SPSiteURL",
-          "SiteID",
-          "WebId",
-          "UniqueID",
-          "SPWebUrl",
-          "DefaultEncodingURL",
-          "PictureThumbnailURL",
-        ],
-        SortList: [
-          {
-            "Property": "LastModifiedTime",
-            "Direction": 1
-          }
-        ]
-      }).then((r: SearchResults) => {
-        const recentFilesResult: IRecentFile[] = r.PrimarySearchResults.map((result: SearchResult) => {
-          const recentFile: IRecentFile = {
-            key: result["UniqueID"],
-            name: result.Title,
-            fileUrl: result["DefaultEncodingURL"],
-            editedBy: result["ModifiedBy"]
-          };
-          return recentFile;
-        });
-        this._selection.setItems(recentFilesResult, true);
-
-        this.setState({
-          isLoading: false,
-          results: recentFilesResult
-        });
-      });
+    this.setState({
+      isLoading: false,
+      results: recentFilesResult
     });
   }
 
@@ -330,26 +261,6 @@ export default class RecentFilesTab extends React.Component<IRecentFilesTabProps
     this.props.onClose();
   }
 
-
-  /**
-   * Builds a file filter using the accepted file extensions
-   */
-  private _getFileFilter() {
-    let fileFilter: string = undefined;
-    if (this.props.accepts) {
-      fileFilter = " AND (";
-      this.props.accepts.split(",").forEach((fileType: string, index: number) => {
-        fileType = fileType.replace(".", "");
-        if (index > 0) {
-          fileFilter = fileFilter + " OR ";
-        }
-        fileFilter = fileFilter + `FileExtension:${fileType} OR SecondaryFileExtension:${fileType}`;
-      });
-      fileFilter = fileFilter + ")";
-    }
-    return fileFilter;
-  }
-
   /**
    * Creates a ref to the list
    */

src/controls/filePicker/RecentFilesTab/RecentFilesTab.types.ts

@@ -1,4 +1,3 @@
 export * from './RecentFilesTab';
-export * from './RecentFilesTab.types';
 export * from './IRecentFilesTabProps';
 export * from './IRecentFilesTabState';

src/controls/filePicker/RecentFilesTab/index.ts

@@ -80,7 +80,7 @@ export default class UploadFilePickerTab extends React.Component<IUploadFilePick
       file,
       fileAbsoluteUrl: null,
       fileTitle: GeneralHelper.getFileNameWithoutExtension(file.name)
-    }
+    };
     // Convert to base64 image
     const reader = new FileReader();
 

src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx

@@ -1,7 +1,8 @@
 import { IFilePickerTab } from "..";
 import { ISearchSuggestion } from ".";
+import { FilesSearchService } from "../../../services/FilesSearchService";
 
 export interface IWebSearchTabProps extends IFilePickerTab {
-  bingAPIKey: string;
+  bingSearchService: FilesSearchService;
   suggestions?: ISearchSuggestion[];
 }

src/controls/filePicker/WebSearchTab/IWebSearchTabProps.ts

@@ -1,5 +1,6 @@
-import { ImageSize, ImageAspect, ImageLicense, ISearchResult } from ".";
+import { ImageSize, ImageAspect, ImageLicense } from ".";
 import { IFilePickerResult } from "../FilePicker.types";
+import { ISearchResult } from "../../../services/FilesSearchService.types";
 
 export interface IWebSearchTabState {
   isLoading: boolean;