Menampilkan SectionList dengan Informasi Today Yesterday Tomorrow

Di kantor ada permintaan membuat list data dengan informasi header yang menampilkan informasi hari berdasarkan tanggal sekarang seperti hari ini, besok, kemarin, minggu lalu, dsb.

Kali ini kita akan menggunakan SectionList sebagai penampil list, library lodash untuk mengroup data berdasarkan tanggal, dan moment untuk memodifikasi informasi hari

Langsung saja kita ke source codenya:

import React, { useMemo } from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  SectionList,
  StatusBar,
} from 'react-native';
import _ from 'lodash';
import moment from 'moment';

// call this function, passing-in your date
function dateToFromNowDaily(myDate) {
  // get from-now for this date
  var fromNow = moment(myDate).fromNow();

  // ensure the date is displayed with today and yesterday
  return moment(myDate).calendar(null, {
    // when the date is closer, specify custom values
    lastWeek: '[Last] dddd',
    lastDay: '[Yesterday]',
    sameDay: '[Today]',
    nextDay: '[Tomorrow]',
    nextWeek: 'dddd',
    // when the date is further away, use from-now functionality
    sameElse: function () {
      return '[' + fromNow + ']';
    },
  });
}
const DATA = [
  {
    id: '1',
    date: '2023-11-10',
    title: 'title1',
    description: 'pay ipsum 0 !',
  },
  {
    id: '2',
    date: '2023-11-08',
    title: 'title2',
    description: 'Lorem ipsum 1 !',
  },
  {
    id: '3',
    date: '2023-11-07',
    title: 'title3',
    description: 'Lorem ipsum 2',
  },
  {
    id: '4',
    date: '2023-11-05',
    title: 'title4',
    description: 'Lorem ipsum 3',
  },
  {
    id: '5',
    date: '2023-11-09',
    title: 'title5',
    description: 'Custom desc',
  },
  {
    id: '6',
    date: '2023-11-01',
    title: 'title5',
    description: 'Lorem ipsum 5',
  },
];

const App = () => {
  const FormattedData = useMemo(() => {
    const groupedArray = _(DATA)
      .groupBy((x) => dateToFromNowDaily(x.date))
      .map(function (items, title) {
        return {
          header: title,
          data: items,
        };
      })
      .value();
    return groupedArray;
  }, [DATA]);

  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        sections={FormattedData}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.title}>{item.description}</Text>
          </View>
        )}
        renderSectionHeader={({ section: { header } }) => (
          <Text style={styles.header}>{header}</Text>
        )}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  header: {
    fontSize: 32,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
  },
});

export default App;

Singkatnya, source code di atas mengambil daftar item, mengelompokkannya berdasarkan tanggal menggunakan fungsi dateToFromNowDaily, dan menampilkannya dalam komponen SectionList tempat item dikelompokkan berdasarkan tanggal yang diformat masing-masing. Tanggal disajikan relatif terhadap waktu saat ini menggunakan aturan pemformatan yang ditentukan.

Snack Source Code Link

https://snack.expo.dev/@rudiahmad/sectionlist-example-with-date-title

Referensi

https://stackoverflow.com/questions/35441820/tomorrow-today-and-yesterday-with-momentjs