Gyandeep Singh

React - useRef used in conjunction with useEffect

2020-07-02T00:00:00+00:00

Problem

Let’s say you have to call an external API to submit a name change and API count number. Every time the name changes you have to call the remove name API and then call the add name API. Alongside this you need to count how many times the API was called regardless of which API you call and also send the count number to the API as well.

import React, { useEffect, useState } from "react";

export default function RefTest() {
  const [text, setText] = useState("");
  const [name, setName] = useState("");
  const [cnt, setCnt] = useState(0);

  // DOM handlers
  const inputChangeHandler = ({ target }) => setText(target.value);
  const sendHandler = () => setName(text);

  // HOOK
  useEffect(() => {
    console.log(`API - Add name: ${name} cnt: ${cnt + 1}`);
    setCnt(cnt + 1);

    return () => {
      console.log(`API - Remove name: ${name} cnt: ${cnt + 1}`);
      setCnt(cnt + 1);
    };
  }, [name, setCnt]);

  return (
    <div>
      <input type="text" value={text} onChange={inputChangeHandler} />
      <button onClick={sendHandler}>Send</button>
      <div>Name: {name}</div>
      <div>Count: {cnt}</div>
    </div>
  );
}

Note: All these examples can be better coded but I am trying to demonstrate a scenario.

There are couple of issues in the code above:

ESLint issue where we have not added cnt as a dependency.
If you run the code the cnt is not correct because of closure it maintains an older value of cnt before it can increment.

Adding `cnt` as a dependency

Note: Please do not add cnt as dependency as it will cause an infinite render. But if you want to try, do it on a page which you can kill easily.

The main issue with this approach apart from the infinte render is that it’s going to start calling the API even when the cnt changes. Which we don’t want as we only want to call the API when name changes.

Solution

Maintain the cnt as a ref so that it can be updated and mutated without impacting the useEffect hook execution cycle.

import React, { useEffect, useState, useRef } from "react";

export default function RefTest() {
  const [text, setText] = useState("");
  const [name, setName] = useState("");
  const [cnt, setCnt] = useState(0);
  const cntRef = useRef(cnt);

  // DOM handlers
  const inputChangeHandler = ({ target }) => setText(target.value);
  const sendHandler = () => setName(text);

  // HOOKS
  useEffect(() => {
    console.log(`API - Add name: ${name} cnt: ${cntRef.current++}`);
    setCnt(cntRef.current);

    return () => {
      console.log(`API - Remove name: ${name} cnt: ${cntRef.current++}`);
      setCnt(cntRef.current);
    };
  }, [name, setCnt]);

  return (
    <div>
      <input type="text" value={text} onChange={inputChangeHandler} />
      <button onClick={sendHandler}>Send</button>
      <div>Name: {name}</div>
      <div>Count: {cnt}</div>
    </div>
  );
}

At this point I am using cnt in the state as well so that I can display it on UI otherwise it’s not needed.

Conclusion

Anytime you want the useEffect to execute for state S1 but you want to use other state values inside it but don’t want other states to trigger the useEffect for those states than use useRef hook to store the other states.
This is particularly helpful if you subscribe to an API and in your handler you want to do something with the incoming data combined with other state data (not S1) before handing it over to some other operation.

Garage door operations using Raspberry Pi

2020-04-27T00:00:00+00:00

Expectation

In this post I am going to explain how I automated certain garage door operation using raspberry pi. If you find it useful then you can follow this guide and build your own too.

Open/Close garage door from your phone
Know the status (open or close) of the garage door.
Auto close garage door in 5 mins.
Override auto close in 5 mins.
Know the time it was last closed/opened.

Note: This is my first take at this and I am still learning.

Parts needed

Raspberry Pi - ~$35
1. You can use any kind 3 or 4. I used 4 because I got it for $5 price difference.
2. Buy link - Microcenter
Breadboard jumper wires - Amazon
Relay module - Amazon
20 Gauge 2 pin wire - Amazon
1. You can buy a lower gauge wire also.
Magnetic switch - Amazon

Setup

Raspberry Pi

I am not going to go into detail on how to setup Raspberry Pi as most of the setup instructions are available out in the wild.

Here is what I used:

Youtube video - https://www.youtube.com/watch?v=BpJCAafw2qE
Docs - https://crosstalksolutions.com/getting-started-with-raspberry-pi-4/

Thanks to @crosstalksol for the awesome setup guide.

Note: Please read up on raspberry pi GPIO pins as it will help you when you work on this project.

gpio module on raspberry pi

Inside raspberry pi, open a terminal and write gpio -v. We need atleast 2.52 version.

If an update is needed, then follow this: http://wiringpi.com/wiringpi-updated-to-2-52-for-the-raspberry-pi-4b/

IP address

First, note down the current IP address of the Pi. Second. make sure you make the ip of the Pi static because we don’t want to keep changing it after restarts. This is not a necessary step, but it helps while you work on this.

In my setup i have google fiber, so I logged into the router setup page and in the client list select raspberry pi. Activated the reserved flag on pi client so that it keeps the same ip address. Feel free to google on how to do this on your router.

Computer

I installed Putty on my windows machine to ssh into raspberry pi from my windows laptop.
Feel free to use any other ssh client which works best for you.

Let us get to work

Hardware setup

Let’s setup all the different parts to get door working first. At this point don’t worry about all these connection as we will go in detail when we start programming them.

We will use BCM conventions for GPIO pin numbers. When using pin numbers those will denote physical pin numbers. Run gpio readall inside bash session on your raspberry pi to get more details.

Find the manual button wire connection into your garage door

I have a Chamberlain garage door opener, I was able to trace the button (from the wall) wires going into one terminal in your garage door opener. It looks like a thin looking wire as compared to regular electric wires in your house. Do not confuse the wires coming from the safety sensors hooked up to your garage door sides. In my case red was positive and white was negative.

Connect wires from your garage opener sockets to relay module

Make sure you connect the negative (black in pic) to center terminal of the relay module and hot (red in pic) wire to left terminal on the relay module.
Concept is that when we connect these two wires, it completes the circuit which in turn trigger the garage open/close operation.

Connect relay to raspberry pi

Connect GND to pin 6 (other orange looking wire)
Connect VCC to pin 2 ie 5v supply (red wire in pic)
Connect IN2 to GPIO 4 (orange wire in pic)

IN2 pin is what will be used to trigger the changes. Other 2 wires is to provide power (5v) to the relay.

Connect magnetic switch to raspberry pi

Connect COM to ground on pin 6
- Black wire from the switch to orange looking wire
Connect NO to GPIO 2 (red wire in pic)
- This is pin is an pull-up type which means it outputs 3.3v
- I am still trying to better understand this area.
- I think you can use other pins as pull-up by configuration but i did not try it.

Mechanical switch connections

Connection to the raspberry pi

Mechanical switch to the garage door

Hook up the mechanical switch on the side of the garage door panel as show in the picture above.
Hook up the other piece on the movable garage door so that when its closed it comes very close to the other side.
Basically, it detects close when they are close to each other and open when they are not close to each other.

Software

Complete code: Github

Using `onoff` npm package

This package only works on Linux so make sure you code on the raspberry pi
- You can use vscode via ssh to code inside raspberry pi (Google is your friend here)
Lets setup GPIO 4 to out since we are going to use that pin to trigger the open close.
Configure GPIO 2 to in as we are going to read high (1) and low (0) based on the magnetic switch changes.
- Configure this pin to call out function in both direction (high and low)
- This library allows to read in one direction also.

const buttonTrigger = new Gpio(4, "out", undefined, {
    reconfigureDirection: false
});
const doorSensor = new Gpio(2, "in", "both", {
    reconfigureDirection: false,
    debounceTimeout: 1000
});

Open close action

When we want to close/open the garage door we are going to output a low on GPIO 4 then wait for 1 second and then output high.
The reason we flip flop is that we want to just output a pulse and then get back to its original state.
Think of this as a button click, press and release action kind of a deal.
When you do this at this point it sends the signal to the relay where its output state is disconnected.
When the trigger happens, it completes the relay switch circuit on the other side.
That complete circuit allows the current to flow from inside the garage opener and that’s why its start to work.
Sorry I am not an electrician so that’s the best I can explain.

export const openCloseGarage = async () => {
    buttonTrigger.write(Gpio.LOW);
    await sleep();
    buttonTrigger.write(Gpio.HIGH);
};

Bonus stuff

If you use the garage module, I have setup then it should get you all started. Follow these steps inside your raspberry pi:

git clone https://github.com/gyandeeps/garage.git
npm install (This is going to take a long time)
sudo sh prod.sh

Phone

On your phone you should be able to hit http://<ip address to pi>:3000
Then open close the garage.

Closing thoughts

This is my first project and i am still trying to figure a lot of things out.
Please provide feedback or anything which can be improved.
Any ideas on what else can be done.

Overall picture (needs to find a good place for this but they work for now)

References

https://crosstalksolutions.com/getting-started-with-raspberry-pi-4/
https://www.instructables.com/id/Raspberry-Pi-Garage-Door-Opener/
https://www.driscocity.com/idiots-guide-to-a-raspberry-pi-garage-door-opener/
http://wiringpi.com/wiringpi-updated-to-2-52-for-the-raspberry-pi-4b/

React - How to use keys to avoid using getDerivedStateFromProps

2018-09-15T00:00:00+00:00

Background

Until today I used key in react only when react dev threw warnings inside the console. Other than that I never cared about keys and never invested time to understand them. This is me being brutally honest to you all readers. :)

Problem

Have a component which display person name form based on different name and id passed to it. So using that form user can edit person details.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class NameForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userId: props.userId || 0,
            name: props.name || ""
        };
    }

    handleChange = event => {
        this.setState({ name: event.target.value });
    };

    handleSubmit = event => {
        console.log("A name was submitted: " + this.state.name);
        event.preventDefault();
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input
                        type="text"
                        value={this.state.name}
                        onChange={this.handleChange}
                    />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: {
                1: "A",
                2: "B",
                3: "C"
            },
            editUserId: "new"
        };
    }

    onChange = event => {
        const value = event.target.value;

        this.setState(() => ({
            editUserId: value
        }));
    };

    render() {
        const { editUserId, users } = this.state;

        return (
            <div>
                <span>Select Edit userId: </span>
                <select onChange={this.onChange}>
                    <option value="new">New User</option>
                    {Object.entries(users).map(([userId, name]) => (
                        <option value={userId}>{name}</option>
                    ))}
                </select>
                <NameForm userId={editUserId} name={users[editUserId] || ""} />
            </div>
        );
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Observations

Form name field displays no data since by default its set to new user.
Now when you select user A from the select list, it still shows name as empty.
Since react thinks its the same component so it will not call the constructor again.
At this point you will be thinking that I need to change state of NameForm component based on prop changes.
- This is called syncing state with props.
And now yuou will be convinced that you need to use getDerivedStateFromProps static method because you need to change state based on prop change.
This is where you went wrong.

Solution

Let me quote a line from React documentation:

If you want to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.

Make NameForm component controlled by using key for React elements.

Thats it.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class NameForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userId: props.userId || 0,
            name: props.name || ""
        };
    }

    handleChange = event => {
        this.setState({ name: event.target.value });
    };

    handleSubmit = event => {
        console.log("A name was submitted: " + this.state.name);
        event.preventDefault();
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input
                        type="text"
                        value={this.state.name}
                        onChange={this.handleChange}
                    />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: {
                1: "A",
                2: "B",
                3: "C"
            },
            editUserId: "new"
        };
    }

    onChange = event => {
        const value = event.target.value;

        this.setState(() => ({
            editUserId: value
        }));
    };

    render() {
        const { editUserId, users } = this.state;

        return (
            <div>
                <span>Select Edit userId: </span>
                <select onChange={this.onChange}>
                    <option value="new">New User</option>
                    {Object.entries(users).map(([userId, name]) => (
                        <option value={userId}>{name}</option>
                    ))}
                </select>
                <NameForm key={editUserId} userId={editUserId} name={users[editUserId] || ""} />
            </div>
        );
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Observations

We added key to the NameForm component.
- This tells react to create a new instance of NameForm based on the key.
- With that, component constructor will get called and the state is maintained.
Now when you change values from the dropdown the form values will change.

Conclusion

When you think about using getDerivedStateFromProps, take a step back and think through the problem and see if you can use key.
Thats why you will see people say that you should avoid or use getDerivedStateFromProps rarely.
This was an eye opener for me when I actually used it. While reading docs I didn’t get the whole point.

AWS AppSync App with React and Apollo

2018-06-11T00:00:00+00:00

Introduction

Walk through on how to build an application using AWS AppSync and what all things are needed on the front end side to get the whole system working. We will not be covering any basics as there are so many blog posts out there for that.

Prerequisites

Basic understanding of:

React
React router
AWS AppSync setup inside AWS console
Different Apollo libraries
GraphQL terminologies - Query, Mutations and Subscriptions

Resources

Building Serverless React GraphQL Applications with AWS AppSync by Nader Dabit

If you don’t have basic understanding on any of these topics then I would highly recommended learning about that before proceeding ahead.

What are we going to learn

Wire up AWS AppSync with all the config
Authentication using AWS Cognito integration
Manage mutation and resolvers
Manage client state and server side state using apollo

Motivations

Not able to find any docs which explains how all these pieces work together.
Not much info for advanced level stuff vs basic getting started.
Spent so much time trying to figure out all these pieces and how they work together.

Setup

Libraries

aws-amplify, aws-amplify-react - For Auth and other AWS calls
aws-appsync, aws-appsync-react - Wrapper around apollo client which manages communication to graphql api endpoint
react-apollo - Apollo client side library for React framework
Other apollo libraries like apollo-link-http, apollo-link-state and apollo-cache-inmemory

Note: Most of the blogs out their doesn’t cover all the aspects of an app and that why they only use sub-set of these libraries.

Building blocks

Basic app loading

I assume you already have something loading just using react (create using create-react-app). We are going to build on top of that. So let’s say you have a div rendering with hello world for now.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

class App extends React.Component {
    render() {
        return <div>Hello World</div>;
    }
}

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root")
);

Add AWS AppSync layer to connect to backend

We are going to use aws-amplify library provided by AWS AppSync team. This would take care of talking directly to AWS resources like cognito for Auth, analytics api, pubsub, API calls, etc. For more detailed info, please use the readme.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Amplify, { Auth } from "aws-amplify";

Amplify.configure({
    Auth: {
        // REQUIRED - Amazon Cognito Identity Pool ID
        identityPoolId: "XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab",
        // REQUIRED - Amazon Cognito Region
        region: "XX-XXXX-X",
        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: "XX-XXXX-X_abcd1234",
        // OPTIONAL - Amazon Cognito Web Client ID
        userPoolWebClientId: "XX-XXXX-X_abcd1234"
    }
});

class App extends React.Component {
    render() {
        return <div>Hello World</div>;
    }
}

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root")
);

Once you have configured Amplify then in any other module you can import a particular artifact and use it.
- Docs - https://aws.github.io/aws-amplify/media/developer_guide
In this case we are only using Auth so we have configured that portion only. But for API or any other modules, you can add a block and its configurations.
As per the above setup you should be good to go and use Auth module anywhere in your app.

Add cache and state management

We are going to use aws-appsync and aws-appsync-react libraries to create local cache where the data from graphql and your local state will be saved. The concept is more like Redux but here behind the scene aws-appsync uses Apollo cache and its libraries to do the heavy lifting.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Amplify, { Auth } from "aws-amplify";
import { ApolloProvider } from "react-apollo";
import { ApolloLink } from "apollo-link";
import { InMemoryCache } from "apollo-cache-inmemory";
import AWSAppSyncClient, { createAppSyncLink } from "aws-appsync";
import { withClientState } from "apollo-link-state";

Amplify.configure({
    Auth: {
        // REQUIRED - Amazon Cognito Identity Pool ID
        identityPoolId: "XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab",
        // REQUIRED - Amazon Cognito Region
        region: "XX-XXXX-X",
        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: "XX-XXXX-X_abcd1234",
        // OPTIONAL - Amazon Cognito Web Client ID
        userPoolWebClientId: "XX-XXXX-X_abcd1234"
    }
});

const cache = new InMemoryCache();
let nextTodoId = 1;
const stateLink = withClientState({
    cache,
    defaults: {
        todos: []
    },
    resolvers: {
        Mutation: {
            addTodo: (_, { text }, { cache }) => {
                const query = gql`
                    query GetTodos {
                        todos @client {
                            id
                            text
                            completed
                        }
                    }
                `;
                const previous = cache.readQuery({ query });
                const newTodo = {
                    id: nextTodoId++,
                    text,
                    completed: false,
                    __typename: "TodoItem"
                };
                const data = {
                    todos: previous.todos.concat([newTodo])
                };
                cache.writeData({ data });
                return newTodo;
            }
        }
    }
});

const authConfig = {
    type: appSyncAtrributes.authenticationType,
    jwtToken: async () =>
        (await Auth.currentSession()).getAccessToken().getJwtToken()
};

const client = new AWSAppSyncClient(
    {
        disableOffline: true,
        url: appSyncAtrributes.graphqlEndpoint,
        region: appSyncAtrributes.region,
        auth: authConfig,
        complexObjectsCredentials: () => Auth.currentCredentials()
    },
    {
        cache,
        link: ApolloLink.from([
            stateLink,
            createAppSyncLink({
                url: appSyncAtrributes.graphqlEndpoint,
                region: appSyncAtrributes.region,
                auth: authConfig,
                complexObjectsCredentials: () => Auth.currentCredentials()
            })
        ])
    }
);

class App extends React.Component {
    render() {
        return <div>Hello World</div>;
    }
}

ReactDOM.render(
    <BrowserRouter>
        <ApolloProvider client={client}>
            <App />
        </ApolloProvider>
    </BrowserRouter>,
    document.getElementById("root")
);

A lot of stuff happened in the code above. Lets discuss the important pieces here.

Cache/State

Based on all the articles out their, when you use AWSAppSyncClient directly by providing the first parameter you automagically start maintaining local cache of your remote calls. i.e. when you fetch data from your graphql api then its stored inside cache. But we want to maintain some client side local state as well, which is not coming from the grapghql api. We do that using apollo-link-state.

Most important pieces to understand here are:

createAppSyncLink - Default state setup done by the aws-appsync library.
withClientState - we create the local state maintained by the app on the front-end. In this case it’s the todo state.
ApolloLink.from - Using this we combine the output from above 2 commands to get a single entry point into the state. Think of this as merging the remote and local state into a single state.
ApolloProvider - It’s like react-redux provider which exposes the client downstream into other components.

Using state in component

Here I am just going to focus on the App component as all the other code around it remains the same. Ideally you should create the App component as a separate file and import it.

import * as React from "react";
import { Mutation, Query } from "react-apollo";
import gql from "graphql-tag";

const GET_TODOS = gql`
    {
        todos @client {
            id
            completed
            text
        }
    }
`;

const GET_ORDERS = gql`
    {
        listOrders {
            items {
                id
                name
            }
        }
    }
`;

const ADD_TODO = gql`
    mutation addTodo($text: String!) {
        addTodo(text: $text) @client {
            id
        }
    }
`;

class App extends React.Component {
    render() {
        return (
            <Query query={GET_ORDERS}>
                {({ data }) => (
                    <Mutation mutation={ADD_TODO}>
                        {(addTodo) => (
                            <>
                                <div>{JSON.stringify(data)}</div>
                                <button
                                    onClick={() =>
                                        addTodo({
                                            variables: { text: "gyandeep" }
                                        })
                                    }
                                >
                                    add
                                </button>
                            </>
                        )}
                    </Mutation>
                )}
            </Query>
        );
    }
}

Most important pieces to understand here are:

Query and Mutation - Components for graphql stuff.
onClick addTodo call - Add todo calls a mutation on the client side using the directive @client inside the mutation definition. This tells the underlying apollo infrastructure that this graphql command is for local changes only.
- In the main file in stateLink using withClientState, we defined the mutation resolver for add todo that basically writes to the local cache and then the components refreshes to read the values.
- Think of this as redux actions and reducers.
GET_ORDERS - This graphql query doesn’t use the @client so it hit’s the graphql interface over the network and then when data comes back it updates the cache automagically.

Authentication

After all the setup done, if you want your route in this case App to be authenticated before procedding then you can use the helper to achieve that.

import { withAuthenticator } from "aws-amplify-react";

// App class definition here as seen above

export default withAuthenticator(App);

So before this components gets rendered it will route to login page. For more details on this I would recommend using the guide here. It explains everything very nicely.

Conclusion

You should not use Redux as it doesn’t work nicely with apollo cache. I know its hard but once you move over to apollo you will be fine.
- It took me some time to understand.
Think of your resolvers as redux reducers, I would recommend writing them separately.
Think of all gql queries as actions, I would recommend writing them separately as well.

Notes

Wrote this because I struggled with all these pieces (different libraries) a lot and complained a lot to people and twitter.
I am just 2-3 weeks old in AppSync world, so this post is like a brain dump.

Understanding async/await with Array reduce method

2017-12-10T00:00:00+00:00

I was working on a project when I ran into a use case where I needed to use Array’s reduce method with some async/await (Promise based) network calls. That’s when things actually became confusing and complicated. Let’s learn about how to use async/await with array reduce by running through an example.

Problem

Get all the pull request objects using GitHub API from a repo who have a commit message not starting with Fix: or Docs:.

We will use a lot of helper methods to talk to GitHub API and do some other operation but will not discuss those in this post as we want to focus async/await with array reduce.

Solution

Let create a function named getNonSemverPatchPRs which is going to return all the PR objects from a repo who doesn’t not qualify as semver patch PR based on a the commit message of the PR. Expectation here will be that when we call the getNonSemverPatchPRs it should return a Promise and that promise should resolve with a array of PR objects.

const getNonSemverPatchPRs = async () => {
    const allOpenPrs = await getAllOpenPRs();

    return allOpenPrs.reduce((collection, pr) => {
        // 1. This is where we want to get all the commits of the PR in context
        // 2. Then we want to see if the commit message of the first commit message starts with `Fix:` or `Docs:`
        // 3. If yes then ignore it otherwise add it to the collection.
    }, []);
};

Fetch all the commits for a PR

To complete step 1 we need to perform a network call to fetch all the commit for a PR. Now this call will be promised based. Since we have to make await the call we need to make the reduce handler function async.

const getNonSemverPatchPRs = async () => {
    const allOpenPrs = await getAllOpenPRs();

    return allOpenPrs.reduce(async (collection, pr) => {
        const allCommits = await getAllCommitsForaPR(pr.number);

        // 2. Then we want to see if the commit message of the first commit message starts with `Fix:` or `Docs:`
        // 3. If yes then ignore it otherwise add it to the collection.
    }, []);
};

Check the commit message from the first commit

Now we are going to check the commit message of the first commit to see if it starts with Fix: or Docs:. This call is synchronous call to a helper function.

const getNonSemverPatchPRs = async () => {
    const allOpenPrs = await getAllOpenPRs();

    return allOpenPrs.reduce(async (collection, pr) => {
        const allCommits = await getAllCommitsForaPR(pr.number);

        const isNotSemverPatchPR = checkCommitMessageForPatch(allCommits[0]);
        // 3. If yes then ignore it otherwise add it to the collection.
    }, []);
};

Add to collection if PR is not semver patch PR

Now we are going to check if it’s not a semver patch PR then add to collection of reduce otherwise ignore it.

const getNonSemverPatchPRs = async () => {
    const allOpenPrs = await getAllOpenPRs();

    return allOpenPrs.reduce(async (collection, pr) => {
        const allCommits = await getAllCommitsForaPR(pr.number);

        const isNotSemverPatchPR = checkCommitMessageForPatch(allCommits[0]);
        
        if (isNotSemverPatchPR) {
            collection.push(pr);
        }

        return collection;
    }, []);
};

Problem inside reduce with async function handler

Thought: Based on your knowledge of async/await and array reduce, you would think that it will keep pushing the pr objects to the collection and return the collection so that next iteration of the reduce can use it and keep adding stuff to the collection.
Reality: The reduce callback function is an async function so it will always returns a Promise. Since it returns a Promise the value of the collection parameter is not an array but its a Promise from the previous execution.
Solution: Since collection always contains a Promise then we need to resolve that promise to get the response which will finally become our collection and then we can keep pushing stuff to it and then return that as part of the function.
- Make the initial value of reduce to be a dummy resolved Promise and then we can keep resolving the promises returned by every call.
- Make a collection inside the function which can be extracted by resolving the passed in Promise.

const getNonSemverPatchPRs = async () => {
    const allOpenPrs = await getAllOpenPRs();

    return allOpenPrs.reduce(async (previousPromise, pr) => {
        const collection = await previousPromise;
        const allCommits = await getAllCommitsForaPR(pr.number);

        const isNotSemverPatchPR = checkCommitMessageForPatch(allCommits[0]);
        
        if (isNotSemverPatchPR) {
            collection.push(pr);
        }

        return collection;
    }, Promise.resolve([]));
};

Conclusion

Would recommend running through the above example and try to put breakpoints to better understand the flow. Feel free to use the JSBin to play around.
async function always return a Promise that is why the reduce function starts accumulating previous Promise. When this promise resolves it gives you the real collection retuned inside the function.

I am still working through this but I wanted to write something about this so that I can help others who run into this. Feel free to leave feedback in the comments below.

Understanding state changes inside Alexa skill

2017-07-22T00:00:00+00:00

Introduction

I will be explaining how the execution flow of an alexa program works based on state changes inside a single user session. All my examples will be written in JavaScript as you can build skills using NodeJS. In this blog, I expect the readers to have basic understanding of building an alexa skill. We will be using alexa-sdk NodeJS package for the example code.

It’s not necessary to use states as you can do a lot of stuff by just using the default handler. But separate handlers are very beneficial when you want to break down you skill into different areas. I would recommend using these for medium to advance level alexa skills.

Basic - skill registration

This is how your basic setup looks like for a lambda function used by the alexa skill. I am showing this code because this is where you register all your different handlers.

exports.handler = (event, context, callback) => {
    const alexa = Alexa.handler(event, context);

    alexa.appId = process.env.APP_ID; // alexa skill id
    alexa.registerHandlers(newSessionHandler, startGameHandlers, askQuestionHandlers); // important part where we are going to focus.
    alexa.execute();
};

State handlers

The important part in the above basic setup example is the registerHandlers function call. Let’s discuss what the different arguments to that function mean.

`newSessionHandler`

This is a required handler needed by the alexa skill. This handler is called when the user uses the skill. This contains introduction level information and it sets the next state the skill is going to move to.

const newSessionHandler = {
    LaunchRequest() {
        this.handler.state = "ASKMODE";
        this.emit(":ask", "Welcome to Custom Alexa skill, are you ready to begin?");
    }
};

it will welcome the user and maybe ask him if he is ready to perform certain actions. The important part here is that we set the state to ASKMODE. What it’s going to do is that the next time call comes back to the lambda function in the same session then it will execute the handlers inside startGameHandlers.

`startGameHandlers`

This is the extra handler we have added which depends upon a separate state. The core is the same as all the handlers but the only difference is that this handlers is attached to a particular ASKMODE state. So if state of session is ASKMODE then the call will be handled by all the handlers defined inside this function.

const startGameHandlers = Alexa.CreateStateHandler("ASKMODE", {
    "AMAZON.YesIntent": function () {
        this.emitWithState("AskQuestionIntent");
    },
    "AskQuestionIntent": function() {
        this.handler.state = "ANSWERMODE";

        const randomQuestion = getRandomQuestion();
        this.attributes.questions[randomQuestion.id] = null;  // maintain questions within the same session
        this.attributes.questionId = randomQuestion.id;
        this.emit(":ask", randomQuestion.display);
    },
    "FinishIntent": function() {
        this.emit(":tell", "All your answers are correct. Thanks for playing");
    },
});

Again, if you watch here the state gets changed to the ANSWERMODE which is going to handle the answer to the question asked here.

`askQuestionHandlers`

This is the extra handler we have added which depends upon a separate state.

const askQuestionHandlers = Alexa.CreateStateHandler("ANSWERMODE", {
    "AMAZON.YesIntent": function () {
        this.handler.state = "ASKMODE";

        this.attributes.questions[this.attributes.questionId] = 1; // Yes
        this.emitWithState(allThreeQuestionsAnswered(this.attributes.questions) ? "FinishIntent" : "AskQuestionIntent");
    },
    "AMAZON.NoIntent": function () {
        this.handler.state = "ASKMODE";

        this.attributes.questions[this.attributes.questionId] = 0; // No
        this.emitWithState(allThreeQuestionsAnswered(this.attributes.questions) ? "FinishIntent" : "AskQuestionIntent");
    }
});

In here it maps the answers for the questions asked from startGameHandlers. Here it transfers the state back to ASKMODE so that the next interaction will be handled by startGameHandlers.

Conclusion

state helps you switch between different handlers.
State is maintained for each user session and not across sessions.
State dectates which handlers is active at that point. Then all the calls to the lambda will be directed towards that handler.
It’s easy to build different blocks of the skill and then make them work cohesively.

Note: I am still learning so if you find something wrong please leave a comment.

Use technology to strengthen your relationship

2016-10-20T00:00:00+00:00

I got married in December 2014 and after getting married within a month my wife had to move to Omaha, Nebraska to work towards her MIS degree (2 year course). I was left alone in Kansas City (bachelor again :) ). Since I work during the week and on weekends I do some open source work my life was very busy. Only at night I used to talk to my wife for few minutes and then go off to bed. My wife was never happy with how much time I gave her from the day and I didn’t even text her. So her biggest complain was that I don’t talk to her enough during the day, even don’t send text messages. I know every man alive on the planet has heard the same words from the other half.

After all this, one day I decided to do something about this and being a software engineer my first thought was why not use technology and automate this type of human interaction. And that is when I decided to spend few hours on this project. Now I am going to switch gear and convert the above situation into technical user story and solve the problem in hand.

User Story

Send text messages to wife everyday (I chose to send only 1 message).
Make sure the message are appropriately worded with words like “love”, “miss you”, etc.

Design

I wanted to automate this process so that I can keep doing what I do and my wife still receives messages. This way I will also learn about AWS since everyone is talking about it.

Use Amazon web services
Build a script which picks a nice message and sends the message everyday.
- I choose to send it at 4PM CDT (random time)

Technical work

Use these Amazon web services:

CloudWatch¹
Lambda²
SNS³

CloudWatch

Setup cloud watch to run my lambda function at a particular time of the day. Its like a cron job.

Create a rule with a name of your choice.
Specify the time interval to run.
- used Cron expression 0 21 * * ? * (4PM CDT)
Select your lambda function inside the target.

Lambda

This is the brain of this whole project. When this function is triggered by the CloudWatch, it basically picks up a random message from the array of messages and then posts the message to SNS topic (explained later).

Create a Lambda function with hello world template
Give it some name, description and use NodeJS as the environment.
Use the below code and fill in the required information as mentioned inside the comments

var AWS = require("aws-sdk");
var messages = [ // this where you want to put all the messages, I have like 100 messages here
    "hi",
    "bye"    
];

function getRandomMessage(){
    return messages[ Math.floor(Math.random() * messages.length ];
}

exports.handler = (event, context, callback) => {
    var sns = new AWS.SNS();
    var params = {
        Message: getRandomMessage(),
        Subject: "<Give a subject name (I just used my wife's name)>",
        TopicArn: "<use the topic arn number from SNS>"
    };
    sns.publish(params, context.done);
};

Create a role which gives permission to your lambda function to post on SNS topic⁴.

SNS

We will use SNS to setup a topic and when ever you post on the topic it sends a SMS to all the subscribers.

Create a topic with any name of your choice
- You will get the topic arn which you want to use inside your lambda function code
Inside the topic create subscriptions (You want to do it one here unless you plan to send to to many people :p )
- Set protocol to SMS
- Set the cell number

Conclusion

This helped a lot since my wife gets so excited when she gets these messages everyday. She knows its me who is sending these messages but I always deny it. Now she will find out after reading this post.

References

Simple way to write JSON to file

2016-07-22T00:00:00+00:00

Introduction

NodeJS gives us a nice API to write text to files. You can write whatever data you want to a file using fs.writeFile function.

Simple example for text

Write “hello” to a file.

var fs = require("fs");
var fileContent = "hello";

fs.writeFile("./sample.txt", fileContent, (err) => {
    if (err) {
        console.error(err);
        return;
    };
    console.log("File has been created");
});

// Content of the file -> hello

Simple example to write object

Let try to write an object from javascript into a json file. One thing for sure we know is that we have to JSON.stringify the object to make sure its a string before its written.

var fs = require("fs");
var sampleObject = {
    a: 1,
    b: 2,
    c: {
        x: 11,
        y: 22
    }
};

fs.writeFile("./object.json", JSON.stringify(sampleObject), (err) => {
    if (err) {
        console.error(err);
        return;
    };
    console.log("File has been created");
});

// Content of the file -> {"a":1,"b":2,"c":{"x":11,"y":22}}

Correct way to write beautified JSON file

Problem with the above example is that json file is written correctly but its not readable since everything is minified into one line. We never indented for the JSON to be minified this way.

var fs = require("fs");
var sampleObject = {
    a: 1,
    b: 2,
    c: {
        x: 11,
        y: 22
    }
};

fs.writeFile("./object.json", JSON.stringify(sampleObject, null, 4), (err) => {
    if (err) {
        console.error(err);
        return;
    };
    console.log("File has been created");
});

/*
 Content of the file:
 {
     a: 1,
     b: 2,
     c: {
         x: 11,
         y: 22
     }
 } 
 */

Conclusion

Make sure you make use of the space, 3rd optional parameter for the JSON.stringify method. Possible values can be any number or String.

A String or Number object that’s used to insert white space into the output JSON string for readability purposes. If this is a Number, it indicates the number of space characters to use as white space; this number is capped at 10 if it’s larger than that. Values less than 1 indicate that no space should be used. If this is a String, the string (or the first 10 characters of the string, if it’s longer than that) is used as white space. If this parameter is not provided (or is null), no white space is used. ¹

References

MDN ↩

Side effects of stubbing console in tests

2016-01-25T00:00:00+00:00

We all love stubbing objects in unit test as it makes our life easier when writing tests. You can stub objects created by your source code or objects which our environment specific like node or browser. On ESLint project, we were stubbing console object so that we can see a clean output for the test runs. But later on we figured out that if the test has some errors then it will not be displayed by the testing framework on the cmd because we have stubbed the console object completely.

For better understanding of stubbing please reference excellent article by Elijah Manor - Unit Test like a Secret Agent with Sinon.js.

Lets run through some scenarios of what happens when you do mock console vs when you don’t mock console. We will be using the following libraries¹ for demonstration purposes:

Scenarios

Test pass and console is not mocked

Without mocking anything, if we run a sample test with all test passing.

var assert = require("chai").assert;
var sinon = require("sinon");

describe("validation", function(){
    it("Expect it to be true", function(){
        assert.isTrue(true);
    });

    it("Expect it to be false", function(){
        assert.isFalse(false);
    });
});

The output will be

$ ./node_modules/.bin/mocha test.js

  validation
    √ Expect it to be true
    √ Expect it to be false


  2 passing (6ms)

Everything works as expected and mocha is able to easily display the output for the test.

Test fail and console is not mocked

Without mocking anything, if we run a sample test in which one test has failure.

var assert = require("chai").assert;
var sinon = require("sinon");

describe("validation", function(){
    it("Expect it to be true", function(){
        assert.isTrue(false);
    });

    it("Expect it to be false", function(){
        assert.isFalse(false);
    });
});

The output will be

$ ./node_modules/.bin/mocha test.js

  validation
    1) Expect it to be true
    √ Expect it to be false


  1 passing (8ms)
  1 failing

  1) validation Expect it to be true:
     AssertionError: expected false to be true
      stack trace...

Everything works as expected and mocha is able to easily display the output for the test failure and the stack trace for information about the error.

Test fail and console is mocked

We will mock some common methods on console object and then the test which has some failures.

var assert = require("chai").assert;
var sinon = require("sinon");

describe("validation", function(){
    beforeEach(function(){
        this.cStub1 = sinon.stub(console, "info");
        this.cStub2 = sinon.stub(console, "log");
        this.cStub3 = sinon.stub(console, "error");
        this.cStub4 = sinon.stub(console, "trace");
    });
    afterEach(function(){
        this.cStub1.restore();
        this.cStub2.restore();
        this.cStub3.restore();
        this.cStub4.restore();
    });

    it("Expect it to be true", function(){
        assert.isTrue(false);
    });

    it("Expect it to be false", function(){
        assert.isFalse(false);
    });
});

The output will be

$ ./node_modules/.bin/mocha test.js

  validation

  1 passing (13ms)
  1 failing

  1) validation Expect it to be true:
     AssertionError: expected false to be true
      stack trace...

Everything works as expected and mocha is able to easily display the output for the test failure. But if you see closely the individual test run checks didn’t get printed. Now that is because your test stubbed the console object. Since this is very simple example that is why the damage is minimum but it can lead to more bigger issues.

Worst scenario

when you do all the mocking inside the test (inside it) and not inside beforeEach. Then if a test fails the stub never restores itself.

var assert = require("chai").assert;
var sinon = require("sinon");

describe("validation", function(){
    it("Expect it to be true", function(){
        this.cStub1 = sinon.stub(console, "info");
        this.cStub2 = sinon.stub(console, "log");
        this.cStub3 = sinon.stub(console, "error");
        this.cStub4 = sinon.stub(console, "trace");
        
        assert.isTrue(false);
        
        this.cStub1.restore();
        this.cStub2.restore();
        this.cStub3.restore();
        this.cStub4.restore();
    });

    it("Expect it to be false", function(){
        assert.isFalse(false);
    });
});

The output will be

$ ./node_modules/.bin/mocha test.js

  validation

Here nothing gets displayed because console never got restored to its original state. If you have many tests then this can lead to potential undetected issues. Debugging is a nightmare in this situation.

Solution

Best way to tackle such scenarios is to extract the logging logic into its own module and then stub that module inside your tests.

Create logging.js module² to be consumed.

module.exports = {
    info: function() {
        console.log.apply(console, Array.prototype.slice.call(arguments));
    },

    error: function() {
        console.error.apply(console, Array.prototype.slice.call(arguments));
    }
};

Consume logging module created above inside your app.js module.

var log = require("./logging.js");

module.exports = {
    sayHi: function(name){
        log.info("Hi " + name);
    }
};

So this way when you write unit test for the app module you can actually stub logging module.

var assert = require("chai").assert;
var sinon = require("sinon");
var proxyquire = require("proxyquire");

proxyquire = proxyquire.noCallThru().noPreserveCache();

describe("validation", function(){
    var log = {
        info: sinon.spy(),
        error: sinon.spy()
    };

    it("Expect it to be true", function(){
        var app = proxyquire("../lib/app", {
            "./logging": log
        });
        app.sayHi("test");
        assert.isTrue(log.info.calledOnce);
    });

    it("Expect it to be false", function(){
        assert.isFalse(false);
    });
});

Conclusion

Always avoid stubbing console as there is always a better way to achieve what you are trying to do. Sometimes stubbing like this may lead to issue where you will not know that there are issues since they all are silently getting ignored.

References

For list of libraries used please reference the top section of the article. ↩
Some of the code examples have been taken from ESLint library. ↩

How to report bugs or errors

2015-12-10T00:00:00+00:00

Introduction

How many times have you received a message/email/IM from your tester or colleague saying “I tried running the code/application and it said there is an error ‘contact the administrator’, can you take a look?” ?

90% of the time when I receive a request to investigate an error, I only get this message. These are typically generic message shown to users for a multitude of reasons and provides me little if any idea or clue as to the nature of the error. I must initiate a message back to the reporter of the error to extract more information about the issue which typically leads to a chain of emails back and forth asking standard questions hoping to get an answer from the report that might provide a clue as to where to start the investigation. This back and forth wastes valuable time in identifying the underlying cause. Instead the reports would add a large amount of value to the investigation process by simply including a few key pieces of data like the steps to reproduce the issue, a log file, or stack trace. These simple to acquire pieces of information allow us to get started on the investigation or best case scenario is the cause of the error is discovered by the reported and no email to the engineer is needed. It’s like winning a game before even entering the field.

Key steps

Now with all this said, here is my take on how we can all help each other if we followed these simple steps to exchange messages about errors or bugs.

Always share the error message you get when testing the application. Whatever the error message is, it can be generic or specific message. Either copy past the error message or if it’s not possible just take a snapshot of the screen and share that. This would help the person who is trying to investigate based on the error message. Even if it’s a generic error message then also it doesn’t hurt to share it. There is no cost involved here.

This is super important and it’s the source of truth for the error. This is like the key to the castle for the person who will be investigating the error. A lot of time, an experienced person might know the issue by just looking at the stack trace. Providing the stack trace or a log is the most important piece of information an engineer can have to resolve an issue. It saves us time and frustration when this is presented along with the error message.

What is expected and what happened?

This is where reporter or an error should mention the expected outcome and what really happened. Take the opportunity to express what you feel should happen and maybe some ideas of what might be the cause of the error (non-technical). This helps the person who is going to investigate in many different ways.

When I hit the left button on the image carousel, the images slide to the left. I would expected them to slide to right.

Steps to reproduce

It is also important to understand the workflow to recreate the error. This helps the person who is investigating to recreate the issue on its own by using the steps. If you are not so technical and you are reporting the error then here you can list the steps of what all you did to come to this error. This way even if you don’t provide any information for logs or stack traces this information can help the person who is investigating to reproduce the issue on his end.

Some other useful artifact information

What is the version of the application being used?
Anything about the environment you were running the application, like
- OS
- Desktop or mobile
- Screen size
Providing information about the domain can be of value as well.

Basically anything you think is important for the person who is going to investigate the issue.

Conclusion

If you can provide the above information to the person who is going to investigate this issue, then you are likely to get a quicker response from the engineer and as well you make our jobs less stressful.

Personally, I always follow this practice whenever I report bugs or issue to other people and I expect the same in return and I think everybody wants this kind of response. Once I specially thanked a person who was not at all technical but the person gave me all the above and I was so impressed with the efforts. I specially sent an email to the person and their manager expressing how this extra bit of time and effort it took to provide the extra information was greatly appreciated.

Let’s all stop the bad practice of just saying “Hey there is an error” and expect the other person to magically know what the issue is.

Gyandeep Singh

React - useRef used in conjunction with useEffect

Problem

Adding cnt as a dependency

Solution

Conclusion

Garage door operations using Raspberry Pi

Expectation

Parts needed

Setup

Raspberry Pi

gpio module on raspberry pi

IP address

Computer

Let us get to work

Hardware setup

Find the manual button wire connection into your garage door

Connect wires from your garage opener sockets to relay module

Connect relay to raspberry pi

Connect magnetic switch to raspberry pi

Mechanical switch to the garage door

Software

Using onoff npm package

Open close action

Bonus stuff

Phone

Closing thoughts

References

React - How to use keys to avoid using getDerivedStateFromProps

Background

Problem

Observations

Solution

Observations

Conclusion

AWS AppSync App with React and Apollo

Introduction

Prerequisites

Resources

What are we going to learn

Motivations

Setup

Libraries

Building blocks

Basic app loading

Add AWS AppSync layer to connect to backend

Add cache and state management

Cache/State

Using state in component

Authentication

Conclusion

Notes

Understanding async/await with Array reduce method

Problem

Solution

Fetch all the commits for a PR

Check the commit message from the first commit

Add to collection if PR is not semver patch PR

Problem inside reduce with async function handler

Conclusion

Understanding state changes inside Alexa skill

Introduction

Basic - skill registration

State handlers

newSessionHandler

startGameHandlers

askQuestionHandlers

Conclusion

Use technology to strengthen your relationship

User Story

Design

Technical work

CloudWatch

Lambda

SNS

Conclusion

References

Simple way to write JSON to file

Introduction

Simple example for text

Adding `cnt` as a dependency

Using `onoff` npm package

`newSessionHandler`

`startGameHandlers`

`askQuestionHandlers`