(feat): add chapter release dates and new chapter indicator

- model now has date available if exists, scraper now gets date
- date is right aligned in chapter list as it shouldn't be top of
  mind and isn't always relevant to readers
- "New!" is in pale blue next to the chapter number as it is often
  relevant and should stand out
  - it's pale because we're on a dark background, regular blue is
    hard to see
  - add some date utils and a .isNew() model view to support this

- TODO: in Manga List, add indicator if it has a new and unread
  chapter available
  - requires getting chapter list in background or in Manga List
    view, not just in Chapter List view

components/chapterList.js

@@ -78,6 +78,10 @@ class Chapter extends React.Component {
         <Text style={styles.chapterTitle}>
           CHAPTER {chapter.title}
         </Text>
+        {chapter.isNew() && <Text style={styles.newText}>New!</Text>}
+        <Text style={styles.date}>
+          {chapter.date && chapter.date.toLocaleDateString()}
+        </Text>
       </View>
     </TouchableWithoutFeedback>
   }

components/chapterStyles.js

@@ -7,6 +7,8 @@ const styles = {
     right: 0,
     backgroundColor: '#333'
   },
+
+  // nav styles
   navBar: {
     width: '100%',
     height: 34
@@ -24,6 +26,8 @@ const styles = {
     fontSize: 30,
     color: 'gray'
   },
+
+  // manga desc styles
   header: {
     flexDirection: 'row',
     maxHeight: 349,
@@ -61,7 +65,10 @@ const styles = {
     fontSize: 16,
     lineHeight: 20
   },
+
+  // chapter list styles
   chapter: {
+    flexDirection: 'row',
     padding: 16,
     backgroundColor: '#333',
     borderBottomWidth: 1,
@@ -75,6 +82,20 @@ const styles = {
     lineHeight: 16,
     fontWeight: '900',
     color: '#fff'
+  },
+  newText: {
+    marginLeft: 6,
+    fontSize: 14,
+    lineHeight: 16,
+    fontWeight: '900',
+    color: '#8ca0d1' // pale blue
+  },
+  date: {
+    marginLeft: 'auto', // right align
+    fontSize: 14,
+    lineHeight: 16,
+    fontWeight: '700', // smaller than rest as not as important
+    color: '#ddd' // v. light gray
   }
 }
 

models/models.js

@@ -1,6 +1,7 @@
 import { types, flow } from 'mobx-state-tree'
 
 import { getLatest, getSearch, getChapters, getPages } from './api.js'
+import { nextDay } from '../utils/dateHelpers.js'
 
 const AppModel = types.model('App', {
   isHorizontal: true,
@@ -112,9 +113,15 @@ const Manga = types.model('Manga', {
 const Chapter = types.model('Chapter', {
   link: types.identifier,
   title: types.string,
+  date: types.maybeNull(types.Date), // can be non-existent or invalid
   read: false,
   pages: types.array(types.late(() => Page))
-}).actions((self) => ({
+}).views((self) => ({
+  isNew () {
+    // less than a week old
+    return self.date && self.date > nextDay(new Date(), -7)
+  }
+})).actions((self) => ({
   loadPages: flow(function * loadPages () {
     self.pages = yield getPages(self.link)
     self.read = true

utils/dateHelpers.js

@@ -0,0 +1,9 @@
+export function dupDate (date) {
+  return new Date(date.valueOf())
+}
+
+export function nextDay (date, days = 1) {
+  const newDate = dupDate(date)
+  newDate.setDate(date.getDate() + days)
+  return newDate
+}