|
1 | 1 | // Copyright (c) Microsoft Corporation. |
2 | 2 | // Licensed under the MIT License. |
3 | 3 | import React from 'react'; |
| 4 | +import { NavLink as RouterNavLink } from 'react-router-dom'; |
4 | 5 | import { Table } from 'reactstrap'; |
5 | | -import moment from 'moment'; |
| 6 | +import moment, { Moment } from 'moment-timezone'; |
| 7 | +import { findOneIana } from "windows-iana"; |
6 | 8 | import { Event } from 'microsoft-graph'; |
7 | 9 | import { config } from './Config'; |
8 | | -import { getEvents } from './GraphService'; |
| 10 | +import { getUserWeekCalendar } from './GraphService'; |
9 | 11 | import withAuthProvider, { AuthComponentProps } from './AuthProvider'; |
| 12 | +import CalendarDayRow from './CalendarDayRow'; |
| 13 | +import './Calendar.css'; |
10 | 14 |
|
11 | 15 | interface CalendarState { |
| 16 | + eventsLoaded: boolean; |
12 | 17 | events: Event[]; |
13 | | -} |
14 | | - |
15 | | -// Helper function to format Graph date/time |
16 | | -function formatDateTime(dateTime: string | undefined) { |
17 | | - if (dateTime !== undefined) { |
18 | | - return moment.utc(dateTime).local().format('M/D/YY h:mm A'); |
19 | | - } |
| 18 | + startOfWeek: Moment | undefined; |
20 | 19 | } |
21 | 20 |
|
22 | 21 | class Calendar extends React.Component<AuthComponentProps, CalendarState> { |
23 | 22 | constructor(props: any) { |
24 | 23 | super(props); |
25 | | - |
26 | 24 | this.state = { |
27 | | - events: [] |
| 25 | + eventsLoaded: false, |
| 26 | + events: [], |
| 27 | + startOfWeek: undefined |
28 | 28 | }; |
29 | 29 | } |
30 | 30 |
|
31 | | - async componentDidMount() { |
32 | | - try { |
33 | | - // Get the user's access token |
34 | | - var accessToken = await this.props.getAccessToken(config.scopes); |
35 | | - // Get the user's events |
36 | | - var events = await getEvents(accessToken); |
37 | | - // Update the array of events in state |
38 | | - this.setState({ events: events.value }); |
39 | | - } |
40 | | - catch (err) { |
41 | | - this.props.setError('ERROR', JSON.stringify(err)); |
| 31 | + async componentDidUpdate() |
| 32 | + { |
| 33 | + if (this.props.user && !this.state.eventsLoaded) |
| 34 | + { |
| 35 | + try { |
| 36 | + // Get the user's access token |
| 37 | + var accessToken = await this.props.getAccessToken(config.scopes); |
| 38 | + |
| 39 | + // Convert user's Windows time zone ("Pacific Standard Time") |
| 40 | + // to IANA format ("America/Los_Angeles") |
| 41 | + // Moment needs IANA format |
| 42 | + var ianaTimeZone = findOneIana(this.props.user.timeZone); |
| 43 | + |
| 44 | + // Get midnight on the start of the current week in the user's timezone, |
| 45 | + // but in UTC. For example, for Pacific Standard Time, the time value would be |
| 46 | + // 07:00:00Z |
| 47 | + var startOfWeek = moment.tz(ianaTimeZone!.valueOf()).startOf('week').utc(); |
| 48 | + |
| 49 | + // Get the user's events |
| 50 | + var events = await getUserWeekCalendar(accessToken, this.props.user.timeZone, startOfWeek); |
| 51 | + |
| 52 | + // Update the array of events in state |
| 53 | + this.setState({ |
| 54 | + eventsLoaded: true, |
| 55 | + events: events, |
| 56 | + startOfWeek: startOfWeek |
| 57 | + }); |
| 58 | + } |
| 59 | + catch (err) { |
| 60 | + this.props.setError('ERROR', JSON.stringify(err)); |
| 61 | + } |
42 | 62 | } |
43 | 63 | } |
44 | 64 |
|
45 | 65 | // <renderSnippet> |
46 | 66 | render() { |
| 67 | + var sunday = moment(this.state.startOfWeek); |
| 68 | + var monday = moment(sunday).add(1, 'day'); |
| 69 | + var tuesday = moment(monday).add(1, 'day'); |
| 70 | + var wednesday = moment(tuesday).add(1, 'day'); |
| 71 | + var thursday = moment(wednesday).add(1, 'day'); |
| 72 | + var friday = moment(thursday).add(1, 'day'); |
| 73 | + var saturday = moment(friday).add(1, 'day'); |
| 74 | + |
47 | 75 | return ( |
48 | 76 | <div> |
49 | | - <h1>Calendar</h1> |
50 | | - <Table> |
51 | | - <thead> |
52 | | - <tr> |
53 | | - <th scope="col">Organizer</th> |
54 | | - <th scope="col">Subject</th> |
55 | | - <th scope="col">Start</th> |
56 | | - <th scope="col">End</th> |
57 | | - </tr> |
58 | | - </thead> |
59 | | - <tbody> |
60 | | - {this.state.events.map( |
61 | | - function(event: Event){ |
62 | | - return( |
63 | | - <tr key={event.id}> |
64 | | - <td>{event.organizer?.emailAddress?.name}</td> |
65 | | - <td>{event.subject}</td> |
66 | | - <td>{formatDateTime(event.start?.dateTime)}</td> |
67 | | - <td>{formatDateTime(event.end?.dateTime)}</td> |
68 | | - </tr> |
69 | | - ); |
70 | | - })} |
71 | | - </tbody> |
72 | | - </Table> |
| 77 | + <div className="mb-3"> |
| 78 | + <h1 className="mb-3">{sunday.format('MMMM D, YYYY')} - {saturday.format('MMMM D, YYYY')}</h1> |
| 79 | + <RouterNavLink to="/newevent" className="btn btn-light btn-sm" exact>New event</RouterNavLink> |
| 80 | + </div> |
| 81 | + <div className="calendar-week"> |
| 82 | + <div className="table-responsive"> |
| 83 | + <Table size="sm"> |
| 84 | + <thead> |
| 85 | + <tr> |
| 86 | + <th>Date</th> |
| 87 | + <th>Time</th> |
| 88 | + <th>Event</th> |
| 89 | + </tr> |
| 90 | + </thead> |
| 91 | + <tbody> |
| 92 | + <CalendarDayRow |
| 93 | + date={sunday} |
| 94 | + timeFormat={this.props.user.timeFormat} |
| 95 | + events={this.state.events.filter(event => moment(event.start?.dateTime).day() === sunday.day()) } /> |
| 96 | + <CalendarDayRow |
| 97 | + date={monday} |
| 98 | + timeFormat={this.props.user.timeFormat} |
| 99 | + events={this.state.events.filter(event => moment(event.start?.dateTime).day() === monday.day()) } /> |
| 100 | + <CalendarDayRow |
| 101 | + date={tuesday} |
| 102 | + timeFormat={this.props.user.timeFormat} |
| 103 | + events={this.state.events.filter(event => moment(event.start?.dateTime).day() === tuesday.day()) } /> |
| 104 | + <CalendarDayRow |
| 105 | + date={wednesday} |
| 106 | + timeFormat={this.props.user.timeFormat} |
| 107 | + events={this.state.events.filter(event => moment(event.start?.dateTime).day() === wednesday.day()) } /> |
| 108 | + <CalendarDayRow |
| 109 | + date={thursday} |
| 110 | + timeFormat={this.props.user.timeFormat} |
| 111 | + events={this.state.events.filter(event => moment(event.start?.dateTime).day() === thursday.day()) } /> |
| 112 | + <CalendarDayRow |
| 113 | + date={friday} |
| 114 | + timeFormat={this.props.user.timeFormat} |
| 115 | + events={this.state.events.filter(event => moment(event.start?.dateTime).day() === friday.day()) } /> |
| 116 | + <CalendarDayRow |
| 117 | + date={saturday} |
| 118 | + timeFormat={this.props.user.timeFormat} |
| 119 | + events={this.state.events.filter(event => moment(event.start?.dateTime).day() === saturday.day()) } /> |
| 120 | + </tbody> |
| 121 | + </Table> |
| 122 | + </div> |
| 123 | + </div> |
73 | 124 | </div> |
74 | 125 | ); |
75 | 126 | } |
|
0 commit comments