NodeChat – Corey James Blog

December 8, 2018May 27, 2020

NodeChat Development

Have gotten a bunch of PR’s this past week, since this is the last week of class. Everyone is finishing up their release 4, which means the project has made some great progress.

We now have the continuous integration system Travis, that helps with managing the app. And, we are working on es-lint and prettier, there is still some configuring to do but it’s almost up and running.

So with all the changes, there was a bit of backtracking I had to fix. One of the PR’s changed how the messages were sent to the screen but they forgot to change some corresponding code, so it ended up breaking the messages altogether so no messages would display correctly on the screen. It was a pretty easy fix, but I am not sure about keeping it. The change puts the JSX for a message into a variable, then we just render that. The problem with that is it doesn’t get updated anymore when state changes. I have to look into it more later, but I might have to go back to making the JSX just before it is rendered.

Here is the PR that fixed the above bug and a few others: https://github.com/OTRChat/NodeChat/pull/72.

The other bugs include:

package.json – formatting bugs that formed when I did a manual merge.
Fixed avatar’s so you can now upload custom avatars. This change required changes to the server aswell, this is the PR that changed the server https://github.com/OTRChat/server/pull/4.
package-lock.json – There was a problem merging so I just deleted the old version and made a new one.

November 18, 2018May 27, 2020

Continue development of chat app.

Development on the chat app has been going good. Few things I would like to get finalized would be a continued integration system, linting, tests and database.

I think travisCI would be a great addition to the repo. Took a class today that explained how to implement travisCi into a GitHub repo. It looks like it will be pretty easy, might add it this week.

To make travisCI really useful it need’s to be doing more then just running the app as the test. It is capable of running linting software like eslint and actually test that could be created for the app.

I would also like to start research on the best options for incorporating a database into the app. I created a discussion thread here, I would like other people’s opinion in making this choice.

Also, for release 3 I found a external project to contribute to on GitHub. It was interesting, it required me to get into a bit of Ruby which was interesting. Here is the PR made for the code-gov-style project.

November 6, 2018May 27, 2020

Release 3

So far for release 3, I have been working on preparing the NodeChat repo for my classmates.

I have been working with the owner (Josh) of the repo to get permission’s to the Nodechat repo in this issue. He has been very helpful, I now have the required permission’s to edit the repo and he gave me some direction for the project!

I also had to fix a few things, before everyone forked the repo. I needed to merge my previous PR’s. Josh merged 2 of them. I needed to fix some merge conflicts on the other one, so I did that and I also put up a new PR that fixed a few bugs that were created by the merges and update the readme here.

The repo is now in a state that my classmate’s can start working on it. I posted a few issue’s up for people to work on, I am going to add a few more soon. Josh gave some ideas i need to look into.

November 5, 2018May 27, 2020

Hacktoberfest 2018 – My experience

Hacktoberfest 2018, was a great learning experience for me. I was able to find a great project for this event, that fit my interest’s and ability’s.

Starting this event was a bit challenging, I knew I wanted to work with something with java script. And I also, wanted to work on more front end development. So this helped me narrow down what project to work on, picking a project to work on took some time. After looking through the Hacktoberfest tag on GitHub for a while I came across the Node Chat app that was using node and socket IO to create a chat app. The owner of the project wanted to recreate the test site using react. This peaked my interest, since I was familiar with react, node and socketIO, so I took on the task of creating this react site for my first pull request for Hacktoberfest 2018.

After my first PR on the Node Chat I asked to continue working on the react app. The owner of the app invited me to be a maintainer for this project. So, for the rest of Hacktoberfest I worked on bugs and features of the react app.

My Hacktoberfest 2018 Pull Requests and Issues

Overall, I had a very positive experience in Hacktoberfest 2018. I learned allot about git, especially using branches. I now use branches all the time for whenever I want to test something or work on a issue or feature. And after making 5 PR’s I am much more comfortable with the process.

Now that I know events like Hacktoberfest exist, I am definitely going to keep an eye out for them, in the future.

October 30, 2018May 27, 2020

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:

October 16, 2018May 27, 2020

Hacktoberfest Week Two – React and Push.js

In this week of Hacktoberfest, I added push notifications to the Node Chat project in my most recent Pull request. I used the Push.js library in order to accomplish this task. Well learning how to do this, I din’t find much documentation on using Push.js with React so I put together a small tutorial for today’s blog.

Integrating Push.js with React

Natively, there is currently no solution to use Push.js with React. In order to use Push.js with react you have to use it as an external libraries. Below is how I added Push.js to React as an external library.

First step:

Include the script file in the main “index.html” file for your app.

I used a CDN to do this:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.7/push.min.js"></script>

Second step:

Import Push.js into your file.

Put the following line at the top of the .js file you want to use Push.js in.

import * as Push from "push.js";

After importing Push.js you can now create push notifications inside your react app.

Here’s an example of how to create a notification in a react component.

notify(){
 Push.create("Hello world!", {
     body: "Thanks for reading my Blog!",
     timeout: 5000,
     onClick: function () {
         window.focus();
         this.close();
     }
 });
}