DEV Community: Brandon C

Renaming Foreign keys in Rails

Brandon C — Thu, 16 Feb 2023 01:49:40 +0000

Ruby on Rails allows for model and table associations on a database such as sqlite3 through a "convention over configuration" framework design. Lets say I have three tables: users and another table named products and the last is orders , with the relationships between these tables is that a user has many products and many orders, a product belongs to a user and has many orders, and an order belongs to a user and product. The model files and migration files for creating the tables would look like this:
users -< products
user-< orders >- products

class CreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      t.string :username
      t.timestamps
    end
  end
end
...
class CreateProducts < ActiveRecord::Migration[7.0]
  def change
    create_table :products do |t|
      t.string :name
      t.belongs_to :user, null: false, foreign_key: true

      t.timestamps
    end
  end
end
...
class CreateOrders < ActiveRecord::Migration[7.0]
  def change
    create_table :orders do |t|
      t.integer :quantity

      t.timestamps
    end
  end
end

#separate model files
class User < ApplicationRecord
   has_many :products
   has_many :orders
end
...
class Product < ApplicationRecord
   belongs_to :user
   has_many :orders
end
..
class Order < ApplicationRecord
   belongs_to :product
   belongs_to :user
end

Running the migration creates three tables where the foreign key user_id is implicitly given to any product row entry in the products table, an order entry holds foreign keys of user_id and product_id . The reason why the foreign key is user_id in products is because Active Record attaches "_id" to the name of the model being referenced. belongs_to can be interchanged with references in the products migration file. Thanks to Active Record providing us with class methods and instance methods for defined associations, an example of accessing created entries through the console, model or controller could look like this:

>user = User.first
>user.products
=>#gives list of products instances associated to user
>user.products.first
#or
>User.first.products.first
=>#<Product id: 1, name: "Potted Plant", user_id: 1>
>buyer = User.last
>buyer.orders.first
=>#<Order id: 1, quantity: 2,  product_id: 1, user_id: 2>

What we're trying to convey here is that users can put products up for sale and other users can buy them through orders. Users can be sellers of products and also buyers through the orders join table. What if we wanted to change the name of the association and foreign key to make the association more descriptive? We want the user to be a "seller" of a product and also be "buyers" of other products through making orders. We can change the name of the user foreign key by using additional options for migrations, models and serializers. First, we can go back to the migrations and start over from the column descriptions either by rolling back, deleting the database, or altering the table columns.

class CreateProducts < ActiveRecord::Migration[7.0]
  def change
    create_table :products do |t|
      t.string :name
      t.belongs_to :seller,  null: false, foreign_key: {to_table: :users}

      t.timestamps
    end
  end
end
...
class CreateOrders < ActiveRecord::Migration[7.0]
  def change
    create_table :orders do |t|
      t.integer :quantity
      t.belongs_to :product,  null: false, foreign_key: true
      t.belongs_to :buyer,  null: false, foreign_key: {to_table: :users}
      t.timestamps
    end
  end
end

In these migrations, we are changing the foreign key table reference from "user" to "buyer" in the orders table and "seller" in the products table. Using the references buyer and seller will generate buyer_id and seller_id as the foreign keys. We also have to use the to_table option to specify what the original table association reference is since putting seller and buyer as references will cause Active Record to look for the tables sellers and buyers which don't exist. In our case the original name of the table being used in both migration cases is users, so the foreign keys will be buyer_id and seller_id which are made by deriving the primary id key from the users table. The next is the models:

class User < ApplicationRecord
    has_many :products, foreign_key: :seller_id
    has_many :orders, foreign_key: :buyer_id
    has_many :bought_products, through: :orders, source: :product
end
...
class Product < ApplicationRecord
    belongs_to :seller, class_name: 'User'
#or belongs_to :user, foreign_key: :seller_id
    has_many :orders
    has_many :buyers, through: :orders
#or has_many :users, through: :orders
end
...
class Order < ApplicationRecord
    belongs_to :product
    belongs_to :buyer, class_name: 'User'
#or belongs_to :user, foreign_key: :buyer_id
end

In User, we specify the name of the foreign key provided to the associated models, so the id of User is given to Product as seller_id and given to Order as buyer_id. We also have to specify a has_many "through" relationship to describe products bought by orders so we can distinguish the associated class with a name like "bought_products" while we use source: to point to the original name of the associated class, which is also products. When we use the instance method user.products, it will show us the products sold by the user and when we use user.bought_products, it will show us the products bought by the user through order.

>user = User.last
=>#<User: id: 2, username: "Richard">
>user.orders.first
=>#<Order: id: 1,  quantity: 2, product_id: 1, buyer_id: 2>  
>user.orders.first.product
=>#<Product: id: 1, name: "Potted Plant", seller_id: 1>
>user.bought_products.first
=>#<Product: id: 1, name: "Potted Plant", seller_id: 1>
#product bought by user with ".bought_products"
>user.products.first
=>#<Product:id: 2, name: "Tasty Bannana", seller_id: 2>
#product sold by user with ".products", note the matching User id and seller_id

For Order and Product, we can use two ways to describe the belongs_to macro association.

The first macro is using belongs_to :seller/:buyer which causes Active Record to assume the implicit foreign key as seller_id and buyer_id. sellers and buyers have no associated model so we have to use the class_name option to point out what model is supposed to be used for seller and buyer, which is 'User'. Doing this means that Active Record also provides the association instance methods as .seller and .buyer instead of .user for instances of product and order.

>Product.first
=>#<Product: id: 1,name: "Potted Plant", seller_id: 1> 
>Product.first.seller
=>#<User: id: 1, username: "Alan">
>Order.first
=>#<Order: id: 1, quantity: 2, product_id: 1, buyer_id: 2>   
>Order.first.buyer
=>#<User: id: 2, username: "Richard >

The second macro is using belongs_to :user which causes Active Record to recognize the class model User but requires using foreign_key: :buyer_id/:seller_id to specify what foreign key name is being derived from the User model. This will retain the association instance methods provided as .user for product and order.

>Product.first
=>#<Product: id: 1,name: "Potted Plant", seller_id: 1> 
>Product.first.user
=>#<User: id: 1, username: "Alan">
>Order.first
=>#<Order: id: 1, quantity: 2, product_id: 1, buyer_id: 2>   
>Order.first.user
=>#<User: id: 2, username: "Richard >

We could also rewrite the migrations and model associations to maintain the user_id foreign key in order and product while keeping the buyer and seller instance method associations. This can be done by keeping the migration files unchanged from what we originally had.

#migrations
class CreateProducts < ActiveRecord::Migration[7.0]
  def change
    create_table :products do |t|
      t.string :name
      t.belongs_to :user,  null: false, foreign_key: true

      t.timestamps
    end
  end
end
class CreateOrders < ActiveRecord::Migration[7.0]
  def change
    create_table :orders do |t|
      t.integer :quantity
      t.belongs_to :product,  null: false, foreign_key: true
      t.belongs_to :user,  null: false, foreign_key: true
      t.timestamps
    end
  end
end
...
#models
class User < ApplicationRecord
    has_many :products
    has_many :orders
    has_many :bought_products, through: :orders, source: :product
end
class Product < ApplicationRecord
    belongs_to :seller, class_name: 'User', foreign_key: :user_id
    has_many :orders
    has_many :buyers, through: :orders
end
class Order < ApplicationRecord
    belongs_to :product
    belongs_to :buyer, class_name: 'User', foreign_key: :user_id
end


>user = User.last
=>#<User: id: 2, username: "Richard">
>user.orders.first
=>#<Order: id: 1,  quantity: 2, product_id: 1, user_id: 2>  
>user.orders.first.product
=>#<Product: id: 1, name: "Potted Plant", user_id: 1>
>user.bought_products.first
=>#<Product: id: 1, name: "Potted Plant", user_id: 1>
>user.products.first
=>#<Product:id: 2, name: "Tasty Bannana", user_id: 2>
>product = Product.first
=>#<Product: id: 1, name: "Potted Plant", user_id: 1>
>product.seller
=>#<User: id: 1, username: "Alan">
>product.buyers.first
=>#<User: id: 2, username: "Richard">

If we use a serializer, we also have to set the association there depending on the class association we specified in the model. How we choose to define the model association will have an effect on the default json provided:

class ProductSerializer < ActiveModel::Serializer
  attributes :id, :name, :seller_id
  belongs_to :seller
#or belongs_to :user
end
class OrderSerializer < ActiveModel::Serializer
  attributes :id, :quantity, :buyer_id
  belongs_to :buyer
#or belongs_to :user
end
class UserSerializer < ActiveModel::Serializer
  attributes :id, :username
  has_many :products
  has_many :orders
  has_many :bought_products, through: :orders, source: :products
end

#using belongs_to :buyer/:seller in serializer and model
#get request for product
{
        "id": 1,
        "name": "Potted Plant",
        "seller_id": 1,
        "seller": {
            "id": 1,
            "username": "Alan"
        }
    }
#get request for order
{
        "id": 1,
        "quantity": 2,
        "buyer_id": 2,
        "buyer": {
            "id": 2,
            "username": "Richard"
        }
    }
#using belongs_to :user in serializer and model
#get request for product
 {
        "id": 1,
        "name": "Potted Plant",
        "seller_id": 1,
        "user": {
            "id": 1,
            "username": "Alan"
        }
    }
#get request for order
 {
        "id": 1,
        "quantity": 2,
        "buyer_id": 2,
        "user": {
            "id": 2,
            "username": "Richard"
        }
    }
#get request for user index with include: ['orders', 'orders.product', 'products', 'bought_products']
{
        "id": 1,
        "username": "Alan",
        "products": [
            {
                "id": 1,
                "name": "Potted Plant",
                "seller_id": 1
            }
        ],
        "orders": [],
        "bought_products": []
    },
    {
        "id": 2,
        "username": "Richard",
        "products": [
            {
                "id": 2,
                "name": "Tasty Bannana",
                "seller_id": 2
            }
        ],
        "orders": [
            {
                "id": 1,
                "quantity": 2,
                "buyer_id": 2,
                "product": {
                    "id": 1,
                    "name": "Potted Plant",
                    "seller_id": 1
                }
            }
        ],
        "bought_products": [
            {
                "id": 1,
                "name": "Potted Plant",
                "seller_id": 1
            }
        ]
    }

If we set up a custom serializer, we can show the associations involved with a get request and cut down the unneeded attributes for the json return:

class OrderSerializer < ActiveModel::Serializer
  attributes :id, :quantity
  belongs_to :buyer
  belongs_to :product, serializer: OrderProductSerializer
end
class OrderProductSerializer < ActiveModel::Serializer
  attributes :id, :name
  belongs_to :seller
end
#get request for an order with include: ['buyer', 'product', 'product.seller']
{
        "id": 1,
        "quantity": 2,
        "buyer": {
            "id": 2,
            "username": "Richard"
        },
        "product": {
            "id": 1,
            "name": "Potted Plant",
            "seller": {
                "id": 1,
                "username": "Alan"
            }
        }
    }

Even though Ruby on Rails is a convention over configuration framework, this is just one way to deviate from its implicit based design by using the options that it provides us.

Done with Ruby 2.7.4

References

-https://api.rubyonrails.org/classes/ActiveRecord/ConnectionAdapters/SchemaStatements.html#method-i-add_reference
-https://api.rubyonrails.org/classes/ActiveRecord/Associations/ClassMethods.html#method-i-belongs_to
-https://api.rubyonrails.org/classes/ActiveRecord/Associations/ClassMethods.html#method-i-has_many
-https://flatironschool.com/

Intro to Enumerables in Ruby, and an example with Active Record

Brandon C — Wed, 01 Feb 2023 21:53:44 +0000

As a language that deals with server side applications, Ruby is often used to handle large amounts of data, and usually a way of parsing the data is needed. Ruby has access to enumerable methods for arrays and objects that can be used to do things like find, organize, or filter certain pieces of data especially when these methods are used alongside each other.

If you're familiar with JavaScript, map , filter, and find reappear in Ruby but they also have alternate names as collect, select, and detect while still functioning similarly to their JavaScript counterparts. map/collect creates a new array with the returns of the code block written, filter/select/find_all creates a new array with the objects that return a true value, find/detect returns the first object that returns a true value for the code block.

p ["cat", "dog", "bird"].map{|i| i.upcase }
//["CAT", "DOG", "BIRD"]
p [1,2,3,4,5].filter{|i| i > 2 }
//[3, 4, 5]
p [1,2,3,4,5].find{|i| i > 2 }
//3

count will count the amount of elements in the array and return the value, its a similar to the length method in JavaScript. Providing an argument or code block to count will return the number of results that fulfill the argument or block code conditional. tally creates a hash which counts the number of times each element appears in a given array, the element is assigned as a key while the count for each element is assigned as the value. any? will return true if any of the elements passes a conditional while all? will return true only if all of the elements passes a conditional. none? returns true if none of the elements pass a conditional code block while one? returns true if only one element passes the conditional code block. max returns the element with the maximum value, min returns the minimum value, and minmax returns the maximum and minimum value.

p ["a","a","b","b","b","c"].count
//6
p ["a","a","b","b","b","c"].count("a")
p ["a","a","b","b","b","c"].count{|i| i == "a" }
//2
p ["a","a","b","b","b","c"].tally
//{"a"=>2, "b"=>3, "c"=>1}
p [3,5,1,4,2].any?{|i| i > 3}
//true
p [3,5,1,4,2].all?{|i| i > 3}
//false
p [3,5,1,4,2].all?{|i| i > 0}
//true
p [3,5,1,4,2].none?{|i| i > 5 }
//true
p [3,5,1,4,2].one?{|i| i > 4 }
//true
p [3,5,1,4,2].max
//5
p ["kitty", "dog", "bird"].max{|a,b| a.length <=> b.length }
//"kitty"
p [3,5,1,4,2].min
//1
p ["kitty", "dog", "bird"].min{|a,b| a.length <=> b.length }
//"dog"
p [3,5,1,4,2].minmax
//[1, 5]
p ["kitty", "dog", "bird"].minmax{|a,b| a.length <=> b.length }
//["dog", "kitty"]

chunk creates a series of arrays each starting with the return value of the corresponding code block and separates the elements into nested arrays depending on whether they share the same return value consecutively. First, the return value of the code block generates a new array and the return value is placed as the first element of the new array, then the element that was passed into chunk is placed in a nested array after the chunk return value. At the end of chunk enumeration only an Enumerator class instance is returned which can be accessed with other enumerable methods like each or map.

array = [3,3,5,1,4,2].chunk{|a| a }
array.each{|i|p i}
// [3, [3, 3]] [5, [5]] [1, [1]] [4, [4]] [2, [2]]

Similar to chunk , chunk_while separates the elements into arrays based on the conditional return value when the elements are compared to each other depending on the order of the array elements provided and the conditional code block used. Every array chunk builds up elements as the conditional code block returns true then the new array chunk starts when the return of the conditional code block is false. Both chunk enumerables become more useful when we combine them with sorting methods.

array2 = [3,7,3,5,1,4,2].chunk_while{|a,b| a > b }
array2.each{|i|p i}
// [3], [7, 3], [5, 1], [4, 2]

Theres two common sorting enumerable methods typically used: sort and sort_by. sort works by comparing two objects in a code block and sorting based on the results of the comparison, a negative return value means the first object is placed ahead of the second, while positive return places the first object behind the second. sort_by works by generating a temporary array and takes a single argument at a time then organizes the array based on the results, which makes it more ideal when working with larger and more detailed information that needs to be compared to each other, especially when methods have to be called in the comparisons repeatedly. The behavior of sort_by only taking one element at a time is also ideal for working with hashes. Reversing the order of sort_by can be done by using the reverse method or putting a minus sign in front of the code block object when dealing with numbers.

p [3,5,1,4,2].sort{|a,b| a <=> b  }
p [3,5,1,4,2].sort{|a,b| a - b  }
//[1, 2, 3, 4, 5]
p [3,5,1,4,2].sort{|a,b| b <=> a  }
p [3,5,1,4,2].sort{|a,b| b - a  }
//[5, 4, 3, 2, 1]

array = [["a","b","c"], ["x","j","k","i"] , [1,8,2,4,6,4]]
p array.sort_by{|a| a.count }
//[["a", "b", "c"], ["x", "j", "k", "i"], [1, 8, 2, 4, 6, 4]]
p array.sort_by{|a| a.count }.reverse
//[[1, 8, 2, 4, 6, 4], ["x", "j", "k", "i"], ["a", "b", "c"]]

Some enumerables can also be utilized on hashes and take two arguments associated with the key-value pairs, the first argument is the key and the second is the value associated to the key. The result of map on a hash will still return an array of returns from the code block while filter will return a hash of the remaining key-value pairs that pass a conditional. The result of calling sort_by on a hash will return an array of arrays with each array containing a key and value pair from the original hash. This means you can sort the values of a hash to find which key corresponds with the highest value. As a comparison, the default behavior of sort on a hash will only sort by keys and not values, and has no access to the same two arguments of key and value that sort_by provides. You can separate the values from the keys, but then the keys will be missing from the returned array. The ability to enumerate using code blocks with hashes allows for more flexibility when searching for data inside nested arrays and hashes.

hash = {"a":5, "b":3, "c":4, "d":2, "e":1}
p hash.map{|k,v| v * 10 }
//[50, 30, 40, 20, 10]
p hash.filter{|k,v| v > 3 }
//{:a=>5, :c=>4}
p hash.sort_by{|k,v| v} 
//[[:e, 1], [:d, 2], [:b, 3], [:c, 4], [:a, 5]]
p hash.sort_by{|k,v| k}
//[[:a, 5], [:b, 3], [:c, 4], [:d, 2], [:e, 1]]
hash2 =  {d: 5 , e: 3 , a:4 , c: 2 , b:1}
p hash2.sort
//[[:a, 4], [:b, 1], [:c, 2], [:d, 5], [:e, 3]]
p hash2.values.sort
//[1, 2, 3, 4, 5]

max, min and minmax have counterparts max_by, min_by , and minmax_by which take a single argument at a time and are more suited for hashes and detailed data for the same reasons sort_by is used.

hash2 =  {d: 5 , e: 3 , a:4 , c: 2 , b:1}
p hash2.max_by{|k,v| v }
//[:d, 5]
p hash2.min_by{|k,v| v }
//[:b, 1]
p hash2.minmax_by{|k,v| v }
/[[:b, 1], [:d, 5]]

chunk can be called on a hash and still behaves similarly to its array method, creating a series of arrays based on returns for each individual key value pair in the code block and converting the key value pairs into arrays.

 hash = {a:5, b:1, c:4, d:2, e:5}
 chunk_hash = hash.chunk{|k,v| v > 1 }
 chunk_hash.each{|i| p i}
//[true, [[:a, 5]] ] 
//[false, [[:b, 1]] ] 
//[true, [[:c, 4], [:d, 2], [:e, 5]] ]

Heres an example of using enumerables to find data: Lets say we have two ActiveRecord models associated to sql table data, one which is Passenger and another which is Booking. Passengers have many bookings but only the passengers table only consists of a primary Id key and a name column with a string while bookings only have one passenger as a foreign key.

Passengers table:

Bookings table:

We want to find out what the highest number of bookings for a single passenger is based on the amount of times a passenger foreign key is found throughout all the bookings. We can access all the bookings by using Booking.all then chaining map to return an array of all the passenger foreign keys set in the bookings table as passenger_id

Booking.all.map{|booking| booking.passenger_id}
//[6, 34, 26, 30, 29, 3, 36, 16, 24, 10, 5, 19, 13, 39, 32, 37, 45, ....]

So we have this large array of unorganized passenger_id and we need to count how many times each passenger_id appears in the array. From here, we can use tally to create a hash consisting of key and value pairs, the keys will represent the passenger_id and the values represent the amount of times it shows up in the array.

tally_bookings = Booking.all.map{|booking| booking.passenger_id}.tally
//{6=>4,   34=>5,  26=>3,  30=>3,  29=>4,  3=>5,  36=>6,  16=>6,  24=>4,  10=>5,  5=>5, ...}
//passenger_id 34 shows up five times in the array

So now we have a hash containing the information we need but it isn't ordered. Here, we can use max_by to see the highest tally count.

highest_booking = tally_bookings.max_by{|k,v| v}
//[36, 6]

We get an array that has the passenger_id in the first index and the highest tally count in the second index. But what if there was more than one passenger that has 6 bookings? Theres different ways to find the other passengers. Since we have highest_booking, we can filter tally_bookings to find the passenger_ids.

highest_booking_passengers = tally_bookings.filter{|k,v| v == highest_booking[1]}
//{36=>6, 16=>6, 44=>6, 46=>6}

From here, we can use map or each to retrieve the passengers by using the built in ActiveRecord method find to match the foreign id keys of our hash with primary id keys of the Passenger instances.

highest_booking_passengers.map{|k,v| Passenger.find(k)}
//[#<Passenger:0x0000563b635eade0 id: 36, name: "Chae Jacobson">,
// #<Passenger:0x0000563b63596970 id: 16, name: "Mary Erdman V">,
 //#<Passenger:0x0000563b6358ef40 id: 44, name: "Lauryn Gusikowski">,
 //#<Passenger:0x0000563b6358d258 id: 46, name: "Ricky Strosin DC">]

An alternate way of finding the data we need is by using sort_by to arrange the tally into an array of key value pair arrays.

sorted_tally = tally_bookings.sort_by{|k,v| v}.reverse
//[[36, 6],  [16, 6],  [44, 6], [46, 6], [34, 5], [3, 5], [10, 5], [5, 5], [19, 5], [39, 5], [37, 5], ...]

Then, we can run filter on the array.

sorted_tally_max =  sorted_tally.filter{|b|  b[1] == sorted_tally[0][1]}
//[[36, 6], [16, 6], [44, 6], [46, 6]]

We can use chunk to organize the data into a series of arrays containing nested arrays based on tally count.

chunked_tally = sorted_tally.chunk{|i| i[1]}
chunked_tally.map{|i| i}
//[[6, [[36, 6], [16, 6], [44, 6], [46, 6]]],
 //[5, [[34, 5], [3, 5], [10, 5], [5, 5], [19, 5], [39, 5], [37, 5], [17, 5], [14, 5]]],
 //[4, [[6, 4], [29, 4], [24, 4], [13, 4], [45, 4], [35, 4], [49, 4], [41, 4], [48, 4], [21, 4], [31, 4], [28, 4], [23, 4], [11, 4], [33, 4]]],
 //[3, [[26, 3], [30, 3], [32, 3], [38, 3], [1, 3], [2, 3], [43, 3], [9, 3], [7, 3], [25, 3], [47, 3], [27, 3]]],
 //[2, [[22, 2], [12, 2], [4, 2], [18, 2], [40, 2], [42, 2], [15, 2]]],
 //[1, [[50, 1], [8, 1], [52, 1]]]]

To only return arrays of sorted passenger_id grouped together based on tally, we can even use a nested map. First, we select only the nested arrays of key value pairs with i[1], then we use map again to only return the passenger_id with j[0]. We get an array of arrays.

chunked_tally.map{|i| i[1].map{ |j| j[0]  }}
 //[[36, 16, 44, 46], 
//[34, 3, 10, 5, 19, 39, 37, 17, 14], 
//[6, 29, 24, 13, 45, 35, 49, 41, 48, 21, 31, 28, 23, 11, 33],  
//[26, 30, 32, 38, 1, 2, 43, 9, 7, 25, 47, 27], 
//[22, 12, 4, 18, 40, 42, 15], [50, 8, 52]]

We can even use chunk_while to group the data into arrays of different booking tallys without needing a return in the outer array first element.

chunked_while_tally = sorted_tally.chunk_while{|a,b| a[1] == b[1]}
chunked_while_tally.map{|i| i}
//[[[36, 6], [16, 6], [44, 6], [46, 6]],
 //[[34, 5], [3, 5], [10, 5], [5, 5], [19, 5], [39, 5], [37, 5], [17, 5], [14, 5]],
 //[[6, 4], [29, 4], [24, 4], [13, 4], [45, 4], [35, 4], [49, 4], [41, 4], [48, 4], [21, 4], [31, 4], [28, 4], [23, 4], [11, 4], [33, 4]],
 //[[26, 3], [30, 3], [32, 3], [38, 3], [1, 3], [2, 3], [43, 3], [9, 3], [7, 3], [25, 3], [47, 3], [27, 3]],
 //[[22, 2], [12, 2], [4, 2], [18, 2], [40, 2], [42, 2], [15, 2]],
 //[[50, 1], [8, 1], [52, 1]]]

We can sort it again by using a nested map like the other chunk array, this time we dont need to select the nested array to map with i[1], so we use i for the nested map

chunked_while_tally.map{|i| i.map{|j| j[0]} }
//[[36, 16, 44, 46], 
//[34, 3, 10, 5, 19, 39, 37, 17, 14], 
//[6, 29, 24, 13, 45, 35, 49, 41, 48, 21, 31, 28, 23, 11, 33], 
//[26, 30, 32, 38, 1, 2, 43, 9, 7, 25, 47, 27], 
//[22, 12, 4, 18, 40, 42, 15], 
//[50, 8, 52]]

The many enumerables Ruby provides are powerful tools and gives us many ways to organize and find the data we're looking for, especially when working with large and growing databases.

Resources

-https://flatironschool.com/
-https://ruby-doc.org/2.7.7/Enumerable.html

CRUD with external API in React

Brandon C — Wed, 11 Jan 2023 04:41:29 +0000

Create, Read, Update & Destroy data fetching operations with APIs in React is similar to using JavaScript but have a bit more detail with regards to states and side effects. In JavaScript, the basic format of a fetch request looks like this:

fetch(`www.someapiurl.com/key`)
.then(response => response.json())
.then(data => console.log(data))

The result at the end of the fetch request is the information from the API. This is how it also works with React, but in order to make the page responsive we also have to update the state to reflect that information from the fetch request is added to the page or that the API has been altered.

Lets have an example of a GET fetch request. Like JavaScript, we use fetch to obtain the data from the API to use for what we want to display. React allows us to use state to make our pages dynamic in response to changes in states that we set. To utilize the dynamic changes, we first initialize the state for the data that we want as an empty array by importing and using the React hook useState() which give us our state variable shows and setter function setShows for modifying the state. Imagine our objects in the API fetch request consist of only three keys of id, title with an associated string and likes with an associated number.

import {useState} from 'react';

function App(){
const [shows, setShows] = useState();

Because we want to fetch and display the data when our page loads, we also import and use the useEffect() hook, setting a callback function to perform the GET fetch request for our App component and setting an empty dependency array as the second argument to make sure this code only runs once to fetch the data that we initially need. Once the data is fetched, we can use the setter function setShows to set the data as our state variable shows.

import {useState, useEffect} from 'react';

function App(){
const [shows, setShows] = useState();
useEffect(()=> {
fetch(`www.someapiurl.com/key`)
.then(response => response.json())
.then(data => setShows(data));
//this gives us the data from API set as the shows array state variable
};
const allShowTitles =  shows.map( show => ( <p key={show.id} > {show.title} Likes: {show.likes} </p> ) ) 

return (  <div> <section> {allShowTitles} </section>  </div>  );
};
//this example gives us a div element for each object in the shows array with the object's key of `title` listed

The page will update to display the information retrieved from the external API by the time setShows changes the variable of shows at the end of the useEffect() callback, which also causes our component App to give us a <p> element for each object in shows.

For a POST request, we need to set a separate handler function to change the state in accordance to the POST request being properly processed in order to reflect the new data added to the API. The function for fetching the POST request should be assigned to the onSubmit handler for the form of the information being added to the API. For example, lets say the AddShowForm is a child of App.

function App(){
//other code from earlier is above
function handleAddShow(addedShow){
setShows([...shows , addedShow])
}

return (  <div> <section> <AddShowForm onAddShow={handleAddShow}/> </section>
<section> {allShowTitles} </section> 
</div>  );
}
-----------
function AddShowForm({onAddShow}){
const [form, setForm] = useState("");

function handleChangeForm(e){
setForm(e.target.value)
}

function handleSubmit(e){
e.preventDefault;
fetch(`www.someapiurl.com/key`, {
method: "POST",
headers: {
"Content-Type": "application/json"},
body: JSON.stringify({ title : form , likes : 0})})
.then(resp => resp.json())
.then(addedShow => onAddShow(addedShow))
}
//the contents of body undergoing .stringify should match the key & value formatting of the individual objects in the api
//the data in the second .then is the object that was added to the api at the end of the POST request 

return (<form> <input type="text" value={form} onChange={handleChangeForm} name="title" /> 
<input type="submit" onSubmit={handleSubmit} /> </form>)
}

The function handleAddShow is located on the same component as the state variable shows and is passed down as a prop onAddShow to the child component AddShowForm where the form for making the POST request is set up. Here, we have a callback function handleSubmit that activates when the form is submitted which triggers the POST request. The response back is the object that we added to the API, which we can then use as the argument for invoking onAddShow, which is handleAddShow in App. Inside handleAddShow the setter function setShows sets the state variable in the form of an array of objects, here we use the spread operator ... on shows to pull the objects of what we already have and after ...shows is the new object obtained back from the fetch request. The state updates to reflect the change in the API and the page updates with the information of the new show we added.

PATCH requests handled in React are similar to POST requests but with the added detail of pointing to the proper object in the API, usually by id. As an example we can use a button to add likes to a show.

function App(){
//other code from earlier is above
function handleEditShow(changedShow){
const updatedShows = shows.map(show => {
if(show.id===changedShow.id){return changedShow}
return show
})
setShows(updatedShows)
}

const allShowTitles =  shows.map( show =>{

function likeClick(){
fetch(`www.someapiurl.com/key/${show.id}`, {
method: "PATCH",
headers: {
"Content-Type":"application/json",},
body: JSON.stringify({likes: show.likes + 1})
})
.then(resp=>resp.json())
.then(changedShow => handleEditShow(changedShow))
};

return ( <p key={show.id} > {show.title} Likes: {show.likes} <button onClick={likeClick}> Like! </button>  </p> ) }) 

return (  <div>
<section> {allShowTitles} </section> 
</div>  );
}

Here we added a button and likeClick function in the .map method to each show displayed that causes a PATCH request when clicked. Each button has a different fetch request url because we interpolated every individual show id, ensuring we have the correct object to be changed. Similar to the POST request, we end the fetch request by putting the returned data changedShow as an argument in handleEditShow where we use .map on shows to create updatedShows. All unupdated shows are returned by .map while changedShow with the matching id in our conditional is returned instead of the original show with the corresponding id. updatedShows is then passed into setShows which changes the state and causes the page to update with the Likes of the show attached to the clicked button increasing by 1.

Finally, a DELETE fetch request is similar to PATCH, also with a small change.

function App(){
//other code from earlier is above
function handleDeleteShow(deletedShow){
const updatedShows = shows.filter(show => show.id!==deletedShow.id);
setShows(updatedShows)
}

const allShowTitles =  shows.map( show =>{

function deleteClick(){
fetch(`www.someapiurl.com/key/${show.id}`, {
method: "DELETE" })
.then(resp=>resp.json())
.then(handleDeleteShow(show))
};
//there is no data returned at the second .then, so we pass the original object we used to make the request into handleDeleteShow

return ( <p key={show.id} > {show.title} Likes: {show.likes} <button onClick={deleteClick}> Delete? </button>  </p> ) }) 

return (  <div>
<section> {allShowTitles} </section> 
</div>  );
}

We add a button to each show with an onClick of deleteClick, using interpolation to give each show a unique url for the DELETE request. After the fetch, the show deleted from the API is passed into handleDeleteShow and from there .filter is used on shows to create the updatedShows variable. .filter removes the show with the associated deletedShow id from the array, and updatedShows is passed into setShows to change the state causing the page to update with the deleted show object being removed from display. Fetch requests in React makes pages more responsive allowing us to reflect server side changes in our client side pages and still works the same as with JavaScript.

Resources

Using the State Hook (https://reactjs.org/docs/hooks-state.html)
Using the Effect Hook (https://reactjs.org/docs/hooks-effect.html)
Flatiron School (https://flatironschool.com/)

JavaScript's "This" Keyword Simple Intro

Brandon C — Thu, 20 Oct 2022 01:27:03 +0000

For JavaScript, this as part of a function is a tricky keyword because it behaves differently due to the implicit context of the function being called. As part of an object, a short answer for describing this is that its a keyword in a function that uses the object that the function is contained in as its value. With objects containing functions as properties, these functions are methods of the object and when executed use the object as its execution context. As an example, say we have an object called obje and one of the keys of obje is num with a value of "123" while the second key is str with 'abc' and the third is a function called func whose value is a function that contains console.log(this).

const obje = {
num: 123,
str: 'abc',
func: function(){
console.log(this)
}}

When you call obje.func with () , what results is the console logs the contents of obje in its entirety.

obje.func()
//{ num: 123, str:'abc', func: [Function: func] }

With the example provided, an easy way to describe this is that its value is typically the containing object to the left of the method being called. In the global context when a function containing this is called, the value of this will be the global object which in browsers is also usually called the window.

console.log(this)
Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}

The window contains all the things like functions, variables, and objects that the user has access to both visible such as declared by the user and provided from behind the scenes such as built in JavaScript methods. To prevent this from using the global object as its value, we can use use strict to change its value to undefined in a function.

function whatsThisHere(){
  console.log(this)
};
whatsThisHere()
//<ref *1> Object [global] {
//global: [Circular *1],...

function whatsThisHere(){
  'use strict'
  console.log(this)
};
whatsThisHere()
//undefined
//undefined

There are three methods commonly used for functions utilizing this which are call , apply and bind . These methods are useful because ordinarily when functions using this are called in the global context or a context that doesn't use the containing object, the value of this no longer points to the object the function was originally in and usually results in an error when the function is executed.

const obje = {
num: 123,
str: 'abc',
func: function(key, key2){
return `Here is ${this[key]} and ${this[key2]}`};
}}
obje.func('num', 'str')
//'Here is 123 and abc'
const globFunc = obje.func
globFunc('num', 'str')
//'Here is undefined and undefined'

const obje = {
num: 123,
str: 'abc',
nestFunc: {
  innerFunc: function(key, key2){
return `Here is ${this[key]} and ${this[key2]}`}
  }
};
obje.nestFunc.innerFunc('num','str')
//'Here is undefined and undefined'

By using the three methods, we can explicitly set the value of this but they can also be used to help abstract functions that are already not part of an object.

function example(){return this}
example.call(obje)
//or
example.apply(obje)
//{ num: 123, str: 'abc', func: [Function: func] }

call can be used to execute a function containing this with the argument parameters allowing the object value of this to be set as the first argument in call and the rest of the function arguments to be passed after the first argument.

const obje = {
num: 123,
str: 'abc',
};
const globFunc = function(key, key2){
return `Here is ${this[key]} and ${this[key2]}`};

const globNum = 'num';
const globStr = 'str';
globFunc.call(obje, globNum, globStr)
//or
globFunc.call(obje, 'num', 'str')
//'Here is 123 and abc'

apply works like call with the main difference being that the arguments for the function parameters after setting this is provided as an array instead of separate arguments being written individually.

const exArray = ['num','str']
globFunc.apply(obje, exArray)
//or 
globFunc.apply(obje, ['num','str'])
//'Here is 123 and abc'

call and apply are similar in that they execute the the function immediately with a set parameter for this and additional arguments are passed as part of the function. The bind method can be used to set the context object for this where the object is passed as an argument, but behaves differently.

bind is used for assigning this a value though a function expression declaration to create a separate function with a set object 'bound' to the function. There's no need to add additional arguments for using bind other than the object unless you want to have an argument permanently attached to the new function with the object. The strength of bind allows us to create a copy of the function with this bound to the object value chosen, while adding additional arguments as with call and apply will become the default argument and it can't be changed later. Unlike call and apply, bind isn't executed immediately.

const obje = {
num: 123,
str: 'abc',
func: function(key){
return `Here is ${this[key]}`};
}}
const bindFunc = obje.func.bind(obje);
bindFunc('num')
//'Here is 123'
bindFunc('str')
//'Here is abc'

const bindFuncWithArg = obje.func.bind(obje, 'num')
bindFuncWithArg('str')
//'Here is 123'
bindFuncWithArg()
//'Here is 123'

In our assignments in Flatiron, we learned about the "lost context bug", which occurs when this inside a function loses its context and it can be due to being a nested function that does not share the same context as the object being referenced.

const obje = {
  fruitColors: {
    apple: "red",
    banana: 'yellow',
    orange: "orange",
  },
  fruits: ['apple','banana','orange'],
};

function whatColorFruit(fruit){
  console.log(`The ${fruit} is ${this.fruitColors[fruit]}`)
};
whatColorFruit.call(obje, 'apple')
//The apple is red

function whatColorAll(){
  const whatColor = function(fruit){
    console.log(`The ${fruit} is ${this.fruitColors[fruit]}`)};
  this.fruits.forEach(whatColor);
};
whatColorAll.call(obje)
//TypeError: Cannot read properties of undefined (reading 'apple')

There are different ways to deal with the lost context situation, one technique to remedy this bug is to use bind to explicitly set the context of this on the nested function to be used for the forEach method.

function whatColorAll(){
  const whatColor = function(fruit){
  console.log(`The ${fruit} is ${this.fruitColors[fruit]}`)
}.bind(this);
  this.fruits.forEach(whatColor);
};
whatColorAll.call(obje)
//The apple is red
//The banana is yellow
//The orange is orange

function whatColor(fruit){
    console.log(`The ${fruit} is ${this.fruitColors[fruit]}`)};
function whatColorAll(){
  const bindColor = whatColor.bind(this)
  this.fruits.forEach(bindColor);
};
whatColorAll.call(obje)
//The apple is red
//The banana is yellow
//The orange is orange

Here we use call to set the value of this to obje, and bind creates a new function with the value of this set to obje(taken from call) so that the value of this doesn't get lost when put into the forEach method.

Another way is to manually set the context by saving the value of this to a variable in the outer scope and use that variable in the nested function instead of this so we can point to the object being used without losing the value of this in the nested function context.

function whatColorAll(){
  const self = this;
  const whatColor = function(fruit){
    console.log(`The ${fruit} is ${self.fruitColors[fruit]}`)};
  this.fruits.forEach(whatColor);
};
whatColorAll.call(obje)
//The apple is red
//The banana is yellow
//The orange is orange

A third simple solution is to use an arrow function in the nested function instead of a function expression since arrow functions use the context of the parent function instead of creating another context. This means we don't have to manually set the value of this like with the other two options.

function whatColorAll(){
  const whatColor = fruit => {
    console.log(`The ${fruit} is ${this.fruitColors[fruit]}`)};
  this.fruits.forEach(whatColor);
};
whatColorAll.call(obje)
//The apple is red
//The banana is yellow
//The orange is orange

Conclusion

The keyword this is a little strange in the way it behaves, especially since it has the potential to be something different based on the context of how the function is called. One way to keep track of its value is simply to console.log the value of this to see what object is being used.

function whatsThisEach(){
  const whatsThis = function(fruit){
    console.log(this)
    };
  this.fruits.forEach(whatsThis);
};
whatsThisEach.call(obje)
//<ref *1> Object [global] {
//global: [Circular *1],

Here we see that the value of this is the global object, which helps explain why it didn't work earlier if we didn't set the value of this or use the arrow function.

function whatsThisEach(){
  const whatsThis = fruit => {
    console.log(this)
    };
  this.fruits.forEach(whatsThis);
};
 whatsThisEach.call(obje)
//{fruitColors: { apple: 'red', banana: 'yellow', orange: 'orange'}, fruits: [ 'apple', 'banana', 'orange' ]}
//{fruitColors: { apple: 'red', banana: 'yellow', orange: 'orange' }, fruits: [ 'apple', 'banana', 'orange' ]}
//{fruitColors: { apple: 'red', banana: 'yellow', orange: 'orange' }, fruits: [ 'apple', 'banana', 'orange' ]}

Having the knowledge of how it behaves and how we can use call apply or bind to help set the value of this allows us to utilize a tool that helps abstract functions by make them more applicable for working with different objects across different execution contexts.

Resources

this - JavaScript | MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)
Function.prototype.call() - JavaScript | MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
Function.prototype.apply() - JavaScript | MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
Function.prototype.bind() - JavaScript | MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
Flatiron School (https://flatironschool.com/)