{"id":4544,"date":"2023-11-08T14:44:03","date_gmt":"2023-11-08T07:44:03","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=4544"},"modified":"2023-11-08T15:14:53","modified_gmt":"2023-11-08T08:14:53","slug":"menampilkan-sectionlist-dengan-informasi-today-yesterday-tomorrow","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/menampilkan-sectionlist-dengan-informasi-today-yesterday-tomorrow\/","title":{"rendered":"Menampilkan SectionList dengan Informasi Today Yesterday Tomorrow"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Kali ini kita akan menggunakan SectionList <\/strong>sebagai penampil list, library lodash <\/strong>untuk mengroup data berdasarkan tanggal, dan moment <\/strong>untuk memodifikasi informasi hari <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Langsung saja kita ke source codenya:<\/p>\n\n\n\n

import React, { useMemo } from 'react';\nimport {\n  StyleSheet,\n  Text,\n  View,\n  SafeAreaView,\n  SectionList,\n  StatusBar,\n} from 'react-native';\nimport _ from 'lodash';\nimport moment from 'moment';\n\n\/\/ call this function, passing-in your date\nfunction dateToFromNowDaily(myDate) {\n  \/\/ get from-now for this date\n  var fromNow = moment(myDate).fromNow();\n\n  \/\/ ensure the date is displayed with today and yesterday\n  return moment(myDate).calendar(null, {\n    \/\/ when the date is closer, specify custom values\n    lastWeek: '[Last] dddd',\n    lastDay: '[Yesterday]',\n    sameDay: '[Today]',\n    nextDay: '[Tomorrow]',\n    nextWeek: 'dddd',\n    \/\/ when the date is further away, use from-now functionality\n    sameElse: function () {\n      return '[' + fromNow + ']';\n    },\n  });\n}\nconst DATA = [\n  {\n    id: '1',\n    date: '2023-11-10',\n    title: 'title1',\n    description: 'pay ipsum 0 !',\n  },\n  {\n    id: '2',\n    date: '2023-11-08',\n    title: 'title2',\n    description: 'Lorem ipsum 1 !',\n  },\n  {\n    id: '3',\n    date: '2023-11-07',\n    title: 'title3',\n    description: 'Lorem ipsum 2',\n  },\n  {\n    id: '4',\n    date: '2023-11-05',\n    title: 'title4',\n    description: 'Lorem ipsum 3',\n  },\n  {\n    id: '5',\n    date: '2023-11-09',\n    title: 'title5',\n    description: 'Custom desc',\n  },\n  {\n    id: '6',\n    date: '2023-11-01',\n    title: 'title5',\n    description: 'Lorem ipsum 5',\n  },\n];\n\nconst App = () => {\n  const FormattedData = useMemo(() => {\n    const groupedArray = _(DATA)\n      .groupBy((x) => dateToFromNowDaily(x.date))\n      .map(function (items, title) {\n        return {\n          header: title,\n          data: items,\n        };\n      })\n      .value();\n    return groupedArray;\n  }, [DATA]);\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <SectionList\n        sections={FormattedData}\n        keyExtractor={(item, index) => item + index}\n        renderItem={({ item }) => (\n          <View style={styles.item}>\n            <Text style={styles.title}>{item.title}<\/Text>\n            <Text style={styles.title}>{item.description}<\/Text>\n          <\/View>\n        )}\n        renderSectionHeader={({ section: { header } }) => (\n          <Text style={styles.header}>{header}<\/Text>\n        )}\n      \/>\n    <\/SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    paddingTop: StatusBar.currentHeight,\n    marginHorizontal: 16,\n  },\n  item: {\n    backgroundColor: '#f9c2ff',\n    padding: 20,\n    marginVertical: 8,\n  },\n  header: {\n    fontSize: 32,\n    backgroundColor: '#fff',\n  },\n  title: {\n    fontSize: 24,\n  },\n});\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Singkatnya, source code di atas mengambil daftar item, mengelompokkannya berdasarkan tanggal menggunakan fungsi dateToFromNowDaily<\/strong>, dan menampilkannya dalam komponen SectionList <\/strong>tempat item dikelompokkan berdasarkan tanggal yang diformat masing-masing. Tanggal disajikan relatif terhadap waktu saat ini menggunakan aturan pemformatan yang ditentukan.<\/p>\n\n\n\n
Snack Source Code Link<\/p>\n\n\n\n
https:\/\/snack.expo.dev\/@rudiahmad\/sectionlist-example-with-date-title<\/a><\/p>\n\n\n\n
Referensi <\/p>\n\n\n\n
https:\/\/stackoverflow.com\/questions\/35441820\/tomorrow-today-and-yesterday-with-momentjs<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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,...<\/p>\n","protected":false},"author":1,"featured_media":4552,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[173],"tags":[],"class_list":["post-4544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=4544"}],"version-history":[{"count":10,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4544\/revisions"}],"predecessor-version":[{"id":4559,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4544\/revisions\/4559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/4552"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=4544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=4544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=4544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}