Using SweetAlerts2

bc-kelly — Thu, 12 May 2022 17:58:05 +0000

While working on my most recent project, I decided to incorporate a few pop ups for different features. A quick pop up for signing in or adding a new item to a list is a good way to let users know their clicks are working, but the standard alert is not very appealing. Enter SweetAlerts2.

The SweetAlerts2 documentation is very helpful(https://sweetalert2.github.io/) for further details. Here is a quick setup guide. My project is built using React, so these steps are assuming you have the component built where you want to show your alert.

1) install sweetalerts2.
$ npm install sweetalerts2
2) Create a variable using sweetalerts in your function.
const Swal = require('sweetalert2')
3) Call your constant in the function where you want it.

Swal.fire({
          title: 'Added!',
          // text: 'Do you want to continue',
          icon: 'success',
          timer: 1500,
          // confirmButtonText: 'Cool',
          showConfirmButton: false
        }).then(
          function () {},
          // handling the promise rejection
          function (dismiss) {
            if (dismiss === 'timer') {
            }
          }
        )

I did not want any text added to my alert so I commented that out.
I also did not want any click button for users to close out the alert, I wanted it to disappear after a few seconds. To do this, I added in the timer line, shown in milliseconds. And showConfirmationButton needs to be set to: false. I also have the confirmationButtonText commented out since I am not using it.

In addition to the added alert, I also included a "success" alert when the user logged in. The steps are the same as listed above but with some minor adjustments.

1) set your constant:

const Swal = require('sweetalert2')

2) set the Toast constant for the popup:

const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })

3) Include it in your function:

Toast.fire({
                icon: 'success',
                title: 'Signed in successfully'
              })

There are 5 different alert icons included in the SweetAlert2 docs: success, error, info, warning, and question. As you can see, I used the success icon for both of my alerts.

I hope this article was helpful in getting started with SweetAlerts2. Please feel free to leave your thoughts or questions below.

Conditional Rails Serializers

bc-kelly — Thu, 14 Apr 2022 18:13:26 +0000

Over the last few weeks while learning Ruby on Rails, one of my most common searches was serializer. The issue I came across most frequently was trying to use serializer on only one action in a model, while not using it on the other.

Here is an example to show the issue I came across and how I solved it. The model I was working on was Episodes, and the two actions I was working on were show and index. I was looking to display all of my episodes along with their attributes with the index action. And I was looking to display only one episode with the show action, but also with the nested Guest information associated with that episode. When I tried to utilize a serializer in the show action, it affected my index action as well.

In order to get around this, I used a flag in my serializer. Using a flag in the serializer with a condition allows you to restrict the serializer from applying to the action where you do not want it to apply. Below is the code in my serializer and my controller.

class EpisodeSerializer < ActiveModel::Serializer
  attributes :id, :date, :number

  has_many :guests, if: :condition

  def condition
    @instance_options[:flag] != "restrict"
  end

end

class EpisodesController < ApplicationController

    def index 
        @episode = Episode.all
        render json: @episode, flag: "restrict", status: :ok
    end


    def show 
        episode = Episode.find(params[:id])
        render json: episode, serializers: EpisodeSerializer, status: :ok
    end
end

Below is the response for the index action, showing only the episode data:

[
    {
        "id": 1,
        "date": "1/11/99",
        "number": 1
    },
    {
        "id": 2,
        "date": "1/12/99",
        "number": 2
    },
......

Below is the response for the show action for one episode with the nested guest data as a result of the episode serializer:

{
    "id": 1,
    "date": "1/11/99",
    "number": 1,
    "guests": [
        {
            "id": 1,
            "name": "Michael J. Fox",
            "occupation": "actor"
        }
    ]
}

This is my first blog post and I am new to Rails so if there are any suggestions, please feel free to leave a comment below!

DEV Community: bc-kelly

Using SweetAlerts2

Conditional Rails Serializers