Models

We call "Model" an entity (Object or Array) continuously synchronized with the API via the Event Manager.

Existing models

All models are listed here.

• Addresses useAddresses
• ContactEmails useContactEmails
• Domains useDomains
• Labels useLabels
• Filters useFilters
• MailSettings useMailSettings
• Members useMembers
• Organization useOrganization
• Subscription useSubscription
• User useUser
• UserSettings useUserSettings

How to use a model?

Example with Addresses:

import { Loader, useAddresses } from 'react-components';

const MyComponent = () => {
    const [addresses, loading] = useAddresses();

    if (loading) {
        return <Loader />;
    }

    return addresses.map(({ Email }) => Email).toString();
};

export default MyComponent;

How to add a new model?

Example with Filters model

How it works?

All models are stored in a cache which is a simple Map with a change listener. The models are mapped with their key as the key of the map. The value of the key is a an object with two properties. status and value. status is the status of model, which can be either PENDING, RESOLVED or REJECTED. The value depends on the status. If it's PENDING, it is the promise created to initialise the model, if it's RESOLVED, it is the value as returned by the promise, if it is REJECTED it is the error that was thrown by the promise.

The cache is newly created when the user logs in and thrown away when the user logs out.

Models can be initialised as the app loads TODO this needs to be made customisable, and will then exist for the session. By default, the following models are always loaded: UserSettingsModel, SubscriptionModel, and OrganizationModel (if it's a paid user). TODO Need to add a fake model for free users.

Event manager integration

As updates are received from the event manager, The key corresponding to the key of the model will update the data in the cache, using the update function of the model. If the status of the model is pending, it will wait for it to finish and then perform the update once it resolves.

This relies on that the event manager can only be run once a time which we can guarantee.

React-components integration

When a use{Model} hook is used, it will check the status of the model.

• If it is non-existing, it will perform the steps to initialise the model (dynamic model)
• If it is pending, it will wait
• If it is rejected, it will throw with the error.

Furthermore, a subscriber listening to changes is attached to the cache. So that when the model updates, the new value will be returned from the hook and the component will automatically update.

To consider: Since a listener is attached on each use{Model} hook, it should probably be used sparingly. If multiple small components on the same Section uses the same model, all of them will trigger a rerender when the model changes. A selector may be introduced in the future so that if only the value you are subscribing changes it would re-render.