Skip to content

Commit 571ba0b

Browse files
nmetulevnmetulev
authored
Adding support for batching requests from the graph (#117)
* initial implementation of batching * undo changes to findUserByEmail
1 parent 1e49944 commit 571ba0b

File tree

5 files changed

+151
-137
lines changed

5 files changed

+151
-137
lines changed

‎src/Graph.ts‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import {
1717
TelemetryHandler,
1818
RetryHandlerOptions,
1919
HTTPMessageHandler,
20-
ResponseType
20+
ResponseType,
21+
BatchRequestContent
2122
} from '@microsoft/microsoft-graph-client';
2223
import { getRequestHeader, setRequestHeader } from '@microsoft/microsoft-graph-client/lib/es/middleware/MiddlewareUtil';
2324
import { IProvider } from './providers/IProvider';
@@ -55,6 +56,74 @@ class SdkVersionMiddleware implements Middleware {
5556
}
5657
}
5758

59+
class BatchRequest {
60+
public resource: string;
61+
public method: string;
62+
63+
public constructor(resource: string, method: string) {
64+
this.resource = resource;
65+
this.method = method;
66+
}
67+
}
68+
69+
export class Batch {
70+
private requests: Map<string, BatchRequest> = new Map<string, BatchRequest>();
71+
private scopes: string[] = [];
72+
private client: Client;
73+
74+
constructor(client: Client) {
75+
this.client = client;
76+
}
77+
78+
public get(id: string, resource: string, scopes?: string[]) {
79+
const request = new BatchRequest(resource, 'GET');
80+
this.requests.set(id, request);
81+
82+
if (scopes) {
83+
this.scopes = this.scopes.concat(scopes);
84+
}
85+
}
86+
87+
public async execute(): Promise<any> {
88+
const responses = {};
89+
90+
if (!this.requests.size) {
91+
return responses;
92+
}
93+
94+
let batchRequestContent = new BatchRequestContent();
95+
96+
for (let request of this.requests) {
97+
batchRequestContent.addRequest({
98+
id: request[0],
99+
request: new Request(request[1].resource, {
100+
method: request[1].method
101+
})
102+
});
103+
}
104+
105+
let batchRequest = this.client.api('$batch').version('beta');
106+
107+
if (this.scopes.length) {
108+
batchRequest = batchRequest.middlewareOptions(prepScopes(...this.scopes));
109+
}
110+
111+
let batchResponse = await batchRequest.post(await batchRequestContent.getContent());
112+
113+
for (let response of batchResponse.responses) {
114+
if (response.status !== 200) {
115+
response[response.id] = null;
116+
} else if (response.headers['Content-Type'].includes('image/jpeg')) {
117+
responses[response.id] = 'data:image/jpeg;base64,' + response.body;
118+
} else {
119+
responses[response.id] = response.body;
120+
}
121+
}
122+
123+
return responses;
124+
}
125+
}
126+
58127
export class Graph {
59128
public client: Client;
60129

@@ -88,6 +157,10 @@ export class Graph {
88157
});
89158
}
90159

160+
public createBatch() {
161+
return new Batch(this.client);
162+
}
163+
91164
async getMe(): Promise<MicrosoftGraph.User> {
92165
return this.client
93166
.api('me')

‎src/components/mgt-agenda/mgt-agenda.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,8 @@ export class MgtAgenda extends MgtTemplatedComponent {
295295
attendee =>
296296
<MgtPersonDetails>{
297297
displayName: attendee.emailAddress.name,
298-
email: attendee.emailAddress.address
298+
email: attendee.emailAddress.address,
299+
image: '@'
299300
}
300301
)
301302
)}

‎src/components/mgt-login/mgt-login.ts‎

Lines changed: 18 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export class MgtLogin extends MgtBaseComponent {
2525

2626
@property({ attribute: false }) private _showMenu: boolean = false;
2727
@property({ attribute: false }) private _loading: boolean = true;
28-
@property({ attribute: false }) private _user: MicrosoftGraph.User;
2928

3029
@property({
3130
attribute: 'user-details',
@@ -81,41 +80,6 @@ export class MgtLogin extends MgtBaseComponent {
8180
);
8281
}
8382
}
84-
// else if (changedProps.get("_showMenu") === true) {
85-
// // get login button bounds
86-
// const loginButton = this.shadowRoot.querySelector(".login-button");
87-
// if (loginButton && loginButton.animate) {
88-
// this._loginButtonRect = loginButton.getBoundingClientRect();
89-
90-
// // invert variables
91-
// const deltaX = this._popupRect.left - this._loginButtonRect.left;
92-
// const deltaY = this._popupRect.top - this._loginButtonRect.top;
93-
// const deltaW = this._popupRect.width / this._loginButtonRect.width;
94-
// const deltaH = this._popupRect.height / this._loginButtonRect.height;
95-
96-
// // play back
97-
// loginButton.animate(
98-
// [
99-
// {
100-
// transformOrigin: "top left",
101-
// transform: `
102-
// translate(${deltaX}px, ${deltaY}px)
103-
// scale(${deltaW}, ${deltaH})
104-
// `
105-
// },
106-
// {
107-
// transformOrigin: "top left",
108-
// transform: "none"
109-
// }
110-
// ],
111-
// {
112-
// duration: 100,
113-
// easing: "ease-out",
114-
// fill: "both"
115-
// }
116-
// );
117-
// }
118-
// }
11983
}
12084

12185
firstUpdated() {
@@ -131,7 +95,6 @@ export class MgtLogin extends MgtBaseComponent {
13195

13296
private async loadState() {
13397
if (this.userDetails) {
134-
this._user = null;
13598
return;
13699
}
137100

@@ -140,9 +103,18 @@ export class MgtLogin extends MgtBaseComponent {
140103
if (provider) {
141104
this._loading = true;
142105
if (provider.state === ProviderState.SignedIn) {
143-
this._user = await provider.graph.getMe();
106+
let batch = provider.graph.createBatch();
107+
batch.get('me', 'me', ['user.read']);
108+
batch.get('photo', 'me/photo/$value', ['user.read']);
109+
let response = await batch.execute();
110+
111+
this.userDetails = {
112+
displayName: response.me.displayName,
113+
email: response.me.mail || response.me.userPrincipalName,
114+
image: response.photo
115+
};
144116
} else if (provider.state === ProviderState.SignedOut) {
145-
this._user = null;
117+
this.userDetails = null;
146118
} else {
147119
return;
148120
}
@@ -153,7 +125,7 @@ export class MgtLogin extends MgtBaseComponent {
153125

154126
private onClick(event: MouseEvent) {
155127
event.stopPropagation();
156-
if (this._user || this.userDetails) {
128+
if (this.userDetails) {
157129
// get login button bounds
158130
const loginButton = this.renderRoot.querySelector('.login-button');
159131
if (loginButton) {
@@ -212,7 +184,7 @@ export class MgtLogin extends MgtBaseComponent {
212184
}
213185

214186
render() {
215-
const content = this._user || this.userDetails ? this.renderLoggedIn() : this.renderLogIn();
187+
const content = this.userDetails ? this.renderLoggedIn() : this.renderLogIn();
216188

217189
return html`
218190
<div class="root">
@@ -234,11 +206,7 @@ export class MgtLogin extends MgtBaseComponent {
234206
}
235207

236208
renderLoggedIn() {
237-
if (this._user) {
238-
return html`
239-
<mgt-person person-query="me" show-name />
240-
`;
241-
} else if (this.userDetails) {
209+
if (this.userDetails) {
242210
return html`
243211
<mgt-person person-details=${JSON.stringify(this.userDetails)} show-name />
244212
`;
@@ -248,17 +216,13 @@ export class MgtLogin extends MgtBaseComponent {
248216
}
249217

250218
renderMenu() {
251-
if (!this._user && !this.userDetails) {
219+
if (!this.userDetails) {
252220
return;
253221
}
254222

255-
let personComponent = this._user
256-
? html`
257-
<mgt-person person-query="me" show-name show-email />
258-
`
259-
: html`
260-
<mgt-person person-details=${JSON.stringify(this.userDetails)} show-name show-email />
261-
`;
223+
let personComponent = html`
224+
<mgt-person person-details=${JSON.stringify(this.userDetails)} show-name show-email />
225+
`;
262226

263227
return html`
264228
<div class="popup ${this._openLeft ? 'open-left' : ''} ${this._showMenu ? 'show-menu' : ''}">

‎src/components/mgt-people/mgt-people.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@ export class MgtPeople extends MgtTemplatedComponent {
6161
let client = Providers.globalProvider.graph;
6262

6363
this.people = (await client.getPeople()).slice(0, this.showMax);
64+
for (let person of this.people) {
65+
// set image to @ to flag the mgt-person component to
66+
// query the image from the graph
67+
person.image = '@';
68+
}
6469
}
6570
}
6671
}

0 commit comments

Comments
 (0)