-
Notifications
You must be signed in to change notification settings - Fork 534
/
PersonalEmail.tsx
125 lines (114 loc) · 4.15 KB
/
PersonalEmail.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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';
export class PersonalEmail extends React.Component<IPersonalEmailProps, IPersonalEmailState> {
constructor(props: IPersonalEmailProps) {
super(props);
this.state = {
messages: [],
loading: false,
error: undefined
};
}
/**
* Load recent messages for the current user
*/
private _loadMessages(): void {
if (!this.props.graphClient) {
return;
}
// update state to indicate loading and remove any previously loaded
// messages
this.setState({
error: null,
loading: true,
messages: []
});
this.props.graphClient
.api("me/messages")
.version("v1.0")
.select("bodyPreview,receivedDateTime,from,subject,webLink")
.top(this.props.nrOfMessages || 5)
.orderby("receivedDateTime desc")
.get((err: any, res: IMessages): void => {
if (err) {
// Something failed calling the MS Graph
this.setState({
error: err.message ? err.message : strings.Error,
loading: false
});
return;
}
// Check if a response was retrieved
if (res && res.value && res.value.length > 0) {
this.setState({
messages: res.value,
loading: false
});
}
else {
// No messages found
this.setState({
loading: false
});
}
});
}
/**
* Render message item
*/
private _onRenderCell = (item: IMessage, index: number | undefined): JSX.Element => {
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(): void {
// load data initially after the component has been instantiated
this._loadMessages();
}
public componentDidUpdate(prevProps: IPersonalEmailProps, prevState: IPersonalEmailState): void {
// verify if the component should update. Helps avoid unnecessary re-renders
// when the parent has changed but this component hasn't
if (prevProps.nrOfMessages !== this.props.nrOfMessages) {
this._loadMessages();
}
}
public render(): React.ReactElement<IPersonalEmailProps> {
return (
<div className={styles.personalEmail}>
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.updateProperty} className={styles.title} />
{
this.state.loading &&
<Spinner label={strings.Loading} size={SpinnerSize.large} />
}
{
this.state.messages &&
this.state.messages.length > 0 ? (
<div>
<Link href='https://outlook.office.com/owa/?viewmodel=IMailComposeViewModelFactory' target='_blank'>{strings.NewEmail}</Link>
<List items={this.state.messages}
onRenderCell={this._onRenderCell} className={styles.list} />
<Link href='https://outlook.office.com/owa/' target='_blank' className={styles.viewAll}>{strings.ViewAll}</Link>
</div>
) : (
!this.state.loading && (
this.state.error ?
<span className={styles.error}>{this.state.error}</span> :
<span className={styles.noMessages}>{strings.NoMessages}</span>
)
)
}
</div>
);
}
}