App.js

// src/App.js

import React, { useState, useEffect } from 'react';
import './App.css';
import {
  Chat,
  Channel,
  ChannelHeader,
  Thread,
  Window,
  ChannelList,
  ChannelListTeam,
  MessageList,
  MessageTeam,
  MessageInput,
} from 'stream-chat-react';
import { StreamChat } from 'stream-chat';
import rug from 'random-username-generator';
import axios from 'axios';

import 'stream-chat-react/dist/css/index.css';

let chatClient;

function App() {
  const [channel, setChannel] = useState(null);
  const [showNotificationBanner, setShowNotificationBanner] = useState(false);

  useEffect(() => {
    const username = rug.generate();
    async function getToken() {
      try {
        const response = await axios.post('http://localhost:7000/join', {
          username,
        });
        const { token } = response.data;
        const apiKey = response.data.api_key;

        chatClient = new StreamChat(apiKey);

        chatClient.setUser(
          {
            id: username,
            name: username,
          },
          token
        );

        const channel = chatClient.channel('team', 'group-chat');
        await channel.watch();
        setChannel(channel);
      } catch (err) {
        console.log(err);
        return;
      }
    }

    getToken();

    if (
      window.Notification &&
      (Notification.permission === 'granted' ||
        Notification.permission === 'denied')
    )
      return;

    setShowNotificationBanner(true);
  }, []);

  function grantPermission() {
    if (Notification.permission === 'granted') {
      new Notification('You are already subscribed to web notifications');
      return;
    }

    if (
      Notification.permission !== 'denied' ||
      Notification.permission === 'default'
    ) {
      Notification.requestPermission().then(result => {
        if (result === 'granted') {
          new Notification('New message from Stream', {
            body: 'Nice, notifications are now enabled!',
          });
        }
      });
    }

    setShowNotificationBanner(false);
  }

  if (channel) {
    return (
      <Chat client={chatClient} theme="team dark">
        {showNotificationToast && (
          <div class="alert">
            <p>
              Stream needs your permission to
              <button onClick={grantPermission}>
                enable desktop notifications
              </button>
            </p>
          </div>
        )}
        <ChannelList
          options={{
            subscribe: true,
            state: true,
          }}
          List={ChannelListTeam}
        />
        <Channel channel={channel}>
          <Window>
            <ChannelHeader />
            <MessageList Message={MessageTeam} />
            <MessageInput focus />
          </Window>
          <Thread Message={MessageTeam} />
        </Channel>
      </Chat>
    );
  }

  return <div></div>;
}

export default App;