vetkamak.js

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}
      />
    );
  }
}