Forem: AndyDziabo

Authentication of Users

AndyDziabo — Tue, 25 Oct 2022 07:34:25 +0000

Introduction

In this blog we are going to be talking about a simple setup to authenticate your users using sessions. Using sessions allows you to persist the user as they interact with the application.

Getting Started

The first step is to set up your routes in the routes.rb file. We'll setup two custom routes, one for the login and one for the logout.

The first route will direct a POST request to the SessionsController and use the create action. Here the find_by method is used to search the database for the user that is attempting to login. If the user is located in the database, that user will then be set as the user that is held in session.

By setting the user in sessions, that user will persist as the current user while they interact with the application. In the following code you can see the create action that was used to achieve this.

In the above code, you can also see the destroy action defined. We get to this action using the second custom route from above. In that route we direct a DELETE request to the SessionsController and use the destroy action.

The destroy action simply deletes the user_id from session and by doing so the user is no longer persisted so functions that require a user_id will no longer function.

Frontend

The final step is setting up the front end to actually make the fetch requests for logging in and logging out. First we'll look at logging in.

The login is handled by setting up a form for the user to enter their username and password. When they submit the for a function is called that makes a fetch request using the login path and sending the username and password. The response is then handled with an if/else statement. If the response is ok, then the login process can be completed. If there was a problem with the login, such as the user doesn't exist or the password was incorrect, then an error is returned and can be used to notify the user of the issue.

The final step is to handle the logout when the user is finished using the app.

When the user clicks on the logout button, a function is called which does a fetch request using the logout route and sending the DELETE request that will remove the user_id from session.

Dealing with multi-level nested API data and creating a seeding file with it

AndyDziabo — Mon, 03 Oct 2022 01:35:23 +0000

Dealing with multi-level nested data from an API call can sometimes be overwhelming. We are going to go through an example from a project that I am currently working on and how it was broken down into smaller, more manageable pieces. The end goal is to create a seeding file to populate a data table.

Evaluating the API Response

The first step we need to do is look at the response that our GET request will receive from the API. We will look at what data we get, and what data we want to extract to use in our app. For this example we are using the ESPN API, and our goal is to get a list of all the current NFL players. We also want to get some information about each player. In the NFL there are 32 teams, each team having 53 active players. That alone adds up to 1,696 players. Then add in the players on each teams practice squad, and players on injured reserve and the number climbs well over 2,000 players. Now consider that we want to collect info on each player such as: their team name, team location, position they play, their playing status, and a couple other things and its easy to see how this can become overwhelming very quickly.

First things first, lets look at the API return and see what we are dealing with. The end point we are going to be using is:

/apis/site/v2/sports/football/nfl/teams/team_id/roster

When using this endpoint, the team_id will be replaced with the specific team that you want the roster info for. Here is the return when you use the team_id of 23.

We see that we have received an object with 6 keys: athletes, coach, season, status, team, and timestamp. So we see the team key with the info of the team and location of the team that the players on this roster play for. But the players are in another key that is split up into 3 array objects, one for offense, one for defense, and one for special teams. Lets look at the array items in the athlete key.

Now we see that each item in the under the athletes key contains an array of players. Lets go further and look in the first items array.

And now inside one of the players.

Lets not forget about the team info for this group of players.

So now we can see all the info we are looking for, but this is for just one team, there are still 31 other teams!

At this point its easy to feel overwhelmed but if we start to break it down into smaller steps it begins to feel much more manageable.

Breaking it Down

There are many ways to approach a task like this. I find the easiest is to start at top level and work down through. As we move down through each level, take note if there is any data on that level that we want to capture. If there is, then capture it and then continue moving down through the levels.

The API endpoint returns all the info for a single team so we will have to repeat the call for each team. This tells us we will need some kind of loop to make a call for each one. Because we know that there are a total of 32 teams, we can simply use the #times method to make a GET request for each team. Looking into the team_id we see that they start at 1 and increment up by one. We can declare a variable and set it to 1, then interpolate that variable into the API endpoint for the team_id, then just increment the variable by one at the end of each loop.

i = 0
32.times do
    res = RestClient.get "https://site.api.espn.com/apis/site/v2/sports/football/nfl/teams/#{i}/roster"
    player_hash = JSON.parse(res)

    end
    i = i + 1
end

We now have a loop that will return an object for each team and store that object in player_hash. We can pull the team name, team location, and even the link to the team logo image from the player_hash. We can now check those data points off the list of what we want to collect and look at the rest of the keys on this level to see if there is anything else to collect.

We are not going to be using any of the data from the timestamp key, the status key, the season key, or the coach key. The only other key of interest is the athletes key. Looking at the athletes key, we can see that it is an array of 3 objects. We can use the#each method to iterate through them and continue down through the levels looking for data to collect.

player_hash["athletes"].each do |group|
    group["items"]

end

This takes us through the athletes array, which contains an items array, and position key: value pair. We are not going to be using the general position information, so we know that there is no data to collect yet and we can continue on. We now iterate through the items array which is an array containing the player objects. These objects contain all the player information that we want to collect and we can check all the data points we are looking for off our list. We now have access to everything we need to use the #create method and populate the players table in our database.

group["items"].each do |p|
    Player.create(
        name: p["fullName"],
        position: p["position"]["name"],
        number: p["jersey"],
        status: p["status"]["name"],
        is_drafted: false,
        team_name: player_hash["team"]["name"],
        team_location: player_hash["team"]["location"],
        team_logo: player_hash["team"]["logo"],
        image: p["headshot"]
    )
end

As a last little touch we can give some feed back while the seeding process is taking place with some puts. Below is the completed seeds.rb file.

If you look at the code you will see the added line:

puts "Seeding #{player_hash["team"]["name"]} players ..."

If you are still unclear with what exactly is happening, this line might help to visualize what is going on. Lets see the seeding in action.

We have now sucessfully seeded our players table with all 2,393 NFL players!

A note for those that were looking closely, if you noticed that the .times was set to 34 instead of 32, good eye. This was done to compensate for the team_id that the API uses. In the id list, it skips numbers 31 and 32 so the team_id go from 1 to 30, then skips to 33 and 34.

How to pass data between sibling components in React

AndyDziabo — Mon, 12 Sep 2022 01:42:49 +0000

To tackle the challenge of passing data between sibling components, we are going to be looking at how data is passed between components in React. We use components to perform various functions that our application needs to be able to run as intended. First, lets start by defining what a component is:

For this example, we will be using function components. We'll start out with 4 components:
a parent component named App

A child of App named Search

Another child of App named Container

And a child of Container named Item
!
Here is how the components are arranged in our tree:

Parent to Child

One way to get components to start talking to each other is using props. A parent component can pass an argument down to a child component as a prop. An example of this can be seen between the Container component and the Item component. Container fetches a list of data and stores it in the variable list. The array of list is then iterated through using the map() method. Each list item is then passed to the Item component using the prop named listItem. Item then takes the data passed through the prop listItem and uses it to display the information it contains. This alone does not solve our challenge because only the child component that the prop is passed to has access to that prop and any other sibling components will not. If we want to use the Search component to perform a search on the list that is held in the Container component, we will have to find a way to get data between the two. Since the sibling components cannot talk to each other, we will need to use the parent component as a go between.

Child to Parent

So a parent can send data to a child using a prop, but how can the child send data to the parent? A prop can also be used to send a function. If we use this feature to send a call back function to the child, we will then be able to use inverse data flow to get information back to the parent. To do this, we will set up new variable that uses State to update it.



const [query, setQuery] = useState(');

We will then send setQuery to the Search component as a prop.



<Search onQuery={setQuery} />

Here is what it looks like added to the App component:

Next we look at the Search component. We accept the prop and deconstruct it.



function Search({ onQuery })

Now instead of simply doing a console log of the search entry, we can pass the search query back to the App component.



onQuery(e.target.value);

Here is what it looks like added to the Search compenent:

With the search query data now in the App component, we can simply pass that data down to the Container component as a prop.

We have successfully passed data from sibling to sibling using the parent as a go between. The query data from the Search component is now available in the Container component and the query data can be used to do a search on the list array.

Adding a button inside a clickable element

AndyDziabo — Sat, 20 Aug 2022 14:37:57 +0000

Introduction

The goal of this task is to add a Delete button to a clickable list item. The trick for me was that the list item itself was a clickable element. When one of the list items is selected, the details of that list item are displayed on another section of the page. The Delete button's job is simply to delete the list item associated with it. The issue is that whenever the Delete button is clicked, it will delete the list item as intended, however because it is a child node of the list item, the list item's click event is also triggered.

The Code

Getting into the code, the first section is a function that builds the list of films.

The list is made using a function that utilizes a for...in statement to iterate through the film list object. It creates a new list item and populates that list item with the appropriate info for that individual film. It also creates a button with a click event that calls another function which carries out the deleting of the list item. The button is then appended as a child of the list item and the list item appended to the unordered list.

Now that we have a complete list of the films, we add an event listener to the film list. The event listener calls a function that will display the details of the selected film.

Building the `Delete` button

The next step is to make the Delete button functionable. The button already returns an event response with the onclick attribute, which is set to call the deleteFilm function.

The deleteFilm function takes the id of the selected film and passes it to a fetch DELETE request. When the fetch DELETE request returns, it calls the getFilms function and repopulates the film list to reflect the change. The issue is that as the code is written now, when the Delete button is clicked the associated film is deleted as desired, but then we get an error.

This error happens because when the Delete button is clicked it functions as desired, but the Delete button is a child of the list item it's associated with. This means that when the Delete button is clicked, not only is it's event handler triggered, the event handler for the list item is also triggered. This calls the function that populates the details of the film. The error happens because it is trying to display the details of the film that has been deleted and the info no longer exists.

Now I'm sure this issue could be handled with some conditional statements that look at each of the events that are triggered and use some attributes to only allow the desired event to fire. Before doing all that, I wanted to see if there was a simpler solution, so I took to Google to see. On the W3 schools website I found the solution I was looking for - the stopPropagation() method. Here is the definition and usage from the W3 schools website:

This method is exactly what we are looking for and simply adding this one line to the code resolves the error we are getting. It allows the delete function to run, but then blocks the event of the parent node (the list item) from being triggered. Here is the delete function with stopPropagation() method added.

We now have a functioning list in which we can select the film that we wish to see the details for, as well as delete films we no longer want on the list.

https://www.w3schools.com/jsref/event_stoppropagation.asp

Forem: AndyDziabo

Authentication of Users

Introduction

Getting Started

Frontend

Dealing with multi-level nested API data and creating a seeding file with it

Evaluating the API Response

Breaking it Down

How to pass data between sibling components in React

Parent to Child

Child to Parent

Adding a button inside a clickable element

Introduction

The Code

Building the Delete button

Building the `Delete` button