DEV Community: Igor Quirino

Introducing the Google Wallet Library

Igor Quirino — Mon, 03 Jul 2023 13:26:13 +0000

I am thrilled to announce the release of my latest open-source project, the Google Wallet Library. This powerful library provides a seamless and efficient way to integrate Google Wallet functionality into your TypeScript and JavaScript applications.

What is Google Wallet?

Google Wallet is a digital wallet platform developed by Google that allows users to make payments, store loyalty cards, and access boarding passes, event tickets, and more, all in one convenient location. With the Google Wallet Library, you can effortlessly incorporate these features into your applications, enhancing the user experience and streamlining payment and pass management.

Key Features and Benefits

Our Google Wallet Library offers several key features and benefits:

1. Easy Integration: The library provides a straightforward and intuitive interface for integrating your applications with the Google Wallet API. It handles the complexity of authentication, request formatting, and response parsing, enabling you to focus on the core functionality of your application.

2. Pass Creation and Management: The library simplifies the process of creating and managing different types of passes, such as gift cards, loyalty cards, and more. It offers convenient methods and data structures to configure pass details, including images, text modules, barcode generation, and location information.

3. Save to Wallet Functionality: Generate save URLs for passes, allowing users to conveniently save them to their Google Wallet. This seamless integration enhances user engagement and provides a frictionless experience for pass management.

4. TypeScript Support: The library is built with TypeScript, providing comprehensive typings and improving code maintainability and developer productivity. TypeScript users will benefit from enhanced code completion, type checking, and editor support.

5. ESM and CJS Support: The library has been exported in CJS and ESM.

Getting Started
To start using the Google Wallet Library, follow these simple steps:

Install the library via npm:

npm install google-wallet

Configure your Google application credentials. Obtain a valid Google Cloud project and set the GOOGLE_APPLICATION_CREDENTIALS environment variable to the path of your JSON credentials file.

Import the library and its modules into your application:

import {
    LoyaltyClient,
    LoyaltyClass,
    LoyaltyObject
} from "google-wallet/lib/esm/loyalty"; // or lib/cjs/..

Begin integrating Google Wallet features into your application, such as creating loyalty cards, managing gift cards, or generating save URLs.
For detailed usage examples and documentation, please refer to the official GitHub repository.

Contributing and Support

We value your contributions and feedback to make the Google Wallet Library even better. If you encounter any issues, have suggestions for improvements, or would like to contribute code, please visit our GitHub repository and open an issue or submit a pull request. Your contributions are greatly appreciated!

For additional support and inquiries, feel free to reach me out.

Conclusion

The Google Wallet Library empowers developers to seamlessly integrate Google Wallet functionality into their applications, offering a streamlined and user-friendly experience for payment, pass management, and more. We invite you to explore the library, provide feedback, and contribute to its ongoing development. Let's simplify Google Wallet integration together!

GitKraken - Awesome tool to manage git repositories

Igor Quirino — Mon, 20 Jul 2020 17:54:37 +0000

GitKraken, a powerfull tool to manage your Github repositories.

I'm really surprised with the powerfull of this tools.

Repository Tree - Beautiful screen.

It has ability to connect with many specific git providers, including private repositories.

Click here to download and start using this awesome tool!

“This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.”

React Hook - Clean Up useEffect

Igor Quirino — Wed, 18 Dec 2019 16:58:56 +0000

From: https://wareboss.com/react-hook-clean-up-useeffect/

Last article we learn about Asynchronous actions on useEffect and our correct usage (React Hook - Async funcion in useEffect).

Today we will see how to use the clean up function of useEffect React Hook.

When you update a state from an unmounted component, React will throw this error:

"Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method."

useEffect(() => {
    //Do all the job, for example, subscribe a websocket channel
    return function(){
        //Unsubscribe websocket channel
    };
}, []);

Prevent update on unmounted component:

Here you'll learn how to prevent this problem

  useEffect(() =&gt; {
    let isCancelled = false;
    const runAsync = async () =&gt; {
      try {
        if (!isCancelled) {
          // do the job
        }
      } catch (e) {
        if (!isCancelled) {
          throw e;
        }
      }
    };

    runAsync();

    return () =&gt; {
      isCancelled = true;
    };
  }, [...]);

Usage with setInterval/setTimeout:

This is a nice solution to abort setInterval/setTimeout:

useEffect(() =&gt; {
  const interval = setInterval(() =&gt; {
    console.log('Five Seconds!');
  }, 5000);
  return () =&gt; clearInterval(interval);
}, []);

Imagine this use case: you opened this component and then closed.
Withou clean up you will continues running the setInterval callback.

Usage with Firestore Realtime Database:

This is useful when using Firestore Realtime Database:

useEffect(() =&gt; {
    //Subscribe: firebase channel
    const cleanUp = firebase.firestore().collection('photos') .doc(id)
        .onSnapshot( doc =&gt; {
            setLoading(false);
            setPhotos(doc)
        }, err =&gt; { setError(err); }
    );
    return () =&gt; cleanUp(); //Unsubscribe
 }, []);

If you forgot to clean your firestore subscription, you may receive unnecessary requests.

Usage with fetch + AbortController:

Cancel fecth with AbortController from fetch/es6:

  useEffect(() =&gt; {
    const abortController = new AbortController();
    const fetchData = async () =&gt; {
      try {
        const ret = await fetch("/companies", { signal: abortController.signal });
        const data = await ret.json();
        // ...
      }
      catch(error) {
        if (abortController.signal.aborted) {
          // cancelled
        }
        else
          throw error;
      };
    };

    fetchData();

    return () =&gt; abortController.abort();
  }, [companies]);

Usage with axios request:

Here is how to cancel the request with axios.

useEffect(() => {
  const source = axios.CancelToken.source();

  const fetchData = async () => {
    try {
      const response = await Axios.get("/companies", {
        cancelToken: source.token
      });
      // ...
    } catch (error) {
      if (Axios.isCancel(error)) {
        //cancelled
      } else {
        throw error;
      }
    }
  };

  fetchData()

  return () => {
    source.cancel();
  };
}, [companies]);

The useEffect function is the equivalent of componentDidMount in a React Class component.

The clean up function is the equivalent of componentWillUnmount in a React Class component.

Next article: React Class Component and React Function Component differences.

Bye bye!

React Hook – Async function in useEffect

Igor Quirino — Wed, 18 Dec 2019 14:51:08 +0000

From: https://wareboss.com/react-hook-async-function-in-useeffect/

If you already know the error message:

"React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing"

Here is a little explanation of why this occurs and how to solve them.

This issues occurs when you directly call a Promise from useEffect Hook.

export default function Example() { 
    const [data, setData] = useState(false)

    useEffect(async () => {
      let response = await fetch('api/data') //Direct call
      response = await res.json()
      setData(response)
    }, []);

  return <div>{data}</div>;
}

The useEffect hook expcect to receive a function to cancel or release resources.

To solve this issue you need to call a Syncronous method. Event if this new one are Async.

export default function Example() { 
    const [data, setData] = useState(false)

    useEffect(() => {
      const runAsync = async () => {
        let response = await fetch('api/data')
        response = await res.json()
        setData(response)
      };
      runAsync();
    }, []);

  return <div>{data}</div>;
}

You can cancel this fetch when the component get destroyed, but this is another article (React Hook – Clean Up useEffect).

Bye!