DEV Community: Gianluca La Manna

How to integrate Gravatar with custom fallback on React App and tanstack query

Gianluca La Manna — Wed, 15 May 2024 11:01:32 +0000

Recently at work I integrated the famous service to manage avatar: Gravatar
This service is very useful, because with only one configuration we can have the same avatar in different places.

So, let's go into the deep for integrating Gravatar on React application using tanstack query.

Prerequisites:

React
Tanstack query
Valibot

First of all, we analyze how to get avatar image from Gravatar. Here the official doc:
https://docs.gravatar.com/api/avatars/images/

We have a lot of configurations, but for us are importants 3 things:

Email Hash (MD5 or SHA256)
Default parameter
Json format

Email Hash

With this we can get the avatar image. Just call this url with email hashed

For example:

https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109

So we know that if we call this url we obtain the avatar. Cool.😎

But, if I don't have any account on Gravatar, how can manage this situation?

Let's see the default parameter

Default parameter

Gravatar offer differents parameters for our url. One of this is d=404

d means default and 404 is the famous error. So if we don't have any account on Gravatar the url will response with Not found.
So the url will be something like that:

https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109?d=404

Json format

If we want more information on this Gravatar account we can add the json extension on url. For example in my case I added this:

https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109.json?d=404

This will return an specific json structure with also the avatar url.
More info here: https://docs.gravatar.com/api/profiles/json/

Code

Let's look the code

Create schema validation with Valibot

import { array, object, string, type Output } from "valibot";

export const GravatarSchema = object({
  entry: array(
    object({
      photos: array(
        object({
          value: string(),
        })
      ),
    })
  ),
});

export type GravatarSchema = Output<typeof GravatarSchema>;

Make the api call with Tanstack Query

import { GravatarSchema } from '@/types';
import { gravatarClient } from '@/utils';

export const getAvatar = async (emailHash: string) =>
    gravatarClient.get(`/${emailHash}.json?d=404`, GravatarSchema);

Here we can use the md5 library to generate email hash or sha256 if we want be safe.

const { data, isError } = useQuery({
        queryKey: ['getAvatar', username],
        queryFn: () => getAvatar(md5(username))
    });

Check if we have an error and we show the fallback icon or we show the avatar.

<div className="mr-4">
  <Avatar>
    {!isError ? (
      <AvatarImage
        className="rounded-b-lg"
        src={data?.entry
          .flatMap((item) => item.photos.map((photo) => photo.value))
          .at(0)}
        alt={username}
      />
    ) : (
      <AvatarImage className="bg-gray p-1" src={UserIcon} alt="avatar-fallback" />
    )}
  </Avatar>
</div>

And that's it.

See you next time. ✨

Little mini tip: Github CLI

Gianluca La Manna — Tue, 13 Feb 2024 21:20:05 +0000

Hi guys👋,
I'll be super fast. What I learday?
Usage Github CLI to avoid context switch.

Install 🍺
brew install gh

Show PR list 🍭
gh pr list

Checkout on PR (#n)🥜
gh pr checkout 22

Approve PR 🪄
gh pr review --approve

See ya next time 💫

If use Jetpack compose don't use Shared Preference

Gianluca La Manna — Mon, 06 Mar 2023 21:31:03 +0000

I've recently been working with Jetpack Compose in a mobile project. If you don't know what it is, I suggest you watch this.

In all the apps I've developed, it is always required to save some information in the local memory, such as the user's preferences or username.

The Shared Preference seems to be the most correct choice in this case.
But if we use a Jetpack compose, we must not use them.

Use a DataStore ✨

In order to use DataStore correctly always keep in mind the following rules:

Never create more than one instance of DataStore for a given file in the same process.
The generic type of the DataStore must be immutable.
Never mix usages of SingleProcessDataStore and MultiProcessDataStore for the same file.

More detail here

Differences between Shared Preference and DataStore

Following the main differences

If you interessed at Proto DataStore read this

Implementation 🧑🏻‍💻

First of all, add the following to your Gradle file



    implementation "androidx.datastore:datastore-preferences:1.0.0"

Let’s create an instance of a data store for storing and fetching data



class StoreData(private val context: Context) {

    companion object {
        private val Context.dataStore: DataStore<Preferences> by preferencesDataStore("storeData")
        val USERNAME = stringPreferencesKey("store_Data")

    }
...
}

Create the methods fo read and write data into DataStore




val getData: Flow<String?> = context.dataStore.data
   .map { preferences ->
         preferences[USERNAME] ?: ""
     }

suspend fun saveData(name: String) {
    context.dataStore.edit { preferences ->
        preferences[USERNAME] = name
    }
}

Remember: DataStore use Async API, so if you want call saveData use a kotlin's coroutine.



val scope = rememberCoroutineScope()

scope.launch {
    dataStore.saveData(username.value)
}

Use this function if you want check if the key is in store



   fun isKeyStored(key: Preferences.Key<String>): Flow<Boolean>  =
        context.dataStore.data.map {
                preference -> preference.contains(key)
        }

Sounds cool. But if you want save an object? A list for example? We need serialize the object.

I used the Gson library.

Add to your Gradle file



    implementation 'com.google.code.gson:gson:2.8.7'

then create the instance of Gson and the methods for read and write



 private val gson: Gson = Gson()

 suspend fun saveData(name: List<DataObject>) {
        context.dataStore.edit { preferences ->
            val jsonString = gson.toJson(name)
            preferences[OBJECT] = jsonString
        }
    }

    val getData: Flow<List<DataObject>> = context.dataStore.data
        .map { preferences ->
            val jsonString = preferences[OBJECT] ?: ""
            gson.fromJson(jsonString, Array<DataObject>::class.java).toList()
        }

So if you want check if data is in store and get object, use this



if(dataStore.isKeyStored(stringPreferencesKey("store_Data")).collectAsState(initial = false).value) {
        dataStore.getData.collectAsState(initial = listOf(DataObject(x, y))).value.let {
            myViewModel.setDataMethod(it)
        }
    }

and that's all.

See ya 👋🏻
Thank you for reading ✨

Cypress - Automation test with React

Gianluca La Manna — Tue, 26 Jul 2022 09:25:00 +0000

Lately at work I was tired of writing code that would end up on a spaghetti code style code base. My code probably would have made a negative contribution to that code base as well.
The basic problem was the company culture. So in the last period I decided to change jobs. Being a frontend developer for a company where 'value' is at the center of everything.

And so I wrote one of my first tests in Cypress.
Tests give us reliability and safety, bringing a lot of value. Unfortunately, this is not always immediately perceived by customers or by the companies where one works. They are often seen as a waste of time. But they are a long-term investment.

With Cypress we can write e2e tests that allow us to verify functional properties and non-functional properties, such as performance or reliability. We can study the flows of our application and verify that everything works as we intended.

Below I will show an example of a test made with Cypress on a React project with NextJS.
We install Cypress on our code base. I will be using yarn.

yarn add cypress -D

Add Cypress to the package.json scripts field:

"cypress": "cypress open"

So we can run in our CLI

yarn cypress

We choose E2E testing
You can look through the generated examples and the writing your first test.

If we use typescript, under the cypress folder of our project we add a tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Now let's write a test that simulates adding an item to the cart and checking out the product.

/// <reference types="Cypress" />
export {};

context('Step checkout', () => {
  const mockObjectForm = {
    email: 'test@test.com',
    name: 'Pippo',
    surname: 'Pluto',
    address: 'Via Test',
    city: 'Palermo',
    province: 'PA',
    zip: '90100',
    phone: '123456789',
  };

  it('should fill the checkout form and complete the order', () => {
    cy.stepSelectProduct();
    cy.fillFormCheckout(mockObjectForm);

    cy.get('[type="radio"]').check('wire_transfers');
    cy.contains("Conferma l'ordine").click();

    cy.get('.checkout__success__title')
      .should('be.visible')
      .scrollIntoView({ duration: 500 })
      .contains('Il tuo ordine è stato ricevuto');
  });
});

cy.stepSelectProduct() and cy.fillFormCheckout(mockObjectForm) are commands defined on the file cypress/support/commands.ts
We can see them as separate functions to be called as needed.

The first is to simulate product selection and addition to the cart. The second is to fill in the shipping address form.

/// <reference types="cypress" />

declare global {
  namespace Cypress {
    interface Chainable {
      fillFormCheckout(value: PersonalInfo): Chainable<Element>;
      stepSelectProduct(): Chainable<Element>;
    }
  }
}

export type PersonalInfo = {
  email: string;
  name: string;
  surname: string;
  address: string;
  city: string;
  province: string;
  zip: string;
  phone: string;
};

Cypress.Commands.add('fillFormCheckout', (personal: PersonalInfo) => {
  cy.get('input[name="customerEmail"]').should('be.visible').type(personal.email);

  cy.get('input[name="policyConsent"]').should('be.visible').check();

  cy.get('input[name="shippingAddress.firstName"]').should('be.visible').type(personal.name);
  cy.get('input[name="shippingAddress.lastName"]').should('be.visible').type(personal.surname);
  cy.get('input[name="shippingAddress.line1"]').should('be.visible').type(personal.address);
  cy.get('input[name="shippingAddress.city"]').should('be.visible').type(personal.city);
  cy.get('input[name="shippingAddress.stateCode"]').should('be.visible').type(personal.province);
  cy.get('input[name="shippingAddress.zipCode"]').should('be.visible').type(personal.zip);
  cy.get('input[name="shippingAddress.phone"]').should('be.visible').type(personal.phone);
  cy.contains('Invia').click();
});

Cypress.Commands.add('stepSelectProduct', () => {
  cy.visit('http://localhost:3000/');

  cy.contains('Aggiungi al carrello').scrollIntoView({ duration: 500 }).click();

  cy.contains('Carrello').click();

  cy.get('a[href*="checkout.html"]').scrollIntoView({ duration: 500 }).click();
});

cy.visit places us on the starting page.
The relative get and contains are used to refer to the elements of the DOM through classes and placeholders and simulate the various events on the page through click() and check().
To refer to elements it is recommended to use placeholders because they fully reflect the flow that the user will perform when filling out a form or clicking on a button.
Using classes makes our tests more fragile. We should write tests that are closer to the user than the developer.

As an alternative to the 'get' it is possible to use the testing-library methods by installing the appropriate library:

testing-library/cypress
In this way we can use for example the cy.findByPlaceholderText('value') rather than cy.get('input [name = "value"]')

The test will start automatically when the file is saved. If our tests are not long, we will use them more often to test the new features introduced with each new feature or refactoring activity. It is correct to create tests that are not too long and we do not necessarily have to reach 100% coverage.

See ya 👋🏻
Thank you for reading ✨