DEV Community: kirthinandi

Displaying Validation Errors on Frontend (React & Rails)

kirthinandi — Fri, 28 Oct 2022 19:11:57 +0000

Introduction

Do you want to know how to display your validation errors on the frontend of your application? Then, follow along! If you have your backend set up properly, you should have a private method in your application controller that displays an object with the key, errors. It should look something like this:

class ApplicationController < ActionController::API
    rescue_from ActiveRecord::RecordInvalid, with: :invalid

...

private 

def invalid(e)
    render json: { errors: e.record.errors.full_messages }, 
    status: :unprocessable_entity
end

Displaying Errors on Frontend

Now that you have your backend set up, we can move to the frontend to display these errors for the user. In the component where we would like our errors to be shown, we will need set a state for these errors with an initial value as an empty array ([]).

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

export default function OurComponentFunction() {
   const [errors, setErrors] = useState([])
...
}

Then, wherever you are fetching the data for which you want the errors to be displayed, you will need to create an if statement. The if statement will state that if there are errors associated with the data, then you will set the errors state with those specific errors. If there are no errors, then the frontend will carry on as expected and display the data needing to be displayed. In the example below, we fetching from "food" and trying to create a new food post.

function handle Submit(e) {
  e.preventDefault();
  fetch("/food", {
     method: "POST", 
            headers: {
               "Content-Type": "application/json",
                accepts: "application/json",
              },
            body: JSON.stringify({
               name: name, 
               category: category
            }),
        })
            .then((r) => r.json())
            .then((data) => {
                if(data.errors) {
                   setErrors(data.errors)
                } else {
                   addNewFoodToArray(data)
                }
            })
 }

Now, that we have our errors being set in the errors state, we need to render it so that it can be shown on the application browser for the user. We will need to map through all the errors in the errors state so that we can return each error individually in an element tag of your choice. In the example below, we are using the 'p' tag.

return (
...
   {errors.map((error) => {
       return <p>{error}</p>
   }
)

Conclusion

Finally, you have the tools and knowledge to try displaying your own errors on your application browser for the user to see! Go ahead and give it a try!

What are Active Model Serializers?

kirthinandi — Sun, 09 Oct 2022 20:47:42 +0000

Introduction

When creating a Rails API data structure, the process consists of setting up routes and controllers to take care of different requests and return the requested JSON. When returning this JSON, we can customize it to only display what we specifically want it to. There are various ways to show the information we want but the Rails' Active Model Serializer provides a simple way to customize JSON data while also following the "convention over configuration" technique.

Using the Active Model Serializer

In order to use the Active Model Serializer, you, first, need to install the gem in the Gemfile and activate it by running the command, 'bundle install', in your terminal.

# Gemfile
...
gem 'active_model_serializers'

Next, you need to create the ActiveModel::Serializer by running the command, 'rails g serializer ', in the terminal. Below is what the generated serializer would look like for a particular model, Restaurant.

# app/serializers/restaurant_serializer.rb
class RestaurantSerializer < ActiveModel::Serializer
  attributes :id
end

Currently, the serializer is only allowing us to display the id of the specific restaurants in our data. If we want to customize the attributes being shown to the user, we can modify the serializer file by adding 'name, the year it started, cuisine, and a popular dish to the attributes.

class RestaurantSerializer < ActiveModel::Serializer
  attributes :id, :name, :year_started, :cuisine, :popular_dish
end

Restaurants Controller

# app/controllers/restaurants_controller.rb
def show
  restaurant = Restaurant.find(params[:id])
  render json: restaurant
end

Now, if we navigate to the localhost:3000/restaurants browser, we should we see all the restaurants listed including the attributes listed above.

Conclusion

You just learned how to create a serializer to display specific information for the user. With this knowledge, you can try creating a serializer on your own!

Active Record: Seed Data

kirthinandi — Mon, 19 Sep 2022 01:01:32 +0000

What is Seed Data?

Seed data is sample data. When creating or working with an application that requires a database, it is ideal to also create sample data that can be used to test out the application and its function in the future. In Active Record, the process of making the sample data to be inputted in the database is also known as "seeding the database".

Why Should We Use Seed Data?

You may be wondering what the purpose of seed data is when we can already create data in the console. It is encouraged to create a seed data Ruby file so that it is easier to share data and the instructions on how to create this data with other developers. This file can also be useful if there are instances where the development database gets deleted.

How Can We Create Seed Data?

There are a few simple steps in which we can produce seed data. First, we need to create a Ruby file called seeds.rb in the db folder. Next, using Active Record Methods, we can create new data. In the following example, we will be adding new food items to go in a foods table that has already been created. When creating the data, we need to include the table's column names that we want to provide information in. In the example below, the first food item's name we are adding is the Mexican Pizza. To add it to the name column in our food table, we need to add name: "Mexican Pizza" in the create method.

#db/seeds.rb

Food.create(name: "Mexican Pizza", price: "$4.49", calories: "540 cal");
Food.create(name: "Grilled Cheese Burrito", price: "$4.29", calories: "720 cal");
Food.create(name: "Nachos BellGrande", price: "$4.69", calories: "730 cal");

After writing the code necessary to generate the data, we can run bundle exec rake db:seed in the terminal. Since there won't be any output to the terminal after running this command, we can enter the terminal's console by running rake console in the terminal. To have all the new food items that have been added to the table returned, we can type Food.all in the console. To see the first food item, we can type Food.first in the console. To see the second food item, we can type Food.second and so on. To see a specific attribute of a specific item, we can type Food.first.name or Food.second.price.

How To Create More Data?

Oh no! We forgot to add important data! To make/add new data after creating the original data, we can use the Active Record methods similarly to how we did in the example above in the seeds.rb file.

#db/seeds.rb

Food.create(name: "Mexican Pizza", price: "$4.49", calories: "540 cal");
Food.create(name: "Grilled Cheese Burrito", price: "$4.29", calories: "720 cal");
Food.create(name: "Nachos BellGrande", price: "$4.69", calories: "730 cal");

#new data 
Food.create(name: "Chicken Quesadilla", price: "$4.39", calories: "520 cal");
Food.create(name: "MTN DEW Baja Blast", price: "$2.19", calories: "280 cal");

After adding the data to the seeds.rb file, we will need to exit the console using the control + c keys on our keyboard and running the seeds.rb file again using the bundle exec rake db:seed command in the terminal. Then, we can enter the console again to test out our new data by typing rake console in the terminal. After entering the console, we can type Food.all to see all the items listed including the new items we added. If you want to remove the data from all the existing tables and re-run the seed file, you can run the command, bundle exec rake db:seed:replant in the terminal after exiting the console. Use this command with caution because it will delete all the data currently existing.

Conclusion

Now that you understand the importance of using seed data and how to create it, you are ready to go ahead and try producing sample data on your own.

An Introduction to the useEffect Hook

kirthinandi — Sat, 27 Aug 2022 21:10:17 +0000

What are React Hooks?

In React, there are hooks which essentially give function components permission to "hook" into React's features such as state and other methods. There are three general rules when it comes to hooks that should be kept in mind when working with them.

React Hooks Rules:

Hooks can only be called inside React function components
Hooks can only be called at the top level of the function component
Hooks cannot be conditional

Side Effects

A function is considered to have a side effect if it is called and the function causes change outside of the function itself. Examples of common side effects are making requests, fetching data from a database, incorporating a timer, directly updating the DOM, etc.

The useEffect Hook

The useEffect hook available in React allows us to perform some of these side effects mentioned earlier in the function components. To use this hook, it needs to be imported, first.

import React, { useEffect } from "react";

Inside the function component that we want to perform the side effect, we can call the useEffect hook and pass in a callback function which will act like the desired side effect.

function App() {
 //side effect function
  useEffect(
     () => {
       console.log("Hello, I am second");
     }
  );
  console.log("Hi, I am first");
  return (
    <div> 
       <button>Click me</button>
       <input type="text" placeholder="Type here..." />
    </div>
  )
}

When we run the code above, the messages will appear in this order:
1. Hi, I am first
2. Hello, I am second

By passing a console message in the useEffect hook, we are telling the function component to do something after it renders which is console logging the message we want. We can do other things in the hook such as fetching data, creating a timer, or updating the DOM.

useEffect Dependencies

Because the useEffect hook runs on every render meaning it may perform the side effect many times, we need to control this using a dependency. To control the amount of renders, we can incorporate a second parameter, a dependency array, in the useEffect hook.

No Dependency

useEffect(() => {
   //Runs on every render
});

Empty Array

useEffect(() => {
   //Runs only on the first render
}, []);

Props/State Value

useEffect(() => {
   //Runs on the first render 
   //And when dependency value changes 
}, [prop, state]);

Now, that you have the introductory knowledge needed to put the useEffect hook to use, go ahead and try it out! Good luck!

What Are JavaScript Events?

kirthinandi — Fri, 05 Aug 2022 16:47:42 +0000

JavaScript Events

JavaScript events can be defined as something the user does in a website or browser. This can be a multitude of different things such as clicking a button, closing the browser, hovering over an element on the browser, etc.

Event Listeners

JavaScript is capable of detecting or listening for the events taking place in a browser. For example, when a user clicks on a specific button, JavaScript can pay attention to the user's click and do something after the click like displaying text or an image.

To tell JavaScript to listen for an event, we can use the method, addEventListener(), on an element.

eventTarget.addEventListener('click', function() {
   console.log('You clicked me!');
});

In the example above, the addEventListener() is being added onto the element we select. This can be a button we have created like the example below, a variable containing the wanted element, etc.

const button = document.createElement('button');
button.addEventListener('click', function() {
   console.log('You clicked me!');
});

The event listener takes in two arguments with the first being the event we want JavaScript to listen for. In this case, it was the 'click' event but it can be a mouseover, keydown, drag, scroll, or any of the other various DOM events. The second argument is the function which tells JavaScript what to do once the event has been completed. In the example above, the browser's console will print the statement, 'You clicked me!'

Now, that you have learned the basics of JavaScript events and using event listeners, you can try to create your own event and event listener!