import * as React from 'react' ; import styles from './PersonalEmail.module.scss' ; import * as strings from 'PersonalEmailWebPartStrings' ; import { IPersonalEmailProps , IPersonalEmailState , IMessage , IMessages } from '.' ; import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle' ; import { Spinner , SpinnerSize } from 'office-ui-fabric-react/lib/components/Spinner' ; import { List } from 'office-ui-fabric-react/lib/components/List' ; import { Link } from 'office-ui-fabric-react/lib/components/Link' ; import { IIconProps } from 'office-ui-fabric-react/lib/components/Icon' ; import { ActionButton } from 'office-ui-fabric-react/lib/components/Button' ; export class PersonalEmail extends React . Component < IPersonalEmailProps , IPersonalEmailState > { protected readonly outlookLink : string = "https://outlook.office.com/owa/" ; protected readonly outlookNewEmailLink : string = "https://outlook.office.com/mail/deeplink/compose" ; constructor ( props ) { super ( props ) ; this . state = { messages : [ ] , loading : false , error : undefined } ; } private addIcon : IIconProps = { iconName : 'Add' } ; private viewList : IIconProps = { iconName : 'AllApps' } ; /**
     * Load recent messages for the current user
     */ private _loadMessages ( ) { if ( ! this . props . graphClient ) { return ; } this . setState ( { error : null , loading : true , messages : [ ] } ) ; let graphURI = "me/messages" ; if ( this . props . showInboxOnly ) { graphURI = "me/mailFolders/Inbox/messages" ; } this . props . graphClient . api ( graphURI ) . version ( "v1.0" ) . select ( "bodyPreview,receivedDateTime,from,isRead,subject,webLink" ) . top ( this . props . nrOfMessages || 5 ) . orderby ( "receivedDateTime desc" ) . get ( ( err , res ) : void => { if ( err ) { this . setState ( { error : err . message ? err . message : strings . Error , loading : false } ) ; return ; } if ( res && res . value && res . value . length > 0 ) { this . setState ( { messages : res . value , loading : false } ) ; } else { this . setState ( { loading : false } ) ; } } ) ; } /**
     * Render message item
     */ private _onRenderCell = ( item , index ) : JSX . Element => { if ( item . isRead ) { styles . message = styles . message + " " + styles . isRead ; } return < Link href = { item . webLink } className = { styles . message } target = '_blank' > < div className = { styles . from } > { item . from . emailAddress . name || item . from . emailAddress . address } < /div> < div className = { styles . subject } > { item . subject } < /div> < div className = { styles . date } > { ( new Date ( item . receivedDateTime ) . toLocaleDateString ( ) ) } < /div> < div className = { styles . preview } > { item . bodyPreview } < /div> < /Link>; } ; public componentDidMount ( ) { this . _loadMessages ( ) ; } public componentDidUpdate ( prevProps , prevState ) { if ( prevProps . nrOfMessages !== this . props . nrOfMessages || prevProps . showInboxOnly !== this . props . showInboxOnly ) { this . _loadMessages ( ) ; } } public render ( ) { const varientStyles = { "--varientBGColor" : this . props . themeVariant . semanticColors . bodyBackground , "--varientFontColor" : this . props . themeVariant . semanticColors . bodyText , "--varientBGHovered" : this . props . themeVariant . semanticColors . listItemBackgroundHovered } as React . CSSProperties ; return ( < div className = { styles . personalEmail } style = { varientStyles } > < WebPartTitle displayMode = { this . props . displayMode } title = { this . props . title } updateProperty = { this . props . updateProperty } className = { styles . title } / > < ActionButton text = { strings . NewEmail } iconProps = { this . addIcon } onClick = { this . openNewEmail } / > < ActionButton text = { strings . ViewAll } iconProps = { this . viewList } onClick = { this . openList } / > { this . state . loading && < Spinner label = { strings . Loading } size = { SpinnerSize . large } / > } { this . state . messages && this . state . messages . length > 0 ? ( < div > < List items = { this . state . messages } onRenderCell = { this . _onRenderCell } className = { styles . list } / > < /div>) : (!this.state.loading && (this.state.error ? < span className = { styles . error } > { this . state . error } < /span> : < span className = { styles . noMessages } > { strings . NoMessages } < /span>))} < /div>); } private openNewEmail = ( ) => { window . open ( this . outlookNewEmailLink , "_blank" ) ; } ; private openList = ( ) => { window . open ( this . outlookLink , "_blank" ) ; } ; }