~sirn/fanboi2

ref: 5b482cfc1bfb0bb1e89715cb57c7bac864391768 fanboi2/assets/app/javascripts/components/topic/topic_load_posts.ts -rw-r--r-- 3.3 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import {VNode, create, diff, patch} from 'virtual-dom';

import {ITopicEventHandler} from './base';
import {Post} from '../../models/post';
import {PostCollectionView} from '../../views/post_collection_view';
import {dispatchCustomEvent} from '../../utils/elements';
import {LoadingState} from '../../utils/loading';


export class TopicLoadPosts implements ITopicEventHandler {
    lastPostNumber: number;

    loadedPosts: Post[];
    collectionElement: Element;
    collectionNode: VNode;
    loadingState: LoadingState;

    constructor(public topicId: number, public element: Element) {
        let postNumbers = element.querySelectorAll('.post-header-item.number');
        let lastPostNumber = postNumbers[postNumbers.length - 1];

        this.loadedPosts = [];
        this.lastPostNumber = parseInt(lastPostNumber.innerHTML, 10);
        this.loadingState = new LoadingState();
    }

    bind(e: CustomEvent): void {
        let callback: ((lastPostNumber: number) => void) = e.detail.callback;

        this.loadingState.bind(() => {
            return Post.queryAll(
                this.topicId,
                `${this.lastPostNumber + 1}-`
            ).then((posts: Post[]) => {
                if (posts && posts.length) {
                    this.lastPostNumber = posts[posts.length - 1].number;
                    this.loadedPosts = this.loadedPosts.concat(posts);
                    this.appendPosts();
                    this.updateHistoryState();
                }

                if (callback) {
                    callback(this.lastPostNumber);
                }

                dispatchCustomEvent(this.element, 'postsLoaded', {
                    lastPostNumber: this.lastPostNumber
                });
            });
        });
    }

    private appendPosts(): void {
        let newCollectionNode = new PostCollectionView(
            this.loadedPosts
        ).render();

        if (!this.collectionElement) {
            this.collectionElement = create(newCollectionNode);
            let postElements = this.element.querySelectorAll('.post');
            let lastElement = postElements[postElements.length - 1];
            lastElement.parentElement.insertBefore(
                this.collectionElement,
                lastElement.nextSibling
            );
        } else {
            let patches = diff(this.collectionNode, newCollectionNode);
            this.collectionElement = patch(this.collectionElement, patches);
        }

        this.collectionNode = newCollectionNode;
    }

    private updateHistoryState(): void {
        if (window.history.replaceState) {
            let path = window.location.pathname;
            let newPath: string = '';

            if (path.match(/\/\d+\/\d+\/?$/)) {
                newPath = path.replace(
                    /\/(\d+)\/?$/,
                    `/$1-${this.lastPostNumber}/`
                );
            } else if (path.match(/\-\d+\/?$/)) {
                newPath = path.replace(
                    /(\d+)\/?$/,
                    `${this.lastPostNumber}/`
                );
            }

            if (newPath) {
                window.history.replaceState(
                    undefined,
                    `Posts up to ${this.lastPostNumber}`,
                    newPath
                );
            }
        }
    }
}