How to use the phoenix.Presence function in phoenix

it('sets up presence correctly', () => {
    const socket = new Socket('/socket', { params: { userToken: '456' } });
    socket.connect();
    const channel = socket.channel('room:123', { token: 'xyz' });
    channel.join();
    const presence = new Presence(channel);

    // detect if user has joined for the 1st time or from another tab/device
    presence.onJoin((id, current, newPres) => {
      if (!current) {
        console.log('user has entered for the first time', newPres);
      } else {
        console.log('user additional presence', newPres);
      }
    });

    // detect if user has left from all tabs/devices, or is still present
    presence.onLeave((id, current, leftPres) => {
      if (current && current.metas && current.metas.length === 0) {
        console.log('user has left from all devices', leftPres);
      } else {
        console.log('user left from a device', leftPres);

// Unbind presence, and then set up bindings after reconnect
    if (this.presence) {
      presenceBindings = {
        onJoin: this.presence.caller.onJoin,
        onLeave: this.presence.caller.onLeave,
        onSync: this.presence.caller.onSync
      };

      this.presence.onJoin(function() {});
      this.presence.onLeave(function() {});
      this.presence.onSync(function() {});
    }

    this.channel = await migrateChannelToSocket(this.channel, socket, params);
    this.presence = new Presence(this.channel);

    if (presenceBindings) {
      this.presence.onJoin(presenceBindings.onJoin);
      this.presence.onLeave(presenceBindings.onLeave);
      this.presence.onSync(presenceBindings.onSync);
    }
  }

join(roomId: string, username: string): Promise {
    this.username = username;
    if (this.channel$.getValue() !== null) {
      return Promise.resolve();
    }
    const socket = this.getSocket(username);
    const channel = socket.channel(`room:${roomId}`);
    const links = linkEvents(EVENTS, channel, this as EventEmitter);
    const presence = new Presence(channel);
    presence.onSync(() => {
      const userList = presence.list(pickMeta);
      this.userList$.next(userList);
      this.userMap.clear();
      for (let i = 0; i < userList.length; i += 1) {
        const user = userList[i];
        this.userMap.set(user.id, user);
      }
    });
    presence.onLeave(userId => this.emit('user.leave', { userId }));
    return new Promise((resolve, reject) => {
      channel
        .join()
        .receive('ok', ({ userId }: { userId: string }) => {
          this.roomId = roomId;
          this.userId = userId;

setPhoenixChannel = channel => {
    this.channel = channel;
    this.presence = new Presence(channel);
  };

applyListenersWithDispatch(store, actions) {
    const {
      addIdea,
      retroUpdateCommitted,
      setPresences,
      updateIdea,
      deleteIdea,
      voteSubmission,
      updatePresence,
      voteRetraction,
    } = actions

    const { client } = this

    const presence = new Presence(client)

    presence.onSync(() => {
      const users = presence.list((_token, presence) => (presence.user))
      setPresences(users)
    })

    client.on("idea_committed", addIdea)

    client.on("retro_edited", retroUpdateCommitted)

    client.on("idea_edit_state_enabled", ({ id }) => {
      updateIdea(id, { inEditState: true, isLocalEdit: false })
    })

    client.on("idea_edit_state_disabled", disabledIdea => {
      updateIdea(disabledIdea.id, { inEditState: false, liveEditText: null })

constructor(channel: Channel) {
    this.presence = new Presence(channel);
    this.onSyncHandler = () => { };
    this.hostId = null;
    this.oldHostMeta = null;

    this.presence.onSync(() => {
      const { state } = this.presence;
      if (this.hostId == null) {
        const maybeHostId = Object.keys(state).find((clientId) => state[clientId].metas[0].isHost);
        this.hostId = maybeHostId == null ? null : maybeHostId;
      }
      this.onSyncHandler(this.oldHostMeta);
      this.oldHostMeta = this.getHostMeta();
    });
  }

constructor(channel) {
    super();
    this.channel = channel;
    this.presence = new phoenix.Presence(channel);
  }