Subscribing to Changes

someRecord.listen(function(updatedRecord) {
    console.log("Record updated!");
    // Update app UI with updatedRecord
});

recordList.listen(function(updatedList) {
    console.log("Record list updated");
    // Update app UI with updatedList
});

import React from "react";
import quip from "quip-apps-api";

interface ChildData {
    name: string;
}

class Child extends quip.apps.Record {
    static getProperties() {
        return {
            name: "string"
        }
    }
    getData(): ChildData {
        return {
            name: this.get("name")
        };
    }
}

interface AppData {
    children: ChildData[]
}

class Root extends quip.apps.RootRecord {
    static getProperties() {
        return {
            children: quip.apps.RecordList.Type(Child)
        }
    }
    static getDefaultProperties() {
        return {
            children: []
        }
    }

    private getChildren = () => this.get("children") as quip.apps.RecordList<Child>
    private listenedChildren: Child = []

    private childUpdated = () => {
        this.notifyListeners()
    }

    initialize() {
        const updateChildListeners = () => {
            // First, clear out our existing listeners to avoid leaks
            listenedChildren.forEach(child => {
                child.unlisten(this.childUpdated)
            })
            // clear out our listeners so it'll be accurate
            this.listenedChildren = []
            // then add new listeners for all our current children
            this.getChildren().getRecords().forEach(child => {
                child.listen(this.childUpdated)
                // track all the children we're listening to so we can
                // unlisten to them when this list changes
                this.listenedChildren.push(child)
            })
        }
        // Add a listener to the list itself which will make sure we listen
        // to all children
        this.getChildren().listen(updateChildListeners)
        // invoke it so we initialize with listeners
        updateChildListeners()
    }
    getData(): AppData {
        // Now in our app data, we'll have an always up to date version of all
        // child data, without having to write imperative listening logic
        // in our React component.
        // This function will be called every time we call notifyListeners,
        // and our React component can only track one state, making our
        // rendering logic pure and deterministic.
        const children = this.getChildren()
            .getRecords()
            .map(record => record.getData());
        return {
            children
        };
    }
}

interface AppProps {
    root: Root;
}

interface AppState {
    data: AppData;
}

class App extends React.Component<AppProps, AppState> {
    constructor(props: AppProps) {
        super(props);
        // initialize our state to whatever the state is when we instantiate
        // this component.
        const {root} = this.props;
        const {data} = root.getData();
        this.state = {data};
    }
    componentDidMount() {
        const {root} = this.props;
        // This is now the only listener we need in our entire UI layer.
        root.listen(this.updateData);
        this.updateData();
    }
    componentWillUnmount() {
        // when our component unmounts, remove our listener so we don't leak.
        const {root} = this.props;
        root.unlisten(this.updateData);
    }

    private updateData = () => {
        const {root} = this.props;
        this.setState({data: root.getData()});
    }

    render() {
        const {root} = this.props;
        const {children} = this.state.data;
        return <ul>
            {children.map(child =>
                <li key={child.name}>
                    {child.name}
                </li>
            )}
        </ul>
    }

}

quip.apps.initialize({
    initializationCallback: async (dom, params) => {
        const root = quip.apps.getRootRecord() as Root;
        ReactDOM.render(<App root={root}/>, dom);
    }
});