DEV Community: Elias Ventura

Capstone Project!

Elias Ventura — Wed, 03 May 2023 12:27:17 +0000

Having studied with FlatIron school for the last year has been a great learning experience. The capstone project was the perfect opportunity to utilize all the skills learned and to incorporate creative ideas. It seemed like anything you could think of about how a website can operate you can just research and incorporate it into your own project. This felt like magic! Alot of this "magic" came from alot of the skills learned about state management, and model associations. These two things were integral in my capstone project.

State management did several things that helped my code. With the useContext hook I was able to provide alot of information about the user and other states that i wanted to alter all the time in my code but that i didnt want to pass down as props to the components. This really made it easy to access information about users, or even helped with keeping my session[:user_id] set to the current user. For example using BrowserRouter to define my routes, when changing routes it would make the UserContext rerender and reset state, but with useContext and localstorage i was able to persist the currentUser information between changing pages.

 const [currentUser, setCurrentUser] =  useState(
    JSON.parse(localStorage.getItem("currentUser")) || {}
  );

  useEffect(() => {
    const storedUser = localStorage.getItem("currentUser");
    if (storedUser) {
      setCurrentUser(JSON.parse(storedUser));
    }
  }, []);

localstorage is a browser tool that allows use to store information to an object in key value pairs.

More importantly through out the app the model associations enable all kinds of imformation to be passed along between pages. This kind of interaction between the models and the views was a little difficult to understand at first, but when you get the hang of it youcan see how useful it is. Specifically in this project a problem i had to solve was how to access deeply nested arrays two levels down. Theres a lot of ways to come at the problem, but at the end of the day you realize the best way comes down to setting up the correct association in you models. Once you can create the correct association many methods get inherited by the models and allow you to start creativvely coding anything you might want to see based on these association. For example if i have an order model and items model I can query the databases and start making webpages with this information, add to it, delete from it, anything i can think of will come down to how the models are associated and how their attributes can be accessed.

class User < ApplicationRecord
    has_secure_password
    has_many :orders
    has_many :order_items, through: :orders
end

Here you can see how a user has many order_items through orders

const userItems = currentUser.order_items

and then here in this code you can see how directly in my component i can access the association with a method i never defined "order_items" but that activeRecord had defined.

Overall my time with Flatiron School has been great and very instructional. With the capstone project i was able to see just how vast an application can be and how important it is to set up the bones correctly, which in my case was the activeRecord associations. Having worked on this has made me so excited because developing an app like this is so vast, and it makes me excited to be able to learn more code!

Fetching and nested routing and user_id!

Elias Ventura — Wed, 05 Apr 2023 16:01:48 +0000

While working on my fourth project for Flatiron School I really was able to see how web applications map the ActiveRecord relationships in the models, with the way you send fetch request to the routes. I was required to make fetch request to get data from the backend server, or delete or patch requests . It seemed pretty straight forward, but i noticed that the id of the main user model was used over and over for different uses. By main user model I mean the model that has_many of another table and whose id is the foreign key of that other table. But also referring to the user table that is used for the signup or login functionality. The id attribute of that table seems to be one of the more important attributes at least in the way my project is setup. I have user class that has a one-to-many relationship with a predictions class.

Firstly the id of user id is used to even initially establish the relation ship. ActiveRecord need the user id to incorporate in the table that belongs_to to the user by being that tables foreign key. Without this foreign key the associated belongs_to table wouldn't even be able to be created, especially because the in the case of my project, that table is used as a join table. Without the user id the other table that is associated to the join table would not be able to access the user through the has_many, through: relationship.

So this code right here the has_many :users, through: predictions line would break and send an error:

class Game < ApplicationRecord
   has_many :predictions
   has_many :users, through: :predictions
end

Firstly the user model is used for signing and logging in. When the login form is submitted, it send a request to the route, then the create method in the sessions controller will handle this request. It will then set the cookie by setting the session[:user_id] equal to the user.id.

def create
        user = User.find_by(username: params[:username])

        if user&.authenticate(params[:password])
        session[:user_id] = user.id
        render json: user, status: :created
        else
            render json: { errors: {login: "Invalid username or password"} }, status: :unauthorized
        end
    end

This in turn is used by the entire app authentication to make sure the user is logged in and that it is the correct user that is trying to execute the action. Specifically because there is a useEffect() in the top level in the App.js file that gets loaded before all the other components. In the useEffect there is a fetch request to identify who is the current user before any of the rest of the frontend is populated.

useEffect(() => {
    fetch("/me").then((response) => {
      if (response.ok) {
        response.json().then((user) => {
          setCurrentUser(user)

        });
      }
    });
  }, [])

The sessions#destroy action also user the user.id to clear the cookie and log the user out.

Secondly, the user id is used for the apps resource because they are also set up to have nested routing. So basically the predictions resources are nested within the users resources. This allows access to the predictions but only through the user that they are related to , which resembles the active record associations where predictions belongs_to user. All the predictions in the Predictions table are still accessible but it doesn't make sense for a user to be able to access or edit another users predictions.
So when the associations and routes are set up this way , and we want the users to see only their data and to only be able to manipulate their data the user id comes into play again.

This code will get all your predictions, but only those that are related to the current user:

fetch(`/users/${current_user.id}/predictions`)
                .then( r => r.json())
                .then(data => {
                    console.log(current_user.id)
                    console.log(data)
                    setPredictions(data)}
                    )

This code will send a delete request to the predictions table, but only to the predictions that are related to the user once again:

 function handleDelete(event, prediction) {
        fetch(`users/${current_user.id}/predictions/${prediction.id}`, {
            method: 'DELETE',
        })
        .then( r => r.json())
        .then( data => deletePrediction(prediction)) 

    }

and so in this way we can protect the individual users information. So we see how the users id attribute is used once again.

Finally the user id, through the cookie is also used in the error rendering and authorization. In the application controller we have some error handling that gets inherited by all the controllers where before any actions run the controller checks to see if the cookie is set to the user id.

So if theres any problem with the user id during the creation of the user, or any changes that affect that relationship, there will be errors caused, no resources loaded and this also helps to prevent other users from tampering with each others logged in information.

Complex Nested State!

Elias Ventura — Tue, 17 Jan 2023 03:41:58 +0000

During this third project for FlatIron School we had to learn a lot about Sinatra and ActiveRecord to create databases. With ActiveRecord one of many things we are able to do is create associations between different tables. Then with that information we are able to, through ORM structure, to create objects in the front end that share that same association of the databases in the backend.

class Dog < ActiveRecord::Base
    has_many :walks 
end

class Walk < ActiveRecord::Base
    belongs_to :dog
end

These associations allow us to make ActiveRecordQueries in the back end to the walks table by way of the Dogs table.

Dog.all.first.walks

But it also allows us to make similar method calls in the frontend because it is aware of the association between models, so i can even call dog.walks in the javascript in the front end and it will get information from the database that relates to those walks and create walk objects based on that which is really cool.

I had to learn a lot about setState and updating state for nested object information and how that is useful. It's really important to keep the association that is created in the backend by the models and to represent that in the way the information is manipulated in the front end. This allows us to only make one fetch request to one of the databases but to be able to access all the information from the other database.

fetch("http://localhost:9292/dogs")
    .then((r) => r.json())
    .then((data) => {
      setDogs(data)
    });

But one interesting thing is that when fetch request are made specifically for the Walks table, whether it be for posting walks or deleting walks or updating walks, since there is no state for the walks table and there is only state for the dogs table we have to setState for the dogs table to be able to rerender the parent component and instantly get the updated state for the associated walk.

function addWalk(walk) {
        const newWalks = [...dog.walks, walk]
        dog.walks = newWalks

        const filteredDogs = dogs.filter( d => {return d.id !== walk.dog_id})
        const newDogs = [...filteredDogs, dog]

        setDogs(newDogs.sort((a, b) => { return a.id - b.id }))
        setClicked(!clicked)
          }

Here i had to call the setDogs to set state of the dogs after adding a new walk, and this is called directly in the POST request made to the walks table. This is important because even though the route may work and the walk may be created state isn't update and so you would have to refresh the page to see the newly created walk. But since the setState is connected to the actual fetch request the information is update instantly and you wouldn't have to refresh the page to update the component. And that is the really neat thing about having the association between the models and using that association to be able to manipulate both databases.

Now this can be applied to any of the CRUD functions that are common in the front end of the application. Where if we have a DELETE request, well we would have to setState there, and if we had a PATCH request, we would also have to update state there as well. This ensures that the component is rendering the most recent changes in anyway to the information in the databases.This can get confusing be cause it usually involves a multiple step call back function that is passed into the fetch requests.

function deleteWalk(walk) {
        let index = dog.walks.findIndex((w) => { return w.id === walk.id})
        dog.walks.splice(index, 1)
        const newDogs = [...dogs]
        setDogs(newDogs)
    }

The steps for example of deleting a walk would include finding the walk in question by id, using .splice to remove the walk from the array. Then creating a copy of the dogs array which has been slightly altered by removing the walk from one of the dogs dog.walks array. And the passing the created copy of the dogs array into setDogs which will rerender because the array being passed in is slightly altered, and the the parent component will update and display the updated information without having to refresh the page.

It is sometimes confusing to keep track of all the state changes so its important that you are setState whenever you make one of these types of CRUD request to either of the databases.

Building with Components, Props, and State!

Elias Ventura — Wed, 05 Oct 2022 15:22:44 +0000

Originally just learning Javascript was really cool, being able to see the HTML you coded, and being able to interact with it with event listeners was novel! It felt like it took a lot of work to write an app, because you had to write out div by div basically the HTML you wanted, you also needed to write out the Javascript you wanted. But, while working on the Phase 2 React Project for FlatIron school I really was able to experience the joy of having code write code for you! Using new tools like Components and state and props made it so easy to create many different elements on the page and to share information across so many different files in the app without me actually having to write one piece of HTML or Javascript, and thats allowed with the JSX syntax. Here is an example of JSX, where HTML and javascript can be used in the same function or logic to create the dynamic element that you want to use:

     if (flipped === true ) {
            return (
                <div className="card">
                <h1> { kick.name } </h1>
                <img src={ kick.image }/>
                <h2>Purchase Price: ${ kick.price }</h2>
                <h2>Resell Price: ${ price } </h2>
                <button className="btn btn-primary"> You { 
                  profit > 0 ? `made $${ profit }`: 
                     `lost $${profit }` }! </button>
                </div>

            )

        }

Really useful from using React, different languages can get written at the same time. All of this working together and sharing of information that is allowed through these tools really creates a seamless way of rendering many pages, allowing for manipulation of the DOM so that the page can look like a completely different page with css styling and the HTML that your JSX renders, but with only one HTML file which is the cool part!

The props allow a sharing of information between different components passed down in kind of variable through the parent-child relationship. Where without React you would have to write the information and update it manually every time in each file the parent and the child, maybe even sometimes div by div. But with the props it allows an easy way to code the information or functionality you need once and then be able to pass it to the rest of the app, which other wise these would be separate files that couldn't dynamically update the information we need. This increase the functionality because props can be more than just variables, it can be objects, or functions, and this passed down allows the component to inherit functionality and then be able to reference it in the rest of the file while only having declared it once in the parent component. Also any child of the parent can reference the same prop really increasing the functionality with only declaring the original function or variable once!

With the components being able to relate to each other in this way really reduces the amount of code we have to write. For example if you create one component, you can implement it in your functions by using JSX, and it will manipulate the DOM and generate some HTML for you, but at the same time it will also have all the Javascript and functionality that was written in the components file. This component can then also be reference or imported everywhere else in the code without having to rewrite anything, just by calling the Components name. Here is an example of a several component with props and the props being able to be passed down to different components :

        <Route path="/flipped" >
          <Flipped wallet={wallet} setTotalProfit=. 
           {setTotalProfit}/>
        </Route>

        <Route path="/closet">
          <Closet wallet={wallet} setWallet={setWallet} 
          totalProfit={totalProfit}/>
        </Route>

        <Route path="/">
          <Store kicks={kicks} onBuy={handleBuy} wallet= 
          {wallet} totalProfit={totalProfit} />
        </Route>

Using state also really useful in the sort of streamlining the writing of the logic behind the functionality of the app. It really showed me how functions, or in this case, React Hooks, can be used to create some information until it's needed to be accessed. It kind of sits there until your code then references it, and then it can be referenced many times anywhere in your code while only having to be literally coded only once in the states variable. How it can be referenced is through the parent-child relationships you can establish through using props and states together.

This was really exciting because it made it looks so easy. It really opened my eyes to how some code can help you write code that at times might not be there because you cant see it because you didn't write it, but it then can be used elsewhere in you app, and then can manipulate the HTML and DOM in such a way that a single page application can look like multiple pages seamlessly working with each other.

Event Listeners and Select Tag!

Elias Ventura — Sat, 28 May 2022 15:12:24 +0000

While working on my first project for FlatIron School, I was using information from the public api, pokeapi. I wanted to create a webpage to be able to "select" a Pokemon and be able to see specific information about any Pokemon I chose. I had no idea about the tag in HTML, but in my head I knew that I wanted to see a drop down list on my page with all the Pokemon names and that if i clicked or hit enter on any name I wanted the page to do something. I knew i was going to have to add an event listener obviously somewhere, but where? So after some googling I learned about the select tag, easy enough I coded a drop down in my HTML file. But for the select tag to work as a dropdown list i had to create "options". Options are the choices that dropdown list displays, in my case it would be the Pokemon names. In my case it was more useful to dynamically code the options in my javascript file and then append them to the dropdown list, in this way I could use information from my fetch request to the api to populate the options. As you can see here data that its getting from the api, is then being to get Pokemon objects information, which information I'm then using to pass in as an argument to my createOptions function, which as my getAllPokemon() function operates, it iterates over a array of Pokemon objects and creates an option for each. This option is then appended to the drop down list in the createOptions() function.

fetch('https://pokeapi.co/api/v2/pokemon?offset=0&limit=150')
    .then(res => res.json())
    .then(function (data) {
        getAllPokemon(data)
    })

    function getAllPokemon(data) {
        const pokemons = data['results']
        for (const pokemon of pokemons) {
            fetch(pokemon.url)
            .then(res => res.json())
            .then(function (data) {
                createOptions(data)
                pokemonObjects.push(data)
                renderStats(pokemonObjects[0])
            })
        }

    }

Then all that was left was the question of where to add the event listener. For a while I thought that by adding an event listener to each individual option, then the webpage would be aware when that particular option was 'clicked' , see I was just thinking about the 'click' event. But then I wondered if there were any other event listener that might be more useful in this situation. By adding an event listener, with the 'change' event, to the select tag, which is the dropdown list, instead of each individual option, the event listener will run whenever there is a 'change' in the selected option from the dropdown list.

dropDown.addEventListener('change', function (event) {

        const pokemon = pokemonObjects.find(pokemon => pokemon.name === event.target.value.toLowerCase()) 
                renderStats(pokemon)
            })

Interestingly enough as well, after the 'change' event listener has run, the dropdown menu remembers that the option that was changed to is currently selected, and I was able to access that information in other parts of my code with selectedIndex property of the dropdown list.

const option = dropDown.options[dropDown.selectedIndex].value

So as we see here dynamically creating the dropdown menu in this way gives me opportunity to use information from the api to create whichever options are relevant. And then by adding the 'change' event to the dropdown I can use that information from the option in various ways, that perhaps adding individual event listeners to the options might not. Having those option created in the javascript file and them having access to some of the variables that are in the javascript file, in my opinion made it really easy to be able to get the drop down list to act as it should, and to be able to use information from the objects that I had gotten from the API, made it really nice for the 'change' event to update the page with the accurate information.