jaunesarmiento

// useEffect(..., []);

useEffect(() => {
  const subscription = API
    .graphql(graphqlOperation(onCreateMessage))
    .subscribe({
      next: (event) => {
        setMessages([...messages, event.value.data.onCreateMessage]);
      }
    });

jaunesarmiento

import '@aws-amplify/pubsub';
import { onCreateMessage } from '../graphql/subscriptions';

jaunesarmiento

export const onCreateMessage = /* GraphQL */ `
  subscription OnCreateMessage {
    onCreateMessage {
      id
      channelID
      author
      body
      createdAt
      updatedAt
    }

jaunesarmiento

mutation createMessage1 {
  createMessage(input: {
    author: "Monica",
    body: "Hi there Dave!"
  }) {
    id
    author
    body
    createdAt
    updatedAt

jaunesarmiento

.message {
  align-self: flex-start;
  ...
}
.message.me {
  align-self: flex-end;
  ...
}

jaunesarmiento

{messages.map((message) => (
  <div
    key={message.id}
    className={message.author === 'Dave' ? 'message me' : 'message'}>{message.body}</div>
))}

jaunesarmiento

const [messages, setMessages] = useState([]);

useEffect(() => {
  API
    .graphql(graphqlOperation(listMessages))
    .then((response) => {
      const items = response.data?.listMessages?.items;
      
      if (items) {
        setMessages(items);

jaunesarmiento

import React, { useEffect, useState } from 'react';
import API, { graphqlOperation } from '@aws-amplify/api';
import { listMessages } from './graphql/queries';

// ... rest of the code here

jaunesarmiento

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

#root {
  display: flex;

jaunesarmiento

// ... import statements here

function App() {
  
  // Placeholder function for handling changes to our chat bar
  const handleChange = () => {};
  
  // Placeholder function for handling the form submission
  const handleSubmit = () => {};