~sirn/fanboi2

ref: a68873a108d20a6a49a1b6caf374bfb2cf6a94fe fanboi2/assets/app/javascripts/components/topic/topic_load_posts.ts -rw-r--r-- 3.2 KiB
a68873a1Kridsada Thanabulpong Coding style cleanups and setup pre-commit hooks (#42) 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
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,
                );
            }
        }
    }
}