Delete playground.js
This commit is contained in:
Michael Diarmid
GitHub
parent
eb48435421
commit
2d8f6314d4
|
|
@ -1,159 +0,0 @@
|
||||||
import React, { Component } from 'react';
|
|
||||||
import { View, SectionList, Text, Button } from 'react-native';
|
|
||||||
|
|
||||||
export default class HomeScreen extends Component {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
bgColor: '#cb2600',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
clickMe = () => {
|
|
||||||
if (this.state.bgColor === '#a8139f') {
|
|
||||||
this.setState({ bgColor: '#cb2600' });
|
|
||||||
} else {
|
|
||||||
this.setState({ bgColor: '#a8139f' });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<View style={{ backgroundColor: this.state.bgColor }}>
|
|
||||||
<Text style={{ color: '#fff' }}>Hello</Text>
|
|
||||||
<Text style={{ color: '#22ff31' }}>World</Text>
|
|
||||||
<Button title="Change to pink" onPress={this.clickMe} />
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const sampleData = {
|
|
||||||
somePostId1: {
|
|
||||||
title: 'today now',
|
|
||||||
timestamp: Date.now(),
|
|
||||||
startOfDay: 1502838000,
|
|
||||||
},
|
|
||||||
|
|
||||||
somePostId3: {
|
|
||||||
title: 'today but older',
|
|
||||||
timestamp: Date.now() - 10000000,
|
|
||||||
startOfDay: 1502838000,
|
|
||||||
},
|
|
||||||
|
|
||||||
somePostId4: {
|
|
||||||
title: 'today but even older',
|
|
||||||
timestamp: Date.now() - 60000000,
|
|
||||||
startOfDay: 1502838000,
|
|
||||||
},
|
|
||||||
|
|
||||||
somePostId2: {
|
|
||||||
title: 'hello yesterday',
|
|
||||||
timestamp: Date.now() - 82000000, // minus 23 hours - just to make it yesterday ;p
|
|
||||||
startOfDay: 1502751600, // yesterday ;p
|
|
||||||
},
|
|
||||||
|
|
||||||
somePostId5: {
|
|
||||||
title: 'hello yesterday but older',
|
|
||||||
timestamp: Date.now() - 82800000, // minus 23 hours - just to make it yesterday ;p
|
|
||||||
startOfDay: 1502751600, // yesterday ;p
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// export default class PostsScreen extends Component {
|
|
||||||
// constructor(props) {
|
|
||||||
// super(props);
|
|
||||||
// this.ref = null;
|
|
||||||
// this.state = {
|
|
||||||
// postSections: [],
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// componentDidMount() {
|
|
||||||
// // this.ref = firebase.database().ref('posts');
|
|
||||||
// // this.ref.on('value', this._onPostsUpdate);
|
|
||||||
// // just fake it to test
|
|
||||||
// this._onPostsUpdate({
|
|
||||||
// val() {
|
|
||||||
// return sampleData;
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// componentWillUnmount() {
|
|
||||||
// // always unsubscribe from realtime events when component unmounts
|
|
||||||
// // if (this.ref) {
|
|
||||||
// // this.ref.off('value', this._onPostsUpdate);
|
|
||||||
// // }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// _onPostsUpdate(snapshot) {
|
|
||||||
// const value = snapshot.val() || {};
|
|
||||||
// const keys = Object.keys(value);
|
|
||||||
// const sections = {};
|
|
||||||
//
|
|
||||||
// // we'll group them now by date
|
|
||||||
// for (let i = 0, len = keys.length; i < len; i++) {
|
|
||||||
// const key = keys[i];
|
|
||||||
// const post = value[key];
|
|
||||||
//
|
|
||||||
// // assuming post will have a 'timestamp' field and a `startOfDay` field
|
|
||||||
// // start of day can be calculated as above `startOfToday`
|
|
||||||
//
|
|
||||||
// if (!sections[post.startOfDay]) {
|
|
||||||
// sections[post.startOfDay] = {
|
|
||||||
// title: 'Header - I will leave this up to you', // todo today/yesterday/3 days ago etc
|
|
||||||
// // will use this later to sort the sections so today is on top
|
|
||||||
// key: post.startOfDay,
|
|
||||||
// data: [],
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// const data = Object.assign({ key }, post);
|
|
||||||
// // add a post to a specific section date
|
|
||||||
// // we'll push/unshift depending on the date, so they' appear in order
|
|
||||||
// if (!sections[post.startOfDay].data.length) {
|
|
||||||
// // array is empty so nothing to compare sort, just push it
|
|
||||||
// sections[post.startOfDay].data.push(data);
|
|
||||||
// } else {
|
|
||||||
// const previousTimestamp = sections[post.startOfDay].data[sections[post.startOfDay].data.length - 1].timestamp;
|
|
||||||
// if (previousTimestamp < data.timestamp) sections[post.startOfDay].data.unshift(data);
|
|
||||||
// else sections[post.startOfDay].data.push(data);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// this.setState({
|
|
||||||
// postSections: Object.values(sections).sort((a, b) => a.key > b.key).reverse(),
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// _renderSectionItem = ({ item }) => {
|
|
||||||
// // todo your custom section item component
|
|
||||||
// // return (
|
|
||||||
// // <EventCell
|
|
||||||
// // userName={item.userName}
|
|
||||||
// // postTitle={item.postTitle}
|
|
||||||
// // />
|
|
||||||
// // );
|
|
||||||
//
|
|
||||||
// return <Text>{`${item.title} - ${item.timestamp}`}</Text>;
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
// _renderSectionHeader = ({ section }) => {
|
|
||||||
// // todo your custom section header
|
|
||||||
// return (
|
|
||||||
// <Text style={{ backgroundColor: '#000', color: '#fff' }}>{section.title}</Text>
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
//
|
|
||||||
// render() {
|
|
||||||
// return (
|
|
||||||
// <SectionList
|
|
||||||
// sections={this.state.postSections}
|
|
||||||
// renderItem={this._renderSectionItem}
|
|
||||||
// renderSectionHeader={this._renderSectionHeader}
|
|
||||||
// />
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
Loading…
Reference in New Issue