forked from lichess-org/lichobile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
relatedView.tsx
112 lines (106 loc) · 3.35 KB
/
relatedView.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import h from 'mithril/hyperscript'
import router from '../../../router'
import { gameIcon } from '../../../utils'
import i18n from '../../../i18n'
import spinner from '../../../spinner'
import { Related } from '../../../lichess/interfaces/user'
import { Paginator } from '../../../lichess/interfaces'
import * as helper from '../../helper'
import TabView from '../../shared/TabView'
import challengeForm from '../../challengeForm'
import RelatedCtrl from './RelatedCtrl'
export function renderBody(ctrl: RelatedCtrl) {
const tabsContent = [
{ id: 'following', f: () => renderContent(ctrl, ctrl.following, ctrl.followingPaginator) },
]
return [
h(TabView, {
selectedIndex: ctrl.currentTab,
tabs: tabsContent,
onTabChange: ctrl.onTabChange,
})
]
}
function renderContent(
ctrl: RelatedCtrl,
content?: readonly Related[],
paginator?: Paginator<Related>
) {
if (!content) {
return (
<div className="followingListEmpty">
{spinner.getVdom('monochrome')}
</div>
)
}
else if (content.length) {
const nextPage = paginator && paginator.nextPage
return (
<ul className="native_scroller page">
{content.map((p, i) => renderPlayer(ctrl, p, i))}
{nextPage ?
<li
className="list_item followingList moreFollow"
oncreate={helper.ontapY(() => ctrl.loadNextPage(nextPage))}
>
{ctrl.isLoadingNextPage ? spinner.getVdom('monochrome') : '...'}
</li> : null
}
</ul>
)
} else {
return (
<div className="followingListEmpty">
Oops! Nothing here.
</div>
)
}
}
function renderPlayer(ctrl: RelatedCtrl, obj: Related, i: number) {
const status = obj.online ? 'online' : 'offline'
const perfKey = obj.perfs && Object.keys(obj.perfs)[0] as PerfKey
const perf = obj.perfs && obj.perfs[perfKey]
const userLink = helper.ontapY(() => router.set(`/@/${obj.user}`))
const evenOrOdd = i % 2 === 0 ? 'even' : 'odd'
return (
<li className={`list_item followingList ${evenOrOdd}`}>
<div className="followingPlayerTitle" oncreate={userLink}>
<div className="user">
{obj.patron ?
<span className={'patron userStatus ' + status} data-icon="" /> :
<span className={'fa fa-circle userStatus ' + status} />
}
{obj.title ? <span className="userTitle">{obj.title} </span> : null}
{obj.user}
</div>
{ perfKey ?
<span className="rating" data-icon={gameIcon(perfKey)}>
{perf.rating}
</span> : null
}
<div className="buttons">
<span data-icon="U" oncreate={helper.ontapY((e: Event) => {
e.stopPropagation()
close()
challengeForm.open(obj.user)
})} />
<span>{' '}</span>
<span data-icon="c" oncreate={helper.ontapY((e: Event) => {
e.stopPropagation()
close()
router.set(`/inbox/new/${obj.user}`)
})} />
</div>
</div>
{obj.followable ?
<div className="followingPlayerItem">
<div className="check_container">
<label>{i18n('follow')}</label>
<input type="checkbox" checked={obj.relation}
onchange={() => ctrl.toggleFollowing(obj)} />
</div>
</div> : null
}
</li>
)
}