~sirn/fanboi2

ref: 5b482cfc1bfb0bb1e89715cb57c7bac864391768 fanboi2/assets/app/javascripts/views/post_collection_view.ts -rw-r--r-- 2.4 KiB
5b482cfcKridsada Thanabulpong 0.30.0 3 years ago
                                                                                
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
import {VNode, h} from 'virtual-dom';
import {formatDate} from '../utils/formatters';
import {Post} from '../models/post';


export class PostCollectionView {
    postsNode: VNode;

    constructor(posts: Post[]) {
        this.postsNode = PostCollectionView.renderPosts(posts);
    }

    render(): VNode {
        return this.postsNode;
    }

    private static renderPosts(posts: Post[]): VNode {
        return h('div',
            {className: 'js-post-collection'},
            posts.map((post: Post): VNode => {
                return h('div', {className: 'post'}, [
                    h('div', {className: 'container'}, [
                        PostCollectionView.renderHeader(post),
                        PostCollectionView.renderBody(post),
                    ])
                ])
            })
        );
    }

    private static renderHeader(post: Post): VNode {
        return h('div', {className: 'post-header'}, [
            PostCollectionView.renderHeaderNumber(post),
            PostCollectionView.renderHeaderName(post),
            PostCollectionView.renderHeaderDate(post),
            PostCollectionView.renderHeaderIdent(post),
        ]);
    }

    private static renderHeaderNumber(post: Post): VNode {
        let classList = ['post-header-item', 'number'];

        if (post.bumped) {
            classList.push('bumped');
        }

        return h('span', {
            className: classList.join(' '),
            dataset: {
                topicQuickReply: post.number
            }
        }, [post.number.toString()]);
    }

    private static renderHeaderName(post: Post): VNode {
        return h('span', {
            className: 'post-header-item name'
        }, [post.name]);
    }

    private static renderHeaderDate(post: Post): VNode {
        let createdAt = new Date(post.createdAt);
        let formatter = formatDate(createdAt);

        return h('span', {
            className: 'post-header-item date'
        }, [`Posted ${formatter}`]);
    }

    private static renderHeaderIdent(post: Post): VNode | string {
        if (post.ident) {
            return h('span', {
                className: 'post-header-item ident'
            }, [`ID:${post.ident}`]);
        } else {
            return '';
        }
    }

    private static renderBody(post: Post): VNode {
        return h('div', {
            className: 'post-body',
            innerHTML: post.bodyFormatted,
        }, []);
    }
}