src/render/SubmissionNotice.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

import * as React from "react";
import { createRoot, Root } from 'react-dom/client';

import Utils from "../utils";
const utils = new Utils();

import SubmissionNoticeComponent from "../components/SubmissionNoticeComponent";
import { ContentContainer } from "../types";

class SubmissionNotice {
    // Contains functions and variables from the content script needed by the skip notice
    contentContainer: () => unknown;

    callback: () => Promise<boolean>;

    noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;

    noticeElement: HTMLDivElement;

    root: Root;

    constructor(contentContainer: ContentContainer, callback: () => Promise<boolean>) {
        this.noticeRef = React.createRef();

        this.contentContainer = contentContainer;
        this.callback = callback;

        const referenceNode = utils.findReferenceNode();
    
        this.noticeElement = document.createElement("div");
        this.noticeElement.id = "submissionNoticeContainer";

        referenceNode.prepend(this.noticeElement);

        this.root = createRoot(this.noticeElement);
        this.root.render(
            <SubmissionNoticeComponent
                contentContainer={contentContainer}
                callback={callback} 
                ref={this.noticeRef}
                closeListener={() => this.close(false)} />
        );
    }

    update(): void {
        this.noticeRef.current.forceUpdate();
    }

    close(callRef = true): void {
        if (callRef) this.noticeRef.current.cancel();
        this.root.unmount();

        this.noticeElement.remove();
    }

    submit(): void {
        this.noticeRef.current?.submit?.();
    }

    scrollToBottom(): void {
        this.noticeRef.current?.scrollToBottom?.();
    }
}

export default SubmissionNotice;