blob: 7fd4c040b127d2c6116ae0b2c4998d67461f1713 (
plain)
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
126
127
|
// @flow
import moment from 'moment';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import type { Dispatch } from 'redux';
import { push } from 'react-router-redux';
import {
ConferenceCard,
ConferenceTitle,
RecentListContainer,
TruncatedText
} from '../styled';
import type { RecentListItem } from '../types';
type Props = {
/**
* Redux dispatch.
*/
dispatch: Dispatch<*>;
/**
* Array of recent conferences.
*/
_recentList: Array<RecentListItem>;
};
/**
* Recent List Component.
*/
class RecentList extends Component<Props, *> {
/**
* Render function of component.
*
* @returns {ReactElement}
*/
render() {
return (
<RecentListContainer>
{
this.props._recentList.map(
conference => this._renderRecentListEntry(conference)
)
}
</RecentListContainer>
);
}
/**
* Creates a handler for navigatint to a conference.
*
* @param {RecentListItem} conference - Conference Details.
* @returns {void}
*/
_onNavigateToConference(conference: RecentListItem) {
return () => this.props.dispatch(push('/conference', conference));
}
/**
* Renders the conference card.
*
* @param {RecentListItem} conference - Conference Details.
* @returns {ReactElement}
*/
_renderRecentListEntry(conference: RecentListItem) {
return (
<ConferenceCard
key = { conference.startTime }
onClick = { this._onNavigateToConference(conference) }>
<ConferenceTitle>
{ conference.room }
</ConferenceTitle>
<TruncatedText>
{ this._renderServerURL(conference.serverURL) }
</TruncatedText>
<TruncatedText>
{ this._renderTimeAndDuration(conference) }
</TruncatedText>
</ConferenceCard>
);
}
/**
* Returns formatted Server URL.
*
* @param {string} serverURL - Server URL.
* @returns {string} - Formatted server URL.
*/
_renderServerURL(serverURL: string) {
// Strip protocol to make it cleaner.
return `${serverURL.replace('https://', '')}`;
}
/**
* Returns Date/Time and Duration of the conference in string format.
*
* @param {RecentListItem} conference - Conference Details.
* @returns {string} - Date/Time and Duration.
*/
_renderTimeAndDuration(conference: RecentListItem) {
const { startTime, endTime } = conference;
const start = moment(startTime);
const end = moment(endTime);
const duration = moment.duration(end.diff(start)).humanize();
return `${start.calendar()}, ${duration}`;
}
}
/**
* Maps (parts of) the redux state to the React props.
*
* @param {Object} state - The redux state.
* @returns {{
* _recentList: Array<RecentListItem>
* }}
*/
function _mapStateToProps(state: Object) {
return {
_recentList: state.recentList.recentList
};
}
export default connect(_mapStateToProps)(RecentList);
|
