async componentDidMount()

in amplify-video-frontend/src/App.js [82:120]


  async componentDidMount() {
    const result = await API.graphql(graphqlOperation(listChannels, { }));
    console.log(result.data.listChannels.items);
    this.setState({ channels: result.data.listChannels.items });
    
    this.createChannelListener = API.graphql(graphqlOperation(onCreateChannel)).subscribe({ 
      next:  channelData => {
        const newChannel = channelData.value.data.onCreateChannel;
        const prevChannels = this.state.channels.filter(
          channel => channel.id !== newChannel.id
          );
        const updatedChannels = [newChannel, ...prevChannels];
        this.setState({ channels: updatedChannels });
      }
    });
    
    this.deleteChannelListener = API.graphql(graphqlOperation(onDeleteChannel)).subscribe({
      next: channelData => {
        const deletedChannel = channelData.value.data.onDeleteChannel;
        const updatedChannels = this.state.channels.filter(channel => channel.id !== deletedChannel.id);
        this.setState({ channels: updatedChannels});
      }
    });
    
    this.updateChannelListener = API.graphql(graphqlOperation(onUpdateChannel)).subscribe({
      next : channelData => {
        const {channels} = this.state;
        const updatedChannel = channelData.value.data.onUpdateChannel;
        const index = channels.findIndex(channel => channel.id === updatedChannel.id);
        const updatedChannels = [
          ...channels.slice(0, index),
          updatedChannel,
          ...channels.slice(index+1)
        ];
        this.setState({channels: updatedChannels});
      }
    });
    
  }