Broadcast real-time events using a serverless WebSocket infrastructure

				
					import { ChangeEvent, SyntheticEvent, useEffect, useRef, useState } from 'react';
import {
  ButtonDiv,
  ChatMessageDiv,
  FeedArea,
  FeedTextArea,
  InputAreaDiv,
  LeftMessageDiv,
  RightMessageDiv,
  StyledButton,
  StyledInput,
  TimeStampDiv,
  UserMessageDiv,
  Wrapper
} from './styled';
import { v4 as uuidv4 } from 'uuid';
import { events } from 'aws-amplify/data';
import type { EventsChannel } from 'aws-amplify/data';
import { getTimeFormat } from './utils';

interface ChatProps {
  username: string;
}

export interface Message {
  id: string;
  username: string;
  message: string;
  timestamp: string;
}

const Chat: React.FC<ChatProps> = ({ username }) => {
  const [chatUserId] = useState<string>(uuidv4());
  const inputRef = useRef<HTMLInputElement>(null);
  const [inputValue, setInputValue] = useState<string>('');
  const [chatAreaState, setChatAreaState] = useState<Array<JSX.Element>>([]);

  const serverRowComponent = (userMessage: Message): JSX.Element => {
    const newUuid = uuidv4();
    return (
      <LeftMessageDiv key={newUuid}>
        <ChatMessageDiv>
          <>
            {' '}
            <b>
              <i>{userMessage.username}: </i>
            </b>
            {userMessage.message}
          </>
          <TimeStampDiv>{userMessage.timestamp}</TimeStampDiv>
        </ChatMessageDiv>
      </LeftMessageDiv>
    );
  };

  const userRowComponent = (userMessage: Message): JSX.Element => {
    const newUuid = uuidv4();
    return (
      <RightMessageDiv key={newUuid}>
        <UserMessageDiv>
          <>
            {' '}
            <b>
              <i>{userMessage.username}: </i>
            </b>
            {userMessage.message}
          </>
          <TimeStampDiv>{userMessage.timestamp}</TimeStampDiv>
        </UserMessageDiv>
      </RightMessageDiv>
    );
  };

  function updateChatAreaState(element: JSX.Element) {
    const currentAreaState = chatAreaState;
    currentAreaState.push(element);
    setChatAreaState(currentAreaState);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    setInputValue(event.target.value);
  }

  async function handleSubmit(event: SyntheticEvent<HTMLFormElement | HTMLButtonElement>) {
    if (inputValue !== '') {
      const message: Message = {
        id: chatUserId,
        username: username,
        message: inputValue,
        timestamp: getTimeFormat()
      };
      await events.post('default/channel', { message: { ...message } });
      updateChatAreaState(userRowComponent(message));
      setInputValue('');
      event.preventDefault();
    }
  }

  async function connectAndSubscribe() {
    let channel: EventsChannel;

    channel = await events.connect('default/channel');
    channel.subscribe({
      next: (data: any) => {
        const incoming = data?.event?.message;
        if (incoming.id && incoming.id !== chatUserId) {
          const displayMessage: Message = {
            id: incoming.id,
            username: incoming.username,
            message: incoming.message,
            timestamp: getTimeFormat()
          };

          updateChatAreaState(serverRowComponent(displayMessage));
        }
      },
      error: (err: any) => {
        console.error('Subscription error:', {
          message: err.message,
          stack: err.stack,
          details: err
        });
      }
    });
    return () => channel && channel.close();
  }

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }

    connectAndSubscribe();
  }, []);

  return (
    <Wrapper>
      <FeedArea id='chatbot-chat'>
        <FeedTextArea id='chatbot-messages'>{chatAreaState}</FeedTextArea>
      </FeedArea>

      <InputAreaDiv>
        <StyledInput
          ref={inputRef}
          id='input-form'
          placeholder='Send your message.'
          value={inputValue}
          onChange={handleChange}></StyledInput>
        <ButtonDiv>
          <StyledButton onClick={event => handleSubmit(event)}>Submit</StyledButton>
        </ButtonDiv>
      </InputAreaDiv>
    </Wrapper>
  );
};

export default Chat;