src/components/messages/DateHeader.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import moment from 'moment';
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {normalize} from '../../utils';

const DateHeader: React.FC = ({date}) => {
  if (!date) {
    return null;
  }

  var dateMoment = moment(date).startOf('day');
  var printDate = '';

  const TODAY = moment().startOf('day');
  const YESTERDAY = moment().subtract(1, 'day').startOf('day');
  const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day');

  if (TODAY.isSame(dateMoment)) {
    printDate = 'Today';
  } else if (YESTERDAY.isSame(dateMoment)) {
    printDate = 'Yesterday';
  } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) {
    printDate = dateMoment.format('dddd');
  } else {
    if (dateMoment.get('year') === TODAY.get('year')) {
      printDate = dateMoment.format('MMMM D') + 'th';
    } else {
      printDate = dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year');
    }
  }
  return (
    <View style={{backgroundColor: 'transparent'}}>
      <Text style={styles.dateHeader}>{printDate}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  dateHeader: {
    color: '#7A7A7A',
    fontWeight: '600',
    fontSize: normalize(11),
    textAlign: 'center',
    marginVertical: '5%',
  },
});

export default DateHeader;