Example of Using Event Bus for communication between components

EventBusDemo.tsx

interface PostalChannel {
    channel: string,
    topic: string
}

export const useEventBus = (channel: PostalChannel, callback: (data: any) => void) => {
    const [state, setState] = useState({});

    useEffect(() => {
        const subscription = postal.subscribe({
            channel: channel.channel,
            topic: channel.topic,
            callback: (data, envelope) => {
                setState((prevState) => ({...prevState, [envelope.topic]: data}));
                callback(data);
            }
        });

        return () => {
            subscription.unsubscribe();
        }
    }, [channel.channel, channel.topic, callback]);

    const dispatchEvent = (eventName: string, data: any) => {
        postal.publish({
            channel: channel.channel,
            topic: eventName,
            data: data
        });
    }

    return { state, dispatchEvent };
}

interface AssetData {
    [key: string]: Asset[]
}
const assetsData: AssetData = {
    "A": [
        {id: "asset-01", type: "type-A"},
        {id: "asset-02", type: "type-B"},
        {id: "asset-03", type: "type-B"},
        {id: "asset-04", type: "type-A"},
        {id: "asset-05", type: "type-A"}
    ],
    "B": [
        {id: "asset-06", type: "type-A"},
        {id: "asset-07", type: "type-A"},
        {id: "asset-08", type: "type-A"}
    ],
    "C": [],
    "D": [
        {id: "asset-09", type: "type-D"},
        {id: "asset-10", type: "type-D"},
        {id: "asset-11", type: "type-D"},
        {id: "asset-12", type: "type-D"},
        {id: "asset-13", type: "type-A"},
    ],
    "E": [],
}


interface Asset {
    id: string
    type: string
}

export default const AssetListView = () => {

    const [assets, setAssets] = useState<Array<Asset>>([]);
    const { state, dispatchEvent } = useEventBus({channel: "DEFAULT", topic: MHVEvents.FILTER}, (data) => onFilterEvent(data));

    const onFilterEvent = (input: {data: string}) => {
        setAssets(assetsData[input.data as string]);
    }

    return <>
        <div style={{backgroundColor: 'lightgray', padding: 20, borderRadius: 20}}>
            <h3>Assets List</h3>
            {
                assets.length > 0 ?
                    <ListGroup>
                        {
                            assets.map(asset => <ListGroup.Item key={asset.id}>{asset.id}</ListGroup.Item>)
                        }
                    </ListGroup> : <span>No assets under current filter!!</span>
            }
        </div>
    </>
}




export default const Filter = () => {

    const {state, dispatchEvent } = useEventBus({channel: "DEFAULT", topic: MHVEvents.FILTER}, (data) => {});

    const handleOnChange = (value: string) => {
        console.log("dispatching event...")
        dispatchEvent(MHVEvents.FILTER, {data: value});
    }

    return <>
        <div style={{backgroundColor: 'lightgray', padding: 20, borderRadius: 20}}>
            <Form.Group className={"mb-3"}>
                <Form.Label>Filter Assets By Location</Form.Label>
            </Form.Group>
            <Form.Group className={"mb-1"}>
                <Form.Select className={"mb-3"} onChange={e => handleOnChange(e.currentTarget.value)}>
                    <option>Select...</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                </Form.Select>
            </Form.Group>
        </div>
    </>
}


export default const MachineHealthView = () => {

    return <>
        <Container>
            <Row>
                <Col>
                    <h3>Machine Health Viewer</h3>
                </Col>
            </Row>
            <Row>
                <Col>
                    <Filter/>
                </Col>
            </Row>
            <hr/>
            <Row>
                <Col>
                    <AssetListView/>
                </Col>
            </Row>
        </Container>
    </>
}