This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.app { | |
display: flex; | |
width: 100%; | |
flex-direction: column; | |
align-items: center; | |
} | |
.header { | |
position: absolute; | |
top: 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function App() { | |
// ... rest of our code here | |
return ( | |
<div className="app"> | |
<div className="header"> | |
<AmplifySignOut /> | |
</div> | |
<div className="container"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
useEffect(() => { | |
API | |
.graphql(graphqlOperation(messagesByChannelID, { | |
channelID: '1', | |
sortDirection: 'ASC' | |
})) | |
.then((response) => { | |
const items = response?.data?.messagesByChannelID?.items; | |
if (items) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type Message | |
@model | |
@key(name: "byChannelID", fields: ["channelID", "createdAt"], queryField: "messagesByChannelID") { | |
id: ID! | |
channelID: ID! | |
author: String! | |
body: String! | |
createdAt: AWSDateTime | |
updatedAt: AWSDateTime | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type Message @model { | |
id: ID! | |
author: String! | |
body: String! | |
createdAt: AWSDateTime | |
updatedAt: AWSDateTime | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const [messageBody, setMessageBody] = useState(''); | |
// useEffect(...) for loading initial messages | |
// useEffect(...) for subscriptions | |
const handleChange = (event) => { | |
setMessageBody(event.target.value); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
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", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
next: (event) => { | |
// do something with event | |
}, | |
error: (error) => { | |
// raise or handle error | |
} | |
} |
NewerOlder