NotificationCenter Additional Documentation / Clarification

[griffithcaleb]

Hi team,

Looking for some additional context on the NotificationCenter component.

I would like to receive a callback when a conference has been created for the current user (externalId) that I have initialized a session with using the <Session /> wrapper. I would use this to display a join now button in the UI.

I have tired wrapping the NotificationCenter as such:

  <CommsProvider refreshToken={refetch} token={accessToken}>
    <Session
      participantInfo={{
        externalId: '1234',
        name: 'someName',
      }}
    >
      <NotificationCenter position="top-left" />
    </Session>
 </CommsProvider>

with the assumption that if a conference is created ( server side) with a participentList that includes externalId: '1234 that a notification would be received but I am unsuccessful so far.

Is there a solution for this in the UIKit, or perhaps I have implemented this incorrectly ?

Thanks!

[tommydolby]

Hi @griffithcaleb,

If I understand correctly, what you want is to be able to know when a conference is created (which will be created server-side) so that you can display a "Join now" button in your frontend application. You can do this by subscribing to the conferenceCreated event in your frontend application. You can subscribe by using the subscribe method returned by the useNotifications hook in UIKit. Here is an example:

const App = () => {
  const { session } = useSession();
  const { fetchConference, joinConference } = useConference();
  const { subscribe } = useNotifications();
  const [fetchedConference, setFetchedConference] = useState<Conference>();

  const join = (conference: Conference) => {
    joinConference(conference, {});
  };

  // When the App component mounts, subscribe to the `Conference.Created` event
  useEffect(() => {
    if (!session) {
      return;
    }

    // Callback to execute when the `Conference.Created` event emits
    const onConferenceCreated = async (data: ConferenceCreatedNotification) => {
      // Now that we have the ID of the newly created conference, we call `fetchConference` which will return a `Conference` object.
      // We can pass this object to `joinConference` to join the conference.
      const conf = await fetchConference(data.conferenceId);
      setFetchedConference(conf);
    };

    // Subscribe to the 'Conference.Created' event. Note that you need to know the conference alias beforehand (the one that will be created server-side).
    const unsubscribe = subscribe({ type: 'Conference.Created', conferenceAlias: 'myConferenceAlias' }, onConferenceCreated);

    // Unsubscribe when this component unmounts
    return unsubscribe;
  }, [session]);

  return (
    <CommsProvider refreshToken={refetch} token={accessToken}>
      <Session
        participantInfo={{
          externalId: '1234',
          name: 'someName',
        }}
      >
        {fetchedConference && <button onClick={() => join(fetchedConference)}>Join now</button>}
      </Session>
    </CommsProvider>
  );
};

Note that we don't need to use the NotificationCenter component. NotificationCenter is a purely visual component -- its only purpose is to show notifications that you send using the useNotifications hook. It doesn't (automatically) show notifications related to creating conferences, joining conferences etc.