Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A React component for rendering a set of LightItem components for Philip Hue lights
import React, { Component } from 'react';
import LightItem from './LightItem';
import Config from './config';
class LightsView extends Component {
constructor(props) {
super(props);
this.requestFailed = false;
this.data = null;
this.onToggleLight = this.onToggleLight.bind(this);
this.fetchData = this.fetchData.bind(this);
this.onBrightnessChanged = this.onBrightnessChanged.bind(this);
setInterval(this.fetchData,5000);
}
componentWillMount() {
this.fetchData();
}
getUrlWithUsername() {
return Config.apiUrl + '/api/' + Config.username + '/lights';
}
fetchData() {
let url = this.getUrlWithUsername();
fetch(url)
.then(response => {
if (!response.ok) {
throw Error('Network request failed');
}
return response;
})
.then(d => d.json())
.then(d => {
this.data = d;
this.requestFailed = false;
this.setState({newData:new Date()});
}, () => {
this.requestFailed = true;
this.setState({newData:new Date()});
})
}
changeState(id, bodyData) {
let url = this.getUrlWithUsername() + '/' + id + '/state';
fetch(url, { method: 'PUT', body: bodyData })
.then(response => {
if (!response.ok) {
throw Error('Network request failed');
}
return response;
})
.then(d => d.json())
.then(d => {
this.requestFailed = false;
this.fetchData();
}, () => {
this.requestFailed = true;
})
}
onToggleLight(id, isOn) {
let bodyData = '{"on":' + !isOn + '}';
this.changeState(id, bodyData);
}
onBrightnessChanged(id, newValue) {
let bodyData = '{"bri":' + newValue + '}';
this.changeState(id, bodyData);
}
render() {
if (this.requestFailed) {
let url = this.getUrlWithUsername();
return <p className='warning'>Could not fetch from {url}</p>
}
if (!this.data) {
return <p>Loading...</p>;
}
if (this.data[0] !== undefined) {
return <p className='warning'>{this.data[0].error.description}</p>;
}
let data = this.data;
let lightItems = [];
let toggleHandler = this.onToggleLight;
let brightnessHandler = this.onBrightnessChanged;
Object.keys(data).forEach(function(id,index) {
let item = data[id];
let light = <LightItem key={id} id={id} name={data[id].name}
isOn={item.state.on} bri={item.state.bri}
reachable={item.state.reachable}
onToggleLight={toggleHandler}
onBrightnessChanged={brightnessHandler}/>
lightItems.push(light);
});
return (
<div align='center' style={{maxWidth:950,margin: '20px auto 0'}}>
{lightItems}
</div>
);
}
}
export default LightsView;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.