git ssb

1
const nest = require('depnest')
2
const { h, Array: MutantArray, map, Struct, computed, watch, throttle, resolve } = require('mutant')
3
4
const pull = require('pull-stream')
5
const { isMsg } = require('ssb-ref')
6
7
exports.gives = nest({
8
  'app.page.calendar': true,
9
  'app.html.menuItem': true
10
})
11
12
exports.needs = nest({
13
  'message.html.render': 'first',
14
  'app.sync.goTo': 'first',
15
  'sbot.async.get': 'first',
16
  'sbot.pull.stream': 'first'
17
})
18
19
exports.create = (api) => {
20
  return nest({
21
    'app.html.menuItem': menuItem,
22
    'app.page.calendar': calendarPage
23
  })
24
25
  function menuItem () {
26
    return h('a', {
27
      style: { order: 1 },
28
      'ev-click': () => api.app.sync.goTo({ page: 'calendar' })
29
    }, '/calendar')
30
  }
31
32
  function calendarPage (location) {
33
    const d = new Date()
34
    const state = Struct({
35
      today: new Date(d.getFullYear(), d.getMonth(), d.getDate()),
36
      year: d.getFullYear(),
37
      events: MutantArray([]),
38
      range: Struct({
39
        gte: new Date(d.getFullYear(), d.getMonth(), d.getDate()),
40
        lt: new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1)
41
      })
42
    })
43
44
    watch(state.year, year => getEvents(year, state.events, api))
45
46
    const page = h('CalendarPage', { title: '/calendar' }, [
47
      Calendar(state),
48
      Events(state, api)
49
    ])
50
51
    page.scroll = (i) => scroll(state.range, i)
52
53
    return page
54
  }
55
}
56
57
function scroll (range, i) {
58
  const { gte, lt } = resolve(range)
59
60
  if (isMonthInterval(gte, lt)) {
61
    range.gte.set(new Date(gte.getFullYear(), gte.getMonth() + i, gte.getDate()))
62
    range.lt.set(new Date(lt.getFullYear(), lt.getMonth() + i, lt.getDate()))
63
    return
64
  }
65
66
  if (isWeekInterval(gte, lt)) {
67
    range.gte.set(new Date(gte.getFullYear(), gte.getMonth(), gte.getDate() + 7 * i))
68
    range.lt.set(new Date(lt.getFullYear(), lt.getMonth(), lt.getDate() + 7 * i))
69
    return
70
  }
71
72
  range.gte.set(new Date(gte.getFullYear(), gte.getMonth(), gte.getDate() + i))
73
  range.lt.set(new Date(lt.getFullYear(), lt.getMonth(), lt.getDate() + i))
74
75
  function isMonthInterval (gte, lt) {
76
    return gte.getDate() === 1 && // 1st of month
77
      lt.getDate() === 1 && // to the 1st of the month
78
      gte.getMonth() + 1 === lt.getMonth() && // one month gap
79
      gte.getFullYear() === lt.getFullYear()
80
  }
81
82
  function isWeekInterval (gte, lt) {
83
    console.log(
84
      new Date(gte.getFullYear(), gte.getMonth(), gte.getDate() + 7).toISOString() === lt.toISOString(),
85
      new Date(gte.getFullYear(), gte.getMonth(), gte.getDate() + 7).toISOString(),
86
      lt.toISOString()
87
    )
88
    return gte.getDay() === 1 && // from monday
89
      lt.getDay() === 1 && // to just inside monday
90
      new Date(gte.getFullYear(), gte.getMonth(), gte.getDate() + 7).toISOString() === lt.toISOString()
91
  }
92
}
93
94
function Events (state, api) {
95
  return h('CalendarEvents', computed([state.events, state.range], (events, range) => {
96
    const keys = events
97
      .filter(ev => ev.date >= range.gte && ev.date < range.lt)
98
      .sort((a, b) => a.date - b.date)
99
      .map(ev => ev.data.key)
100
101
    const gatherings = MutantArray([])
102
103
    pull(
104
      pull.values(keys),
105
      pull.asyncMap((key, cb) => {
106
        api.sbot.async.get(key, (err, value) => {
107
          if (err) return cb(err)
108
          cb(null, {key, value})
109
        })
110
      }),
111
      pull.drain(msg => gatherings.push(msg))
112
    )
113
114
    return map(gatherings, g => api.message.html.render(g))
115
  }))
116
}
117
118
function getEvents (year, events, api) {
119
  const query = [{
120
    $filter: {
121
      value: {
122
        timestamp: {$gt: Number(new Date(year, 0, 1))}, // ordered by published time
123
        content: {
124
          type: 'about',
125
          startDateTime: {
126
            epoch: {$gt: 0}
127
          }
128
        }
129
      }
130
    }
131
  }, {
132
    $map: {
133
      key: ['value', 'content', 'about'], // gathering
134
      date: ['value', 'content', 'startDateTime', 'epoch']
135
    }
136
  }]
137
138
  const opts = {
139
    reverse: false,
140
    live: true,
141
    query
142
  }
143
144
  pull(
145
    api.sbot.pull.stream(server => server.query.read(opts)),
146
    pull.filter(m => !m.sync),
147
    pull.filter(r => isMsg(r.key) && Number.isInteger(r.date)),
148
    pull.map(r => {
149
      return { key: r.key, date: new Date(r.date) }
150
    }),
151
    pull.drain(({ key, date }) => {
152
      var target = events.find(ev => ev.data.key === key)
153
      if (target && target.date <= date) events.delete(target)
154
155
      events.push({ date, data: { key } })
156
    })
157
  )
158
}
159
160
// ////////////////// extract below into a module ///////////////////////
161
162
// Thanks to nomand for the inspiration and code (https://github.com/nomand/Letnice),
163
// they formed the foundation of this work
164
165
const MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]
166
const DAYS = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ]
167
168
function Calendar (state) {
169
  // TODO assert events is an Array of object
170
  // of form { date, data }
171
172
  const { gte, lt } = state.range
173
174
  return h('Calendar', [
175
    h('div.header', [
176
      h('div.year', [
177
        state.year,
178
        h('a', { 'ev-click': () => state.year.set(state.year() - 1) }, '-'),
179
        h('a', { 'ev-click': () => state.year.set(state.year() + 1) }, '+')
180
      ])
181
    ]),
182
    h('div.months', computed(throttle(state, 100), ({ today, year, events, range }) => {
183
      return MONTHS.map((month, monthIndex) => {
184
        return Month({ month, monthIndex, today, year, events, range, gte, lt })
185
      })
186
    }))
187
  ])
188
}
189
190
function Month ({ month, monthIndex, today, year, events, range, gte, lt }) {
191
  const monthLength = new Date(year, monthIndex + 1, 0).getDate()
192
  // NOTE Date takes month as a monthIndex i.e. april = 3
193
  // and day = 0 goes back a day
194
  const days = Array(monthLength).fill().map((_, i) => i + 1)
195
196
  var weekday
197
  var week
198
  var offset = getDay(new Date(year, monthIndex, 1)) - 1
199
200
  const setMonthRange = (ev) => {
201
    gte.set(new Date(year, monthIndex, 1))
202
    lt.set(new Date(year, monthIndex + 1, 1))
203
  }
204
205
  return h('CalendarMonth', [
206
    h('div.month-name', { 'ev-click': setMonthRange }, month.substr(0, 2)),
207
    h('div.days', { style: {display: 'grid'} }, [
208
      DAYS.map((day, i) => DayName(day, i)),
209
      days.map(Day)
210
    ])
211
  ])
212
213
  function Day (day) {
214
    const date = new Date(year, monthIndex, day)
215
    const dateEnd = new Date(year, monthIndex, day + 1)
216
    weekday = getDay(date)
217
    week = Math.ceil((day + offset) / 7)
218
219
    const eventsOnDay = events.filter(e => {
220
      return e.date >= date && e.date < dateEnd
221
    })
222
223
    const opts = {
224
      attributes: {
225
        'title': `${year}-${monthIndex + 1}-${day}`,
226
        'data-date': `${year}-${monthIndex + 1}-${day}`
227
      },
228
      style: {
229
        'grid-row': `${weekday} / ${weekday + 1}`,
230
        'grid-column': `${week + 1} / ${week + 2}`
231
        // column moved by 1 to make space for labels
232
      },
233
      classList: [
234
        date < today ? '-past' : '-future',
235
        eventsOnDay.length ? '-events' : '',
236
        date >= range.gte && date < range.lt ? '-selected' : ''
237
      ],
238
      'ev-click': (ev) => {
239
        if (ev.shiftKey) {
240
          dateEnd >= resolve(lt) ? lt.set(dateEnd) : gte.set(date)
241
          return
242
        }
243
244
        gte.set(date)
245
        lt.set(dateEnd)
246
      }
247
    }
248
249
    if (!eventsOnDay.length) return h('CalendarDay', opts)
250
251
    return h('CalendarDay', opts, [
252
      // TODO add awareness of whether I'm going to events
253
      // TODO try a FontAwesome circle
254
      h('div.dot', [
255
        // Math.random() > 0.3 ? h('div') : ''
256
      ])
257
    ])
258
  }
259
}
260
261
function DayName (day, index) {
262
  return h('CalendarDayName', {
263
    style: {
264
      'grid-row': `${index + 1} / ${index + 2}`,
265
      'grid-column': '1 / 2'
266
    }
267
  }, day.substr(0, 1))
268
}
269
270
function getDay (date) {
271
  const dayIndex = date.getDay()
272
  return dayIndex === 0 ? 7 : dayIndex
273
274
  // Weeks run 0...6 (Sun - Sat)
275
  // this shifts those days around by 1
276
}
277