How Chats component work?

Hi @cokicoki,

Everything that you should change in this component is the state of a component.

If you have a basic example:

import React, { Component } from "react";
import { MDBCard, MDBCardBody, MDBRow, MDBCol, MDBListGroup, MDBListGroupItem, MDBAvatar, MDBBadge, MDBIcon, MDBBtn } from "mdbreact";
import "./App.css";

class ChatPage extends Component {
  constructor() {
    super();
    this.state = {
      friends: [
        {
          name: "John Doe",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-8",
          message: "Hello, Are you there?",
          when: "Just now",
          toRespond: 1,
          seen: false,
          active: true
        },
        {
          name: "Danny Smith",
          message: "Lorem ipsum dolor sit",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1",
          when: "5 min ago",
          toRespond: 0,
          seen: false,
          active: false
        },
        {
          name: "Alex Steward",
          message: "Lorem ipsum dolor sit",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2",
          when: "Yesterday",
          toRespond: 0,
          seen: false,
          active: false
        },
        {
          name: "Ashley Olsen",
          message: "Lorem ipsum dolor sit",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3",
          when: "Yesterday",
          toRespond: 0,
          seen: false,
          active: false
        },
        {
          name: "Kate Moss",
          message: "Lorem ipsum dolor sit",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4",
          when: "Yesterday",
          toRespond: 0,
          seen: false,
          active: false
        },
        {
          name: "Lara Croft",
          message: "Lorem ipsum dolor sit",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5",
          when: "Yesterday",
          toRespond: 0,
          seen: false,
          active: false
        },
        {
          name: "Brad Pitt",
          message: "Lorem ipsum dolor sit",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
          when: "5 min ago",
          toRespond: 0,
          seen: true,
          active: false
        }
      ],
      messages: [
        {
          author: "Brad Pitt",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
          when: "12 mins ago",
          message:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        },
        {
          author: "Lara Croft",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5",
          when: "13 mins ago",
          message:
            " Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
        },
        {
          author: "Brad Pitt",
          avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
          when: "14 mins ago",
          message:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        }
      ]
    };
  }

  render() {
    return (
      <MDBCard className="grey lighten-3 chat-room">
        <MDBCardBody>
          <MDBRow className="px-lg-2 px-2">
            <MDBCol md="6" xl="4" className="px-0 mb-2 mb-md-0">
              <h6 className="font-weight-bold mb-3 text-lg-left">Member</h6>
              <div className="white z-depth-1 p-3">
                <MDBListGroup className="friend-list">
                  {this.state.friends.map(friend => (
                    <Friend key={friend.name} friend={friend} />
                  ))}
                </MDBListGroup>
              </div>
            </MDBCol>
            <MDBCol md="6" xl="8" className="pl-md-3 px-lg-auto mt-2 mt-md-0">
              <MDBRow>
                <MDBListGroup className="list-unstyled pl-3">
                  {this.state.messages.map(message => (
                    <ChatMessage
                      key={message.author + message.when}
                      message={message}
                    />
                  ))}
                  <li>
                    <div className="form-group basic-textarea">
                      <textarea
                        className="form-control pl-2 my-0"
                        id="exampleFormControlTextarea2"
                        rows="3"
                        placeholder="Type your message here..."
                      />
                      <MDBBtn
                        color="info"
                        rounded
                        size="sm"
                        className="float-right mt-4"
                      >
                        Send
                      </MDBBtn>
                    </div>
                  </li>
                </MDBListGroup>
              </MDBRow>
            </MDBCol>
          </MDBRow>
        </MDBCardBody>
      </MDBCard>
    );
  }
}

const Friend = ({
  friend: { name, avatar, message, when, toRespond, seen, active }
}) => (
  <MDBListGroupItem
    href="#!"
    className="d-flex justify-content-between p-2 border-light"
    style={{ backgroundColor: active ? "#eeeeee" : "" }}
  >
    <MDBAvatar
      tag="img"
      src={avatar}
      alt="avatar"
      circle
      className="mr-2 z-depth-1"
    />
    <div style={{ fontSize: "0.95rem" }}>
      <strong>{name}</strong>
      <p className="text-muted">{message}</p>
    </div>
    <div>
      <p className="text-muted mb-0" style={{ fontSize: "0.75rem" }}>
        {when}
      </p>
      {seen ? (
        <span className="text-muted float-right">
          <MDBIcon className="fa-check" aria-hidden="true" />
        </span>
      ) : toRespond ? (
        <MDBBadge color="danger" className="float-right">
          {toRespond}
        </MDBBadge>
      ) : (
        <span className="text-muted float-right">
          <MDBIcon icon="reply" aria-hidden="true" />
        </span>
      )}
    </div>
  </MDBListGroupItem>
);

const ChatMessage = ({ message: { author, avatar, when, message } }) => (
  <li className="chat-message d-flex justify-content-between mb-4">
    <MDBAvatar
      tag="img"
      src={avatar}
      alt="avatar"
      circle
      className="mx-2 z-depth-1"
    />
    <MDBCard>
      <MDBCardBody>
        <div>
          <strong className="primary-font">{author}</strong>
          <small className="pull-right text-muted">
            <i className="far fa-clock" /> {when}
          </small>
        </div>
        <hr />
        <p className="mb-0">{message}</p>
      </MDBCardBody>
    </MDBCard>
  </li>
);

export default ChatPage;

If you need to open another window message you should change active property in friends array. And then import messages for messages state.

I don't know exactly what you need. So please check this site and on top of the page please open API tab. And if you have any problems please I am asking for specific questions, I will try to answer it.

Best regards, Konrad.

Hi @cokicoki,

You have to pass data for this element (friends state):

<MDBListGroup className="friend-list">
   {this.state.friends.map(friend => ( 
      <Friend key={friend.name} friend={friend} />
   ))}
</MDBListGroup>

and

{this.state.messages.map(message => (
   <ChatMessage
       key={message.author + message.when}
       message={message}
   />
))}

or update our state.

this.state = {
  friends: [
    {
      name: "John Doe",
      avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-8",
      message: "Hello, Are you there?",
      when: "Just now",
      toRespond: 1,
      seen: false,
      active: true
    },
   ...
  ],
  messages: [
    {
      author: "Brad Pitt",
      avatar: "https://mdbootstrap.com/img/Photos/Avatars/avatar-6",
      when: "12 mins ago",
      message:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    ...
  ]
};

Can I save the chat messages for future reference in our conversation?

Of course. You can download data from the database or from your own API. But it must be updated.

Best regards, Konrad.

Hi @cokicoki,

As I mentioned is many ways to use chat components in your project.

1. You need database, API or something to keep data of your conversation.
2. The component is only rendered data like a chat. All you have to do is pass on the data to friends and message states.
3. The MDB component alone is not enough for you, because it does not operate on data, it only displays them.
4. If you click send button you should update your database or API and save conversation from the component.
5. Also if you click a user on the left side you should again update message state.

We do not deal with backend, but only prepare components for front-end.

We give users the freedom to how and what they want in their project.

If you have any questions, I will be happy to give you further answers.

Hi Konrad,

Thanks for your reply.

Do I need a server (setup in express), should I create a database for sign up/ sign in to login or do I need third party library like Socket.IO to make this Chat function properly or no need to do that because with using MDB-React alone is enough to make this Chat working?

Can I save the chat messages for future reference in our conversation?

Thanks again.

I am totally lost...I don't understand you...you don't give anything. I am very new here and trying to understand MDBootstrap and you are the expert/ the leader who have the full potential knowledge.

But You are not helping much, it seems that you are so afraid to lose something (your knowledge) by giving more..., more explanation..., more guide..., more lead..., more care...more sincere...

Your answer is very short, stingy and simplifying thing. And you want to get away as fast as possible.