jaunesarmiento

type Message
  @model
  @key(name: "byChannelID", fields: ["channelID", "createdAt"], queryField: "messagesByChannelID") {
  id: ID!
  channelID: ID!
  author: String!
  body: String!
  createdAt: AWSDateTime
  updatedAt: AWSDateTime
}

jaunesarmiento

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

jaunesarmiento

  useEffect(() => {
    API
      .graphql(graphqlOperation(messagesByChannelID, {
        channelID: '1',
        sortDirection: 'ASC'
      }))
      .then((response) => {
        const items = response?.data?.messagesByChannelID?.items;

        if (items) {

jaunesarmiento

.app {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.header {
  position: absolute;
  top: 0;

jaunesarmiento

function App() {
  
  // ... rest of our code here

  return (
    <div className="app">
      <div className="header">
        <AmplifySignOut />
      </div>
      <div className="container">

jaunesarmiento

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

jaunesarmiento

import React, { useEffect, useState } from 'react';

import Amplify from '@aws-amplify/core';
import API, { graphqlOperation } from '@aws-amplify/api';
import '@aws-amplify/pubsub';

import { createMessage } from './graphql/mutations';
import { onCreateMessage } from './graphql/subscriptions';
import { messagesByChannelID } from './graphql/queries';

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 = () => {};
  

jaunesarmiento

{
  provider: { ... }, // this contains AppSync subscription metadata
  value: {
    data: {
      onCreateMessage: {
        id: "374fdfe6-71e4-4e02-b41f-d9d78037c916",
        channelID: "1",
        author: "Dave",
        body: "This should be the new message",
        createdAt: "2020-08-01T04:43:58.335Z",

jaunesarmiento

const [messageBody, setMessageBody] = useState('');

// useEffect(...) for loading initial messages

// useEffect(...) for subscriptions

const handleChange = (event) => {
  setMessageBody(event.target.value);
};