1+ import React , { Component } from 'react'
2+ import MediaQuery from 'react-responsive'
3+ import Modal from 'react-modal'
4+ import Sticky from 'react-stickynode'
5+ import { connect } from 'react-redux'
6+ import { withRouter } from 'react-router-dom'
7+ import { loadUserReportsUrls , setLookerSessionExpired } from '../actions'
8+ import { SCREEN_BREAKPOINT_MD , PROJECT_REPORTS , REPORT_SESSION_LENGTH } from '../../../config/constants'
9+ import TwoColsLayout from '../../../components/TwoColsLayout'
10+ import UserSidebar from '../../../components/UserSidebar/UserSidebar'
11+ import spinnerWhileLoading from '../../../components/LoadingSpinner'
12+
13+ const LookerEmbedReport = ( props ) => {
14+ return ( < iframe width = "100%" src = { props . userReportsEmbedUrl } onLoad = { props . onLoad } /> )
15+ }
16+
17+ const EnhancedLookerEmbedReport = spinnerWhileLoading ( props => {
18+ return ! props . isLoading
19+ } ) ( LookerEmbedReport )
20+
21+ class UserReportsContainer extends Component {
22+ constructor ( props ) {
23+ super ( props )
24+
25+ this . timer = null
26+ this . setLookerSessionTimer = this . setLookerSessionTimer . bind ( this )
27+ this . reloadProjectReport = this . reloadProjectReport . bind ( this )
28+ }
29+
30+ reloadProjectReport ( ) {
31+ this . props . loadUserReportsUrls ( PROJECT_REPORTS . PROJECT_SUMMARY )
32+ // don't have to set session expire timer here, it would be set of iframe load
33+ }
34+
35+ componentWillMount ( ) {
36+ this . reloadProjectReport ( )
37+ // don't have to set session expire timer here, it would be set of iframe load
38+ }
39+
40+ componentWillUnmount ( ) {
41+ if ( this . timer ) {
42+ clearTimeout ( this . timer )
43+ }
44+ }
45+
46+ setLookerSessionTimer ( ) {
47+ console . log ( 'Setting Looker Session Timer' )
48+
49+ if ( this . timer ) {
50+ clearTimeout ( this . timer )
51+ }
52+
53+ // set timeout for raising alert to refresh the token when session expires
54+ this . timer = setTimeout ( ( ) => {
55+ console . log ( 'Looker Session is expired by timer' )
56+ this . props . setLookerSessionExpired ( true )
57+ window . analytics && window . analytics . track ( 'Looker Session Expired' )
58+ } , REPORT_SESSION_LENGTH * 1000 )
59+ }
60+
61+ render ( ) {
62+ const { user, isLoading, userReportsEmbedUrl, lookerSessionExpired } = this . props
63+
64+ return (
65+ < TwoColsLayout noPadding >
66+ < TwoColsLayout . Sidebar >
67+ < MediaQuery minWidth = { SCREEN_BREAKPOINT_MD } >
68+ { ( matches ) => {
69+ if ( matches ) {
70+ return (
71+ < Sticky top = { 60 } bottomBoundary = "#wrapper-main" >
72+ < UserSidebar user = { user } />
73+ </ Sticky >
74+ )
75+ } else {
76+ return < UserSidebar user = { user } />
77+ }
78+ } }
79+ </ MediaQuery >
80+ </ TwoColsLayout . Sidebar >
81+ < TwoColsLayout . Content >
82+ < Modal
83+ isOpen = { lookerSessionExpired && ! isLoading }
84+ className = "delete-post-dialog"
85+ overlayClassName = "delete-post-dialog-overlay"
86+ contentLabel = ""
87+ >
88+ < div className = "modal-title" >
89+ Report sessions expired
90+ </ div >
91+
92+ < div className = "modal-body" >
93+ To keep the data up to date, please, hit "Refresh" button to reload the report.
94+ </ div >
95+
96+ < div className = "button-area flex center action-area" >
97+ < button className = "tc-btn tc-btn-primary tc-btn-sm" onClick = { this . reloadProjectReport } > Refresh</ button >
98+ </ div >
99+ </ Modal >
100+ < EnhancedLookerEmbedReport
101+ isLoading = { isLoading }
102+ userReportsEmbedUrl = { userReportsEmbedUrl }
103+ onLoad = { this . setLookerSessionTimer }
104+ />
105+ </ TwoColsLayout . Content >
106+ </ TwoColsLayout >
107+ )
108+ }
109+ }
110+ const mapStateToProps = ( { loadUser, userReports } ) => {
111+
112+ return {
113+ user : loadUser . user ,
114+ isLoading : userReports . isLoading ,
115+ lookerSessionExpired : userReports . lookerSessionExpired ,
116+ userReportsEmbedUrl : userReports . userReportsEmbedUrl ,
117+ }
118+ }
119+
120+ const mapDispatchToProps = {
121+ loadUserReportsUrls,
122+ setLookerSessionExpired,
123+ }
124+
125+ export default connect ( mapStateToProps , mapDispatchToProps ) ( withRouter ( UserReportsContainer ) )
0 commit comments