DEV Community: Edward Smith-Silvia

Redux Basics

Edward Smith-Silvia — Thu, 08 Jul 2021 18:17:31 +0000

For my final month at the Flat Iron School I was tasked with creating a react-redux project. For this I created a portfolio/crypto tracker. To accomplish this, I needed to use store, state, reducers, and actions. This guide will follow my experience in merging data from a rails api backend to a react frontend.

Actions

Actions are the only source of information for the store. It carries a "payload" which is the information you want to be held in the store. To access the information we want to be stored, we first need to make a fetch to the backend. By using thunk middleware when creating our store, we are able to use asynchronous logic to interact with our store, More on that later.

//actions/crypto.js
export const getCryptos = () => {
    return (dispatch) => {
        fetch("http://localhost:3000/cryptos")
            .then(resp => resp.json())
            .then(cryptos => {
                dispatch({
                    type: "GET_CRYPTOS",
                    payload: cryptos
                })
            })
        }
}

dispatch within that fetch is trying to send a state update to our store. We can follow a similar layout for our fetch request if trying to post to our backend as well (below).

//actions/portfolio.js
export const createPortfolio = (portfolio) => {    
    return (dispatch) => {
        fetch(`http://localhost:3000/users/${localStorage.user}/portfolios`, {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            },
            body: JSON.stringify(portfolio),
        })
            .then((response) => response.json())
            .then((portfolio) => {
                dispatch({ type: "CREATE_PORTFOLIO", payload: portfolio})
            })
    }
}

what is payload within these fetch requests? that is our action. Actions are written as plain javascript objects. So what do we do with these actions after we set up our fetch? We can pass it into a reducer.

Reducers

//reducers/cryptoReducer.js
const initialState = {
    cryptos: [],
    loading: false
}
const cryptosReducer = (state = initialState, action ) => {
    switch(action.type) {
        case "GET_CRYPTOS":
            return {
                ...state,
                cryptos: [...state.cryptos, ...action.payload]
            }
        default:
            return state
    }
}

A reducer is how we modify state in Redux. A reducer accepts the previous state and action, then will return the next state. Within your reducer is where you want to write your logic, however, logic such as API calls are non-pure functions (any function that attempts to change an input or affect state). How does this work? First within our return we have ...state. By spreading the state, we are able to keep the previous state as well as add or overwrite information in the new state. Without doing this we would overwrite the state with our new information and destroy the old information. This is not what we want to do as a reducer is meant to be a pure function in which we do not mutate the state.

State

So we've talked about state, but what is it?
The state of a component is an object that holds information and can change over the lifetime of the component. An example would be a button. If the button isn't clicked yet, its state is simply "not clicked", however, if we click it, its state is now "clicked". One thing to keep in mind is that state is Immutable, or unmodifiable. So how the heck is the button clicked right? Thats where our reducer comes in that we previously talked about. The reducer took in its previous state as well as an action and produced a new state of "clicked" so we can keep a history of previous state changes rather than modifying a single state.

Store

//index.js
const store = createStore(rootReducer, compose(applyMiddleware(thunk), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()))

Now that we are fetch our information, we need to create a store. We can create a store by passing in our reducer and in my case as I require a fetch within my action, the thunk middleware. This allows us to deal with asynchronous logic and promises. You can read more about this here. The final part (window.__REDUX_blahblahblah) isn't necessary, its used for a chrome extension which allows you to view the information within your store to see what you have access to. We then need to pass our store into a provider inorder to access this within other components.

//index.js
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Now that we have a store, how do we access whats inside?

mapStateToProps and mapDispatchToProps

//App.js
const mapStateToProps = (state) => {
  return{
    cryptos: state.cryptos,
    portfolio: state.portfolio,
    loading: state.loading
  }
}

With mapStateToProps of course! with this we are able take the state (state.cryptos, state.portfolio, etc.) and create an array which holds that information. With this I can call props.cryptos.map and pass this information in my case to a card component which would loop each individual crypto within props.cryptos and create a list with the information I specify within my card component.

export default connect(mapStateToProps)(Component);

It's important to remember when exporting we do so like this in order to connect the component to the store. In this format, mapDispatchToProps is received by default. If you want to specify you would write it like this:

export default connect(mapStateToProps, { getCryptos, getPortfolio })(App);

By writing out our mapDispatchToProps, we can tell the component what actions we need to dispatch. Like it sounds, it is similar to mapStateToProps as instead of passing state, it passes a dispatch function to the props. Heres a quick example of how it would be manually written out like mapStateToProps:

const mapDispatchToProps = dispatch => {
  return {
    addItem: () => {
      dispatch(addItem())
    }
  };
};

Finally here is a list of imports you may need:

import { connect } from 'react-redux';
import { Provider } from 'react-redux'
import { applyMiddleware, createStore, compose } from 'redux'
import { combineReducers } from 'redux'
import ReactDOM from 'react-dom';
import thunk from 'redux-thunk';

Learning DOM Manipulation From Seed to Sapling

Edward Smith-Silvia — Thu, 03 Jun 2021 16:31:32 +0000

After just finishing phase 4 of the Flatiron Full stack Full-time bootcamp, I can say learning javascript has been the most difficult.After learning Ruby and building off it with Sinatra and Rails, switching to a whole new language threw me off. I think about it as learning how to speak fairly fluent Spanish and then being told you have one month to fluently speak German. If it had been my first time learning a new language I'd be saying thats not possible but if you learn one language you can transfer the habits of learning it to the new language and I think the same thing applies here.

After three weeks of learning javascript, we were tasked with using DOM manipulation to create a single page application and our own api for the backend and connecting the two for our monthly project. In my case, I made a super dumbed down version of a social media/forums app. No users, no creating posts, however, with the api I created, you can create/delete comments on premade pages which in my case is bonsai based. I chose to create my app based on bonsai trees as I have a serious addiction to them. I own a few and am constantly on the bonsai subreddit so I created a care guide for different species of trees. Though initially planning to use sessions to allow users, due to time constraints, it became "imagine you're logged in and what you see is what a user sees".

Learning the material and aspects of javascript was one thing but putting together all of them was another. As with all the previous projects, I only really feel like I understand it after finishing the project for that unit. The first three days was struggling through finding out how to use different pieces properly and the last three days was actually building the project. One part I struggled with was properly finding the correct information.

let a = document.createElement('ul')
a.id = "comment-container"
a.addEventListener('click', (e) => {
    if(e.target.className === "delete-button")
    {let comment = Comment.all.find((comment) => 
        {return(comment.id == 
        e.target.parentElement.dataset.id)})
            e.target.parentElement.remove()
            comment.deleteComment()

Through this block of code, I am able to access each delete button and delete the comment from both the document and the api. Previously I was only able to delete it from the api as I did not have an understanding that I could access the information from the document using parents and children (one of the things I must've brushed over when trying to catch back up on assignments). When using containers, you can nest them within each other and access information throughout the family tree but either specifying child or parent element. In my example, e is the delete button. We want to remove the comment from the document so we focus on the parent element which is the comment-container and remove the data-id that corresponds to the specific comment after setting it equal to the delete button id. Finally we can call the deleteComment function on the element which will allow us to use this. within the new function.

deleteComment() { 
    fetch(`${treeURL}/${this.tree_id}/comments/${this.id}`,{
            method: "DELETE"

Previously I had been passing in the tree id and comment id from another function, which got it from another function, which got it from another function. In the end it became a huge mess and I had wished I knew how to properly manipulate and gather data from the start (now I've got a mess to go back and clean up).

In the end, I think my project came out fairly well for three days. Starting over with javascript definitely was a challenge and the majority of the time I had kept telling myself I couldn't do it. That seems to be a reoccurring theme with these projects however in this case, I was absolutely not confident. Though I had high hopes before starting the project, I am glad I simplified it after realizing I didn't know what I was doing at first. I feel much better about it now so now it's time to start the final month of my Flatiron School journey.

Poke-Rails - Flatiron Rails Project

Edward Smith-Silvia — Sun, 02 May 2021 00:01:18 +0000

Here we are, version 3 of my Pokemon team creator and Pokedex app and an even cornier name (get it? poke...RAILS. god I'm a genius). Though there has been little improvement this time around in comparison to last time with Sinatra, I do feel this project would have the capability to become something great if I had more than a week to work on it. To begin, I am currently learning at the Flatiron School's Full-time Software Engineering course and this is my third project of the course. After being told this would be the first of three resume projects, I decided to recreate my app for the third time as every time around, I have learned new techniques using the pokeapi and have been challenged by it every time to come up with methods that work to achieve my goals. Though I did not get anywhere near as far as anticipated with this project, I did learn a lot about rails through making it and plan on revisiting it for improvements. Here are a few tips that helped me, or that I found along the way that can help you.

Creating your app

To start the process of creating an app, while in the console you can use:

rails new project_name

This is a quick and painless way to generate most of any files you could possibly need while working on a rails app. With this, you already have a rails server created (though it will be blank).

Tables and Associations

Associations are one of the most important parts of your app to get right or it'll be a massive headache when nothing is going right. In my case, I have four tables, users, teams, pokemons, and team_pokemons serving as my join table.

class Pokemon < ApplicationRecord
    has_many :team_pokemons
    has_many :teams, through: :team_pokemons
class User < ApplicationRecord
  has_many :teams
  has_many :pokemons, through: :teams
class Team < ApplicationRecord
    belongs_to :user
    has_many :team_pokemons
    has_many :pokemons, through: :team_pokemons
class TeamPokemon < ApplicationRecord
    belongs_to :team
    belongs_to :pokemon

Once you understand how your associations work, you can tell where each piece of code will belong and under what controller. To meet requirements, you must have a user submittable attribute within your join table. In my case it was nicknames for pokemon within the users team. Why would this not go under the pokemons table? Well in the games you're not renaming the entire species of pokemon, only the one you own. The same concept is used here. If you used it in another table, you'd run into the same issue of all of a species having the same nickname throughout your multiple teams for the user who made the nickname. With this, the nickname is only saved to the instance of team it corresponds with within the join table.

Nested Resources

(aimed towards anyone reading this who will be starting their rails project for this course) Make sure you understand and take advantage of nested resources from the start after setting up your resources. This was a major setback during my project as many routes had changed and variables had to be redefined to work with its new route.

  resources :pokemons do
    resources :teams
  end

This here was a struggle. At first I thought it would be better to nest :teams under :users however, because the way the routes would be setup as localhost:3000/users/:id/teams/, it would be improper as each user only has access to their own teams. A way this would work is if I had intended users to be able to access each others teams and view them. Though this was not the case so I had to remodel the routes to be nested under :pokemons. This way is only slightly better as it still shows the user id in the url but to my knowledge, I can not remove this but it would make more sense that the url would read localhost:3000/pokemons/:id/teams to keep with the convention of them being groups of pokemon.

Helpers and partials

Helpers do as they're called and help you out. In my case, I used the UsersHelper to create data securities to protect users from others deleting teams or pokemon as well as protecting routes.

    def current_user
        @current_user ||= User.find_by_id(session[:user_id])
    end

With the current_user method, I am able to make sure only the teams connected to a user show up. Without this, a user could use inspect element on their browser to gain access to anothers information. This information is able to be accessed through multiple controllers by using include UsersHelper. Rather than defining a method multiple times, it helps to keep the code DRY. The same can be said for partials as they can define code used by multiple forms. In my case it wasn't necessary but it is nice to know its there when going back and refactoring to prevent repetition.

Params

This ones a quick one but params come from your routes and forms. Very important to know. This was something I missed when it was gone over in the curriculum so I had a fun time trying to figure out why my params weren't working.

<h1> Sign Up! </h1>
<%= form_for @user do |f| %>
    <%= f.label :name %>
    <%= f.text_field :name %><br>
    <%= f.label :username %>
    <%= f.text_field :username %><br>
    <%= f.label :email %>
    <%= f.text_field :email %><br>
    <%= f.label :password %>
    <%= f.password_field :password %><br>
    <%= f.label :password_confirmation %>
    <%= f.password_field :password_confirmation %><br>
    <%= f.submit "Sign up" %>
<% end %>

This example is of my signup form. This form allows you to access params for :name :username :email :password as you can see. other examples would be :team_name or :nickname available through my new team form.

Future plans for my project

So as I said in the beginning, I was unable to improve upon my previous version of my project as much as I thought I would have time for within the week. Much of the code I had to rewrite to fit into rails from the previous sinatra project. Though this wasn't terrible at the beginning as I had blueprints just in another language, I did run into issues along the way and got caught up for a while. When I revist this project, I would definitely like to focus on styling. Right now, the project is bare and my initial plans this time around was to be able to incorporate icons for each pokemon and well... make it look like a pokedex like it should. Though the pokeapi does provide lots of information, I would have also liked to have pages showing descriptions of the movies as well as games within the franchise and unfortunately, the pokeapi does not provide that. To do this I would either have to find another api that does have this information, scrape it from a website, or just create the seed information myself. Another time limitation I ran into was allowing users to add pokemon to existing teams. The user can delete pokemon off a team which could be helpful in the weird scenario where someone would want less than six team members as you're required to include six when building, but this feature would've been better accompanied by an add to existing team feature.

This will probably be my last time using the pokeapi as rather than building more projects with it I would rather just finish this one that I have already created. So this isn't a farewell pokeapi, just a goodbye.

PokeTeams - Sinatra web app project

Edward Smith-Silvia — Sat, 03 Apr 2021 02:27:12 +0000

Let me start by saying man, what a stressful process. This is the end of phase 2 at the Flatiron Schools SE bootcamp and I couldn't be more excited to say I am finally finished with this project. For our final project, we had to create a web based app using CRUD and MVC in Sinatra. Sticking to the Pokemon theme to build more off my previous CLI app using the Pokeapi, I create a website (PokeTeams) that allows the user to create multiple teams which contain Pokemon that can be added or removed as well as having a Pokedex to see the list of all Pokemon and their corresponding information (abilities, moves and types). How useful is this app? Well of course it is catered towards online competitive players though truthfully, I did this to expand on my previous project and wanted to incorporate the same API to see how else I could use it.

I came into the project thinking maybe I could reuse my code from the previous project in order to give myself a head start and allow time to delve further into features I could create for the website however, that was not the case. Similar to my previous project, I ran into the issue of trying to extract usable data from nested urls, each containing a different piece of data.

def fetch_pokemon
    url = "https://pokeapi.co/api/v2/pokemon?limit=10000"
    response = HTTParty.get(url)
    new_response = response.parsed_response
    fetch_abilities(response["results"])
end

def fetch_abilities(results)
    results.each do |x|
        Pokemon.create(name: x["name"], url: x["url"])
    end
end

After some tweaking to previous code used to gather this information, I had finally been able to incorporate it into the project. The next issue was setting up my tables. Relations between tables became an issue as I had been able to get them to align, but not completely.

class User < ActiveRecord::Base
    has_secure_password
    has_many :teams
end

class Team < ActiveRecord::Base
    belongs_to :user
    has_many :team_pokemon
    has_many :pokemons, through: :team_pokemon

end

class TeamPokemon < ActiveRecord::Base
    belongs_to :team
    belongs_to :pokemon
end

class Pokemon < ActiveRecord::Base
    has_many :team_pokemon
    has_many :teams, through: :team_pokemon
end

In the above models, you can see the relations between the user, team, and Pokemon, but wait, whats the TeamPokemon? When creating tables, I ran into the issue of how to join together the teams and Pokemon, and this is the solution. Previously without this, Each team would be able to only have one Pokemon assigned and of course thats no good. With this each Pokemon could be assigned to multiple teams and each team could be assigned multiple Pokemon. Understanding relations in the case of my project was difficult as there were three tables which each had to be connected. Once the tables had come to a working state, the process of completing the app slowly became easier and easier. With this completed, I finally had the backbone to my project complete, being the data and ability for users to register teams and Pokemon to their session. Sessions is the other aspect to this project. All data referring to a specific user had to be connected to their current session to prevent others from gaining access to their data. This required linking each team to the session id of the current user.

user = User.find_by(email: params["user"]["email"])

if user && user.authenticate(params["user"]["password"])
    session["user_id"] = user.id
    redirect "/teams"
else
    redirect "/login"
end

By setting up sessions, each users data becomes more secure as user created data cannot be edited by others. In my case, protecting generic data for each user (the index of Pokemon and their individual information) from being edited was a simple case as there just wasn't a way for the user to access that ability as it was never created or intended as they each have set in stone data.

Throughout the project, compared to my CLI project, it has been nice to see faster speeds when updating information specifically while using this API. By using the same API, I noticed performance has drastically improved through the use of the shotgun gems real time updates in comparison to rerunning the CLI every time I make a change. This increased both productivity and reduced stress as an extra benefit. When booting the CLI, it could take up to two minutes for the information from the API to finished collecting. It has definitely shown me the pokeapi is more suited to a web-based application over that of a CLI.

Though I hope to revisit this project in the future to edit the styling of the webpage (as I left it fairly simple), I am glad to say goodbye to it for now.

When is self really itself?

Edward Smith-Silvia — Mon, 08 Mar 2021 04:18:24 +0000

When is self really itself? Trick questions, it always is, it's just a matter of who self is. As a newcomer to programming, grasping the concept of self has been challenging as this single variable can have massive impact either making or breaking a program. To me, self has been a riddle understanding where it points and when it should be used. Self can be in reference of the class or to an instance. self is a variable that can be used to point somewhere and when it does, it can change the information that is being received.

Instance

class Dog
    def sit
        self
    end
end

Apollo = Dog.new("Apollo")
Apollo.sit == Apollo 
# => true

Shown in the example above, sit is an instance method. It belongs to the object we created using Dog.new. In This example we can see that self is pointing to the instance of Dog.

Class

class Dog
    def self.sit
        self
    end
end
Dog.sit == Dog
# => true

In this example, self is pointing to the class. when self comes before the defined method, it changes from an instance method to a class method. Class methods are owned by the class itself.

Other uses for self

Instead of calling a class variable with @@all, we can call it within a method using self.class.all with the help of a class method that returns the class variable. Though they function the same, it is the more visually appealing option.

While it should be avoided, if a method and local variable are the same, the method could be called like this.

def cat
    "imma cat meow"
end

def method_name
    cat = "Munchkin"
    puts cat
    puts self.cat
end
# => Munchkin
# => imma cat meow

By calling self.cat, both a method and name are able to be distinguished from one another and be used without confusion to the computer (though it may cause confusion to someone who is reading the code).

While there are more uses that I have seen for self, I am not covering them in this post as I do not wish to teach what I haven't learned and will update this post in the future. If you still struggle to understand self, practice practice practice, it will come with practice. Below are articles which have helped me gain a better understanding of self and I hope they will help you as well.

                          Happy Coding!

What Is Self in Ruby & How to Use It (Explained Clearly)

Self in Ruby: A Comprehensive Overview

Understanding self in Ruby

@/@@ vs. self in Ruby

Flatiron CLI project - PokeDex

Edward Smith-Silvia — Sat, 06 Mar 2021 23:07:08 +0000

Throughout the last month, I have been attending the Flatiron Schools Software Engineering course. We have been learning Ruby and to finish off phase 1, we had to build a CLI using an API. Originally I thought about creating a crypto currency tracker which showed the highest and lowest prices of the day as well as the current value of a selected currency but ran into an issue of it not being upto date with many APIs being hours behind. Eventually I chose to use the Poke API to create a pokedex of the original 151 pokemon from the first generation. Though the project took a while, it wasn't due to it being an overall hard project, rather most of the time spent was finding an API that would work well along with working around ways to get the proper information output through trial and error.

    def self.fetch_pokemon
        url = "https://pokeapi.co/api/v2/pokemon?limit=151"
        response = HTTParty.get(url)
        fetch_abilities(response["results"])
    end

HTTParty is a ruby gem which allows you to gain access to outside information and automatically parse it into an array or hash. In this example I took the URL for the pokeapi and parsed it into the response variable. From there I was able to dig deeper into the hash, removing the unnecessary data that wasn't apart of the array I wanted to gain access to, stored in the results array.

pry(POKE::API)> response
=> {"count"=>1118,
 "next"=>"https://pokeapi.co/api/v2/pokemon?offset=10&limit=10",
 "previous"=>nil,
 "results"=>
  [{"name"=>"bulbasaur", "url"=>"https://pokeapi.co/api/v2/pokemon/1/"},
   {"name"=>"ivysaur", "url"=>"https://pokeapi.co/api/v2/pokemon/2/"},
   {"name"=>"venusaur", "url"=>"https://pokeapi.co/api/v2/pokemon/3/"},
   {"name"=>"charmander", "url"=>"https://pokeapi.co/api/v2/pokemon/4/"},
   {"name"=>"charmeleon", "url"=>"https://pokeapi.co/api/v2/pokemon/5/"},
   {"name"=>"charizard", "url"=>"https://pokeapi.co/api/v2/pokemon/6/"},
   {"name"=>"squirtle", "url"=>"https://pokeapi.co/api/v2/pokemon/7/"},
   {"name"=>"wartortle", }

I found it interesting trying to manipulate the data you see in the above clip. Each pokemon has its name which is fine, and then a URL along with it to access any moves, abilities, types, game appearances, etc. This was a common occurrence with this API of creating a constant loop of parsing the information every time you wanted to get a level deeper into information.

In order to do this, I created a new method to clean up the code so it could be edited easier as well as more visually appealing. We can now start creating Pokemon objects. First, we iterate through the array and parse each url of the individual pokemon hashes and finally create new Pokemon objects with new.

def self.fetch_abilities(results)
    results.each do |x|
        response = HTTParty.get(x["url"])
        POKE::Pokemon.new(response)
    end
end

This is the end of the API class. From here we can take the information and manipulate it further through the Pokemon class and finally create our CLI class to display options and information to the user. While creating the Pokemon class I had ran into issues using send. At this point, completing the project was simply trying to gather a deeper understanding of why my variables had been overwritten through this method which I have previously covered in another post. If you'd like, you can read more about it here.

      puts "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~" 
      puts "⣿⣿⣿⣿⣿⡏⠉⠛⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿
            ⣿⣿⣿⣿⣿⣿⠀⠀⠀⠈⠛⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⠉⠁⠀⣿
            ⣿⣿⣿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠙⠿⠿⠿⠻⠿⠿⠟⠿⠛⠉⠀⠀⠀⠀⠀⣸⣿
            ⣿⣿⣿⣿⣿⣿⣿⣷⣄⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿
            ⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣴⣿⣿⣿⣿
            ⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠀⢰⣹⡆⠀⠀⠀⠀⠀⠀⣭⣷⠀⠀⠀⠸⣿⣿⣿⣿
            ⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⠀⠈⠉⠀⠀⠤⠄⠀⠀⠀⠉⠁⠀⠀⠀⠀⢿⣿⣿⣿
            ⣿⣿⣿⣿⣿⣿⣿⣿⢾⣿⣷⠀⠀⠀⠀⡠⠤⢄⠀⠀⠀⠠⣿⣿⣷⠀⢸⣿⣿⣿
            ⣿⣿⣿⣿⣿⣿⣿⣿⡀⠉⠀⠀⠀⠀⠀⢄⠀⢀⠀⠀⠀⠀⠉⠉⠁⠀⠀⣿⣿⣿
            ⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣿⣿
            ⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿"
      puts "~~~~~~~~~~~~~GOOD BYE~~~~~~~~~~~~~"

Making Sense of Send

Edward Smith-Silvia — Sun, 28 Feb 2021 01:12:51 +0000

send() is an instance method which is used to pass a message to an object. In my case, there were methods that I did not want it to pass. It is currently the end of phase 1 in my bootcamp and I spent this week creating a Pokedex CLI using the Pokeapi.

response.each do |key, value|
    self.class.attr_accessor(key) unless key == "abilities"
    self.send("#{key}=", value) unless key == "abilities"

While creating my Ruby CLI project, I ran into the issue of .send overriding my method and storing the wrong data.

Through lots of troubleshooting, it finally occurred that the attr_accessor, used to create reader and writer methods, took a key and created a method for it, was sending the self made abilities method to the Pokemon object and hardcoding its own value. In order to fix this we use unless to prevent the method from being created so it can be written later.

    def abilities
        @abilities.collect do |a_hash|
            a_hash["ability"]["name"]
        end
    end

By preventing attr_accessor and send from creating the abilities method, I am able to look deeper into the hash and pick out exactly what I want, in this case, the value (ability) for ["name"] to be returned to the user when selecting a Pokemon to learn more about. The same was done for other attributes such as the ["type"] with the end result appearing like this.

NAME - Venusaur
ABILITIE(S) - overgrow, chlorophyll
TYPE(S) - grass, poison

to prevent other methods from being overridden we would add an || and repeat the unless process. The alternative and simpler route however, would be to manually use the attr_accessor rather than automating it. Who wouldve guessed it? Obviously not me.