DEV Community: samanthamarberger

Enhancing Event Management with FullCalendar in React Rails

samanthamarberger — Thu, 16 Nov 2023 03:36:53 +0000

Struggling with event management in your React Rails app? Discover how FullCalendar can simplify the process!

Event management can be such a hassle when creating applications that require scheduling. It is important for the users of your application to have visual representation of current appointments and future bookings. A user-friendly calendar component allows for easy user scheduling or editing for anything that involves a date and time.

FullCalendar is a JavaScript library that can be used in your Rails/ React applications. It is a powerful and customizable solution for handling event management within our applications.

Basics of a React Rails Application

React Rails applications are simple and powerful to use. Allowing you to have front and back-end functionality in the same place saves time and space. The simplicity through associations in Rails and the ease of React and components allow for an efficient development experience.

React components are great for the separation of concerns, and you can pass variables and functions through the use of state and props between components. This keeps your code clean, organized, and easy to debug.

React Rails Application

I am going to assume that you already have your React Rails application up and running with your models built and ready to go. Using a recent project of mine, I have an application where a trainer can post their availability and the clients can then book on those postings. I am going to show the Trainer side of posting/ editing/ deleting availabilities. My simplified models and migrations look like this:

The Availability Model:

class Availability < ApplicationRecord
    belongs_to :trainer
end

Migration:

class CreateAvailabilities < ActiveRecord::Migration[6.1]
  def change
    create_table :availabilities do |t|
      t.integer :trainer_id
      t.datetime :start
      t.datetime :end

      t.timestamps
    end
  end
end

The Trainer Model:

class Trainer < ApplicationRecord
    has_many :availabilities
end

Migration:

class CreateTrainers < ActiveRecord::Migration[6.1]
  def change
    create_table :trainers do |t|
      t.string :name

      t.timestamps
    end
  end
end

Now that we have these associations in place, we know that the relationship between Trainer and Availabilities is a one to many allowing for easy access within our application.

Installing and Configuring FullCalendar

To install FullCalendar, type into your terminal

npm install --save @fullcalendar/react

We will also need 3 FullCalendar Plug-ins to make our Calendar more interactive. Type into the terminal

npm install --save @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

With everything installed, we need to import the plug-ins to our react parent components. Let's create a component called Calendar. It should look like this

import React from "react";
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';


function Calendar() {

}

With our plug-ins imported and our component initialized, we can now add functionality.
Let's start with rendering our Calendar on the page and allow the user to select between day, week, and month views, as well as the previous, next, and today buttons.

function Calendar() {
    return (
        <div className="calendar">
            <FullCalendar 
            initialView='dayGridMonth'
            headerToolbar={{
                left: "prev,next,today",
                center: "title",
                right: "dayGridMonth,timeGridWeek,timeGridDay"
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            />
        </div>
    )
}

I have set the initial view to dayGridMonth so that when the Calendar is initially rendered, you are looking at a month calendar view; however, the default can be set to day or week.

If you look at your calendar you should see something like this:

Now that we have a simple and clean calendar that the user can toggle through, let's add some functionality!

So that I can see the events I want to schedule, I have to add an events variable that will take in events as props.

events={events}

That simple bit of code will allow me to view the events passed in. Next let's add a callback prop that will allow me to click on the calendar and perform the callback function passed in.

selectable={true}
eventClick={eventClick}

You want to set selectable to true if you have any interaction with the calendar, whether that be to schedule, edit, or even to get a pop-up view. We are not able to click an event, but what if we want to pass in a callback that will allow us to select a date?

dateClick={dateClick}

Easy enough! Let's see what this looks like all together, don't forget to pass in the callback function props for Calendar to put to use.

function Calendar({ events, eventClick, dateClick }) {

    return (
        <div className="calendar">
            <FullCalendar 
            initialView='dayGridMonth'
            headerToolbar={{
                left: "prev,next,today",
                center: "title",
                right: "dayGridMonth,timeGridWeek,timeGridDay"
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            events={events}
            selectable={true}
            eventClick={eventClick}
            dateClick={dateClick}
            />
        </div>
    )
}

Great! We now have a calendar that the user can interact with. Let's put it to use.

We want an Availabilities component where a trainer can interact with the calendar. First step, we make sure to import our Calendar into the Availabilities component. From here we can set our events that we will pass to the calendar.

const availabilities = user.availabilities.map(a => ({
        title: `Availability`,
        start: a.start,
        end: a.end,
        availability_id: a.id,
    }))

These availabilities will be passed as the events and displayed on the calendar, I am using seed data for this.

We now want to build a callback that we can send to Calendar to schedule appointments. I would create a form that the user can fill in start and end times, and on submission, send it to the back end create action in the availabilities controller. This is what that submission callback, addAvailability, will look like.

    const [selectedDate, setSelectedDate] = useState([])
    const handleDateClick = (info) => {
        setSelectedDate(info.dateStr)
    }
    const [start, setStart] = useState(`${selectedDate}T11:00`)
    const [end, setEnd] = useState(`${selectedDate}T12:00`)

    function handleSubmit(e) {
        e.preventDefault()
        addAvailability({
            start: start,
            end: end
        })
    }

I have the times set to default but using a form, the user can change that. Now that I have events and a callback function I can return a calendar that visualizes the availabilities and allows for user interaction.

import Calendar from "./Calendar";

function Availabilities() {
    const [selectedDate, setSelectedDate] = useState([])
    const handleDateClick = (info) => {
        setSelectedDate(info.dateStr)
        setCreateModalOpen(true)
    }
    const [start, setStart] = useState(`${selectedDate}T11:00`)
    const [end, setEnd] = useState(`${selectedDate}T12:00`)

    function handleSubmit(e) {
        e.preventDefault()
        addAvailability({
            start: start,
            end: end
        })
    }

    const availabilities = user.availabilities.map(a => ({
        title: `Availability`,
        start: a.start,
        end: a.end,
        availability_id: a.id,
    }))


        return (
            <div>
                <Calendar
                    events={availabilities}
                    dateClick={handleDateClick}
                />
            </div>
        )
    }
    else {
        return <h1>Error: Not Authorized</h1>
    }
}

Remember, I have a form that on submission creates and posts the new Availabilities, but with those additions, my Calendar now looks like this!

How great is that! We now have a component that can be used for all different scenarios through the use of callback functions as props.

This is a great tool because it allows you to continue using Rails in the way you already know how, but have a much easier and interactive user interface. There are so many ways you can customize your Calendars, be sure to check out Full Calendar's official docs for more great ways to customize.

In conclusion, incorporating FullCalendar into your Rails/React applications provides a powerful and customizable solution for managing events, appointments, and schedules. The seamless integration of React components with Rails associations offers an efficient development experience, allowing for the creation of user-friendly and interactive calendars.

By following the step-by-step instructions for installing and configuring FullCalendar, we've demonstrated how to create a dynamic and responsive calendar component. Whether you're building a scheduling system, managing appointments, or handling event bookings, FullCalendar's flexibility allows for customization to suit various use cases.

Incorporate these practices into your Rails React projects, and empower your users with an intuitive and engaging event management experience. Feel free to share your thoughts, experiences, and any challenges you encounter in the comments. Happy coding!

Understanding Authorization vs. Authentication in Rails

samanthamarberger — Thu, 05 Oct 2023 19:08:11 +0000

We all know the importance of security in our web applications. We need to protect our data and customers from potential data theft or other types of cybercrime. However, there are different pieces required to make a secure application. Things like proper session management or the use of cookies can be useful, but today I am going to be writing about Authorization and Authentication. When I first learned about these I struggled remembering which was which and how to implement them. So for those struggling with that also, and for myself, this post is for you.

Authentication

Authentication was explained to me this way, and it's a common way of explaining it because it sticks:
Authentication is like going to the club and once your ID is checked, you receive a wristband or a stamp. After that, you can come and go from the club, or order drinks, without getting your ID checked because those working there can see you have the wristband proving that you are old enough.

Authentication is how your application can verify that the user is who they say they are and is already allowed to be there.

Authentication in Rails

Let's go through a simplified login process.

1) The user will fill in a login form on the front end with, for simplicity purposes, just a username.

2) On submit, a POST request will be sent to /login on the Rails backend

post "/login", to: "sessions#create"

3) In a SessionsController we will set a cookie on the user's browser by using the ID of the user in the session hash

class SessionsController < ApplicationController
  def create
    user = User.find_by(username: params[:username])
    session[:user_id] = user.id
    render json: user
  end
end

With these steps in place, our user is logged in and the Rails backend has a way of identifying the user by setting the sessions hash:

session[:user_id] = user.id

We would also need to make sure that the front end is saving the logged-in user's information which can be done using state. However, if there is a page refresh, the backend has the session information, but the state is lost, so we have to reach into the backend and get the user info to set state. Here is how:

1) Make a route that will retrieve the user data.

get "/me", to: "users#show"

2) Write a show controller action in the UsersController that will find the user using the session hash. (Remember to add error handling)

class UsersController < ApplicationController
   def show
       user = User.find_by(id: session[:user_id])
       if user
           render json: user, status: :ok
       else
           render json: { error: "Not Authorized" }, status: :unauthorized
       end
   end
end

3) On application load, set the user to the user information that has been fetched. (Remember to add error handling)

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
       fetch('/me')
           .then(r => r.json())
           .then((userData) => {
               if (!userData.error) {
                   setUser(userData)
                   fetchTrails()
                   setLoggedIn(true)
               }
               else {
                   console.log(userData.error)
               }
           })
   },[])

Our user now has their virtual wristband on and doesn't need to "re-ID" until they completely log out.

Speaking of Logging Out

Logging out is simple, all that you need to do is...

1) Add a delete route.

delete "/logout", to: "sessions#destroy"

2) Add a destroy controller to the sessions controller.

def destroy
  session.delete :user_id
  head :no_content
end

3) And lastly perform the front-end functionality by setting the setUser back to null and any other log-out functionality you might have.

This will then terminate the "wristband" that the user has and they will have to re-authenticate to get back into the application club.

Authorization

To continue on the previous analogy, let's say this bar is 18+. You need to be 21 to drink, so at the entrance, you get two wristbands if you are above 21, one to be admitted in and the other for drinks. Meanwhile, 18-20-year-olds only get one wristband for admittance.

Authorization is allowing certain users permission to access specific routes. This could be useful for applications with premium subscriptions, or applications used by managers and employees. Different types of users need different types of access.

Authorization in Rails

To authorize, or not authorize, a user, you want to create a method that your controllers can refer to that says, "do not authorize unless there is a session id".

class ApplicationController < ActionController::API
  before_action :authorize

  def authorize
    return render json: {error: "Not authorized"}, status: :unauthorized unless session.include? :user_id
  end

end

I like to put my authorization method in the ApplicationController so that all other controllers that inherit from it have access.

You might be wondering what before_action is. It is a call to ActionController's class method before_action. It is a filter method that runs before any actions in that controller.

before_action :authorize

Now if I wanted a teaser for my application where anyone can look at it, but can't partake in any of the cool features, I could include something called skip_before_action on the index action. This allows those not logged in or those who don't have an account to see the index data but not have the ability to do anything with it.

class Controller < ApplicationController
  skip_before_action :authorize, only: [:index]

end

Back to our analogy, the before_action and skip_before_action are easy ways to allow those over the age of 21 to order drinks and those under the age to just be there and not order a drink without any need to explicitly check ID again.

Key differences between Authorization and Authentication

After examining Authorization and Authentication, we can conclude some of their differences.

Authentication is to ensure you are who you say you are and can use the application freely in one session without having to show your credentials
Authorization is ensuring you, and other users, are authorized to have access to what you are supposed to, or not supposed to.
Authentication uses sessions
Authorize uses before_action and skip_before_action

To conclude

Grasping the fundamental concepts of Authentication and Authorization in Rails is crucial for building secure and functional web applications. The purpose of Authorization is to define what users are allowed to do within the application and ensure users have appropriate permissions for specific actions and resources. Meanwhile, Authentication is for verifying the identity of users and ensuring they are who they claim to be.

Utilizing both Authentication and Authorization in your web applications will allow you to protect your application from unauthorized access and guard sensitive user data from cybercrime. Wherever you are in your software journey, understanding the distinction between Authorization and Authentication, as well as their implementation is extremely important to building secure software.

Happy coding!

Mastering ActiveRecord Associations in Ruby: A Comprehensive Guide

samanthamarberger — Tue, 23 May 2023 21:10:36 +0000

What are database associations?

Database associations are necessary for Ruby applications to manage the relationships between database tables. The associations establish relationships between related tables allowing you to properly link the crossover data within tables. Database associations also allow you to easily retrieve data that is related. With well-defined associations, information from one table can be easily obtained through another table. Along with this, the established relationships make handling CRUD operations and different tasks much more efficient. Lastly, complex relationships also become much easier to handle through database associations, by utilizing many of the different relationships managing your data becomes much more efficient. So with all that said, let's get into using ActiveRecord associations to show how easy managing database relationships can be.

ActiveRecord is a Ruby gem that was created to simplify the binding process between tables within a database. It allows us to use keywords to create relationships rather than building out our own object-relational mapper and manually writing complex SQL. You see, ActiveRecord generated your SQL code behind the scenes allowing you to focus on your application rather than writing out code for your database associations.

Understanding ActiveRecord Associations

Let's create a scenario. We want to create a web application to help us work out. To do this, we need to create a data table with all of the major muscle groups and a separate data table of exercises; each table has many different attributes.

Let's do this by creating each class using ActiveRecord:

class MuscleGroup < ActiveRecord::Base

end

class Exercise < ActiveRecord::Base

end

Once these are created, you are going to create a migration for each table by running:
bundle exec rake db:create_migration NAME=create_muscle_groups
and
bundle exec rake db:create_migration NAME=create_exercises

This migration will create a .rb file with a timestamp at the beginning where you can create your table with all of its attributes. The timestamp is an important aspect of ActiveRecord because it ensures that the migrations are running in the intended order.

In your migration file you can create your tables like so:

class CreateMuscleGroups < ActiveRecord::Migration[6.1]
  def change
    create_table :muscle_groups do |t|
      t.string :name
      t.string :image_url
    end
  end
end

class CreateExercises < ActiveRecord::Migration[6.1]
  def change
    create_table :exercises do |t|
      t.string :name
      t.string :image_url
      t.string :how_to_do
      t.integer :muscle_group_id
    end
  end
end

In order to migrate the table, run bundle exec rake db:migrate after you add a new table or make changes to your table.

You will notice the attribute muscle_group_id. This is our foreign key. Let's define foreign key and primary key.

Primary key

A primary key is a unique identifier for each row in a database table. This provides the uniqueness of the key so that each case can be distinguished. Examples of this would be things like id.

Foreign key

A foreign key is an identifier that refers to the primary key in another table. This establishes the relationship between the two tables. An example of this is the muscle_group_id.

Because of this foreign key, we now have a row in the exercise table that indicates, through the muscle group id, which muscle group the exercise belongs_to.

In order to best make use of these tables, we need to form a relationship. Using ActiveRecord we can very easily do so through one of the types of associations this is the has_many and belongs_to association. Each major muscle group has_many exercises and each exercise belongs_to a muscle group.
To form this relationship, we would need to use these keywords in the class components for those tables. For example:

class MuscleGroup < ActiveRecord::Base
    has_many :exercises
end

class Exercise < ActiveRecord::Base
    belongs_to :muscle_group
end

This indicates to ruby the relationship between muscle groups and exercises. As you can see, the has_many keyword is followed by the pluralized class. That is because there are many exercises whereas, the belongs_to keyword is followed by a singular class because there is only one muscle group for many of the exercises.

Seeding data and testing my code

All of these relationships are great; however, what if we want to test them? We need some data. You can create mock data in db/seeds.rb. Let's go back to our one-to-many relationship and create a muscle group and a couple of exercises within the seeds.rb file.

MuscleGroup.create(name: "Legs", image_url: "https://tse3.mm.bing.net/th?id=OIP.CCaTj7B5HI0e7pIotjn4PAHaE7&pid=Api&P=0&h=180")

Exercise.create(name: "Back Squat", image_url: "https://julielohre.com/wp-content/uploads/2017/11/Barbell-Back-Squat.jpg", 
how_to_do: "Hold the barbell on your shoulders.  Keeping your back straight, squat down until the angel of your legs reaches 90 degrees or greater. Press up until you reach starting position.", muscle_group_id: MuscleGroup.find_by(name: "Legs").id)
Exercise.create(name: "Calf Raise", image_url: "https://i0.wp.com/bootcampmilitaryfitnessinstitute.com/wp-content/uploads/2018/02/Exercise-Calf-Raises-1.jpg?ssl=1", 
how_to_do: "Start with your feet flat on the ground.  Raise up on your toes as far as you can, squeezing the muscles in your calves.  Return to starting position.", 
muscle_group_id: MuscleGroup.find_by(name: "Legs").id)

Now to test my data, I want to run bundle exec rake db:seed. This will seed all of my mock data and I can play around with my code and make sure it works!

To get to the console let's run bundle exec rake console
We can now interact with the console and test our code using... ActiveRecord methods!

ActiveRecord methods

There is a long list of ActiveRecord methods that allow us to interact with the database, here are a few and what they do:

Creating Records:

.create: Creates a new record and saves it to the database.
.new: Creates a new record but does not save it to the database.
.save: Saves changes to an existing record or creates a new record and saves it.

Retrieving Records:

.find: Finds a record by its primary key (usually id).
.find_by: Finds the first record that matches the specified conditions.
.where: Retrieves records that match the specified conditions.
.first: Retrieves the first record from the database.
.last: Retrieves the last record from the database.
.all: Retrieves all records from the database.

Updating Records:

.update: Updates attributes of a record and saves it to the database.
.save: Saves changes to an existing record.

Deleting Records:

.destroy: Deletes a record from the database.

Examples:

Exercise.create(name: "Pull-up", image_url: "https://tse4.mm.bing.net/th?id=OIP.3fI1p5ikgmNfCWjyMGPpAwHaHa&pid=Api&P=0&h=180", 
how_to_do: "Start hanging from the bar with your arms shoulder width apart.  Pull your body upward until your chin is over the bar.  Lower yourself back down to the starting position.", 
muscle_group_id: MuscleGroup.find_by(name: "Back").id)

Exercises.find(1)
=> #<MuscleGroup:0x0000000109837728
 =>#id: 3,
 =>#name: "Legs",
 =>#image_url: "https://tse3.mm.bing.net/th?=>#id=OIP.CCaTj7B5HI0e7pIotjn4PAHaE7&pid=Api&P=0&h=180"

These are just a few but give you a lot of power to interact with your database.

But what if I wanted to get really specific about the muscle groups?

Many exercises actually hit different muscle groups. What then? Well, we can create a Many to Many relationship .
This is when the has_many :through keyword comes in. Let's make a new database table called SecondaryMuscle, this will be our JOIN table.

class SecondaryMuscle < ActiveRecord::Base

end

and run
bundle exec rake db:create_migration NAME=create_secondary_muscles
We now have created a migration and can create the table:

class CreateSecondaryMuscles < ActiveRecord::Migration[6.1]
  def change
    create_table :secondary_groups do |t|
      t.string :name
      t.string :image_url
    end
  end
end

We now will add/ change our associations using the secondary muscles JOIN table.

The SecondaryMuscles table JOINs the two together in a many-to-many association:

class SecondaryMuscle < ActiveRecord::Base
  belongs_to :muscle_group
  belongs_to :exercise
end

The MuscleGroups associations now become:

class MuscleGroup < ActiveRecord::Base
  has_many :secondary_muscles
  has_many :exercises, through: :secondary_muscles
end

The Exercises associations have become:

class Exercise < ActiveRecord::Base
  has_many :secondary_muscles
  has_many :muscle_groups, through: :secondary_muscles
end

Now, through a small amount of code, you have formed relationships that give you easily accessible information from each table.

ActiveRecord Macros

The has_many, belongs_to, and has_many :through are all ActiveRecord macros. There are a few other types that I won't be going into but could be helpful to know. These macros are:

has_one - this defines a one-to-one association between two models. This is done by setting up an association with a foreign key in one table that references the primary key in the other, very similar to one-to-many.

has_and_belongs_to_many - this defines a many-to-many association between two tables without having to create an intermediate model, for example, no need for our SecondaryMuscle model.

has_one :through- this defines a one-to-one association through an intermediate model. Very similar to using the has_many :through.

To conclude, using ActiveRecord will make your life much easier as a ruby developer. It will allow you to spend more time creating your web application and less time trying to create relationships using handwritten SQL. If you want to dive even deeper, please take a look at Link to ruby on rails: ActiveRecord

useState Hook: A staple that every React user should know how to use

samanthamarberger — Wed, 08 Feb 2023 05:31:27 +0000

So you want to add dynamic functionality to your web application using React?

Let's talk about the useState hook. The useState hook is a function that can be imported from react. This function allows you to set a component's state, or value, but the value can be changed by some type of action on the users end. This change also causes an automatic re-render of the page, allowing information on the DOM to be updated anytime the state variable is changed!

How do I import the useState hook?

You must import it from React.
Call and initialize your state variable.

Take a look at the code below!

import React, { useState } from "react";

function Counter() {
    const [counter, setCounter] = useState(0);

The first line of code here imports the ability to use state, the line of code within the counter function is initializing the variable. The variable is set as an object, including the variable name, as well as the setter function, in this case "setCounter". That setter function is what is used to update/ change the counter variables value.

In the code above, I created a function component that outputs the counter value, which as of now is 0. When I initialized my counter variable it was set with a const. Even though the value of the variable can change, const is used rather than let because useState is an updating function. The variable does not get reassigned through the "=" operator, but rather updated by using the setter function like so.

setCounter(1);

The counter variable would now return "1".

The "counter" is the container for the value, in this case 0. The second variable, "setCounter" is the updating function. Both are required when using the useState hook.

When to not use state!

The useState hook is a very powerful tool; however, if it is used too often and in the wrong circumstances your code can get buggy quickly and it would be a painful debugging process.

Here are three general things to check for to determine if state would be useful or not. They are found in Thinking in React.

1. Does your state variable get passed as a prop between components?
If it is, it is likely not going to be state. State should only be updated and used within the component it is declared in.
2. Is your state variable truly a constant?
If your state does not change and there is no need for a set function to update your state variable, you do not need a state variable. A simple constant will do!
3. Can your value be computed from any other state or props in the component?
Basically, don't over use state. If you already have an existing state and you want to create another state variable, make sure it is not one that can be derived from your original state.

Examples of using state:

I am going to discuss two different situations in which using the useState hook would be helpful. The first is a basic counter function to help us get a better understanding of useState. The second will be an example from a recent project of mine where we will go over using useState with arrays.

The simple counter function:

Let's create a counter function that allows you to increase your output number by one each time a "plus one" button is pressed. This set up is shown above when I go over how to import useState but I will add a few more things and discuss it once more below.

function Counter() {
    const [counter, setCounter] = useState(0);

    return (
        <div>
            <h1>{counter}</h1>
            <button>+1</button>
        </div>
    );
}

In the setup above, I have a variable being set, using the useState hook, to 0. I am returning the counter value as well as a button that says "+1". This button does not yet have functionality, let's add some!

 function addOne() {
        setCounter(counter + 1);
    }

Here I built a function that when called upon takes the counter variable and updates it to the assigned counter variable plus one. When I call the setter function, in this case "setCounter", the page re-renders and the DOM is automatically updated. I need to call the setCounter() function, this will be done by creating an onClick for my button.

<button onClick={addOne}>+1</button>

Now the setCounter function is called and the value is updated!

Using useState with arrays

Arrays can be updated using the useState hook as well. In a recent project of mine I created a web application that allows me to store all of my favorite paintings and add paintings to my collection. The paintings are stored on a server; however, I want them to be stored in an array. To do this, I must first use the useState hook to define the array.

 const [paintings, setPaintings] = useState([]);

I created a painting variable and a setter function for that variable and I set it to an empty array.

Through a fetch request I was able to pull the information from my server and use my setter function to put it into an array. I don't want to distract from the useState hook functionality, so I am going to simplify and make an array of paintings and use my setter function to update the array.

const paintingsArray = ["Starry Night", "The Scream", "Royal Red and Blue"];

setPaintings(paintingsArray);

Now my paintings array is no longer an empty array, but an array of three values.

Let's say I wanted to add another painting to the array. I simply need to use the spread operator, making a copy of my paintings, and add the new element to that array. I would then call the setPaintings function and give it the new array.

newPaintingsArray = [...paintings, newPainting];
setPaintings(newPaintingsArray);

The use of the setter function caused a re-render leading to an automatic update of the DOM. This allows my web application to update the paintings right away without any refreshing from the user.

Setting state is an asynchronous process.

Because setting state is asynchronous, the function of setting the state will not be immediately executed. React waits until other processes or functions are completed before it changes state. This is an important thing to note; if you try to set state more than once within a function, the output will likely not be your desired output.

For example, say we have a button on our counter function that when clicked adds 1 to the value and then multiplies it by 5. Let's see what would happen if you put those two commands separately in the same function:

 function addOneMultiplyFive() {
        setCounter(counter + 1);
        setCounter(counter * 5);
    }

return (
        <div>
            <h1>{counter}</h1>
            <button>+1</button>
            <button onClick={addOneMultiplyFive}>Add one and multiply by 5</button>
        </div>
    );

// If I click the "Add one and multiply by 5 button"
// => 0

// If I click the "+1" button first and then the "Add one and multiply by 5" button
// => 5

React is not updating state in between the addition of 1 and the multiplying of 5 in the "addOneMultiplyFive" function. Therefore, the counter value being multiplied by 5 is the counter value before the button was clicked.

Well, there you have it! Hopefully you have a better understanding of how and when to use state variables. Good luck with your next React project!

Functions: How to clean up your code

samanthamarberger — Mon, 07 Nov 2022 20:13:51 +0000

My first introduction to functions was a doozy... When I was learning how to code, it was all done within a main function. That made sense to me, the code was written in the exact order that it was performed in. Next thing I know, they're throwing functions at me and telling me it will be helpful. It was not until the second time going over functions when I realized how helpful they really are!

The two different segments of code below have the same outputs; however, the second, through functions, is shorter and much easier to understand.

console.log("Math:" );
let a = 1 + 2;
console.log(`1 + 2 = ${a}`);
a = 2 + 2;
console.log(`2 + 2 = ${a}`);
a = 3 + 2;
console.log(`3 + 2 = ${a}`);
a = 1 * 2;
console.log(`1 * 2 = ${a}`);
a = 2 * 2;
console.log(`2 * 2 = ${a}`);
a = 3 * 2;
console.log(`3 * 2 = ${a}`);
a = 1 - 2;
console.log(`1 - 2 = ${a}`);
a = 2 - 2;
console.log(`2 - 2 = ${a}`);
a = 3 - 2;
console.log(`3 - 2 = ${a}`);
a = 1 / 2;
console.log(`1 / 2 = ${a}`);
a = 2 / 2;
console.log(`2 / 2 = ${a}`);
a = 3 / 2;
console.log(`3 * 2 = ${a}`);

The code above is long and extremely repetitive, functions can provide clarity and minimize redundancy, as seen below.

function add(a, b){
  return `${a} + ${b} = ${a + b}`;
}

function subtract(a, b) {
  return `${a} - ${b} = ${a - b}`;
}

function multiply (a, b) {
  return `${a} * ${b} = ${a * b}`;
}

function divide (a, b) {
  return `${a} / ${b} = ${a / b}`;
}
console.log("Math:");
console.log(add(1,2));
console.log(add(2,2));
console.log(add(3,2));
console.log(multiply(1,2));
console.log(multiply(2,2));
console.log(multiply(3,2));
console.log(subtract(1,2));
console.log(subtract(2,2));
console.log(subtract(3,2));
console.log(divide(1,2));
console.log(divide(2,2));
console.log(divide(3,2));

This code, consisting of four functions, allows my main code to be shortened, and due to proper function naming, easy to read. This code could be shortened even more using loops (which I will discuss in another post).

Let's break this code down

We will start by diving into our add function.

function add(a, b){
  return `${a} + ${b} = ${a + b}`;
}

As seen above, there are a few things that are included in this function.

There is a function keyword. The function keyword tells javascript that you are creating a function. This is important; however, function keywords are not necessary, which I will explain later.
A clear function name is provided to allow others to understand what your function is supposed to do. Others looking at your code should know what the function does just from its name.
Parameters are the variables found within the (). By including parameters, you can pass values to the function, which is what help make functions such a powerful tool.
Curly braces! These are important for the function in the example above; however, I will show examples below where curly braces are not required.
Return keyword. This keyword is also not always required, but for this example, without it, your functions would return 'undefined'. This is because the function has to return something and if you're not giving it anything to return, it will think that you want it to return nothing.

The return keyword is useful if you want to take the output of a function and use it again later. For example:

function add(a, b){
  return a + b;
}
function divide(a, b){
  return a / b;
}

const addedNum = add(2,4);
const dividedNum = divide(addedNum, 2);

By using the return keyword in my add function, I was able to assign the output to a variable and use it in another function.

Let's now talk about calling the function

add(1,2)

To call the function is quite simple, all you need is the function name, and the parameter values you want to pass into the function.

Different ways to define functions

There are three ways to to write a function in javascript.

1. Function declaration

Function declaration is what was being used above.
This way of defining a function is useful because it allows you to invoke the function before it is defined, otherwise known as hoisting.

add(2,4)
function add(a, b){
  return a + b;
}

Even though I am calling the function before I have declared it, the add call will still execute.

2. Function expressions

This is defining a function by using a variable.

const multiply = function (a, b){
  return a * b;
}

This example shows the same multiply function, but it is defined using function expression.

3. Arrow Functions

Arrow function notation is great for making your code concise.

const multiply = (a, b) => a * b;

This may be a little difficult to read at first, at least it was for me, but let me break it down.
The arrow notation can be defined using a variable, similar to function expression. However, it skips over all the additional keywords and allows you to write your function definition in one line. The parameters are entered in after the "=" and the arrow points to what will be returned.
As you can see, no return key word is required when using arrow function notation, otherwise known as implicit return.
Curly braces are not required when only one line of code is necessary; however, if more lines are required, the curly braces are needed to enclose everything after the arrow.

const greetings = (userName, helloGreeting, goodbyeGreeting) => {
  console.log(`${helloGreeting}, ${userName}, it is nice to meet you!`);
  console.log(`${goodbyeGreeting}, ${userName}`);
}

As you can see, I had to use curly braces because my return code was longer than two lines.

Callback Functions

The last concept that I wanted to touch on was one of the hardest things for me to understand. I did a lot of research to try and figure out how callback functions worked, but ultimately it came down to me utilizing callback functions in my code that made me understand.

A callback function is a function that is being called within another function, this could be an anonymous function, or a function that you had previously defined. It is called a callback function because the function is not executed right away, it is called back to be used at a later time. Let me show you some examples!

const greeting = (userName, callbackFunction) => {
  console.log(`Hello, ${userName}, it is nice to meet you!`);
  callbackFunction();
}

Here you can see I did an arrow notation function called greeting (similar to the previous example). This greeting function takes a callback function as a parameter, and executes it when it is later invoked at the end of the greeting function.

function iAmCallback() {
  console.log(`This is the callback Function`);
}

This is the callback function definition. When used as the callback parameter, calling the greeting function will output "This is the callback Function".

greeting("samuel", iAmCallback);

Lastly, this is how I call the greeting function. I pass it the name, and then the function I want to callback to be invoked when the greeting function is executed. When calling a function and passing in a callback function, it is important to remember to not immediately invoke your callback function by adding () after putting the callback function in as a parameter.

Output:
Hello, samuel, it is nice to meet you!
This is the callback Function

Now using a callback function in this manner is useful when the callback function needs to be invoked multiple times. If the callback function is only used once, you can do an anonymous callback.

const myArray = ["item1", "item2", "item3"]; 

myArray.forEach(() => {
  console.log('This is the anonymous callback Function');
})

In this example, I created an array and iterated through it using the forEach method. For each of the items in the array, the anonymous callback function is performed. The anonymous function is written using arrow notation, taking in no parameters but simply returning the output shown below.

Output:
This is the callback anonymous Function
This is the callback anonymous Function
This is the callback anonymous Function

The function was called three times!