Files: a20d5059cc43f723aefd7fe6e3a79aa751ded3a9 / contact / html / relationships.js
4447 bytesRaw
1 | const nest = require('depnest') |
2 | const { h, map, computed, when } = require('mutant') |
3 | |
4 | exports.gives = nest('contact.html.relationships') |
5 | |
6 | exports.needs = nest({ |
7 | 'about.html.image': 'first', |
8 | 'about.obs.name': 'first', |
9 | 'contact.async.follow': 'first', |
10 | 'contact.async.unfollow': 'first', |
11 | 'contact.async.block': 'first', |
12 | 'contact.async.unblock': 'first', |
13 | 'contact.obs.followers': 'first', |
14 | 'contact.obs.following': 'first', |
15 | 'contact.obs.blockers': 'first', |
16 | 'contact.obs.blocking': 'first', |
17 | 'keys.sync.id': 'first' |
18 | }) |
19 | |
20 | exports.create = function (api) { |
21 | return nest({ |
22 | 'contact.html.relationships': relationships |
23 | }) |
24 | |
25 | function relationships (id) { |
26 | var rawFollowing = api.contact.obs.following(id) |
27 | var rawFollowers = api.contact.obs.followers(id) |
28 | |
29 | var friends = computed([rawFollowing, rawFollowers], (following, followers) => { |
30 | return [...following].filter(follow => followers.includes(follow)) |
31 | }) |
32 | var following = computed([rawFollowing, friends], (following, friends) => { |
33 | return [...following].filter(follow => !friends.includes(follow)) |
34 | }) |
35 | var followers = computed([rawFollowers, friends], (followers, friends) => { |
36 | return [...followers].filter(follower => !friends.includes(follower)) |
37 | }) |
38 | |
39 | var myId = api.keys.sync.id() |
40 | var ImFollowing = api.contact.obs.following(myId) |
41 | var IFollowThem = computed([ImFollowing], ImFollowing => ImFollowing.includes(id)) |
42 | var theyFollowMe = computed([rawFollowing], following => following.includes(myId)) |
43 | |
44 | var relationshipStatus = computed([IFollowThem, theyFollowMe], (IFollowThem, theyFollowMe) => { |
45 | return IFollowThem && theyFollowMe ? '- you are friends' |
46 | : IFollowThem ? '- you follow them' |
47 | : theyFollowMe ? '- they follow you' |
48 | : '' |
49 | }) |
50 | |
51 | function imageLink (id) { |
52 | return h('a', |
53 | { href: id, title: computed(api.about.obs.name(id), name => '@' + name) }, |
54 | api.about.html.image(id) |
55 | ) |
56 | } |
57 | |
58 | const { unfollow, follow, block, unblock } = api.contact.async |
59 | const blockers = api.contact.obs.blockers(id) |
60 | const blocking = api.contact.obs.blocking(id) |
61 | const ImBlockingThem = computed(blockers, blockers => blockers.includes(myId)) |
62 | |
63 | return h('Relationships', [ |
64 | h('header', 'Relationships'), |
65 | when(id !== myId, |
66 | h('div.your-status', [ |
67 | h('header', 'Your status'), |
68 | h('section -friendship', [ |
69 | when(ImFollowing.sync, |
70 | when(IFollowThem, |
71 | h('button', { 'ev-click': () => unfollow(id) }, 'Unfollow'), |
72 | h('button', { 'ev-click': () => follow(id) }, 'Follow') |
73 | ), |
74 | h('button', { disabled: 'disabled' }, 'Loading...') |
75 | ), |
76 | when(ImFollowing.sync, h('div.relationship-status', relationshipStatus)) |
77 | ]), |
78 | h('section -blocking', [ |
79 | when(ImBlockingThem, |
80 | h('button', { 'ev-click': () => unblock(id, console.log) }, 'unblock'), |
81 | h('button', { 'ev-click': () => block(id, console.log) }, 'BLOCK') |
82 | ), |
83 | h('div.explainer', [ |
84 | "Blocking tells everyone you don't want to communicate with a person.", |
85 | h('ul', [ |
86 | h('li', 'You will no longer receive messages from this person'), |
87 | h('li', "This person won't get any new information about you (including this block)"), |
88 | h('li', "Your followers will see you have blocked this person - their apps need to know so that they don't pass your information on.") |
89 | ]) |
90 | ]) |
91 | ]) |
92 | ]) |
93 | ), |
94 | computed(blockers, blockers => { |
95 | if (blockers.length === 0) return '' |
96 | |
97 | return h('div.blockers', [ |
98 | h('header', 'Blocked by'), |
99 | h('section', blockers.map(imageLink)) |
100 | ]) |
101 | }), |
102 | h('div.friends', [ |
103 | h('header', 'Friends'), |
104 | h('section', map(friends, imageLink)) |
105 | ]), |
106 | h('div.follows', [ |
107 | h('header', 'Follows'), |
108 | h('section', map(following, imageLink)) |
109 | ]), |
110 | h('div.followers', [ |
111 | h('header', 'Followers'), |
112 | h('section', map(followers, imageLink)) |
113 | ]), |
114 | computed(blocking, blocking => { |
115 | if (blocking.length === 0) return '' |
116 | |
117 | return h('div.blocking', [ |
118 | h('header', 'Blocking'), |
119 | h('section', blocking.map(imageLink)) |
120 | ]) |
121 | }) |
122 | ]) |
123 | } |
124 | } |
125 |
Built with git-ssb-web