Breakdown client into components

[PradyumnaKrishna]

Description Client is build with Vue.js that has support uses modular approach like Vue components. Currently, the client is a one big Vue file that contains all code. What I am thinking is to rebuild the complete client side using components, there can be two approaches.

• Create a new frontend from scratch.
• Convert the frontend into components one by one.

Interested contributors comment your approach to solve this issue. This is a one big issue, I will split it into many minor issues so that many contributors can contribute to it.

[PradyumnaKrishna]

closes #13 closes #17 and closes #25 as a parent issue.

[Selwan7131]

Hello, I would like to work on this issue under GSSoC'23 I would like to follow the approach of rebuilding the front end from scratch.

[Selwan7131]

When I run the application and navigate to the chat route I get a buffer error is that normal? Do you have any idea how to fix it

[srivastavas07]

Hello, I would like to work on this issue under GSSoC'23

[PradyumnaKrishna]

I am looking to use these components to build the UI. @srivastavas07 can you do this? If you need any help I am ready for it. We can do this together if you want. We can use typescript with vue.js from now, to make it easier or if you want lets just use js.

Lets migrate components one by one, starting from message form. https://github.com/alamorre/react-chat-engine-pretty/blob/master/src/components/MessageForm.tsx

[PradyumnaKrishna]

Each component will be one PR with level 3 and I am looking for as many contributors as possible. Thank you

[Selwan7131]

I want to contribute to this problem!

[PradyumnaKrishna]

Sure @Selwan7131, go ahead.

[DEEKSHACodeaim]

Can I work on this issue inder GSSOC '23 ?

[PradyumnaKrishna]

Sure @DEEKSHACodeaim, I will assign this to you as well.

[DEEKSHACodeaim]

@PradyumnaKrishna Can you explain as to what is left in this and what you expect me to work on in particular that will help me be more focussed. Thankyou

[PradyumnaKrishna]

@PradyumnaKrishna Can you explain as to what is left in this and what you expect me to work on in particular that will help me be more focussed. Thankyou

I will provide you more details on this in a few days.

[PradyumnaKrishna]

I have created #78 that creates a messageForm component taking reference from https://github.com/alamorre/react-chat-engine-pretty/blob/master/src/components/MessageForm.tsx.

We can create more components like this that will have different properties. Look at this there are more components that we can include. https://github.com/alamorre/react-chat-engine-pretty/tree/master/src/components

I am looking to get new components that are:

• [x] MessageForm
• [x] Alert Component (For notification that will have a cross button)
• [ ] Chat List Header (That will list chats)
• [ ] Chat Messages
• [ ] Chat Card (Sub component of Chat List Header)
• [ ] Chat Header
• [ ] User Info

@DEEKSHACodeaim if you have any question feel free to ask, I will provide help.

[DEEKSHACodeaim]

Please give me a week's time and I will update my progress to you. Thank you for assigning this task to me. I will contact you if I need further guidance

[DEEKSHACodeaim]

Also could you please add the gssoc '23 and level labels. Thanks

[PradyumnaKrishna]

@DEEKSHACodeaim The alert component is #79 and already assigned, you are welcome to add another component. If you want I can create a separate issue for a component and assign it to you.

[DEEKSHACodeaim]

Ok, I will not work on the alert component then, I'll work on other components you had listed like the Chat List Header, chat Messages, etc. After I'm done with either I'll let you know if I can work on another as well. Could please tell me what level this issue comes under though?

[PradyumnaKrishna]

Every PR will be level3 that adds a component.

[Nishitbaria]

I have created #78 that creates a messageForm component taking reference from https://github.com/alamorre/react-chat-engine-pretty/blob/master/src/components/MessageForm.tsx.

We can create more components like this that will have different properties. Look at this there are more components that we can include. https://github.com/alamorre/react-chat-engine-pretty/tree/master/src/components

I am looking to get new components that are:

• [x] MessageForm
• [ ] Alert Component (For notification that will have a cross button)
• [ ] Chat List Header (That will list chats)
• [ ] Chat Messages
• [ ] Chat Card (Sub component of Chat List Header)
• [ ] Chat Header
• [ ] User Info

@DEEKSHACodeaim if you have any question feel free to ask, I will provide help.

@PradyumnaKrishna which component are remaining that i can work on please assign me

[DEEKSHACodeaim]

@Nishitbaria I am working on the Chat and user components

[Nishitbaria]

@DEEKSHACodeaim ,multiple pr will be made for this ,so dont worry

[DEEKSHACodeaim]

@Nishitbaria you can definitely work on others, just wanted to let you know the ones I'm working on and assigned to me

[PradyumnaKrishna]

Alert and MessageForm components are completed.

[Nishitbaria]

@PradyumnaKrishna ,Which component are remainning which i can work?

[PradyumnaKrishna]

I guess you can work on chat header. The chat header will contain a user id only for now. We might add new feature over time. Also, look at the MessageForm to make the chat theme similar.

[Goheljay]

Hey, @PradyumnaKrishna I want to contribute in this project under hacktoberfest. Can you tell me if there is any component left that I can work on?

[PradyumnaKrishna]

Thanks @Goheljay for your interest in this issue.

Yeah, you can work on user-info card, where username is located and a input for start a chat. Other component would be chat list and chat card, you can work on any of them.

[Tizzz-555]

Hi @PradyumnaKrishna I am also interested in contributing, can I pick a component?

[PradyumnaKrishna]

Welcome @Tizzz-555, This is the list of unimplemented components till now, you are welcome to add any.

• [ ] Chat List Header (That will list chats)
• [ ] Chat Messages
• [ ] Chat Card (Sub component of Chat List Header)
• [ ] Chat Header
• [ ] User Info

Feel free to ask any questions.

[tara-matthew]

Hey! Would I be able to work on one of these components?

[PradyumnaKrishna]

Hey! Would I be able to work on one of these components?

You're welcome to contribute to any of these components.

[tara-matthew]

Are you planning on using atomic design at all? It might make sense to start with atoms if so. I'd guess that the Chat Header is an atom? If so I'd like to be assigned that please.

[PradyumnaKrishna]

Sure @tara-matthew, you are welcome to create another issue for that and I will assign it to you.

[tara-matthew]

Fantastic, thank you! I've decided to go for the Chat Card having looked through the code. I'll get working on this tomorrow 🚀 Could I just check which part of Chat.vue you'd want to be separated out as the Chat Card? I can see a card-body div. I checked your diagram above to cross-reference, but it's still quite unclear which part you consider to be the Chat Card. Thank you! This will all become a lot clearer as we separate everything out 👍

[PradyumnaKrishna]

Chat card is just a button for now, I am thinking to make it more than a button. It will show user id and the last message. So, We require a component that contains user id and the last message, and that I call chat card.

We will pass the following props to the chat card component.

• userId : user id to show in the card
• description : the last message
• isActive : Boolean that makes it active or active its style
• onClick : Function that will execute on click

[Tizzz-555]

@PradyumnaKrishna What is the MessageForm component doing? It seems like is not used anywhere. I was thinking of doing the Chat Messages component, but I would like to understand better what the MessageForm is

[PradyumnaKrishna]

@PradyumnaKrishna What is the MessageForm component doing?

Ah I just didn't added it to the chat UI, you can create a PR adding it to the chat window or work on the chat messages. Two PRs