in sample/src/screens/ChatScreen.js [20:137]
export default function ChatScreen(props) {
let { event } = props.route.params;
const navigation = useNavigation();
let [currentUser, setCurrentUser] = useState(null);
const [messages, setMessages] = useState([]);
const getChatsByEventQuery = `query GetEvent(
$id: ID!
$nextToken: String
$limit: Int
) {
getEvent(id: $id) {
id
chats (
limit: $limit
sortDirection: DESC
nextToken: $nextToken
) {
items {
id
content
createdAt
user {
id
name
}
}
nextToken
}
}
}
`;
const onSend = (newMessages = []) => {
setMessages(GiftedChat.append(messages, newMessages));
createEventChat(event.id, currentUser.attributes.sub, newMessages[0].text);
};
const renderChat = () => {
if (currentUser)
return (
<GiftedChat
messages={messages}
onSend={(newMessages) => onSend(newMessages)}
user={{
_id: currentUser.attributes.sub,
name: currentUser.attributes.given_name
? `${currentUser.attributes.given_name} ${currentUser.attributes.family_name}`
: currentUser.username,
}}
inverted={true}
placeholder='Type a message...'
/>
);
return <Text>Loading...</Text>;
};
async function authUser() {
const cognitoUser = await Auth.currentAuthenticatedUser();
if (cognitoUser) {
setCurrentUser(cognitoUser);
}
}
useEffect(() => {
const getChatsByEventId = async () => {
const input = {
id: event.id,
nextToken: null,
limit: 20,
};
try {
const result = await API.graphql(
graphqlOperation(getChatsByEventQuery, input)
);
const existingMessages = result.data.getEvent.chats.items;
setMessages(
existingMessages.map((item) => {
return formatMessage(item);
})
);
} catch (e) {
console.log(e);
}
};
getChatsByEventId();
}, [setMessages]);
useEffect(() => {
authUser();
const subscription = API.graphql(graphqlOperation(onCreateChat)).subscribe({
next: (response) => {
let newMessageFromResponse = response.value.data.onCreateChat;
if (
newMessageFromResponse.event.id === event.id &&
newMessageFromResponse.user.id !== currentUser.attributes.sub
) {
setMessages(
GiftedChat.append(messages, formatMessage(newMessageFromResponse))
);
}
},
error: (error) => {
console.error(error);
},
});
return () => {
subscription.unsubscribe();
};
}, [messages]);
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() => navigation.goBack()}>