Update React-Directory new image rendering

samples/react-directory/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+
+}

samples/react-directory/src/SPServices/spservices.ts

@@ -2,6 +2,7 @@ import { WebPartContext } from "@microsoft/sp-webpart-base";
 import { graph } from "@pnp/graph";
 import { sp, PeoplePickerEntity, ClientPeoplePickerQueryParameters, SearchQuery, SearchResults, SearchProperty, SortDirection } from '@pnp/sp';
 import { PrincipalType } from "@pnp/sp/src/sitegroups";
+import { isRelativeUrl } from "office-ui-fabric-react";
 
 
 export class spservices {
@@ -67,6 +68,9 @@ user:string   */
         SortList: [{ "Property": "LastName", "Direction": SortDirection.Ascending }],
       });
 
+
+
+
       return users;
     } catch (error) {
       Promise.reject(error);

samples/react-directory/src/webparts/directory/components/Directory.tsx

@@ -99,6 +99,33 @@ export default class Directory extends React.Component<
     await this._searchUsers("A");
   }
 
+  /**
+   * Gets image base64
+   * @param pictureUrl
+   * @returns
+   */
+  private getImageBase64(pictureUrl: string):Promise<string>{
+    return new Promise((resolve, reject) => {
+        let image = new Image();
+        image.addEventListener("load", () => {
+            let tempCanvas = document.createElement("canvas");
+            tempCanvas.width = image.width,
+                tempCanvas.height = image.height,
+                tempCanvas.getContext("2d").drawImage(image, 0, 0);
+            let base64Str;
+            try {
+                base64Str = tempCanvas.toDataURL("image/png");
+            } catch (e) {
+                return "";
+            }
+
+            resolve(base64Str);
+        });
+        image.src = pictureUrl;
+    });
+}
+
+
   private async _searchUsers(searchText: string) {
     searchText = searchText.trim().length > 0 ? searchText : "A";
     this.setState({
@@ -112,6 +139,17 @@ export default class Directory extends React.Component<
         searchText,
         this.props.searchFirstName
       );
+
+      if (users && users.PrimarySearchResults.length > 0){
+        for (let index = 0; index < users.PrimarySearchResults.length; index++) {
+          let user:any = users.PrimarySearchResults[index]  ;
+          if (user.PictureURL){
+            user = { ...user, PictureURL: await this.getImageBase64(`/_layouts/15/userphoto.aspx?size=M&accountname=${user.WorkEmail}`)};
+           users.PrimarySearchResults[index]  =  user ;
+          }
+        }
+       }
+
       this.setState({
         users:
           users && users.PrimarySearchResults

samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
+import * as React from 'react';
-import styles from "./PersonaCard.module.scss";
+import styles from './PersonaCard.module.scss';
-import { IPersonaCardProps } from "./IPersonaCardProps";
+import { IPersonaCardProps } from './IPersonaCardProps';
-import { IPersonaCardState } from "./IPersonaCardState";
+import { IPersonaCardState } from './IPersonaCardState';
 import {
   Version,
   Environment,
   EnvironmentType,
   ServiceScope,
   Log,
-  Text
+  Text,
-} from "@microsoft/sp-core-library";
+} from '@microsoft/sp-core-library';
-import { SPComponentLoader } from "@microsoft/sp-loader";
+import { SPComponentLoader } from '@microsoft/sp-loader';
 
 import {
   Persona,
@@ -22,13 +22,12 @@ import {
   DocumentCard,
   IDocumentCardStyles,
   DocumentCardType,
-  Icon
+  Icon,
-} from "office-ui-fabric-react";
+} from 'office-ui-fabric-react';
 
-const EXP_SOURCE: string = "SPFxDirectory";
+const EXP_SOURCE: string = 'SPFxDirectory';
 const LIVE_PERSONA_COMPONENT_ID: string =
-  "914330ee-2df2-4f6e-a858-30c23a812408";
+  '914330ee-2df2-4f6e-a858-30c23a812408';
-//const PROFILE_IMAGE_URL: string = 'https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email={0}&UA=0&size=HR96x96&sc=1564597822258';
 
 export class PersonaCard extends React.Component<
   IPersonaCardProps,
@@ -36,6 +35,7 @@ export class PersonaCard extends React.Component<
 > {
   constructor(props: IPersonaCardProps) {
     super(props);
+
     this.state = { livePersonaCard: undefined, pictureUrl: undefined };
   }
   /**
@@ -78,11 +78,11 @@ export class PersonaCard extends React.Component<
         serviceScope: this.props.context.serviceScope,
         upn: this.props.profileProperties.Email,
         onCardOpen: () => {
-          console.log("LivePersonaCard Open");
+          console.log('LivePersonaCard Open');
         },
         onCardClose: () => {
-          console.log("LivePersonaCard Close");
+          console.log('LivePersonaCard Close');
-        }
+        },
       },
       this._PersonaCard()
     );
@@ -113,25 +113,25 @@ export class PersonaCard extends React.Component<
           >
             {this.props.profileProperties.WorkPhone ? (
               <div>
-                <Icon iconName="Phone" style={{ fontSize: "12px" }} />
+                <Icon iconName="Phone" style={{ fontSize: '12px' }} />
-                <span style={{ marginLeft: 5, fontSize: "12px" }}>
+                <span style={{ marginLeft: 5, fontSize: '12px' }}>
-                  {" "}
+                  {' '}
                   {this.props.profileProperties.WorkPhone}
                 </span>
               </div>
             ) : (
-              ""
+              ''
             )}
             {this.props.profileProperties.Location ? (
               <div>
-                <Icon iconName="Poi" style={{ fontSize: "12px" }} />
+                <Icon iconName="Poi" style={{ fontSize: '12px' }} />
-                <span style={{ marginLeft: 5, fontSize: "12px" }}>
+                <span style={{ marginLeft: 5, fontSize: '12px' }}>
-                  {" "}
+                  {' '}
                   {this.props.profileProperties.Location}
                 </span>
               </div>
             ) : (
-              ""
+              ''
             )}
           </Persona>
         </div>