Skip to content

Commit c833c41

Browse files
jeffshaverjeffshaver
committed
closes #220. fixes warning when clicking save. clean up render methods so they aren't so long. fix issue where grid wasn't the right size sometimes.
1 parent 6e583e3 commit c833c41

12 files changed

+496
-402
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
"radium": "^0.18.1",
7171
"react": "^15.2.1",
7272
"react-dom": "^15.2.1",
73-
"react-grid-layout": "^0.12.7",
73+
"react-grid-layout": "^0.13.0",
7474
"react-leaflet": "^0.12.1",
7575
"react-redux": "^4.4.5",
7676
"react-router": "^2.6.0",

‎src/js/components/App.jsx

+46-33
Original file line numberDiff line numberDiff line change
@@ -47,45 +47,58 @@ class App extends Component {
4747
dispatch(fetchUser())
4848
}
4949

50-
render () {
50+
renderLoading () {
51+
return (
52+
<div style={[style.loading.wrapper]}>
53+
<CircularProgress text={''} />
54+
<h1>Fetching User Data</h1>
55+
</div>
56+
)
57+
}
58+
59+
renderError (user) {
60+
return (
61+
<div style={[style.loading.wrapper]}>
62+
<h1>{'We couldn\'t authenticate you.'}</h1>
63+
{(() => {
64+
if (!user.error) return
65+
66+
return <span>{user.error.message}</span>
67+
})()}
68+
</div>
69+
)
70+
}
71+
72+
renderContent () {
5173
const {children, user} = this.props
52-
let content
5374

5475
if (user.isFetching) {
55-
content = (
56-
<div style={[style.loading.wrapper]}>
57-
<CircularProgress text={''} />
58-
<h1>Fetching User Data</h1>
59-
</div>
60-
)
61-
} else if (user.error || !user.data.authenticated) {
62-
content = (
63-
<div style={[style.loading.wrapper]}>
64-
<h1>{'We couldn\'t authenticate you.'}</h1>
65-
{(() => {
66-
if (!user.error) return
76+
return this.renderLoading()
77+
}
6778

68-
return <span>{user.error.message}</span>
69-
})()}
70-
</div>
71-
)
72-
} else {
73-
content = (
74-
<div>
75-
<LeftNav />
76-
<Wrapper style={style.wrapper}>
77-
<Banner />
78-
<Header />
79-
<div style={style.flexWrapper}>
80-
{children}
81-
</div>
82-
<Footer />
83-
<Banner />
84-
</Wrapper>
85-
</div>
86-
)
79+
if (user.error || !user.data.authenticated) {
80+
return this.renderError(user)
8781
}
8882

83+
return (
84+
<div>
85+
<LeftNav />
86+
<Wrapper style={style.wrapper}>
87+
<Banner />
88+
<Header />
89+
<div style={style.flexWrapper}>
90+
{children}
91+
</div>
92+
<Footer />
93+
<Banner />
94+
</Wrapper>
95+
</div>
96+
)
97+
}
98+
99+
render () {
100+
const content = this.renderContent()
101+
89102
return (
90103
<StyleRoot>
91104
<MuiThemeProvider muiTheme={getMuiTheme()}>

‎src/js/components/Dashboard.jsx

+53-40
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,65 @@ class Dashboard extends Component {
7171
}
7272
}
7373

74+
renderVisualizationGrid () {
75+
const {dashboard} = this.props
76+
const {dashboardParams = {}, visualizations = []} = dashboard
77+
const {size = 2, layout} = dashboardParams
78+
const totalCols = visualizations.length > 1 ? size : 1
79+
80+
return (
81+
<GridLayout
82+
cols={totalCols}
83+
draggableHandle={'.visualizationToolbar'}
84+
layout={layout}
85+
rowHeight={250}
86+
style={style.gridList}
87+
>
88+
{visualizations.map(this.renderVisualization, this)}
89+
</GridLayout>
90+
)
91+
}
92+
93+
renderVisualization (visualization, i) {
94+
const {dashboard, dispatch, visualizationResults} = this.props
95+
const {dashboardParams = {}, visualizations = []} = dashboard
96+
const {size = 2, visualizationSizes = []} = dashboardParams
97+
const visualizationSize = visualizationSizes[visualization._id] || {}
98+
const {
99+
// remove typeof check once mongodb change is in place
100+
cols = (typeof visualizationSize !== 'object' ? visualizationSize : 1),
101+
rows = 1
102+
} = visualizationSize
103+
const results = visualizationResults[visualization._id]
104+
const totalCols = visualizations.length > 1 ? Number(size) : 1
105+
106+
return (
107+
<div
108+
data-grid={{x: i % totalCols, y: Math.floor(i / totalCols), w: Number(cols), h: Number(rows) * 2}}
109+
key={visualization._id}
110+
style={{
111+
...style.gridTile,
112+
...(results && results.isFetching ? {} : style.gridTileLoading)
113+
}}
114+
>
115+
<Visualization
116+
dispatch={dispatch}
117+
results={results}
118+
visualization={visualization}
119+
/>
120+
</div>
121+
)
122+
}
123+
74124
render () {
75125
const {dashboard} = this.props
76126

77127
if (!dashboard) {
78128
return null
79129
}
80130

81-
const {dispatch, visualizationResults} = this.props
82-
const {dashboardParams = {}, visualizations = []} = dashboard
83-
const {size = 2, visualizationSizes = [], layout} = dashboardParams
131+
const {visualizations} = dashboard
132+
84133
// Populate the Fields based off of the fields
85134
// for each visualization's source.
86135
const fields = {
@@ -93,7 +142,6 @@ class Dashboard extends Component {
93142
)))],
94143
isFetching: false
95144
}
96-
const totalCols = visualizations.length > 1 ? size : 1
97145

98146
return (
99147
<div>
@@ -109,42 +157,7 @@ class Dashboard extends Component {
109157
}}
110158
onClickFilter={this.onClickFilter}
111159
/>
112-
<GridLayout
113-
cols={totalCols}
114-
draggableHandle={'.visualizationToolbar'}
115-
layout={layout}
116-
rowHeight={250}
117-
style={style.gridList}
118-
>
119-
{
120-
visualizations.map((visualization, i) => {
121-
const visualizationSize = visualizationSizes[visualization._id] || {}
122-
const {
123-
// remove typeof check once mongodb change is in place
124-
cols = (typeof visualizationSize !== 'object' ? visualizationSize : 1),
125-
rows = 1
126-
} = visualizationSize
127-
const results = visualizationResults[visualization._id]
128-
129-
return (
130-
<div
131-
_grid={{x: i % totalCols, y: Math.floor(i / totalCols), w: cols, h: rows * 2}}
132-
key={visualization._id}
133-
style={{
134-
...style.gridTile,
135-
...(results && results.isFetching ? {} : style.gridTileLoading)
136-
}}
137-
>
138-
<Visualization
139-
dispatch={dispatch}
140-
results={results}
141-
visualization={visualization}
142-
/>
143-
</div>
144-
)
145-
})
146-
}
147-
</GridLayout>
160+
{this.renderVisualizationGrid()}
148161
</div>
149162
)
150163
}

‎src/js/components/Dashboards.jsx

+78-60
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ class Dashboards extends Component {
134134
dispatch(resetEditDialog())
135135
}
136136

137-
generateActions (cancelText, submitText, onCancelTap, onSubmitTap) {
137+
renderActions (cancelText, submitText, onCancelTap, onSubmitTap) {
138138
return [
139139
<FlatButton
140140
key={0}
@@ -151,20 +151,37 @@ class Dashboards extends Component {
151151
]
152152
}
153153

154-
selectDashboard (event, index, id) {
155-
browserHistory.push(`/dashboards/${id}`)
154+
renderCrudButtons () {
155+
return (
156+
<div>
157+
{/* <FlatButton
158+
disabled={!id}
159+
label='Edit'
160+
onTouchTap={this.showEditDialog}
161+
/>
162+
<FlatButton
163+
disabled={!id}
164+
label='Delete'
165+
onTouchTap={this.showDeleteDialog}
166+
/>
167+
<FlatButton
168+
label='Create'
169+
primary={true}
170+
onTouchTap={this.showCreateDialog}
171+
/> */}
172+
</div>
173+
)
156174
}
157-
158-
render () {
175+
176+
renderCrudDialogs () {
177+
const createActions = this.renderActions('Cancel', 'Create', this.hideCreateDialog, this.createDashboard)
178+
const deleteActions = this.renderActions('Cancel', 'Delete', this.hideDeleteDialog, this.deleteDashboard)
179+
const editActions = this.renderActions('Cancel', 'Save', this.hideEditDialog, this.editDashboard)
159180
const {
160181
createDashboardDialog,
161-
dashboardId = '',
162-
dashboards,
163182
deleteDashboardDialog,
164183
editDashboardDialog
165184
} = this.props
166-
const dashboard = getDashboardById(dashboards.data, dashboardId)
167-
const {title} = dashboard || {}
168185
const {
169186
subtitle: createSubtitle,
170187
title: createTitle,
@@ -178,60 +195,9 @@ class Dashboards extends Component {
178195
title: editTitle,
179196
visibility: editVisibility
180197
} = editDashboardDialog
181-
const createActions = this.generateActions('Cancel', 'Create', this.hideCreateDialog, this.createDashboard)
182-
const deleteActions = this.generateActions('Cancel', 'Delete', this.hideDeleteDialog, this.deleteDashboard)
183-
const editActions = this.generateActions('Cancel', 'Save', this.hideEditDialog, this.editDashboard)
184198

185199
return (
186200
<div>
187-
<header style={header}>
188-
<h1>Dashboards {title ? `/ ${title}` : ''}</h1>
189-
</header>
190-
<main style={main}>
191-
<SelectField
192-
autoWidth={true}
193-
floatingLabelText='Select a dashboard'
194-
hintText='Select a dashboard'
195-
isFetching={dashboards.isFetching}
196-
items={(dashboards.data || []).sort((a, b) => (
197-
a.title.localeCompare(b.title)
198-
))}
199-
keyProp={'_id'}
200-
primaryTextProp={'title'}
201-
value={dashboardId}
202-
valueProp={'_id'}
203-
onChange={this.selectDashboard}
204-
/>
205-
{/* <FlatButton
206-
disabled={!id}
207-
label='Edit'
208-
onTouchTap={this.showEditDialog}
209-
/>
210-
<FlatButton
211-
disabled={!id}
212-
label='Delete'
213-
onTouchTap={this.showDeleteDialog}
214-
/>
215-
<FlatButton
216-
label='Create'
217-
primary={true}
218-
onTouchTap={this.showCreateDialog}
219-
/> */}
220-
{(() => {
221-
if (!dashboardId || dashboards.data.length === 0 || dashboards.isFetching || dashboards.error) {
222-
return null
223-
}
224-
225-
return (
226-
<Dashboard
227-
dashboard={dashboard}
228-
dashboardId={dashboardId}
229-
key={dashboardId}
230-
/>
231-
)
232-
})()}
233-
</main>
234-
{/* Dialog Definitions */}
235201
<Dialog
236202
actions={createActions}
237203
contentStyle={style}
@@ -283,6 +249,58 @@ class Dashboards extends Component {
283249
</div>
284250
)
285251
}
252+
253+
selectDashboard (event, index, id) {
254+
browserHistory.push(`/dashboards/${id}`)
255+
}
256+
257+
render () {
258+
const {
259+
dashboardId = '',
260+
dashboards
261+
} = this.props
262+
const dashboard = getDashboardById(dashboards.data, dashboardId)
263+
const {title} = dashboard || {}
264+
265+
return (
266+
<div>
267+
<header style={header}>
268+
<h1>Dashboards {title ? `/ ${title}` : ''}</h1>
269+
</header>
270+
<main style={main}>
271+
<SelectField
272+
autoWidth={true}
273+
floatingLabelText='Select a dashboard'
274+
hintText='Select a dashboard'
275+
isFetching={dashboards.isFetching}
276+
items={(dashboards.data || []).sort((a, b) => (
277+
a.title.localeCompare(b.title)
278+
))}
279+
keyProp={'_id'}
280+
primaryTextProp={'title'}
281+
value={dashboardId}
282+
valueProp={'_id'}
283+
onChange={this.selectDashboard}
284+
/>
285+
{this.renderCrudButtons()}
286+
{(() => {
287+
if (!dashboardId || dashboards.data.length === 0 || dashboards.isFetching || dashboards.error) {
288+
return null
289+
}
290+
291+
return (
292+
<Dashboard
293+
dashboard={dashboard}
294+
dashboardId={dashboardId}
295+
key={dashboardId}
296+
/>
297+
)
298+
})()}
299+
</main>
300+
{this.renderCrudDialogs()}
301+
</div>
302+
)
303+
}
286304
}
287305

288306
export default connect((state, ownProps) => ({

0 commit comments

Comments
 (0)