import { Meta } from '@storybook/blocks';

<Meta title="SDK Providers/Introduction" />

# Introduction

Providers are responsible for maintaining state and functionality related to the Amazon Chime SDK for JavaScript.

While this section includes documentation on individual providers, **you will likely only ever need to work with the `MeetingProvider`**. The `MeetingProvider` is the root provider, and renders all other providers so that you can quickly build out a realtime meeting application.

## Getting Started with MeetingProvider

To build a realtime meeting applications with the `MeetingProvider`, you can follow these steps

1. Render the MeetingProvider near the root of your application.

```jsx
import React from 'react';
import { MeetingProvider } from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyApp />
  </MeetingProvider>
);
```

2. _Optional_ - Configure how to fetch attendees as they join the meeting

If you want nameplates on your videos or want to build a realtime roster of attendees, you will need to assign a `meetingManager.getAttendee` function. You can pass the chime attendee ID and external user ID (if present) to this function as attendees join the meeting. It is expected to return a promise that resolves with the attendee's name.

You can access the `MeetingManager` class instance with the `useMeetingManager` hook.

```jsx
import React from 'react';
import { MeetingProvider, useMeetingManager } from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyApp />
  </MeetingProvider>
);

const MyApp = () => {
  const meetingManager = useMeetingManager();

  useEffect(() => {
    meetingManager.getAttendee = async (chimeAttendeeId: string, externalUserId?: string) => {
      const response = await fetch('/my-attendees-endpoint);
      const user = await res.json();

      return {
        name: user.name
      }
    }
  }, [])
}
```

3. Join a meeting

To join a meeting, you will need to pass the meeting and attendee data from Chime's [CreateAttendee](https://docs.aws.amazon.com/chime/latest/APIReference/API_CreateAttendee.html) and [CreateMeeting](https://docs.aws.amazon.com/chime/latest/APIReference/API_CreateMeeting.html) APIs. [Read this for more details](https://aws.github.io/amazon-chime-sdk-js/modules/gettingstarted.html#meeting-service).

Once you have your meeting and attendee data, you can call `meetingManager.join` to join the meeting.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useMeetingManager
} from 'amazon-chime-sdk-component-library-react';
import { MeetingSessionConfiguration } from 'amazon-chime-sdk-js';

const App = () => (
  <MeetingProvider>
    <MyApp />
  </MeetingProvider>
);

const MyApp = () => {
  const meetingManager = useMeetingManager();

  const joinMeeting = async () => {
    const response = await fetch('/my-meetings-endpoint');
    const data = await response.json();

    const meetingSessionConfiguration = new MeetingSessionConfiguration(data.Meeting, data.Attendee);

    try {
      await meetingManager.join(
        meetingSessionConfiguration
      );
    } catch {
      console.error('Something went wrong');
    }
  };

  <button onClick={joinMeeting}>Join Meeting</button>;
};
```

4. Start the meeting session

After joining a meeting, you can begin the meeting sesion by calling `meetingManager.start`. You may want to allow users to configure their selected input/output devices prior to calling `start`.

5. Done!

The attendee should be in the meeting, and able to receive audio/video. Check out the `SDK components` documentation section for components that you can drop in, or the `SDK hooks` for building out your own UI.

6. _Optional_ - Opt-out of client event ingestion

The Amazon Chime SDK for JavaScript sends meeting events to the Amazon Chime backend to analyze meeting health trends or identify common failures.
This helps to improve your meeting experience. For more information, check the [client event ingestion guide](https://aws.github.io/amazon-chime-sdk-js/modules/clientevent_ingestion.html) in the Amazon Chime SDK for JavaScript guides.

To opt-out of event ingestion from the Amazon Chime SDK for JavaScript, provide a `DefaultEventController` with a `NoOpEventReporter` as the `eventReporter` while joining the meeting.

```jsx
import React from 'react';
import { NoOpEventReporter, DefaultEventController } from 'amazon-chime-sdk-js';
import {
  MeetingProvider,
  useMeetingManager
} from 'amazon-chime-sdk-component-library-react';
import { MeetingSessionConfiguration } from 'amazon-chime-sdk-js';

const MyApp = () => {
  const meetingManager = useMeetingManager();

  const joinMeeting = async () => {
    const response = await fetch('/my-meetings-endpoint');
    const data = await response.json();
    const meetingSessionConfiguration = new MeetingSessionConfiguration(data.Meeting, data.Attendee);
    const eventController = new DefaultEventController(
      meetingSessionConfiguration, 
      new ConsoleLogger('SDK', LogLevel.WARN), 
      new NoOpEventReporter()
    );
    const options = {
      eventController,
    };

    try {
      await meetingManager.join(
        meetingSessionConfiguration,
        options
      );
    } catch {
      console.error('Something went wrong');
    }
  };

  <button onClick={joinMeeting}>Join Meeting</button>;
};

const App = () => (
  <MeetingProvider>
    <MyApp />
  </MeetingProvider>
);
```