devjoylee / talkieworkie

Redux-based Web Messenger 💬

Wessenger (Web Messenger)

View Demo

Table of Contents

About The Project

Built With

Getting Started

Main Features

Commit Convention

About The Project

It is a web messenger that allows users to enter the chat room if you select a user (avatar). My team CRUD (create, read, update, delete) chat messages using Redux and have them managed in the firebase database.

📝 Read More in my blog

Team Members

Hyunho Lee (Leader)

Joy Lee

Hoonju Park

Changhyun Yoon

Member	Role
Hyunho Lee	Create firebase database and depolyment. Editing messages
Joy Lee	Updating and Creating messages
Hoonju Park	Replying messages
Changhyun Yoon	Deleting messages

CRA Folder Structure

src
├─components
│ ├─auth
│ └─chat
├─constants
├─pages
├─redux
│ ├─actions
│ └─reducers
├─server
├─styles
├─types
└─utils

• Production Period : 2022.02.07 - 2022.02.12

Built With

      

Getting Started

You are able to start the app by typing the following commands in the command line:

git clone https://github.com/devjoylee/wessenger.git
npm install
npm start

Main Features

1. Creating Messages

• Create a Redux action UPDATE_CONTENT so that the message detail (like text, date, user id..) is updated to the Redux state when a message is sent.
• Update firebase Database by the util function updateContentData when a message is sent.
• Implemented multi lines in the input component by handling height and scrollHeight.
• Scroll down smoothly using a scrollIntoView method when a message is sent
• Sort messages by date sent.
• Code Preview

// redux/actions/updateContent.ts
export const updateContent = (content: Content[]) => ({
  type: UPDATE_CONTENT,
  payload: content,
});

// components/chat/ChatForm.tsx
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // make message data as an object
  const newContent = {
    uuid: uuidv4().slice(-10),
    text: text,
    date: new Date().getTime(),
    userId: currentUser.userId,
  };

  const updatedContent = [...content, newContent];

  if (text) {
    dispatch(updateContent(updatedContent)); // update the redux state
    updateContentData(newContent); // update the firebase db
    setToBottom(true); // Scroll to bottom
    setText(''); // clear input area
  }
};

// components/chat/ChatList.tsx
export const ChatList = ({ toBottom }: ChatListProps) => {
  const {
    content: { content },
  } = useSelector((state: RootState) => state);
  const chatListRef = useRef<HTMLUListElement>(null);

  // scroll down to bottom smoothly when a message is sent
  useEffect(() => {
    if (chatListRef.current) {
      const chat = chatListRef.current.children;
      if (toBottom) {
        chat[chat.length - 1].scrollIntoView({ behavior: 'smooth' });
      }
    }
  });

  // sort by date sent
  content.sort((a: Content, b: Content) => a.date - b.date);

  return (
    <ListContainer ref={chatListRef}>
      {content.map((content: Content, i: number) => {
        return <ChatMessage key={`message-${i}`} message={content} />;
      })}
    </ListContainer>
  );
};

2. Fetching Messages

• Create util functions getUserData ,getContentData in order to fetch data from Firebase.
• Code Preview

// redux/actions/getUsers.ts
export const getUsers = (users: User[]) => ({
  type: GET_USERS,
  payload: users,
});

// App.tsx
const dispatch = useDispatch();
useEffect(() => {
  const userFetch = async () => {
    const response = await getUserData('users');
    dispatch(getUsers(response));
    return;
  };
  const contentFetch = async () => {
    const response = await getContentData();
    dispatch(getContent(response));
  };
  userFetch();
  contentFetch();
}, [dispatch]);

3. Editing Messeges

• When you click edit button, it will show a text input for editing the message.
• Create a Redux action UPDATE_CONTENT so that the edited message is updated to the Redux state when a message is updated.
• Update firebase Database by the util function editContentData when a message is sent.
• Code Preview

// redux/actions/editContent.ts
export const editContent = (content: Content[]) => ({
  type: EDIT_CONTENT,
  payload: content,
});

// components/chat/ChatMessage.tsx
const handleEdit = async () => {
  setEdit(!edit);
  const newContent = await editContentData(message, text);
  const editContents = [
    ...newContent,
    {
      uuid: message.uuid,
      text: text,
      date: message.date,
      userId: message.userId,
    },
  ];
  dispatch(editContent(editContents));
};

4. Deleting Messages

• Create a Redux action REMOVE_CONTENT so that the message is deleted from the Redux state when the delete button is clicked.
• Update firebase Database by the util function removeContentData when a button is clicked.
• Code Preview

// redux/actions/removeContent.ts
export const removeContent = (content: Content[]) => ({
  type: REMOVE_CONTENT,
  payload: content,
});

// components/chat/ChatMessage.tsx
const handleRemove = () => {
  if (window.confirm(showRemoveText() + 'Are you sure to delete this??')) {
    const newContents = content.filter(
      (data: Content) => data.uuid !== message.uuid
    );
    dispatch(removeContent(newContents));
    removeContentData(newContents);
  }
};

5. Replying Messages

• Update state called replyObj and save in setReplyContent action when you reply to a specific text.
• Code Preview

// redux/actions/setReplyContent.ts
export const setReplyContent = (replyObj: ReplyUser | null) => ({
  type: SET_REPLY_CONTENT,
  payload: replyObj,
});

// components/chat/ChatMessage.tsx
const handleReply = () => {
  const replyObj = { content: message, userName: user.userName };
  dispatch(setReplyContent(replyObj));
};

Commit Convention

The commit message is written with the GITMOJI icons in order to make commit messages more intuitive.

Gitmoji	Meaning
🎉	Init or begin a project.
🚚	Move or rename resources
✨	Introduce new features
💄	Add the UI and style files
♻️	Refactor code
📝	Add or update documentation
➕	Add a dependency
🐛	Fix a bug
🚀	Deploy stuff

REFERENCE : Gitmoji (http://gitmoji.dev/)

(back to top)