Posted on

Hacktoberfest – Added user is typing… feature using React and SocketIO

This blog post covers my 5th pull request of Hacktoberfest 2018!!!! For a few days I wasn’t sure if I would be able to reach the 5 PR goal.  I got super busy with another project, which I may put a blog post up about that project sometime. I was able to work hard on Hacktoberfest the past couple day’s and now I am done all 5 PR’s!!!

Back to the topic of this post I’ll put a summary blog post of Hacktoberfest soon.

I add the feature that show’s when a user is typing which was requested in issue #1 of the node chat project.  Here is the link to the pull request.

In order to accomplish this task I used two events on the server side. ‘typing’ and ‘stop typing’.

Server Code
socket.on('typing', function(){
    socket.broadcast.emit('typing', {
      username: socket.username
    });
  });

  socket.on('stop typing', function(){
    socket.broadcast.emit('stop typing', {
      username: socket.username
    });
  });

For the client code I put the two event listener’s inside the componentDidMount().

The event listener for ‘typing’ add’s the user name to a state variable ‘userIsTyping’ which is an array of the user names that are typing.

The event listener for ‘stop typing’ removes the user name from ‘userIsTyping’.

Client Code
componentDidMount() {
  this.state.socket.on('typing', (user) => {
      if(this.state.username!==user.username){
        if(!this.state.userIsTyping.find(function(users){
              return users==user.username;
           })) {
          this.setState({userIsTyping: [...this.state.userIsTyping, user.username] });
        }
      } 
  });

  this.state.socket.on('stop typing', (user) => {
    if(this.state.username!==user.username){
       this.setState({userIsTyping: this.state.userIsTyping.filter(function(users) {
           returnusers!==user.username;
         })});
       }});
    }
  }
}

The function below is used to retrieve the content of the input field. It will emit ‘typing’ if there is anything inside the input field and it will emit ‘stop typing’ when there is nothing inside the input field.

setChatInput(event) {
  if(event.target.value !== ""){
    this.state.socket.emit('typing', this.state.username);
  } else if(event.target.value === ""){
    this.state.socket.emit('stop typing', this.state.username);
  }
  this.setState({ chatInput:event.target.value });
}

The end result looks like this:

Posted on

Hacktoberfest Week One

In my first week of Hacktoberfest I started off without any particular project in mind. I had a few ideas of what I wanted to work on, so I started by searching GitHub for a project. I was looking for something using JavaScript or C++.

After searching for a while I came across a application called NodeChat. In Issue #11 for the NodeChat project the owner asked for someone to move the public site over to React. Having used React, Node.js and Socket.IO I asked in the issue if I could do this.  After, that I started my work on the React app to replace the JQuery version that was previously used in the project.

Making a chat app using React

I started off with some project designing. I needed to figure out how I wanted to organize the react app. Also, I had to go through the existing JQuery file to get a better understanding of what the project is doing.

I decided on the below structure for the app.

    • App
      • This component is the core of the app were the Login Page is called and is currently were all the css and assets are located.
    • LoginPage
      • This component handles new and previous user login’s.  And handles displaying the login page or the chat page.
    • ChatPage
      • This compenent handles all the functionality of the chat.

Currently the flow of the app is as follows the app page displays the Login page. The login page creates a new user or uses a previous user then the Login page decides when to display the Chat page.

A update I think I will do at some point would be to make it so the App page receives props back form the Login page. That would instruct the App page when to display the Chat page. I think this would be a bit cleaner code.

There is still a bunch of stuff that need’s to be finished but at the moment the app is working on a basic level. I am hoping to get most of the bugs fixed as soon as I can.

I think this will be a good project for me over Hacktoberfest and probably after.

Here’s the link to my first PR of Hacktoberfest .

Below is the 2 class definitions for Login Page and Chat Page and I added a small comment about each function. Full Code available here.

class LoginPage extends Component {
    constructor(props) {}
    // Checks if user pressed enter key to submit there message.
    enterKeyPress(e) {}
    // Used to manage the State of the input field on the Login Page.
    setUsernameInput(event) {}
    // Calls checkIfPreviousUser()
    componentDidMount() {}
    // Sets the username 
    setUsername() {}
    // Checks current user is a previous user or calls setUsername() if not.
    checkIfPreviousUser() { }
    // Tell the server that we've had a user join
    userJoin() {}
    // Holds the content's of the Login Page
    displayLogin() {}
    // Render Login Page if not loged in or Chat page if Logged in
    render() {}
}


class ChatPage extends Component {
    constructor(props) {}
    // Calls greetUser() and Lisen's for New Chat messages.
    componentDidMount() {}
    // Displays Greeting message.
    greetUser() {}
    // Checks if user pressed enter key to submit there message.
    enterKeyPress(e) {}
    // Used to manage the State of the input field on the chat app.
    setChatInput(event) {}
    // Send's the message to the server.
    sendMessage() {}
    // Recieve's the chat messages from the server.
    addChatMessage(data) {}
    // Used to handle images(not tested).
    parseMessageText(inputString) {}
    // Used to handle images(not tested).
    imageFile(filetype) {}
    // Used to handle images(not tested).
    getFileType(inputString) {}
    // Used to handle images(not tested)..
    imageLink(inputString) {}
    // Used automatically scroll the page.
    scrollToBottom() {}
    // Render page content.
    render() {}
}