Add functionality to send pictures in chat

[X-TRON404]

Currently, MyPal only supports sending text-based messages in the chat.

The goal is to add functionality to send pictures in the chat.

I have written the sample code for the component and styles for the implementation of the functionality in SendMessage.js and SendMessage.css files.

The code for the screenshot above:

in SendMessage.js:

                <div className="chat__inputFormInsertIcons">
                    <InsertPhotoOutlinedIcon className="sendMessage__photoInsertIcon"/>
                    <InsertEmoticon className="sendMessage__emojiIcon" onClick={()=>{setEmoMenuVisible(!emoMenuVisible)}} style={{cursor: 'pointer'}}/>
                </div>

in SendMessage.css

.chat__inputFormInsertIcons{
  display: flex;
  justify-content: space-between;
  align-items:flex-start;
  margin-top: 3px;
}

.sendMessage__photoInsertIcon{
  margin-top: 10px;
  margin-right:10px;
}

The <SendMessage/> component has the code to input messages to the user. The functionality to send images to user must be implemented in this component. The image URL will be stored in the firebase realtime database in the same location as the text-only messages.

Finally, a custom component for ImageBasedMessages will receive and output the JSON data fetched from the database. For reference you can take a look at Message.js file

[nguyenhung15913]

Hi. Can I work on this issue ?

[X-TRON404]

Hey, @nguyenhung15913 are you still working on this?

[zolezzi]

Hi, I wanted to know if I can make this issue ?

[X-TRON404]

Hi, I wanted to know if I can make this issue ?

Hey @zolezzi are you still working on this?

[zolezzi]

@X-TRON404 sorry, i just read the message, i'm working on this!

[zolezzi]

Hi, I spoke to you through discord for a problem I have to show the images

[zolezzi]

Hi since yesterday the firebase responds with error from home

[X-TRON404]

Hi, I spoke to you through discord for a problem I have to show the images

I can't see any messages in discord.

[X-TRON404]

Hi since yesterday the firebase responds with error from home

Yes, I just saw that. There was some problem with current firebase rules. I will change the rules and it should be fine.