DEV Community: Patrik Mäsiar

react-keyboard-key NPM package

Patrik Mäsiar — Sun, 14 Mar 2021 13:53:12 +0000

I created an NPM package mostly for developers, who are working with ReactJS.

The package includes Container with keydown and keyup events. The container is handling the state of pressed key information and pushes it further.

There is also created hook called useKeyboardKey which is a substitute for Container so you can use it across the whole application wherever you want, you will just use the hook function.

Package link: react-keyboard-key

What key did I press?

Patrik Mäsiar — Fri, 12 Mar 2021 14:30:05 +0000

I was just listening podcast about keyboard event listeners and I got an idea.

I was thinking about a mini web application that tells developers, what key did they press. I do not mean character on the keyboard. I mean, what that key did. What is hidden in the keys?

If you need some information about the key values or key codes, you need to listen to them. You need to listen to the keyboard. There are keyboard listeners in Javascript you can use.

This application is listening to keyboard events and I am handling event values and setting to state. I am using Container from react-keyboard-key package. There is also an option to use hooks. In the Container, there are maintained values and they are presenting to the user.

Examples

Application: whatdidipress.com
Github project: Github
Package: react-keyboard-key

Support

If you liked my article, application, or project, you can support me by sharing it into the world 🌎. Thank you ♥️

Learn algorithms

Patrik Mäsiar — Wed, 16 Sep 2020 05:44:43 +0000

Let me introduced you "Algorythms of the night".
The repo with a list of awesome algorithms that help you to solve your code issues or can help you in interviews if you are looking for a new job.

This repo is fully educational. It serves for education or practice.

Feel free to contribute.

By the way, you can follow Instagram account instagram.com/awesome_algorithm/

Repo: github.com/massoprod/algorythm-of-the-night

Bitly field for ReactJS

Patrik Mäsiar — Tue, 08 Sep 2020 17:35:10 +0000

A few times ago, I did a new NPM package which is related to Bitly. I did a form field that returns you a shorter link by Bitly.

You can try and download it here: https://github.com/massoprod/bitly-field-react

Package: react-style-classes

Patrik Mäsiar — Fri, 03 Jan 2020 13:30:41 +0000

Every one of us knows the case when you need to add more class names to style your component depending on some conditions, but you do not want to have negative boolean values in className prop.

In Kontentino, we had the same issue.

So, what are you going to do if you need to solve a problem like this?
Probably, the first option that are you going to do is find the library which will help you.
Another option is to write your own library. This is what we did and also what we do! We develop our own libraries.

We wanted to solve the issue, that if we have class names depending on the condition of state like:

state = { isModalShown: false };
...
<div className={[!this.state.isModalShown && style.item, this.state.isModalShown && style.activeItem]} />

The result of this example is ["item", false]. It is something that you do not want to have in className prop. So we needed to remove boolean values if it equals false, and put class name if the condition applies.

We coded our own package!

One of our first libraries is named react-style-classes and this library solves the problem with boolean values in an array of styles. It is a package for merge arguments of component style class names.

If you are interested in how we wrote this helper, you can join us on Github. https://github.com/kontentino/react-style-classes

More interesting articles coming soon at kontentino.engineering

My first real-time chat application

Patrik Mäsiar — Mon, 14 Oct 2019 19:30:04 +0000

A few days ago, I started to think about the real-time application. In our company, we started to use Pusher for real-time notifications receiving and I thought, that I should try it to have a piece of knowledge about how it works.

I was thinking about the application subject, and I came to the conclusion, that the best real-time application example will be the application, where two separated users will see interactions of each other.

Choosing a technology

For my app, I chose NodeJS together with Pusher for the server-side part. Pusher also offers few products for developing back-end, like a ChatKIT, which is the platform to build in-app chat with nice and user-friendly interface.
For the client-side part, I chose to React, which is the Javascript framework.

Part 1. - server

For the server, I created a separated folder, with the necessary packages installed.

My server folder contains only three files: .env, package.json and server.js.

Writing a code

I used to help myself with tutorial by Pusher with very few changes. I put some code in there, which served on the GET request to pull all rooms from the database based on a specific user ID.

The reason was, that I needed to load all chatrooms in one request. In ChatKIT console, I had to create one user included in all chatrooms. His ID was used in a request to get a list of all created rooms at a client-side.

Added part of code in server.js:

app.get('/posts', (req, res) => {
    const { userId } = req.body;

    chatkit.getUserRooms({
        userId: userId,
    })
    .then(() => {
        res.sendStatus(201);
    })
    .catch((err) => {
        console.log(err);
    });
});

Part 2. - client

I do not need to explain how to do a ReactJs application. All the time, I was focused on the proper division of components.

This is not a large application. I decided to create one folder called components, where I have all UI controllers and elements. The second one is a folder named store. This folder is more important. I saved in there data at the highest level of application. I used React context API to have my own state management.

With this global state, I can manipulate application data from any part of the code.

store.js:

import React, { createContext, Component } from 'react';

const AppContext = createContext({
  user: null,
  room: null,
  setUser: () => {},
  setRoom: () => {},
});

export class AppProvider extends Component {
  setUser = user => {
    this.setState({ user });
  };

  setRoom = room => {
    this.setState({ room })
  };

  state = {
    user: null,
    room: null,
    setUser: this.setUser,
    setRoom: this.setRoom,
  };

  render() {
    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

export const AppConsumer = AppContext.Consumer;

Then I wrapped the main application component to created a store, or state, provider.

index.js:

const Application = () => (
  <AppProvider>
    <App />
  </AppProvider>
);

Deploying

Also, for the first time, I tried to use GitHub pages to publish my application in a few minutes. I was surprised at how fast and easy you are able to release application or web.

For the node server deploying, I can recommend Heroku as an available tool to testing your solutions for free.

Conclusion

That right - my application has not the most beautiful code syntax, refactored code or partitioning folders. But I wanted to know, that making of real-time application is not so difficult process as it seems to be like.

I was able to create a working real-time application within the possibilities with the minimum of used thirty part libraries and without unnecessary code.

DEMO: massoprod.github.io/mini-chat-app/
CODE: github.com/massoprod/mini-chat-app