git ssb

1
var nest = require('depnest')
2
var ref = require('ssb-ref')
3
var {h, when, computed, map, send, dictToCollection, resolve} = require('mutant')
4
var extend = require('xtend')
5
6
exports.needs = nest({
7
  'about.obs': {
8
    name: 'first',
9
    description: 'first',
10
    names: 'first',
11
    images: 'first',
12
    color: 'first'
13
  },
14
  'blob.sync.url': 'first',
15
  'blob.html.input': 'first',
16
  'message.async.publish': 'first',
17
  'message.html.markdown': 'first',
18
  'about.html.image': 'first',
19
  'feed.html.rollup': 'first',
20
  'feed.pull.profile': 'first',
21
  'sbot.async.publish': 'first',
22
  'keys.sync.id': 'first',
23
  'sheet.display': 'first',
24
  'profile.obs.rank': 'first',
25
  'profile.sheet.edit': 'first',
26
  'contact.obs': {
27
    followers: 'first',
28
    following: 'first'
29
  },
30
  'intl.sync.i18n': 'first',
31
})
32
exports.gives = nest('page.html.render')
33
34
exports.create = function (api) {
35
  const i18n = api.intl.sync.i18n
36
  return nest('page.html.render', function profile (id) {
37
    if (!ref.isFeed(id)) return
38
39
    var name = api.about.obs.name(id)
40
    var description = api.about.obs.description(id)
41
    var yourId = api.keys.sync.id()
42
    var yourFollows = api.contact.obs.following(yourId)
43
    var rawFollowers = api.contact.obs.followers(id)
44
    var rawFollowing = api.contact.obs.following(id)
45
    var friendsLoaded = computed([rawFollowers.sync, rawFollowing.sync], (...x) => x.every(Boolean))
46
47
    var friends = computed([rawFollowing, rawFollowers], (following, followers) => {
48
      return Array.from(following).filter(follow => followers.includes(follow))
49
    })
50
51
    var following = computed([rawFollowing, friends], (following, friends) => {
52
      return Array.from(following).filter(follow => !friends.includes(follow))
53
    })
54
55
    var followers = computed([rawFollowers, friends], (followers, friends) => {
56
      return Array.from(followers).filter(follower => !friends.includes(follower))
57
    })
58
59
    var isFriends = computed([friends], function (friends) {
60
      return friends.includes(yourId)
61
    })
62
63
    var followsYou = computed([following], function (followsYou) {
64
      return followsYou.includes(yourId)
65
    })
66
67
    var youFollow = computed([yourFollows], function (youFollow) {
68
      return youFollow.includes(id)
69
    })
70
71
    var names = api.about.obs.names(id)
72
    var images = api.about.obs.images(id)
73
74
    var namePicker = h('div', {className: 'Picker'}, [
75
      map(dictToCollection(names), (item) => {
76
        var isSelf = computed(item.value, (ids) => ids.includes(id))
77
        var isAssigned = computed(item.value, (ids) => ids.includes(yourId))
78
        return h('a.name', {
79
          'ev-click': () => {
80
            if (!isAssigned()) {
81
              assignName(id, resolve(item.key))
82
            }
83
          },
84
          href: '#',
85
          classList: [
86
            when(isSelf, '-self'),
87
            when(isAssigned, '-assigned')
88
          ],
89
          title: nameList(when(isSelf, i18n('Self Assigned'), i18n('Assigned By')), item.value)
90
        }, [
91
          item.key
92
        ])
93
      }),
94
      h('a -add', {
95
        'ev-click': () => {
96
          rename(id)
97
        },
98
        href: '#',
99
      }, ['+'])
100
    ])
101
102
    var imagePicker = h('div', {className: 'Picker'}, [
103
      map(dictToCollection(images), (item) => {
104
        var isSelf = computed(item.value, (ids) => ids.includes(id))
105
        var isAssigned = computed(item.value, (ids) => ids.includes(yourId))
106
        return h('a.name', {
107
          'ev-click': () => {
108
            if (!isAssigned()) {
109
              assignImage(id, resolve(item.key))
110
            }
111
          },
112
          href: '#',
113
          classList: [
114
            when(isSelf, '-self'),
115
            when(isAssigned, '-assigned')
116
          ],
117
          title: nameList(when(isSelf, i18n('Self Assigned'), i18n('Assigned By')), item.value)
118
        }, [
119
          h('img', {
120
            className: 'Avatar',
121
            style: { 'background-color': api.about.obs.color(id) },
122
            src: computed(item.key, api.blob.sync.url)
123
          })
124
        ])
125
      }),
126
      h('span.add', [
127
        api.blob.html.input(file => {
128
          assignImage(id, file.link)
129
        }, {
130
          accept: 'image/*',
131
          resize: { width: 500, height: 500 }
132
        })
133
      ])
134
    ])
135
136
    var prepend = h('header', {className: 'ProfileHeader'}, [
137
      h('div.image', api.about.html.image(id)),
138
      h('div.main', [
139
        h('div.title', [
140
          h('h1', [name]),
141
          h('div.meta', [
142
            when(id === yourId, [
143
              h('button', {'ev-click': api.profile.sheet.edit}, i18n('Edit Your Profile'))
144
            ], [
145
              when(youFollow,
146
                h('a.ToggleButton.-unsubscribe', {
147
                  'href': '#',
148
                  'title': i18n('Click to unfollow'),
149
                  'ev-click': send(unfollow, id)
150
                }, when(isFriends, i18n('Friends'), i18n('Following'))),
151
                h('a.ToggleButton.-subscribe', {
152
                  'href': '#',
153
                  'ev-click': send(follow, id)
154
                }, when(followsYou, i18n('Follow Back'), i18n('Follow')))
155
              )
156
            ])
157
          ])
158
        ]),
159
        h('section -description', [
160
          computed(description, (text) => {
161
            if (typeof text === 'string') {
162
              return api.message.html.markdown(text)
163
            }
164
          })
165
        ]),
166
        h('section', [ namePicker, imagePicker ])
167
      ])
168
    ])
169
170
    var feedView = api.feed.html.rollup(api.feed.pull.profile(id), {
171
      prepend,
172
      displayFilter: (msg) => msg.value.author === id,
173
      bumpFilter: (msg) => msg.value.author === id,
174
    })
175
176
    var container = h('div', {className: 'SplitView'}, [
177
      h('div.main', [
178
        feedView
179
      ]),
180
      h('div.side.-right', [
181
        when(friendsLoaded,
182
          h('div', [
183
            renderContactBlock(i18n('Friends'), friends, yourFollows),
184
            renderContactBlock(i18n('Followers'), followers, yourFollows),
185
            renderContactBlock(i18n('Following'), following, yourFollows)
186
          ]),
187
          h('div', {className: 'Loading'})
188
        )
189
      ])
190
    ])
191
192
    container.pendingUpdates = feedView.pendingUpdates
193
    container.reload = feedView.reload
194
    return container
195
  })
196
197
  function renderContactBlock (title, profiles, yourFollows) {
198
    profiles = api.profile.obs.rank(profiles)
199
    return [
200
      when(computed(profiles, x => x.length), h('h2', title)),
201
      h('div', {
202
        classList: 'ProfileList'
203
      }, [
204
        map(profiles, (id) => {
205
          var following = computed(yourFollows, f => f.includes(id))
206
          return h('a.profile', {
207
            href: id,
208
            classList: [
209
              when(following, '-following')
210
            ]
211
          }, [
212
            h('div.avatar', [api.about.html.image(id)]),
213
            h('div.main', [
214
              h('div.name', [ api.about.obs.name(id) ])
215
            ])
216
          ])
217
        }, {
218
          maxTime: 5,
219
          idle: true
220
        })
221
      ])
222
    ]
223
  }
224
225
  function follow (id) {
226
    api.sbot.async.publish({
227
      type: 'contact',
228
      contact: id,
229
      following: true
230
    })
231
  }
232
233
  function unfollow (id) {
234
    api.sbot.async.publish({
235
      type: 'contact',
236
      contact: id,
237
      following: false
238
    })
239
  }
240
241
  function assignImage (id, image) {
242
    api.message.async.publish({
243
      type: 'about',
244
      about: id,
245
      image
246
    })
247
  }
248
249
  function assignName (id, name) {
250
    api.message.async.publish({
251
      type: 'about',
252
      about: id,
253
      name
254
    })
255
  }
256
257
  function rename (id) {
258
    api.sheet.display(close => {
259
      var currentName = api.about.obs.name(id)
260
      var input = h('input', {
261
        style: {'font-size': '150%'},
262
        value: currentName()
263
      })
264
      setTimeout(() => {
265
        input.focus()
266
        input.select()
267
      }, 5)
268
      return {
269
        content: h('div', {
270
          style: {
271
            padding: '20px',
272
            'text-align': 'center'
273
          }
274
        }, [
275
          h('h2', {
276
            style: {
277
              'font-weight': 'normal'
278
            }
279
          }, [i18n('What whould you like to call '), h('strong', [currentName]), '?']),
280
          input
281
        ]),
282
        footer: [
283
          h('button -save', {
284
            'ev-click': () => {
285
              if (input.value.trim() && input.value !== currentName()) {
286
                // no confirm
287
                api.sbot.async.publish({
288
                  type: 'about',
289
                  about: id,
290
                  name: input.value.trim()
291
                })
292
              }
293
              close()
294
            }
295
          }, i18n('Confirm')),
296
          h('button -cancel', {
297
            'ev-click': close
298
          }, i18n('Cancel'))
299
        ]
300
      }
301
    })
302
  }
303
304
  function nameList (prefix, ids) {
305
    var items = map(ids, api.about.obs.name)
306
    return computed([prefix, items], (prefix, names) => {
307
      return (prefix ? (prefix + '\n') : '') + names.map((n) => `- ${n}`).join('\n')
308
    })
309
  }
310
}
311