DEV Community: JPStupfel

Build Google Maps Search Component in React (Part Two)

JPStupfel — Thu, 08 Sep 2022 18:29:43 +0000

In the previous post we left off with a fully functioning google map in our react application. In case you missed that one, here is a link build-google-maps-search-component-in-react-part-one. Make sure to work through Part One as we will be utilizing the components built during that blog.

In this post we are going to build a search bar that can search for an address or location and recenter our view on that location within the map component we created earlier.

Install the DOTENV Gem.

Install DOTENV by adding the following code to your gem file: gem 'dotenv-rails'

Then run bundle install in your terminal. This gem will be needed when ascribing our API key to an environment file in our Ruby backend.

Create a Google Maps Geocoding API Key.

Navigate to The Google Maps API Homepage, sign in and select the project you created in the last blog post linked above. After that, click on Credentials, and at the top of the screen select "create credentials".

Next, click on the new API key to see the options for that key. Under the options for API restrictions, opt to "restrict key" and select from the drop down menu only the Geocoding API.

Once that is done, accept the options you have specified and navigate to the "Quotas" tab on the left sidebar. Select 'Geocoding API' from the drop down menu at the top and place a restriction on every type of call possible from that API. Personally, I set my limit to 500 calls per day and had no trouble staying below this during development. As long as your quotas are below the free credit Google provides, you should be safe from charge. Please keep in mind that I am no expert in API security. I am merely sharing the steps I took. Google has extensive documentation about other security features you may implement that I won't cover in this blog.

Conceal Your New API KEY as an Environment Variable

If you remember from our last post, when you call your API in your React App, even if that API is hidden in an environment file, anyone can grab your API key by looking at your source code. Unlike in the previous post where Google Maps JavaScript API requires that you call the API in the front-end of the application, when dealing with the Geocoding API you actually need to make your API call from the server-side in order for your key to remain safe. This is because Google does not allow you to restrict the Geocoding API to HTTP referrers as we did for the Google Maps JavaScript API key. As such, we will need to make any call to our Geocoding API via our Rails back-end and then serve that information to our client-side React Application. That being said, we definitely do not want to push our secret API key to GitHub. So let's go ahead and make a .env file where we can hide our API on our Rails -back-end. This process is similar to the protocol explored in Part One of this series, except that now we are creating everything in our Rails App.

Create a file in your Rails root directory called ".env".

In that file, write API_KEY=Adksdafsdihaposafsdsafdsdkdfi12343;hasiodfho4 except use your own special API key.

Then, to test that this worked, open your Rails console by typing rails c in your terminal window. Then, in the console type ENV['API_KEY'] and hit ENTER. Your secret API Key should be returned.

Go ahead and add that .env file to our Rails App's .gitignore file by adding .env to the last line in '/.gitignore'.

Now you can call that API key from anywhere in your Rails App and it will never be pushed to GitHub.

If you remember from the Part One, we will have to declare the environment variable directly in our deployment server as well. For example, if using Heroku, in the command line, cd into your rails app directory and run heroku config:set API_KEY= asdfasfinalkdsfasdfsdi2513453. This essentially accomplishes the same thing as the .env file, but you are stating the value of that environment variable directly in Heroku.

Call the API from your Rails Controller

Remember that we want to make our actual API call from within our rails back-end to avoid React including our API key in the html it compiles when our app goes live where hackers could easily steal it. The idea here is to make our own fetch request from our front-end to our back-end. That request will look very similar to the request we will ultimately send to the Google Maps Geocoding API. The only difference will be that we will not be including the API key in the params of this initial front-end to back-end request. Once our back-end receives the request, we will take the params from our front-end, in this case an address or location, and make the official Google Geocoding API request from our rails controller and include our API Key.

Create a controller

In your terminal, run rails g controller geocoding. This will create a controller where we will handle the logic for this request.

Then, within the newly created './controllers/geocoding_controller.rb' let's add a private method that handles the Google Maps Geocoding API call:

require 'uri'
require 'net/http'

class GeocodingController < ApplicationController

    private

    def getCoords address
        uri = URI("https://maps.googleapis.com/maps/api/geocode/json?address='#{address}'&key=#{ENV['API_KEY']}")
        res = Net::HTTP.get_response(uri)
        return JSON(res.body)['results'][0]['geometry']['location']
    end
end

Let's look at what this code is doing. We are creating a private method that accepts an address as an argument. Then we are making use of the ruby URI module to make our fetch request to google. Note we have to require both the 'uri' and 'net/http' in the top line of our controller. Documentation for the ruby URI module can be found here. Also notice that we are using string interpolation to include both the address argument and our API_KEY environment variable in the url of the fetch request such that both will be passed as params to the Google Maps geocoding API.

Next we need to add the actual controller method we will reference in our routes file. Let's add it above the private methods in our './controllers/geocoding_controller.rb' file:

require 'uri'
require 'net/http'

class GeocodingController < ApplicationController

    def getAddress
        location = getCoords(params['address'])
        render json: location, status: 200
     end

    private
    def getCoords address
        uri = URI("https://maps.googleapis.com/maps/api/geocode/json?address='#{address}'&key=#{ENV['API_KEY']}")
        res = Net::HTTP.get_response(uri)
        return JSON(res.body)['results'][0]['geometry']['location']
    end
end

The logic here is pretty self explanatory. We will call our private getCoords method using params['address'] from our front-end.

Create a Route for the Client-Side Request

One more step to get the logic for this request set up on the back-end is to create a route for the API call in our routes.rb file.

Let's modify our './config/routes.rb' file to look like this:

Rails.application.routes.draw do

  # Defines the root path route ("/")
  # root "articles#index"

  get "/geocoding/:address", to: 'geocoding#getAddress'

end

As you can see, when our back-end receives a get request at the path "/geocoding/:address" rails will return the properties of the method "getAddress" from our geocoding controller.

Let's go ahead and test this out. In your terminal run rails s -p 4000 to start your server on port 4000 and navigate to 'http://localhost:4000/'. You should see the typical rails landing page. Next, let's try to navigate to 'http://localhost:4000/geocoding/Barcelona'. You should see returned on the page in json format the latitude and longitude of Barcelona, Spain.

Note that google handles the search interpolation here, so the google will make its best guess on which coordinates to return based on your search parameters. If you navigate to 'http://localhost:4000/geocoding/Madrid' google will give you the coordinates for Madrid, Spain, not Madrid, New Mexico, United States.

Set up cors to allow calls from react app.

This is a pretty standard problem faced when building a react front-end and rails back-end. Basically, rails won't let you communicate from another server (e.g. react running on localhost:3000 and rails on localhost:4000) because of the default cors settings. To disable this we are going to make use of a gem called "rack-cors". Add gem 'rack-cors', :require => 'rack/cors' to your gem file. Close your rails server. Run bundle install.

Next, in your ./config/application.rb file add the following code to run within the Application class

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end

Then restart your server and we should be ready to make request from our front-end to our back-end.

Fetch the coordinates from your React App.

As mentioned before, this is Part Two of a two part series. In Part One of this series we built a basic google map component using the Google Map Javascript API. We will now be adding a search bar to that component based on this back-end logic we created above.

Let's make two changes to our './client/src/components/MapContainer.jsx' file. Firstly, let's create a constant called "mapCenter" to be a piece of stateful logic within react that will tell the map where to center its window. This includes three steps: 1. import the useState hook in the top line of your code. 2. create the stateful variable called mapCenter, 3. set the "Center" prop on your GoogleMap component to mapCenter.

import React, {useState} from 'react';

//import the needed components from the Google Maps API
import { GoogleMap, LoadScript} from '@react-google-maps/api';

//refer the map API Key from the env file
const API_KEY = process.env.REACT_APP_API_KEY;

//Create the React Component Function
function MapContainer(){


//These are default map styles so your map is visible
const mapStyles = {        
    height: "50vh",
    width: "100%"}; 


//Stateful logic for map center set to a default lat and lgn
const [mapCenter, setMapCenter] = useState({lat: 35, lng: -105})


  return (
     <LoadScript
            googleMapsApiKey= {API_KEY} >
        <GoogleMap
          mapContainerStyle={mapStyles}
          zoom={13}
          center={mapCenter}
        >
         </GoogleMap>
     </LoadScript>
  )
}
export default MapContainer;

Next up, let's place a controlled form in our MapContainer component that will serve as our search bar. Note that because this is a controlled form we will need another piece of stateful logic which we will call 'address', and we will set the input tag to have an onChange event of updating the state variable "address".

import React, {useState} from 'react';

//import the needed components from the Google Maps API
import { GoogleMap, LoadScript} from '@react-google-maps/api';

//refer the map API Key from the env file
const API_KEY = process.env.REACT_APP_API_KEY;

//Create the React Component Function
function MapContainer(){


//These are default map styles so your map is visible
const mapStyles = {        
    height: "50vh",
    width: "100%"}; 


//Stateful logic for map center set to a default lat and lgn
const [mapCenter, setMapCenter] = useState({lat: 35, lng: -105})

//Stateful logic for the search parameter
const [address, setAddress] = useState('')

  return (

     <LoadScript
            googleMapsApiKey= {API_KEY} >
              <form>
                <input
                    type="text"
                    placeholder="Customized your placeholder"
                    value={address}
                    onChange={(event)=>setAddress(event.target.value)}
                />
              </form>
              <GoogleMap
                mapContainerStyle={mapStyles}
                zoom={13}
                center={mapCenter}
              >
              </GoogleMap>

     </LoadScript>
  )
}
export default MapContainer;

Finally, let's add our helper functions that will make the actual API call when the form is submitted. This requires several steps: 1. Define a helper function as 'getCoordinates' that makes the API call and sets our mapCenter state variable to the returned coordinates. 2. Define a helper function "onSubmit" that will handle the submit event on our form. 3. Make sure we prevent default behavior when we submit the form. 4. Make sure we are calling getCoordinates when we submit the form.

import React, {useState} from 'react';

//import the needed components from the Google Maps API
import { GoogleMap, LoadScript} from '@react-google-maps/api';

//refer the map API Key from the env file
const API_KEY = process.env.REACT_APP_API_KEY;

//Create the React Component Function
function MapContainer(){


//These are default map styles so your map is visible
const mapStyles = {        
    height: "50vh",
    width: "100%"}; 


//Stateful logic for map center set to a default lat and lgn
const [mapCenter, setMapCenter] = useState({lat: 35, lng: -105})

//Stateful logic for the search parameter
const [address, setAddress] = useState('')

  //takes address and sets coords to coordinates
  //be sure to specify the port where your rails server is running
function getCoordinates(address){
    fetch(`http://localhost:4000/geocoding/${address}`)
      .then(response => response.json())
      .then(data =>{ setMapCenter(data);
      })  
  }

  function handleSubmit(event){
    event.preventDefault()
    getCoordinates(event.target.firstChild.value)

  }

  return (

     <LoadScript
            googleMapsApiKey= {API_KEY} >
              <form
              onSubmit={handleSubmit}>
                <input
                    type="text"
                    placeholder="Customized your placeholder"
                    value={address}
                    onChange={(event)=>setAddress(event.target.value)}
                />
              </form>
              <GoogleMap
                mapContainerStyle={mapStyles}
                zoom={13}
                center={mapCenter}
              >
              </GoogleMap>

     </LoadScript>
  )
}
export default MapContainer;

Now, if we look at our React App, we can type "Barcelona" in our input field, hit enter, and our map re-centers over Barcelona Spain.

That just about covers it for this section. If you enjoyed this series please like and share and please checkout some of the other blogs I've done. Happy coding!

Build Google Maps Search Component in React (Part One)

JPStupfel — Wed, 07 Sep 2022 19:02:09 +0000

This is the first of a two part series on how to build a google maps search component.

First you are going to need the google maps package for react:

Install Dependencies

#add these files to your package.json file within the react client folder.
  "@googlemaps/react-wrapper": "^1.1.35",
  "@react-google-maps/api": "^2.12.1",
   "google-maps-react": "^2.0.6",

Create Google Map API Key

Next, you are going to need a few different google maps API keys throughout this process. These are codes that google provides you when you create a paid google account that allow you to access features from the google maps API. Do not worry, you won't necessarily be charged unless you approach production levels. Google only charges you fractions of dollar for every API request and provides its users with $200 monthly credit. So as long as your site doesn't make too many requests, you won't be charged. In your browser, navigate to https://developers.google.com/ and follow the prompts to set up a paid account.

Then, you can follow the prompts on this page https://developers.google.com/maps/documentation/javascript/get-api-key to get your API key. You will need to create a "project" and select which API key you would like to use. In this case, we are going to start with the the Google Maps JavaScript API.

Navigate to The Google Maps API Homepage and click on Credentials. At the top of the screen select "create credentials". No need to copy this key yet as we are going to add some restriction before we embed the key in our code.

Next, click on the new API key to see the options for that key. Unlike some of the other API keys we will use in phase two of this project, there is really no way to use the Google Maps JavaScript API in react without the key being made public to anyone viewing the page. That's ok. Google gives you special restriction options you can implement to protect your key from being overused in the wrong hands. Later on, we are going to look at how to conceal a different API key that google provides, but for now, let's adjust the configuration of our API restrictions for this key.

First off, under APPLICATION RESTRICTIONS select HTTP referrers (web sites) and specify the domain where you will be making your requests. If you are in development mode, this will likely be "http://localhost:3000/" or some similar domain. However, when you deploy your app you will need to add the new domain for the API requests to still work. If you will be calling the api from multiple client-side routes within your project, set the domain here to the domain name followed by an asterisk symbol, such as "http://localhost:3000/*".

Next up, you are going to want to select "Restrict Key" from "API Restrictions" and add only the Maps JavaScript API from the drop down list. This prevents your key from being used for other API services that you may not have put quotas on.

Finally, we are going to accept these restrictions, and in the menu bar on the left where you earlier navigated to 'Credentials', navigate now instead to "Quotas". Select 'Maps JavaScript API' from the drop down menu at the top and place a restriction on every type of call possible from that API. Personally, I set my limit to 500 calls per day and had no trouble staying below this during development. As long as your quotas are below the free credit Google provides, you should be safe. Please keep in mind that I am no expert in API security. I am merely sharing the steps I took. Google has extensive documentation about other security features you may implement that I won't cover in this blog.

Build First Map Component in React

Now that we have the key set up, let's build our first map component. Add a file called 'MapContainer.js' to your components' directory and add the following code:

import React from 'react';

//import the needed components from the Google Maps API
import { GoogleMap, LoadScript} from '@react-google-maps/api';

//Create the React Component Function
function MapContainer(){

//These are default map styles so your map is visible
const mapStyles = {        
    height: "50vh",
    width: "100%"}; 

//default latitude and longitude where the map will display
const defaultCenter = {
    lat: 35,
    lng: -105
  }


  return (

//the LoadScript hook is needed here to access the Google Maps Javascript API. This basically tells react to build a script component into the final html on the page, which is how google verifies your API key.
     <LoadScript
            googleMapsApiKey='Your_API_KEY_HERE'>
        <GoogleMap
          mapContainerStyle={mapStyles}
          zoom={13}
          center={defaultCenter}
        >
         </GoogleMap>

     </LoadScript>
  )
}
export default MapContainer;

The important thing here is that you replace the text 'Your_API_KEY_HERE' with your actual API key you obtained in the previous segment.

Then, in the App.js component, we need to include our new MapContainer.js component like this:

import logo from './logo.svg';
import './App.css';
import MapContainer from './components/MapContainer';

function App() {
  return (
    <div className="App">
      <MapContainer />
    </div>
  );
}

export default App;

This way we should be able to see the map in the browser.

Don't push your key to GITHUB.

In your browser window, right click and select 'view source'. Within the resulting HTML, go ahead and click on src="/static/js/bundle.js". Then hit control-f and search for "googleMapsApiKey". Right next to that phrase in this html page, in plain, readable string format, will be your API key. As you can see, anyone viewing this site will be able to snatch your secret API key. In the case of the Google Maps Javascript API this isn't actually a problem, since we have put into effect controls to restrict the usage of this key on the google site. Just as anyone can obtain your key from the html, the same would be true if we pushed these files to GITHUB as is. Anyone who cloned your project would have access to your API key. This is not a good thing. While we have controls in place to prevent large scale abuse, GITHUB is notorious for being plagued by roving web scrapers on the hunt for carelessly attached API KEYS. Pushing your API in the text of your code is like leaving a rib-eye steak on your porch in grizzly bear country...Someone is bound to take the bait.

Because of this, we are going to walk through the process of hiding our Google Maps javascript API key so that it won't be pushed onto GITHUB. It will still be copiable from your deployed application, but that is not quite as dangerous as having it on GITHUB. Sadly, we have no choice in this case because Google Maps requires the script to be called from the html in order to view the map. Later on, we will see how to conceal an API key so that it is not accessible in on-site HTML either, but for our Google Map JavaScript API key we will only hide that key from being pushed to GITHUB.

Start by making a file in your client directory called ".env". These .env files let you customize your individual working environment variables. In order to make use of this you will need at least react-scripts@0.2.3 or higher in your react app's dependencies. This should be automatically handled when you use npx create-react-app.

In your .env file, you must start the name of the API environment variable you wish to use with the words 'REACT-APP'. For example, you could add the following code to your .env file:REACT_APP_API_KEY= AIzaSyBWgz_QMa3Awqe1TpfueOf11xIBa7Eo

Then, in order to call your environment variable in your map, add the following code to your MapContainer.jsx file:

const API_KEY = process.env.REACT_APP_API_KEY;

This is telling javascript to retrieve environment variables from the local .env file. Your entire component should look like this:

import React from 'react';

//import the needed components from the Google Maps API
import { GoogleMap, LoadScript} from '@react-google-maps/api';

//refer the map API Key from the env file
const API_KEY = process.env.REACT_APP_API_KEY;

//Create the React Component Function
function MapContainer(){

//These are default map styles so your map is visible
const mapStyles = {        
    height: "50vh",
    width: "100%"}; 

//default latitude and longitude where the map will display
const defaultCenter = {
    lat: 35,
    lng: -105
  }


  return (

//the LoadScript hook is needed here to access google maps. This basically tells react to build a script component into the final html on the page, which is how google verifies your API key.
     <LoadScript
            googleMapsApiKey= {API_KEY} >
        <GoogleMap
          mapContainerStyle={mapStyles}
          zoom={13}
          center={defaultCenter}
        >
         </GoogleMap>

     </LoadScript>
  )
}
export default MapContainer;

Upon completion of this step you may need to restart your react server to see the map updated. The final step in this segment is to include the .env file in your .gitignore file within your client folder.

In your client directory's .gitignore file, simply add: .env to a new line and voila, your API will no longer be pushed up to GitHub.

Here is one potential catch, however. Say you are deploying your code. For this example, let's assume you are using the third party site Heroku. In this case, since you are not pushing your .env file to heroku, you will need to specify your environment variable in heroku. In the command line, cd into your rails app directory and run heroku config:set REACT_APP_API_KEY= AIzaSyBWgz_Qasdfsdfdse1TpfueOf11xIBa7Eo. This essentially accomplishes the same thing as the .env file, but you are stating the value of that environment variable directly in Heroku.

Next up, continue on to Part Two of the Blog Post to find out how to build the search feature: Here

Joins Table for Task Relationships

JPStupfel — Thu, 18 Aug 2022 20:43:00 +0000

Many are familiar with ActiveRecord's built-in object relational mapping methods, as well as the way ActiveRecord lets you create one-to-many and many-to-many relationships with simple macros (:has_may, :belongs_to, and has_many, through:). However, there are many ways in which these built-in macros fall short. Say, for example, you were constructing a project management application that had three tables, projects, users and tasks. Simple enough. Tasks often times need to be done in a certain order. For example, say you have three tasks:

Fill the car up with Gas.
Google places to buy a birthday cake.
Drive to the bakery and purchase a cake.

It would be necessary to do these tasks in a specific order. The question is how to map this relationship where some tasks are parents of some tasks and children of others in ActiveRecord. That is what we will explore in this blog.

We start by generating our models. Let's go ahead and create tables for projects, users and tasks:

rails g resource User username, bio, age, image

rails g resource Project name budget:integer duedate:date

rails g resource Task name user_id:integer project_id:integer

rails db:migrate

Ok, now that we have those tables generated, let's go ahead and map the relationships between the three in the way you are probably familiar with. Let's make a one-to-many relationship between users and tasks, and between projects and tasks where a user has many tasks and a project also has many tasks. Secondly, let's make it such that a project also has many users through tasks and a user has many projects through tasks.

#in app/models/user.rb

class User < ApplicationRecord
    has_many :tasks
    has_many :projects, through: :tasks
end

#in app/models/project.rb

class Project < ApplicationRecord
    has_many :tasks
    has_many :users, through: :tasks
end

#in app/models/task.rb
class Task < ApplicationRecord
    belongs_to :project
    belongs_to :user
end

This will result in a database schema that looks like this:

This is great, but we need some data to view so we can start checking if our data relationships make sense.

**if you haven't used faker before, you will need to install the gem, run gem install faker in your command line.

Now let's create some seed data for all three tables. In your db/seed.rb file, let's write the following algorithms:

#source 10 random users using faker.
10.times do 
        User.create(
        username: Faker::Games::StreetFighter.character,
        bio: "Quote: #{Faker::Games::StreetFighter.quote}. Birthplace: #{Faker::Games::StreetFighter.stage}",
        image: Faker::Avatar.image,
        age: rand(100)
    end

#source 10 random projects using faker.
10.times do 
    Project.create(
        name: Faker::Games::Pokemon.move,
        details: Faker::Quotes::Shakespeare.hamlet_quote,
        duedate: Date.today+rand(10000),
        budget: rand(10000000))
end

#source 3 random tasks for every user in every project using faker.
# each user should have 3 tasks in each project. 10 users * 10 projects * 3 tasks = 300 tasks.

Project.all.each do |project|
    User.all.each do |user|

        (1..3).each do |e|
            Task.create(
                name: "task number #{e}",
                user_id: user.id,
                project_id: project.id
            )
        end
    end
end

This is great, but remember, we also want children and parent relationships mapped for the tasks table as well. Let's go ahead and create a new table by running rails g resource Sequence parent_id child_id

We know we want to tell ActiveRecord that every row in the sequence table has a parent_id and a child_id, both of which are foreign keys associated with instances of the Task class.

Looking back to our "buying a cake" analogy:

Fill the car up with Gas.
Google places to buy a birthday cake.
Drive to the bakery and purchase a cake.

We would want to map two different sequence relationships:

Sequence 1 | parent_task: Fill the car up with Gas | child_task: Google places to buy a birthday cake.

Sequence 2 | parent_task: Google places to buy a birthday cake | child_task: Drive to the bakery and purchase a cake.

If you read the documentation for the ActiveRecord association macros :belongs_to and :has_many at guides.rubyonrails.org you will see that we can specify options for each macro. Namely, we can overwrite the typical naming conventions.

Now, overwriting naming conventions is usually not a good idea in ActiveRecord. But consider our dilemma. We want our sequence table to belong to the tasks table for both the parent_id foreign key AND the child_id foreign key. Using the naming conventions we would need two foreign keys with the same name...which ActiveRecord will not understand. Thankfully, we can specify a foreign key we would like to use and the class where ActiveRecord should look for that foreign key.

Let's update the sequence model to look like this:

class Sequence < ApplicationRecord
    belongs_to :parent, :class_name => 'Task'
    belongs_to :child, :class_name => 'Task'
end

and the task model to look like this:

class Task < ApplicationRecord
    belongs_to :project
    belongs_to :user


    has_many :child_sequences, :class_name => 'Sequence', :foreign_key => 'parent_id'
    has_many :parent_sequences, :class_name => 'Sequence', :foreign_key => 'child_id'


end

Here we are telling ActiveRecord that the sequences table has two foreign keys, parent_id and child_id, and that those foreign keys belong to instances of the Task class.

Next we are telling ActiveRecord that tasks has many child_sequences and parent_sequences, and that they live in the Sequence class, and they can be identified through the foreign keys of parent_id and child_id respectively.

This results in a database that looks like this:

Where the role of the sequences table is to map the relationship between different tasks.

This is working so far. However, one of the great features of following ActiveRecord's naming conventions is that it provides you with lots of built in methods that make your life easier. For example, because we followed the naming conventions when defining relationships between users and tasks, we can type User.first.tasks and get a list of all the tasks associated with that user. This, unfortunately, will not work with our sequences table because we broke the ActiveRecord naming convention. For example, we cannot type Task.first.children_sequences because ActiveRecord won't see a unique foreign key for children defined in the sequences table.

That being said, we are going to need to create our own Object Relational Mapping methods to quickly view all the children and parents of a specific task.

Let's update our task.rb to look like this

class Task < ApplicationRecord
    belongs_to :project
    belongs_to :user


    has_many :child_sequences, :class_name => 'Sequence', :foreign_key => 'parent_id'
    has_many :parent_sequences, :class_name => 'Sequence', :foreign_key => 'child_id'

#instance method to return all the children of a task
    def children
        array_of_sequences = self.child_sequences
        array_of_child_tasks = []
        array_of_sequences.each do |e|
           child_task = Task.find_by id: e.child_id
           array_of_child_tasks.push child_task
        end
        array_of_child_tasks
    end

#instance method to return all the parents of a task

    def parents
        array_of_sequences = self.parent_sequences
        array_of_parent_tasks = []
        array_of_sequences.each do |e|
           parent_task = Task.find_by id: e.parent_id
           array_of_parent_tasks.push parent_task
        end
        array_of_parent_tasks
    end

end

Finally, we need to update our seed data to map the relationship between different tasks and store it in our sequences table. If you remember we have 3 tasks for every project. Let's just keep things simple and make each task a child of the task that comes before it. Let's go ahead and update our db/seed.rb to look like this:

# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
#   Character.create(name: 'Luke', movie: movies.first)

10.times do 
        User.create(
        username: Faker::Games::StreetFighter.character,
        bio: "Quote: #{Faker::Games::StreetFighter.quote}. Birthplace: #{Faker::Games::StreetFighter.stage}",
        image: Faker::Avatar.image,
        age: rand(100),
        password: 'fish')
    end


10.times do 
    Project.create(
        name: Faker::Games::Pokemon.move,
        details: Faker::Quotes::Shakespeare.hamlet_quote,
        duedate: Date.today+rand(10000),
        budget: rand(10000000))
end

# each user should have 3 tasks in each project.

Project.all.each do |project|
    User.all.each do |user|
        (1..3).each do |e|
            Task.create(
                name: "task number #{e}",
                user_id: user.id,
                project_id: project.id
            )
        end
    end
end

#for every task, define it as a parent and the next task as a child
Project.all.each do |project|
    project.tasks.each do |task|
        Sequence.create(
                        parent_id: task.id,
                        child_id: task.id + 1
                    )
    end
end

This way, if you open up your rails console and type Task.first.children you get [#<Task id: 965, name: "task number 2", user_id: 202, project_id: 121, created_at: "2022-08-12 19:24:49.070099000 +0000", updated_at: "2022-08-12 19:24:49.070099000 +0000">]``

Alternatively, you can type Task.second.parent you get [#<Task id: 964, name: "task number 1", user_id: 202, project_id: 121, created_at: "2022-08-12 19:24:49.066551000 +0000", updated_at: "2022-08-12 19:24:49.066551000 +0000">]

The reader should note that mapping relationships is a very deep, complex subject and that this blog only scratches the surface. What if we wanted not just the children of each task, but all the grandchildren and great grandchildren as well? My hope here was to provide a cursory introduction to the subject.

Happy coding!

Auto-populate SQL Table Using Active Record

JPStupfel — Fri, 22 Jul 2022 17:09:28 +0000

If you are reading this article then you probably are already familiar with the basics regarding SQL tables and how Active Record automatically maps ruby classes to sql tables. This was my level of understanding when I thought of an interesting challenge. What if you wanted to have a table that automatically populated rows based on the information provided in other SQL tables? How could you go about creating this?

The examples in this article relate to the martial art of Brazilian Jiu Jitsu. For those who are completely unfamiliar with the art, here is a basic run-down: Brazilian Jiu Jitsu is a wrestling art. One fighter wins by placing the other in a position where they either have to "submit" or risk being rendered unconscious or sustaining some injury. When one fighter submits in this way it is known as "tapping out." Brazilian Jiu Jitsu places a very large emphasis on formalized techniques and positions. For example, the most famous position is the "closed guard" where one fighter has the other wrapped in their legs like this:

When in this position, each fighter has numerous "attacks" at their disposal. Consequently, the other fighter has numerous possible "defenses" for each attack. If we were to try to map out all these techniques, we would get a multi-tiered nested data tree that looks something like this:

Where each position has many attacks, and each attack has many defenses.

Now that we understand this basic structure, let's imagine for moment that we are a new Brazilian Jiu Jitsu student struggling to keep track of all the positions and attacks and defenses we are learning. We tried writing it all down in a note book, but then we remembered we are programmers, so this paper and pen format just won't do. Therefore, we need to create an SQL database using Active Record to keep track of what we are learning.

Our Active Record Schema looks something like this:

create_table "attacks", force: :cascade do |t|
    t.string "name"
    t.string "result"
    t.string "notes"
    t.string "image"
    t.integer "position_id"
  end

  create_table "defenses", force: :cascade do |t|
    t.string "name"
    t.string "attack_id"
    t.string "notes"
    t.string "result"
    t.string "stage"
  end

  create_table "positions", force: :cascade do |t|
    t.string "name"
    t.string "notes"
  end

Additionally we have the following three ruby models:

# in Position.rb
class Position < ActiveRecord::Base
    has_many :attacks
end

# in Attack.rb
class Attack < ActiveRecord::Base
    has_many :defense
    belongs_to :position
end

# in Defense.rb
class Defense < ActiveRecord::Base
    belongs_to :attack
end

This is to say we have created 3 SQL tables, one for Positions, Attacks and Defenses. Additionally, we have created a ruby class to model each of these tables.

Ok, great! We can now easily store all of the techniques we are learning. But now let's say we want to study the techniques we are learning and we want the computer to provide us with a possible sequence we can practice. For example, we want the program to tell us, "Start from closed guard, then practice the triangle choke attack and have your opponent defend by hiding his arm behind your leg." When we run through a scenario like this it is called a "sequence." Furthermore, say we didn't want to practice just one sequence, but over the course of time we wanted to practice ALL of the possible sequences.

This is where we return to our earlier challenge. How do we ask ruby to automatically generate a list of all the possible permutations of the techniques we have provided?

Firstly, consider the fact that as we add techniques, the number of potential sequences could get quite large. And in classic fashion, the best way to store large amounts of data is in an SQL table. So we are going to start by creating a new SQL table called "sequences" using Active Record.

(Please note, I have not gone into detail about the set up for Active Record. If you need help getting everything set up check out this article: use-activerecord-in-your-ruby-project

To create a new migration we open the terminal, cd into our project directory and type rake db:create_migration create_sequence_table. Next, in the migration file, we need the following code:

class CreateSequenceTable < ActiveRecord::Migration[6.1]
  def change

    create_table :sequences do |t|
      t.integer  :position_id
      t.integer  :attack_id
      t.integer  :defense_id

    end

  end
end

Our class is inheriting from ActiveRecord::Base. "create_table" is a method that comes along with Active Record. It uses a block parameter |t| and let's you specify as many columns as you like using the syntax t.integer :position_id or t.string :name if your table is going to have a name column. In our case, since we know that there will be many sequences for every position, attack and defense, we have to specify a column with the integer datatype for each and use the naming convention :position_id. This tells ActiveRecord to map the 'id' field from positions, attacks and defenses tables to these columns respectively.

Now that we have that set up, we need to create an Active Record model to correspond with our 'sequences' table. Using Active Record convention, this file must be named "Sequence.rb" and have the following code:

require_relative '../../config/environment.rb'

class Sequence < ActiveRecord::Base
    belongs_to :defense
    belongs_to :position
    belongs_to :attack

end

Next, we need to tell each of the other tables that they "have many" sequences in order for the tables to join.

#in Position.rb
class Position < ActiveRecord::Base
    has_many :attacks
    has_many :sequences
end

#in Attack.rb
class Attack < ActiveRecord::Base
    has_many :defense
    has_many :sequences
    belongs_to :position
end

#in Defense.rb
class Defense < ActiveRecord::Base
    belongs_to :attack
    has_many :sequences
end

Let's take a step back now and remember what exactly it is that we want to do. We want to ask the program to populate the sequences table with all the possible permutations of positions, associated attacks and associated defenses.

Let's go ahead and define a few of these techniques to use in our example.

#create a position called "closed_guard"
Position.create name:"closed_guard"

#create an attack called "triangle_choke" that belongs to closed_guard
Attack.create name: 'triangle_choke', Position.find_by(name: "closed_guard").id

#create a defense called "posture_up" that belongs to the attack "triangle_choke"
Defense.create name: "posture_up", attack_id: Attack.find_by(name:'triangle_choke').id

#create a defense called "hide_arm" that belongs to the attack "triangle_choke"
Defense.create name: "hide_arm", attack_id: Attack.find_by(name:'triangle_choke').id

#create an attack called "omoplata" that belongs to closed_guard
Attack.create name: 'omoplata', Position.find_by(name: "closed_guard").id

#create a defense called "shoulder_roll" that belongs to the attack "omoplata"
Defense.create name: "shoulder_roll", attack_id: Attack.find_by(name:'omoplata').id

#create a defense called "duck_under_leg" that belongs to the attack "omoplata"
Defense.create name: "duck_under_leg", attack_id: Attack.find_by(name:'omoplata').id


#Create another position called "open_guard"
Position.create name:"open_guard"

#create an attack called "scissor-sweep" that belongs to open_guard
Attack.create name: 'scissor-sweep', Position.find_by(name: "open_guard").id

#create a defense called "post_with_arm" that belongs to the attack 'scissor-sweep'
Defense.create name: "post_with_arm", attack_id: Attack.find_by(name:'scissor-sweep').id

#create a defense called "post_with_leg" that belongs to the attack 'scissor-sweep'
Defense.create name: "post_with_leg", attack_id: Attack.find_by(name:'scissor-sweep').id

#create an attack called "over_the_leg_guard_pass" that belongs to open_guard
Attack.create name: 'over_the_leg_guard_pass', Position.find_by(name: "open_guard").id

#create a defense called "shrimp_out" that belongs to the attack 'over_the_leg_guard_pass'
Defense.create name: "shrimp_out", attack_id: Attack.find_by(name:'over_the_leg_guard_pass').id

#create a defense called "pull_closed_guard" that belongs to the attack 'over_the_leg_guard_pass'
Defense.create name: "pull_closed_guard", attack_id: Attack.find_by(name:'over_the_leg_guard_pass').id

This provides us with two positions, each with two attacks, and each of those attacks with two defenses. If we think about all the possible sequences using this data, we would have:

closed_guard > triangle_choke > posture_up
closed_guard > triangle_choke > hide_arm
closed_guard > omoplata > shoulder_roll
closed_guard > omoplata > pull_out_arm
open_guard > scissor-sweep > post_with_arm
open_guard > scissor-sweep > post_with_leg
open_guard > over_the_leg_guard_pass > Shrimp_out
open_guard > over_the_leg_guard_pass > pull_closed_guard

Now the question becomes, how do we get ruby to auto-populate the "sequences" table with the above mentioned sequences? This is where we get to make use of the fact that the Active Record model is really just a ruby class, meaning we can define class methods. Let's define one that looks like this:

require_relative '../../config/environment.rb'

class Sequence < ActiveRecord::Base
    belongs_to :defense
    belongs_to :position
    belongs_to :attack

    def self.generate
        Position.all.each do |position| 
            position.attacks.each do |attack| 
                attack.defense.each do |defense|
                    self.create position_id: position.id, attack_id: attack.id, defense_id: defense.id
                end
            end  
        end
     end
end

We named our class method "generate". We are iterating through each defense, in each attack, in each position, and for every one, we are creating an instance of the Sequence class.

Now if we open our console, run Sequence.generate and checkout our sequences table using Sequence.all, we should see the complete list of all possible sequences.

[#<Sequence:0x0000000110333f18
  id: 13,
  position_id: 33,
  attack_id: 1,
  defense_id: 141>,
 #<Sequence:0x0000000110333e28
  id: 14,
  position_id: 33,
  attack_id: 1,
  defense_id: 142>,
 #<Sequence:0x0000000110333d38
  id: 15,
  position_id: 33,
  attack_id: 2,
  defense_id: 143>,
 #<Sequence:0x0000000110333c70
  id: 16,
  position_id: 33,
  attack_id: 2,
  defense_id: 144>,
 #<Sequence:0x0000000110333ba8
  id: 17,
  position_id: 34,
  attack_id: 3,
  defense_id: 145>,
 #<Sequence:0x0000000110333ae0
  id: 18,
  position_id: 34,
  attack_id: 3,
  defense_id: 146>,
 #<Sequence:0x0000000110333
  position_id: 34,
  attack_id: 3,
  position_id: 34,
  attack_id: 3,
  defense_id: 146>,
 #<Sequence:0x0000000110333a18
  id: 19,
  position_id: 34,
  attack_id: 4,
  defense_id: 147>,
 #<Sequence:0x0000000110333950
  id: 20,
  position_id: 34,
  attack_id: 4,
  defense_id: 148>]

That's great, but we really need this in a format that is easy to read. Since we are going to be reading this data from a server, let's go ahead and build out the English version of this narrative in our application_controller.rb file by specifying a new route called "/sequences".

#when we make a fetch request to "/sequences"
get "/sequences" do

    #have narratives begin as an empty array
    narratives = []

    #for each sequence, build a json object containing a narrative by finding each position, attack and defense using their join key in the sequence table.
    Sequence.all.each do |sequence|
      narrative = {narrative: "Beginning in #{Position.find(sequence.position_id).name} position, one attacks with the #{Attack.find(sequence.attack_id).name} and the other defends with the #{Defense.find(sequence.defense_id).name} defense"}

      #and add that narrative to the narratives array
      narratives.push narrative

    end

    #convert narratives array to json and return it!
  narratives.to_json


  end

This way, when we run our server and make a get request to http://localhost:9292/sequences, we get this:

// 20220720143954
// http://localhost:9292/sequences

[
  {
    "narrative": "Beginning in closed_guard position, one attacks with the triangle_choke and the other defends with the posture_up defense"
  },
  {
    "narrative": "Beginning in closed_guard position, one attacks with the triangle_choke and the other defends with the hide_arm defense"
  },
  {
    "narrative": "Beginning in closed_guard position, one attacks with the omoplata and the other defends with the shoulder_roll defense"
  },
  {F
    "narrative": "Beginning in closed_guard position, one attacks with the omoplata and the other defends with the duck_under_leg defense"
  },
  {
    "narrative": "Beginning in open_guard position, one attacks with the scissor-sweep and the other defends with the post_with_arm defense"
  },
  {
    "narrative": "Beginning in open_guard position, one attacks with the scissor-sweep and the other defends with the post_with_leg defense"
  },
  {
    "narrative": "Beginning in open_guard position, one attacks with the over_the_leg_guard_pass and the other defends with the shrimp_out defense"
  },
  {
    "narrative": "Beginning in open_guard position, one attacks with the over_the_leg_guard_pass and the other defends with the pull_closed_guard defense"
  }
]

Awesome! Here's one issue though. As it is set up now, the sequences table only populates when we run Sequence.generate. What happens if we learn a new defense for the triangle_choke and want to add it? How then would we make sure we also add the sequence that corresponds to that defense?

One way we can do this is to create a new Class method called create_with_sequence. And if we remember, the "create" class method is coming from ActiveRecord::Base. Which means that within "create_with_sequence" we can call self.create. We can also write code that deletes all the entries in the sequence table and then regenerates the table, now with the new Defense we just created included in the sequences. In order to do this, let's modify our Defense.rb model file like this:


require_relative '../../config/environment.rb'

class Defense < ActiveRecord::Base
    belongs_to :attack
    has_many :sequences

    def self.create_with_sequence args
        self.create args

        Sequence.all.each do |sequence|
            sequence.destroy
        end

        Sequence.generate
     end

end

Ok, so now let's create a new defense in the rake console like this:

Defense.create_with_sequence name: "tuck_arm_in_early", attack_id: Attack.find_by(name:'omoplata').id

Now we should see the new sequence showing up in our http://localhost:9292/sequences


    "narrative": "Beginning in closed_guard position, one attacks with the omoplata and the other defends with the tuck_arm_in_early defense"
  },

One cool thing about our data tree is that a new sequence is only defined when we create a new defense, so we only need to add this code in our Defense.rb file.

Let's make a few simple refactors to clean this up a bit. For starters, let's just include the code to completely clear the sequence table before rebuilding it in the Sequence model. Now our Sequence.rb looks like this:

require_relative '../../config/environment.rb'

class Sequence < ActiveRecord::Base
    belongs_to :defense
    belongs_to :position
    belongs_to :attack

    def self.generate

        Sequence.all.each do |sequence|
            sequence.destroy
        end


        Position.all.each do |position| 
            position.attacks.each do |attack| 
                attack.defense.each do |defense|
                    self.create position_id: position.id, attack_id: attack.id, defense_id: defense.id
                end
            end  
        end


     end


end

And our Defense.rb file looks like this:

require_relative '../../config/environment.rb'

class Defense < ActiveRecord::Base
    belongs_to :attack
    has_many :sequences

    def self.create_with_sequence args
        self.create args
        Sequence.generate
     end



end

Ok, so we have achieved what we set out to do, we created a table that automatically populates with narrative sequences using data from three other tables.

Happy coding!

Keys as Props

JPStupfel — Mon, 06 Jun 2022 19:13:37 +0000

If you have been working in React you have probably noticed a pesky little error message anytime you render an array of JSX items. For example, consider the following code:

function App() { 

  const array = [1,2,3]

  const arratToJSX = array.map(e=><div>{e}</div>)
  return(

  <div>{arrayToJSX}</div>
  )
}

In this code block we are creating an array with the values [1,2,3]. We are then iterating over each of those values using the .map method. For each element in the initial array, we are creating a JSX object consisting of a <div> tag with the text set to the element's value. Next, the .map function returns a new array containing each of these JSX items and we are saving that new array to the constant "arrayToJSX". Finally we render that new array within a <div> container in our App component. We expect this code to render something like the following HTML:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Which it does. Yet, if we look at the Developer tools console, we get the following error message:

"Warning: Each child in a list should have a unique key prop."

What is going on here? In this post I want to unpack why React wants us to include a key prop for each of the mapped JSX components.

THE VIRTUAL DOM

To kick things off, we need to understand a bit more about what is meant when people refer to React’s "Virtual Dom.” It is important to note that not everyone likes the terminology 'Virtual DOM.' More exactly, the process undertaken when the virtual DOM is created is called "Reconciliation".

For any one who is interested in reading some of the documentation, here’s a link to the Mozilla Developer explanation.

WHAT IS THE DOM?

Let’s begin by clarifying what exactly the “DOM” is. The Dom is often said to be a programmatic representation of the document we see in the browser. Unless you know what that means, it might be a bit confusing. To unpack the DOM, let's first look at what the acronym stands for. DOM stands for Document Object Model.

If we remember what an 'object' is from javascript, for example:

`const jsObject = {red: ‘fish’,  blue: ‘fish’}`

then we can interpolate that the Document Object Model is an object. That object is used to "model" the 'Document'. And as we will see, the "Document" which that object models is the HTML file we provide to the Browser.

To better understand this, I found a great blog I will link here and I will try to synthesize the core concepts from for our purposes.

DOM vs DOM API

I'll admit, researching this post online, I found it difficult to pin down certain details about the "DOM". Part of the trouble is that sometimes people use the word "DOM" in reference to two separate things:

The DOM is sometimes used as shorthand for the DOM API. This is an API (read combination of framework/library/codebase) consisting of classes, built-in methods, parameters, etc. which the browser's internal code makes use of.
More appropriately, the DOM refers to a particular object created using the DOM API for a particular html document. This object is created by the browser by taking the HTML provided to it and creating nested objects for each of the HTML elements. For example, if the Browser sees a <div> tag, it will create a div object, an instance of its built-in div class, and nest it within the larger DOM. The position of each of these elements within the larger DOM follows the same structure as the hierarchy in the provided HTML document.

The DOM API was created as a way to standardize browsers, so web developers could have a consistent set of methods and protocols to interact with their webpage after the content loads. For example, because I can trust that Google Chrome uses the DOM API, I can be sure that by adding an event listener which calls document.querySelect('body').textContent='fish' I will be changing the entire web page to show the single word "fish". If you think about it, I would not have altered the HTML file provided to the Browser. What would I be changing? The DOM.

It is as if the Browser said to the developer, "I have received your HTML. Thank you. I will now turn your HTML into a javascript object. I assume you reference a javascript file in your html? Good. In your javascript file, please feel free to call or pass any of the methods which have been predefined in the DOM API, a complete list of which can be found here: developer.mozilla.org DOM API

THE BROWSER ENGINE 'PAINTS' THE SCREEN

The next important concept here is that the Browser engine handles the logic of how to take the DOM and the CSS file and use them to "paint" the pixels on the screen. If you've heard of "webkit", this is an example of a browser engine that handles such logic. But painting those pixels is highly performance expensive. Each time you make changes to a webpage, the less pixels you have to update/change, the better the performance of the page.

WHAT IS THE VIRTUAL DOM?

This is where React really shows its merit. It has a built-in algorithm that finds the most efficient way to repaint the pixels on the page.

To get the official story of how React handles Reconciliation, check out their documentation here.

When you use the Render() method in React, React mimics the Browser's behavior and creates its own copy of the DOM, that is to say it uses the DOM API standards to create a look-a-like of what it expects the Browser, also using the DOM API, to have created. This is what we mean when we say 'virtual DOM'.

This also means that React can be declarative. If you are coding in React, you don't directly call any built-in methods in the DOM API to make changes to the Browser's DOM. For instance, you don't tell React which elements to update, whether to change style components or innerHTML or to append or remove elements from the DOM. Instead, you just tell React, "Ok, before I click the button, I want to see <div>Before Button Click</div> and after I click the button I want to see <div>After Button Click</div>, you don't actually tell React how to get from point a to point b.

In order to figure out the most efficient way to make changes to the Browser's DOM, React first goes through a process known as "Diffing."

Diffing

React's diffing algorithm makes a comparison between two virtual DOM copies, the one it created before the render and the one after the render (remember the render() is firing every time any state within the program is updated). React iterates over these virtual DOMs line by line. For instance, consider the following:

First virtual DOM copy:

<div>Compare me first<div>
<div>Compare me second<div>
<div>Compare me third<div>

Second virtual DOM copy:

<div>Compare me first<div>
<div>Compare me second<div>
<div>Compare me third<div>

React will iterate through this as follows:

Does <div>Compare me first<div> match <div>Compare me first<div> ? 
then no change needed.

Does <div>Compare me second<div> match <div>Compare me second<div> ? 
then no change needed.

Does <div>Compare me third<div> match <div>Compare me third<div> ? 
then no change needed.

What if you wanted to add an element to the beginning of the above array?

<div>Compare me before first<div>
<div>Compare me first<div>
<div>Compare me second<div>
<div>Compare me third<div>

If React iterated through this copy and compared it with the previous copy in the procedure illustrated above, we would get something like this:

Does <div>Compare me before first<div> match <div>Compare me before first<div> ? 
Nope. Ok we have to change something.

Does <div>Compare me first<div> match <div>Compare me second<div> ? 
Nope. Ok we have to change something.

Does <div>Compare me second<div> match <div>Compare me third<div> ? 
Nope. Ok we have to change something.

Does <div>Compare me third<div> match (nothing, there's no <div> at the end here ? 
Nope. Ok we have to add something.

In this case we had to make 4 different changes. If instead we had given React a unique key for each of those elements like so:

<div key={1}>Compare me first<div>
<div key={2}>Compare me second<div>
<div key={3}>Compare me third<div>

//compared to:

<div key={4}>Compare me before first<div>
<div key={1}>Compare me first<div>
<div key={2}>Compare me second<div>
<div key={3}>Compare me third<div>

Then, instead of going line by line, React can go key by key. The procedure would look something like this:

Does the <div> with key={1} === the <div> with key={1} ? 
then no change needed.

Does the <div> with key={2} === the <div> with key={2} ? 
then no change needed.

Does the <div> with key={3} === the <div> with key={3} ? 
then no change needed.

Does the <div> with key={4} === the <div> with key={4} ? 
Well, obviously not, there was no key of 4 before so we now have only one thing to change.

In this case React only has to make 1 modification. So, the error message in question is really a way for React to safeguard against performance inefficiency. It might not seem like a big deal with the above example, but if you imagine something like FaceBook with an infinite scroll of countless posts then re-rendering all those posts every time you add one to the beginning could seriously bog things down.

Hopefully this was helpful. Happy coding.

Why the .Call() Method?

JPStupfel — Wed, 11 May 2022 21:30:36 +0000

Hello Coders,

The DOT CALL Method and Why We Would Ever Want to Use It

When I was introduced to the .call() method, my first though was, why would anyone want to use this? Why not just rely on passing arguments directly to the function instead of messing with context.

In the below blog post I hope to answer that question.

The first few sections jump around a bit, in an attempt to frame the problem. Finally, I think we do a pretty good job discovering a situation where the .call() method is not only useful, but necessary. So, buckle up and let's dig in. Please feel free to code along :-)

Arguments for Space Orcs

Passing Arguments to a Function

To get things rolling, let's say that you are creating a real time strategy space war game. To keep track of each player's forces, you have them organized using nested objects:

const armies = [ {name: 'Space Orcs', fighters: 10000} , 
{name: 'Moon Marines', fighters: 2000} , 
{name: 'Interstellar Scouts', fighters: 2000} ]

Let's make a reporting function that takes the name of the army and the number of fighters as arguments and returns a string.

function report(name, number){
return `The ${name} have ${number} fighters.`}

Let's make sure this is working by mapping the armies array and console logging the report function of each army.

armies.map(e=>console.log(report(e.name,e.fighters)))

//The Space Orcs have 10000 fighters.
// The Moon Marines have 2000 fighters.
//The Interstellar Scouts have 2000 fighters.

Ok, so that works. However, as mentioned this function relies on arguments being passed to the function.

Same Function, but using "This"

As a primer for things to come, let's look at how we might rewrite this same function using javascript's "this" keyword, rather than passing arguments directly to the function. We would then rewrite the function as:

function report(){
return `The ${this.name} have ${this.fighters} fighters.`}

Ok, great, we have modified our function to only rely on the "this" keyword. But now, how do we go about calling this function?

Let's outline 2 ways to call this function.

How to Call a Function that uses "This"

The Hard Way

The first way we are going to look at is undoubtably the long way and not at all the ideal way as it results in the original object being changed.

Let's break this into two steps. Step one is to add the report function to each nested object:

armies.map( e=> e.report = report);

Step two is to go ahead and console log the result of the report function for each item in the armies array:

armies.map(e=>console.log(e.report()));
//The Space Orcs have 10000 fighters.
//The Moon Marines have 2000 fighters.
//The Interstellar Scouts have 2000 fighters.

Never Use the Hard Way

Ok, so that gave us the console log we wanted, but at a cost. The biggest issue here is that we have inadvertently changed the value of the armies array such that each nested object contains the report function as one of it's items:

[{name: 'Space Orcs', fighters: 10000, report: ƒ},
 {name: 'Moon Marines', fighters: 2000, report: ƒ},
{name: 'Interstellar Scouts', fighters: 2000, report: ƒ}

Thankfully, we can avoid this pitfall and save ourselves a little bit of typing by using the javascript call() method.

The Easy Way

Let's now rewrite the last function call using the .call() method:

const armies = [ {name: 'Space Orcs', fighters: 10000} , 
{name: 'Moon Marines', fighters: 2000} , 
{name: 'Interstellar Scouts', fighters: 2000} ]

function report(){
return `The ${this.name} have ${this.fighters} fighters.`}

armies.map(e=>console.log(report.call(e)))

//The Space Orcs have 10000 fighters.
//The Moon Marines have 2000 fighters.
//The Interstellar Scouts have 2000 fighters.

And the good news? With this method we preserved the original values for the armies array.

console.log(armies)

/*
[ {name: 'Space Orcs', fighters: 10000} , 
{name: 'Moon Marines', fighters: 2000} , 
{name: 'Interstellar Scouts', fighters: 2000} ]
*/

A quick refresher on the .call() method

As a reminder, the syntax for the .call() method looks like this:

function.call(thisArg, arg1, ... , argN)

Not to get too deep into the syntax of the .call() method. Suffice to remember that, when you execute a function, anytime you use the "this" keyword, it refers to the "context object" under which that function was called. Furthermore, if no context has been specified, then the global context is used as a default. Likewise, if the function exists within an object, and you call that function from the object, then the object is used as the context object for any "this" calls within the function.

Ok, that's a little wordy. Let's illustrate with an example:

Calling a function from within an Object:

Say, instead of having defined the "report()" function globally as we did above, we had actually defined it as a function of the "space orcs" object:

const armies = [ {name: 'Space Orcs', fighters: 10000,
report: function(){return `The ${this.name} have ${this.fighters} fighters.`}} , 
{name: 'Moon Marines', fighters: 2000} , 
{name: 'Interstellar Scouts', fighters: 2000} ]

Now that we have defined the report function as an item in the 'Space Orcs' object, anytime we call that function, the 'Space Orcs' object will be used as the context for the "this" keyword:

armies[0].report()
//'The Space Orcs have 10000 fighters.'

Finally, The Challenge

Let's go ahead and remember the question we started off with. That question was, "Why would anyone want to use the .call() method?" For example, why not just pass arguments into the function the way we did at the very beginning of this post?

I think we have arrived at a point in this post where we can begin to answer that question. The answer comes from the example we just illustrated: what happens when we have defined a function within an object? Remembering our last example:

const armies = [ {name: 'Space Orcs', fighters: 10000,
report: function(){return `The ${this.name} have ${this.fighters} fighters.`}} , 
{name: 'Moon Marines', fighters: 2000} , 
{name: 'Interstellar Scouts', fighters: 2000} ]

It is natural in the above case to not pass arguments to the report() function, since you are really only anticipating using report() in the "Space Orcs" context.

Swapping Context

What if we wanted to call that same report() function on an entirely new object. Say, in addition to armies, our game contains the array "navies":

const navies = [ {name: 'Aqua Orcs', fighters: 100,
report: function(){return `${this.name}: ${this.fighters} sailors.`}} , 
{name: 'Mars Pirates', fighters: 200} , 
{name: 'Astro Mariners', fighters: 400} ]

Notice that the 'Aqua Orcs' navy has its own "report()" function. If we call that function we get:

navies[0].report()
//'Aqua Orcs: 100 sailors.'

Ok, so what if we really liked the 'Space Orcs' report() verbiage though, and wanted to call the 'Space Orcs' report() function directly on the "Aqua Orcs" Navy?

The "Hard Way" we illustrated earlier wouldn't really work because it would result in the loss of the "Aqua Orcs" Navy report() function definition:

navies[0].report = armies[0].report;
console.log(navies[0].report())
//The Aqua Orcs have 100 fighters.

That gave us the console log we were looking for, but it also destroyed our "Aqua Orcs" Navy report():

console.log(navies[0].report)
//ƒ (){return `The ${this.name} have ${this.fighters} fighters.`}

.call() Method to the Rescue

On the bright side, we can instead use the .call() method and preserve the "Aqua Orcs" Navy report() while calling the "Space Orcs" Armies report() on the "Aqua Orcs" Navy Object.

armies[0].report.call(navies[0])
//'The Aqua Orcs have 100 fighters.'

There we get our desired output, and...

navies[0].report()
//'Aqua Orcs: 100 sailors.'

We have preserved the "Aqua Orcs" Navy report() to be used in the future.

Wrapping Up

If you stuck with this blog post to the bitter end, I thank you. I know it was a roundabout way to get to the final product but I hope it gave a good example of why, when and how to make use of the .call() method.

That's it for this blog post. See ya!

Sort by Values Algorithm

JPStupfel — Wed, 11 May 2022 17:59:29 +0000

Hello coders,

I thought we could explore, as a thought experiment, how one might go about reconstruction certain functionality of the .sort() method in javascript.

The challenge

Let's say we are creating a webpage that displays world currencies and their values. The finished project may look something like this:

In order to build this page, we fetched the json file from a free online api such as api.coingecko.com. The code for this fetch request looks like this:

let jsonOBJ = {}
fetch(
'https://api.coingecko.com/api/v3/exchange_rates'
).then(
res=>res.json()
).then(
data=> {jsonOBJ = data})

Let's now look at a truncated version of the resulting json object:


 let jsonOBJ = {"rates": {
    "btc": {
      "name": "Bitcoin",
      "unit": "BTC",
      "value": 1.0,
      "type": "crypto"
 },
    "ltc": {
      "name": "Litecoin",
      "unit": "LTC",
      "value": 372.614,
      "type": "crypto"
    },
    "eth": {
      "name": "Ether",
      "unit": "ETH",
      "value": 13.371,
      "type": "crypto"
}
   }}

Great. Now here comes the tricky part. How would we go about reordering this object by one of the values?

Say, for example, we want to sort the object such that objects in the "rates" object are sorted by the "value" subfield.

The resulting object should look like this:


 let jsonOBJ = {"rates": {
    "btc": {
      "name": "Bitcoin",
      "unit": "BTC",
      "value": 1.0,
      "type": "crypto"
 },
"eth": {
      "name": "Ether",
      "unit": "ETH",
      "value": 13.371,
      "type": "crypto"
},
    "ltc": {
      "name": "Litecoin",
      "unit": "LTC",
      "value": 372.614,
      "type": "crypto"
    }

   }

The solution walkthrough

Let's break this problem into a few different chunks.

Task 1 : create an array of the sorting items

Fist off, lets create a separate array of all the
values from the field we wish to sort. This will
come in handy later on.

//create the new array
 let sortArray = []

/*for each key in the unsorted object, find the corresponding sorting value field and push that item into the empty array "sortArray"*/

 Object.keys(jsonOBJ.rates).map(
                e=>sortArray.push(jsonOBJ.rates[e] 
                ['value'])
        )

This results in the following values for sortArray:

sortArray = [1.0, 372.614, 13.371]

Finally, let's sort those values the way we would ultimately like our json object to be sorted. In this case, we want them sorted numerically from least to greatest:

sortArray = sortArray.sort((a,b) => a-b)
console.log(sortArray)
//[1, 13.371, 372.614]

Excellent! Now we have an array which consists of values from the json object. Those values are are from the field by which we wish to sort. And they are sorted in the desired arrangement.

Build the sorted Object

Here is where things get a little bit trickier. Using our sorted array of values,

sortArray = [1, 13.371, 372.614]

we are going to iterate through this sortArray, and check each element against the original nested json objects, looking for a match. When we get a match, we will add that nested object to a new object. Since we will be iterating through the sortArray in the order we wish our data to be sorted in, the resulting new object will likewise be in the correct order.

 let newOBJ = {}
 for (let i in sortArray){
        for (let j in jsonOBJ.rates )
        {
            if (jsonOBJ.rates[j]['value'] === sortArray[i]){
                newOBJ[j] = jsonOBJ.rates[j]; 
                //deleting the nested jsonOBJ object here prevents double entries.
                delete jsonOBJ.rates[j];
            }
        }
    } 
    //replace original with newObj
    jsonOBJ['rates']=newOBJ

That should do it. If we console.log(jsonOBJ) now we should see the correct order of nested arrays:

{"rates": {
    "btc": {
      "name": "Bitcoin",
      "unit": "BTC",
      "value": 1.0,
      "type": "crypto"
 },
"eth": {
      "name": "Ether",
      "unit": "ETH",
      "value": 13.371,
      "type": "crypto"
},
    "ltc": {
      "name": "Litecoin",
      "unit": "LTC",
      "value": 372.614,
      "type": "crypto"
    }

   }

Great! These entries are indeed in the correct order.

Looking ahead

One thing that is really cool about this approach is that we could sort the json object by whichever nested field (no matter how nested that field might be) and by whichever sorting convention we like.

Would you rather sort the same object alphabetically by the nested "name" field. No problem. Simply cntrl+f and replace the string "value" with the string "name" and replace the sorting rule:

sortArray = sortArray.sort((a,b) => a-b)

with

sortArray = sortArray.sort()

As a function

Of course, what good is being able to write this algorithm if we cannot compile it in to a reusable function that can handle any future situation we may encounter.

Let's take a look at this algorithm, expressed as a function, which takes as it's arguments (a) the original, unsorted object (b) the key value of the nested field we wish to sort by and (c) the sorting function, and returns the sorted Object:


function sortByValue(obj, value, sortFunction){
    let sortArray = []
    let newOBJ = {}

    //add values, in the order they are in now, to sortArray
    Object.keys(obj).map(key=>{
        sortArray.push(obj[key][value])}
        )

    //Perform the sortFunction
    sortFunction(sortArray)

    //Cross-iterate sortArray with original object and populate the new Object
    for (let i in sortArray){
        for (let j in obj ){
            if (obj[j][value] === sortArray[i]){
                newOBJ[j] = obj[j]}
            }
        } 
    return newOBJ
}

It is important to note that the above function would only work if the sorting key is 1 nest deep in the object. But it's easy to see how this might be extended to handle other situations.

This wraps up this blog post. See ya!