DEV Community

Kaushik Varanasi
Kaushik Varanasi

Posted on

3

Finally the messages component

Now modify the code in Message.js component to the following:

import React, {useEffect, useState} from "react";
import { useSearchParams } from 'react-router-dom';

import { Input } from '@chakra-ui/react'
import { Button, ButtonGroup } from '@chakra-ui/react'
import { Card, CardHeader, CardBody, CardFooter, Heading, Text, Flex, Avatar, Box } from '@chakra-ui/react'
import { gql, useQuery, useMutation, useSubscription } from "@apollo/client";


const ADD_MESSAGE = gql`
    mutation MyMutation($message: String!, $from_email: String!, $to_email: String!) {
        insert_messages_one(object: {from_email: $from_email, message: $message, to_email: $to_email}) {
            from_email
            message
            to_id
            to_email
        }
    }
`;

const GET_MESSAGES = gql`
    subscription MySubscription {
        messages {
            id
            message
            from_email
            to_email
        }
    }
`;

// CREATE FUNCTION check_author_active()
//     RETURNS trigger AS $BODY$
//     BEGIN
//     SELECT id INTO NEW.to_id FROM users WHERE email = NEW.to_email;
//     RETURN NEW;
//     END;
//     $BODY$ LANGUAGE plpgsql;

// CREATE TRIGGER insert_article BEFORE INSERT OR UPDATE ON messages FOR EACH ROW EXECUTE PROCEDURE check_author_active();


export default function DrawerExample() {
    const [searchParams] = useSearchParams();
    const [messages, setMessages] = useState([]);
    console.log(searchParams.get('email')); // ▶ URLSearchParams {}
    const currentUser = "kaushik@moneysave.io";
    const { data, loading } = useSubscription(GET_MESSAGES);
    console.log("messages: ", data, loading);
    const [addMessage, { messages_mutate, message_loading }] = useMutation(ADD_MESSAGE);
    const senderAddress = searchParams.get('email');
    const [message, setMessage] = useState("");
    const sendMessage = (text, from_email, to_email) => {
        addMessage({ variables: { message: text, from_email: from_email, to_email: to_email } });
    }
    useEffect(() => {
        if (data && data.messages.length) {
            setMessages(data?.messages);
        }
    }, [data])
    return (
      <>
        <div className="message-body">
            <div className="messages">
                {
                    messages.map((message) => {
                        return (
                            <div key={message.id} className={message.to_email == currentUser ? "message-received" : "message-sent"} m={4}>
                                <div className="message-text">
                                    <Card>
                                        <CardHeader>
                                            <Flex spacing='4'>
                                            <Flex flex='1' gap='4' alignItems='center' flexWrap='wrap'>
                                                <Avatar name='Segun Adebayo' src='https://bit.ly/sage-adebayo' />

                                                <Box>
                                                <Heading size='sm'>{message.from_email}</Heading>
                                                <Text>Creator, Chakra UI</Text>
                                                </Box>
                                            </Flex>
                                            </Flex>
                                        </CardHeader>
                                        <CardBody>
                                            <Text>{message.message}</Text>
                                        </CardBody>
                                    </Card>
                                </div>
                            </div>
                        )
                    })
                }


            </div>
            <div className="main-bottom">
                <Input m={2} placeholder='Basic usage' onChange={(e) => {setMessage(e.target.value)}}/>
                <Button m={2} colorScheme='blue' onClick={() => {sendMessage(message, "kaushik@rocketgraph.io", "kaushik");}}>Button</Button>
            </div>
        </div>
      </>
    )
}
Enter fullscreen mode Exit fullscreen mode

You should be able to send messages and receive on this component.

Be sure to check out Rocketgraph

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more