DEV Community: Rodrigo Rojas

Deploying a Git Subdirectory to Heroku

Rodrigo Rojas — Tue, 11 Jan 2022 19:26:11 +0000

Not in Heroku's house

Deploying your app to Heroku is stressful enough. If you have a subdirectory that you want to deploy by trying to push the whole repo you're gonna have a bad time.

Well why can't I deploy the whole repo?

Well, for starters, Heroku doesn't like that, and it'll let you know exactly why by showing you the following errors.

It's not you it's your buildpack

My first instinct was to (cry) manually set the appropriate buildpack for a node.js server as mentioned by Heroku's Dev Center. However, Heroku states that...

By default, these buildpacks will be searched in this order until a match is detected and used to compile your app.

So there really isn't any need for me to manually set the buildpack (I did it anyways bc I'm paranoid like that).

heroku buildpacks:set heroku/nodejs

So now I've manually set the buildpack to Node.js and tried pushing this bad boy to Heroku (After committing of course). Fingers crossed

Feelsbadman

Luckily, the errors give us a clue as to what the problem is. In this case, it looks like I'm trying to deploy a repo with multiple directories. If you look at Heroku's Dev Center once again you'll see that:

Heroku Node.js support will only be applied when the application has a package.json file in the root directory.

That's a lot of red...

So in my case, I want to deploy one specific subdirectory that has a package.json file. But instead I'm trying to deploy the entire repo which doesn't have a package.json file in it and in effect making Heroku bug out.

The Fix

Can you just tell me what to do pls?

Sure! Let's start by assuming you've completed all the Heroku prerequisites:

npm install -g heroku
heroku login
heroku create
heroku git:remote -a my-app

I was given a random name for my app by Heroku so I decided to change it.

heroku apps:rename my-new-app-name

What's in a name?

Once renamed I make sure to update my git remotes.

heroku git:remote -a my-new-app-name

Now for the haymaker.

git subtree push --prefix path/to/subdirectory heroku main

sigh

Well this is embarrassing. Looks like I need to run this command from the top level of the working tree. A couple of cd ..'s later and...

Looking good so far...

Heroku you so smart bb

Success!

You have now successfully deployed your subdirectory to Heroku! Thanks for reading!

Extra Credit: npm-scripts

Kudos if you're still reading. Let's say that I want to make changes to my app's frontend and backend and deploy to Heroku. Writing...

git subtree push --prefix path/to/subdirectory heroku main

...is too verbose for my taste so I'm going to add some npm-scripts to the package.json of my backend repo.

{
  "scripts": {
    //...
    "build:ui": "rm -rf build && cd ../../part2/phonebook-frontend && npm run build --prod && cp -r build ../../part3/phonebook-backend",
    "deploy": "git subtree push --prefix part3/phonebook-backend heroku main",
    "deploy:full": "npm run build:ui && git add . && git commit -m uibuild && git push && npm run deploy",    
    "logs:prod": "heroku logs --tail"
  }
}

The script npm run build:ui builds the frontend, then copies the production version under the backend repository.
npm run deploy pushes the current backend to Heroku.
npm run deploy:full combines the two and has the necessary git commands to update the backend repository.
npm run logs:prod shows the heroku logs which comes in handy for debugging.

Please note that the paths in the script build:ui & deploy depend on the location of repositories in your file system!

Resources and Shoutouts

Experimenting with Data Visualization Using Vega Lite

Rodrigo Rojas — Thu, 06 Jan 2022 00:58:25 +0000

For this blog post, I'm going to sidetrack from the usual tutorials and step-by-steps to shed light on a topic that's very important to me.

Disparity in COVID-19 Infections and Deaths Between Different Racial/Ethnic Groups and the Latinx Community

In light of recent news regarding massive spikes in COVID-19 cases, I wanted to create a visualization using data pulled from the CDC regarding COVID-19 infections and deaths within the Latinx community.

While I had fun creating this visualization, I'm by no means a data scientist. I want you to take this with a grain of salt and understand that I'm as new to this as you might be. With that said, if any data scientists or data viz engineers out there want to reach out to me with pointers, I'm all ears. Let's dive in.

Before embarking on this data-visualization journey, I was curious about statistics and data surrounding my community in regards to COVID-19 infection/death rates and their causes. I live in a predominantly Latinx neighborhood in Oakland, and have seen the various community programs incentivizing vaccination against the virus. Despite their best efforts however, according to data from the CDC and the CA Department of Public Health, Latinx and other people of color are disproportionately affected amid worsening historical inequities.

Credit to California Department of Public Health

So Why Are Latinx Communities Getting Vaccinated Less?

Latinx communities comprise 18.5% of the U.S. population. And they are being severely impacted by COVID-19.

So why do they make up such a small amount of people getting vaccinated in some states?

Lack of access, vaccine confidence, and misinformation might be part of the answer.
Most states are following the CDC recommendations with vaccine rollout by prioritizing health care workers and elderly people living in assisted living facilities.

However, this can leave states open to interpret who is defined as a health care worker, sometimes leaving out essential workers who are still regularly exposed to COVID-19, such as janitorial and cleaning staff. Where often, essential workers and service workers come from Latinx and Black communities.

In Jean Guerrero's op-ed in The LA Times, they explain the effect of misinformation in Latinx communities:

Now, Latinos lag behind in vaccination rates, driven in part by Spanish-language disinformation deliberately targeting us on Facebook, YouTube, WhatsApp and more. The conspiracy forces that tried to depress Latino voter turnout with lies about the election now appear to be using internet platforms to tell Latinos the vaccine contains a microchip, alters DNA or causes stillbirths. The misinformation then spreads through word of mouth.

Using data pulled from the CDC's National Center for Health Statistics, I plotted a graph using the Vega-Lite JavaScript library on the Observable platform. In the following steps I'm going to detail how I pulled and plotted data illustrating deaths in Latinx communities by county in California.

Fetching and Plotting Data using Observable

Using the Observable Platform, I was able to plot the following graph by simply fetching data from the CDC API like so:

url = 'https://data.cdc.gov/resource/k8wy-p9cg.json?state=CA'

I then require d3-fetch in order to have access to its JSON parser method to use with the CDC API.

d3Fetch = require('d3-fetch')

We'll be Using json in the Next Step

With our d3-fetch object we can now fetch and parse through our JSON data.

covidData = d3.json(url)

Our Massive JSON

Now that I have access to only CA COVID-19 data (you might have noticed the API URL only specifies California), I want to make sure that decimals aren't used to plot my graph. We can easily fix that.

changedData = {
  let parsedData = [];
  for (let i = 0; i < covidData.length; i++) {
    let data = covidData[i];
    data['hispanic'] = data['hispanic'] * 100;
    parsedData.push(data);
  }
  return parsedData;
}

Using a simple for loop, I change the value for hispanic from the original decimal value to a more usable number for my graph.

Now that I have the data I want, it's time to plot the graph using Vega Lite.

I then require Vega Lite like so:

vegalite = require('@observablehq/vega-lite')

Once I have access to the Vega Lite library, I can easily plot my graph setting the values with my changedData array.

vegalite({
  data: { values: changedData },
  mark: {
    type: "area",
    line: {
      color: "darkgreen"
    },
    color: {
      x1: 1,
      y1: 1,
      x2: 1,
      y2: 0,
      gradient: "linear",
      stops: [
        {
          offset: 0,
          color: "white"
        },
        {
          offset: 1,
          color: "darkgreen"
        }
        ]
    }
  },
  autosize: "fit",
  width: width,
  encoding: {
    x: {
      field: "county_name",
      type: "ordinal"
    },
    y: {
      field: "hispanic",
      type: "quantitative"
    }
  }
})

The end result will look like this:

California COVID-19 Latinx Deaths by County

Alternatively, You can see the graph here

How to Help Communities Fight COVID-19 and Misinformation

As I previously mentioned, working on this really hit close to home for me. Particularly because I have family in Fresno County, an area still heavily affected by COVID-19, and have bore witness to my family and other members of my community regurgitating misinformation they heard from non-reliable sources.

In order to fight against this and help our communities move from vaccine hesitancy to confidence, we need to start sharing accurate information on how to protect one another from COVID-19. Some ways of doing this would be by making data more accessible and interpretable, as well as highlighting uplifting stories from other community members who overcame COVID-19 misinformation.

Resources

REST With Node.js

Rodrigo Rojas — Wed, 15 Dec 2021 22:07:54 +0000

I know, I know… I said I would post more often. In my defense, I moved to another city and it’s exhausting. However, I’m here now and my gift to you before the holidays is finishing up our node.js backend. Let’s dive in.

Give it to me baby

We’re going to expand our application so that it provides the same RESTful HTTP API as a json-server.

We’re not going to deeply examine Fielding's definition of REST or spend time pondering about what is and isn't RESTful. Instead, we’ll take a simplified view and concern ourselves with how RESTful APIs are understood in web applications.

One convention is to create the unique address for resources by combining the name of the resource type with the resource's unique identifier.

Let's assume that the root URL of our service is example.com/api.

If we define the resource type of person to be people, then the address of a person resource with the identifier 10, has the unique address example.com/api/people/10.
The URL for the entire collection of all note resources is example.com/api/people.

We can execute different operations on resources. The operation to be executed is defined by the HTTP verb:

URL	verb	functionality
people/10	GET	fetches a single resource
people	GET	fetches all resources in the collection
people	POST	creates a new resource based on the request data
people/10	DELETE	removes the identified resource
people/10	PUT	replaces the entire identified resource with the request data
people/10	PATCH	replaces a part of the identified resource with the request data

Fetching a Single Resource

I know I’ve been rambling about REST for a while, but I swear I wouldn’t do it if it weren’t important. Let’s circle back to our backend application and fetch a single resource.

app.get('/api/people/:id', (request, response) => {
  const id = Number(request.params.id)
  const person = people.find(p => p.id === id)


 if (person) {
   response.json(person)
 } else {
   response.status(404).end()
 }
})

Lots to unpack here, so I’ll try to break it down.

app.get('/api/people/:id', ...) will handle all HTTP GET requests that are of the form /api/notes/SOMETHING, where SOMETHING is an arbitrary string.
The id parameter in the route of the request is accessed through the request object.
The Number constructor wraps our id parameter and turns it into an integer (This is just in case our id turns out to be a string, we’re thinking preemptively here).
Our if block leverages the fact that all JavaScript objects are truthy, meaning that it will evaluate to true in a comparison operation. However, undefined is falsy meaning that our block will evaluate to false. Thus sending an error status code if no person is found.

Delete a Resource

Deletion happens by making an HTTP DELETE request to the url of the resource.

Looking at you 2021

Since we just retrieved a single resource, this should be easy.

app.delete('/api/people/:id', (request, response) => {
  const id = Number(request.params.id)
  people = people.filter(p => p.id !== id)

  response.status(204).end()
})

Once deletion of the resource is successful, meaning that the person exists and it is removed, we can respond to the request with the status code 204 no content and return no data with the response.

POST and Receiving Data

Ok, let's make it possible to add new people to the server. Adding a person happens by making an HTTP POST request to the address localhost:3001/api/people, and by sending all the information for the new person in the request body in the JSON format.

Not that kind of POST

To access the data easily, we’ll need the help of the express json-parser that is taken to use with command app.use(express.json()).

app.use(express.json())

//...


app.post('/api/people', (request, response) => {
 const person = request.body
 console.log(person)
 response.json(person)
})

Here, the event handler function can access the data from the body property of the request object.
Without the json-parser, the body property would be undefined. The json-parser functions so that it takes the JSON data of a request, transforms it into a JavaScript object and then attaches it to the body property of the request object before the route handler is called.

For the time being, the application does not do anything with the received data besides printing it to the console and sending it back in the response.

Let's return to the application and finalize the handling of the request!

const generateId = () => {
  const maxId = people.length > 0
    ? Math.max(...people.map(p => p.id))
    : 0
  return maxId + 1
}

app.post('/api/people', (request, response) => {
  const body = request.body

  if (!body.name) {
    return response.status(400).json({ 
      error: 'name missing' 
    })
  }

  const person = {
    name: body.name,
    number: body.number,
    id: generateId(),
  }

  people = people.concat(person)

  response.json(person)
})

We need a unique id for each new person so we find out the largest id number in the current list and assign it to the maxId variable. The id of the new person is then defined as maxId + 1.
If the received data is missing a value for the name property, the server will respond to the request with the status code 400 bad request
Calling return is crucial, otherwise the code will execute to the very end and a malformed person object gets saved to the application!

Here's how our backend looks now:

const express = require('express')
const app = express()
app.use(express.json())

let people = [
    {
      name: "Hannah Rickard",
      number: "06-51-99-56-83",
      id: 1
    },
    {
      name: "Hyun Namkoong",
      number: "10987654",
      id: 2
    },
    {
      name: "Courtney Martinez",
      number: "3691215",
      id: 3
    }
  ]

  app.get('/', (request, response) => {
      response.send('<h1>Phonebook</h1>')
  })

  app.get('/api/people', (request, response) => {
      response.json(people)
  })

app.get('/api/people/:id', (request, response) => {
  const id = Number(request.params.id)
  const person = people.find(p => p.id === id)


 if (person) {
   response.json(person)
 } else {
   response.status(404).end()
 }
})

app.delete('/api/people/:id', (request, response) => {
  const id = Number(request.params.id)
  people = people.filter(p => p.id !== id)

  response.status(204).end()
})

const generateId = () => {
  const maxId = people.length > 0
    ? Math.max(...people.map(p => p.id))
    : 0
  return maxId + 1
}

app.post('/api/people', (request, response) => {
  const body = request.body

  if (!body.name) {
    return response.status(400).json({ 
      error: 'name missing' 
    })
  }

  const person = {
    name: body.name,
    number: body.number,
    id: generateId(),
  }

  people = people.concat(person)

  response.json(person)
})

  const PORT = 3001
  app.listen(PORT, () => {
      console.log(`Server running on port ${PORT}`)
  })

You made it!

Aaaand we're done! We've managed to GET a single resource with the id. With that same logic, you were able to DELETE a resource. Finally, we received and persisted data with POST.

As we approach the holidays and the end of the year, I want to wish you all the best, and please, if you go shopping, return your shopping cart to its designated spot.

Resources

JSON Server
REST
Number Constructor
HTTP Status Codes
JSON Parser

Building a Backend with Node.js and Express

Rodrigo Rojas — Thu, 07 Oct 2021 20:40:20 +0000

Hey there. I know I’ve been MIA for a couple of months and I promised I’d be more active with posting. The truth is, sometimes life just catches up with you and you gotta take care of yourself first. But I’m here now, so let’s get started!

Credit to Titsay

For this (hefty) blog post, our focus shifts towards the backend. That is, towards implementing functionality on the server side of our stack.

We stan Calvin & Hobbes here

Starting our Node.js Backend

Our goal this time is to implement a backend that will work with the phonebook application we’ve been working on from my previous posts.

Let’s create a new template for our application with the npm init command. We will answer the questions presented and the result will be a generated package.json file that contains information about the project.

Nice package

Before we continue, let's make one small change to our scripts object:

We prefer to type less

We could run the application directly with node from the command line like so:



node index.js

OR we can run it as an npm script because we’re fancy/lazy like that:



npm start

The npm start script works because we defined it in the package.json file!

Using the Express Framework

In order to ease server-side development with node and offer an easier interface to work with the built-in http module, we can use a backend framework called Express.

Let's install express as a project dependency with the following command which in turn will be added to our package.json file:



npm install express

The primary purpose of our backend server will be to offer raw data in the JSON format to the frontend. For this reason, we can now change our index.js file to return a hardcoded list of people in the JSON format along with some express functionality:



const express = require('express')
const app = express()

let people = [
    {
      name: "Hannah Rickard",
      number: "06-51-99-56-83",
      id: 1
    },
    {
      name: "Hyun Namkoong",
      number: "10987654",
      id: 2
    },
    {
      name: "Courtney Martinez",
      number: "3691215",
      id: 3
    }
  ]

  app.get('/', (request, response) => {
      response.send('<h1>Phonebook</h1>')
  })

  app.get('/api/people', (request, response) => {
      response.json(people)
  })

  const PORT = 3001
  app.listen(PORT, () => {
      console.log(`Server running on port ${PORT}`)
  })

Right off the bat, at the beginning of our index.js we import express, which is a function that is used to create an express application stored in the app variable:



const express = require('express')
const app = express()

Now, we define two routes to the application. The first one defines an event handler that is used to handle HTTP GET requests made to the application's / route:



app.get('/', (request, response) => {
      response.send('<h1>Phonebook</h1>')
  })

  app.get('/api/people', (request, response) => {
      response.json(persons)
  })

The event handler function accepts two parameters.

The first request parameter contains all of the information of the HTTP request.
The second response parameter is used to define how the request is responded to.

For our first instance, the request is answered by using the send method of the response object. Calling the method makes the server respond to the HTTP request by sending a response containing the string <h1>Phonebook</h1>, that was passed to the send method.



app.get('/', (request, response) => {
  response.send('<h1>Phonebook</h1>')
})

Now for the second instance, our route defines an event handler that handles HTTP GET requests made to the /people path of our app (this should look familiar to you if not, refresh your memory here):



app.get('/api/people', (request, response) => {
  response.json(people)
})

The GET request is responded to with the json method of the response object. Calling this method will send the people array that was passed to it as a JSON formatted string. How neat is that?

Finally, the last rows bind the HTTP server assigned to the app variable, to listen to HTTP requests sent to the PORT 3001:



const PORT = 3001
app.listen(PORT)
console.log(`Server running on port ${PORT}`)

Look at you! You made it to the end and we’ve now managed to make two GET requests using express. One to our / route, and another to our people route. In our following posts we will expand the app to uphold RESTful conventions.

Before You Go…

If you like extra credit or are an overachiever like myself, then stick around for a little tool called Nodemon. What is Nodemon you ask? Well, according to the documentation:

nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application.

Usually when we make changes to our backend code we have to painstakingly restart the application in order to see the changes with Ctrl+C and then relaunching with npm start.

Compared to the convenient workflow in React where the browser automatically reloads after changes are made, this feels slightly annoying. But have no fear, nodemon will take care of us.

Changes to the backend code now cause the server to restart automatically (You'll still have to refresh the browser though).

To start, install nodemon and define it as a development dependency:



npm install --save-dev nodemon

A dev what now? When we say development dependencies, we mean tools that are needed only during the development of the application. In our case, for automatically restarting the backend.

To summon nodemon we simply:



node_modules/.bin/nodemon index.js

That’s a mouthful, so you already know what’s coming don’t you? Yep, script that ish!

Love you scripts

You can now start the server in developer mode with:



npm run dev

SO much better. Ok, I’ve rambled long enough. Check back for when we start to build our backend so it can fetch a single resource, delete, and even receive new data! Remember to take breaks and hydrate. Rod out.

Resources:

Express & JSON
Express Send
Express Library
Node.js
Nodemon utility

Separate Modules for Backend Communication

Rodrigo Rojas — Mon, 14 Jun 2021 18:27:39 +0000

In this (final?) installment of using axios to make HTTP requests, we've managed to make GET, POST & PUT requests. However, our code has started to chonkify a bit. So now I'm going to cover how to separate our backend communication into its own module.

We can start by creating a new directory called services inside our src folder. Create a file named contacts.js.

// src/services/contacts.js

import axios from 'axios';

const baseUrl = 'http://localhost3001/people'

const getAll = () => {
    const request = axios.get(baseUrl)
    return request.then(response => response.data)
}

const create = (newObject) => {
    const request = axios.post(baseUrl, newObject)
    return request.then(response => response.data)
}

const update = (newObject, id) => {
    const request = axios.put(`${baseUrl}/${id}`, newObject)
    return request.then(response => response.data)
}

const remove = (id) => {
    const request = axios.delete(`${baseUrl}/${id}`)
    return request.then(response => response.data)
}

const contactService = { getAll, create,  update, remove }

export default contactService

Our module returns an object with four functions that directly return the response data by the axios methods.

"Wait, where did remove come from? and why not call it 'delete'?"

Well, if you've been paying attention since the beginning, I mentioned we'd go through GET, POST, PUT, and DELETE requests. I intend to keep that promise. delete is a reserved JavaScript word so just don't.

Let's take it step-by-step:

const getAll = () => {
    const request = axios.get(baseUrl)
    return request.then(response => response.data)
}

Our modified getAll function still returns a promise, as the then method of a promise also returns a promise. Once we define the parameter of the then method to return response.data, we've managed for our getAll function to work. Once the HTTP request is successful, the promise returns the data as a response from the backend module.

We can now import our contactService module into our React App.

import contactService from './services/contacts';

Our functions can be used directly from the imported contactService module.

import React, { useState, useEffect } from 'react';
import contactService from './services/contacts';

const App = () => {
// ...

const hook = () => {
    contactService
    .getAll()
    .then(initialContacts => {
      setPeople(initialContacts)
    })
  }
  useEffect(hook, [])

const addContact = (e) => {
    e.preventDefault()

    const nameObj = {
      name: newName,
      number: newNumber
    }

    contactService
    .create(nameObj)
    .then(returnedContact => {
     setPeople(people.concat(returnedContact))
    })
    setNewName('')
    setNewNumber('')
  }

const handleSubmit = (e) => {
    e.preventDefault()

    const exists = people.find(person => person.name === newName)

    if(exists) {
      const person = people.find(p => p.name === newName)
      const confirmChange = window.confirm(`${newName} already exists. Replace old number with a new one?`)
      if(confirmChange) {
      const id = person.id
      const updatedPerson = {...person, number: newNumber}

      contactService
      .update(updatedPerson, id)
      .then(returnedContact => {
      setPeople(people.map(p => p.id !== id ? p : returnedContact))
      })
      } else {
        setPeople(people)
      }
    } else {
      addContact(e)
    } 
    setNewName('')
    setNewNumber('')
  }


// ...
}

export default App

Looking cleaner and leaner already!

We're now ready to implement our deleteContact function.

const App = () => {
// ...
const deleteContact = id => {
    const person = people.find(p => p.id === id)
    const confirmDelete = window.confirm(`Delete ${person.name}?`)
if(confirmDelete) {
    contactService
    .remove(id)
    .then(() => {
        setPeople(people.filter(p => p.id !== id))
    })
     // error handling that will just print to console for now.
     .catch(error => {
      console.log(error)
    })
    setNewName('')
    setNewNumber('')
  }
}

// ...
}
export default App

Pretty straightforward stuff. Once our deleteContact function is called, we set a person variable to match the id passed. Then if confirmDelete is true we run our remove function passed from our contactService module. Next, we chain .then() which attaches a callback that is invoked when the promise is settled. Inside this callback, we filter out contacts that don't match the id thus causing a re-render which updates our app accordingly. Lastly a .catch() is chained for any error handling (for now we'll just log the error to console, I'll cover error handling in another post).

Take a breather, you've earned it!

That does it for our journey through axios HTTP requests. I hope you had as much fun as I had following along! In the spirit of keeping things simple, I omitted adding other React components as well as the passing down of props. I wanted to mainly focus on the backend logic and functionality while using axios. The beauty of this is that one could easily pass down the functions we wrote as event handlers to our props.

Resources

Send Data to the Server With axios

Rodrigo Rojas — Wed, 02 Jun 2021 04:20:42 +0000

You must be a glutton for punishment if you're here following my post on GET requests with axios.

Love you axios

As long as I have you here, let's recap on what we covered in the last post:

We created a JSON server to store our contacts.
Installed and imported axios to our app
Made an HTTP GET request using useEffect() and axios.get()

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {

  // our state hooks
  const [ people, setPeople ] = useState([])
 // our new state hooks that will store our newName and newNumber field inputs.
  const [ newName, setNewName ] = useState('')
  const [ newNumber, setNewNumber ] = useState('')

  // our axios GET request
  const hook = () => {
    axios.get('http://localhost:3001/people')
    .then(response => {
      setPeople(response.data)
    })
  }

  // the useEffect function takes in 2 parameters, a function, and the number of times we want it to run.
  useEffect(hook, [])

//...

How our app looks so far

In order to create a new resource for storing a contact, we're going to make an HTTP POST request to the people URL according to RESTful conventions. The data for the new contact will be sent in the body of the request.

const addContact = (e) => {
  e.preventDefault()

  const nameObj = {
    name: newName,
    number: newNumber
  }

  axios.post('http://localhost3001/people', nameObj)
  .then(response => {
   setPeople(people.concat(response.data))
   setNewName('')
   setNewNumber('')
 })
}

The new contact returned by the backend server
is added to the list of contacts in our app's state by using the setPeople() function and then resetting the newName & newNumber creation form.

In this case, since the data sent in the POST request is a JavaScript object, axios automatically knows to set the appropriate application/json value for the Content-Type header. How cool is that? No more typing up those pesky headers.

Take note that the concat() method is not changing the original state, but instead making a new copy of the list.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {

  // our state hooks
  const [ people, setPeople ] = useState([])
// our new state hooks that will store our newName and newNumber field inputs.
  const [ newName, setNewName ] = useState('')
  const [ newNumber, setNewNumber ] = useState('')

  const hook = () => {
    axios.get('http://localhost:3001/people')
    .then(response => {
      setPeople(response.data)
    })
  }
  useEffect(hook, [])

  const addContact = (e) => {
  e.preventDefault()

  const nameObj = {
    name: newName,
    number: newNumber
  }

  axios.post('http://localhost3001/people', nameObj)
  .then(response => {
   setPeople(people.concat(response.data))
   setNewName('')
   setNewNumber('')
  })
 }

//...

State of our app so far...

Let's add some functionality to edit existing numbers if a contact name already exists.

const handleSubmit = (e) => {
    e.preventDefault()

    const exists = people.find(person => person.name === newName)

    if(exists) {
      const person = people.find(p => p.name === newName)
      const confirmChange = window.confirm(`${newName} already exists. Replace old number with a new one?`)
      if(confirmChange) {
      const id = person.id
      const updatedPerson = {...person, number: newNumber}
      const url = `http://localhost:3001/people/${id}`

      axios
      .put(url, updatedPerson)
      .then(response => {
      setPeople(people.map(p => p.id !== id ? p : response.data))
      })
      } else {
        setPeople(people)
      }
    } else {
      addContact(e)
    } 
    setNewName('')
    setNewNumber('')
  }

Every line of code in the function body contains important details. Since we're using one single submit button, we're going to handle the logic in the handleSubmit function.

exists finds if the newName field matches a name inside the people array.
confirmChange sends a confirmation window to replace an existing contact.
If confirmed, the if statement block creates an updatedPerson object by using the spread operator and adding the new number. If not, then setPeople is run with the original array.
In that same if block, our axios PUT request is called to the backend where it will replace the old object.
The map method inside our setPeople function creates a new array by mapping every item from the old array into an item in the new array. In our example, the new array is created conditionally so that if p.id !== id is true, we simply copy the item from the old array into the new array. If false, then the note object returned by the server is added to the array instead.
Outside of our nested if statement, if the name does not exist, then the addContact function is called.

And that's it! We've now successfully made a POST and PUT HTTP request with axios. Our code is looking a little bloated now so let's see if we can clean it up a little by creating a separate module that will handle backend communication in another blog post.

Resources

Make HTTP GET Requests With Axios

Rodrigo Rojas — Fri, 21 May 2021 19:23:13 +0000

The most common way for frontend programs to communicate with servers is through the HTTP protocol. If you're used to vanilla JavaScript, then you're probably familiar with the fetch() API which allows you to fetch resources and make HTTP requests. In this example I'm going to walk you through on how to use axios in React to make an HTTP GET request. Further on I'll walk us through how to make POST, DELETE, and even PUT requests. For now, let's stick to GET. Let's GET-er-done! (ok I'll stop).

Couldn't help myself

Let's first create a db.json file in the root directory of your project in order to use the JSON Server. For this example, I'm using data for a phonebook app I worked on.

{
  "people": [
    {
      "name": "Hannah Rickard",
      "number": "06-51-99-56-83",
      "id": 1
    },
    {
      "name": "Hyun Namkoong",
      "number": "10987654",
      "id": 2
    },
    {
      "name": "Courtney Martinez",
      "number": "3691215",
      "id": 3
    }
  ]
}

Next, install the JSON server by running:

npx json-server --port 3001 --watch db.json

Note that the json-server runs on port 3000 by default, but since projects created with create-react-app reserve port 3000, we need to define an alternate port.

The idea will be to save future contacts to the server, which in this case means saving to the json-server. The React code fetches the contacts from the server and renders them to the screen. Once a new note is added to the app, the React code will persist it to memory.

Let's install axios:

npm install axios

Axios will now be added to the other dependencies

Let's tweak the scripts part of the package.json file so we don't have to type as much bc we're lazy.

Nice and short

Now all you have to type to start the json-server is:

npm run server

Nice! We're now ready to use axios. Open up two terminal windows, one to keep the json-server running, and the other for react-app.

The axios library can now be imported in just like any other library in React. With a good ol' import statement.

import React, { useState, useEffect } from 'react;
import axios from 'axios';

For this example I'm gonna assume you know about React State Hooks, and if not, I'll make a mental note for another blog 😄 .

However, effect hooks will be exceptionally useful in our case becauuuse as the doc states:

The Effect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.

Let's now dive in to our app.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {

  // our state hook
  const [people, setPeople] = useState([])

useEffect(() => {
  console.log('effect')
  axios
    .get('http://localhost:3001/people')
    .then(response => {
      console.log('promise fulfilled')
      setPeople(response.data)
    })
}, [])
 console.log('render', people.length, 'people')

//...

Our faithful console.log gives us some hints as to what is happening here by clarifying the progression of the execution. The console prints out the following:

render 0 people
effect
promise fulfilled
render 3 people

The body of the function defining the component is executed first thus printing out render 0 people. Meaning data hasn't been fetched yet.
Our useEffect function is executed immediately after rendering.
In result, effect is printed followed by axios.get fetching our data.
promise fulfilled is registered inside our event handler for the operation and printed.
Lastly, the setPeople function changes our state thus triggering a re-render resulting in render 3 people being printed to the console. Meaning we've successfully fetched our data!

Let's refactor our effect hook:

const hook = () => {
    axios.get('http://localhost:3001/people')
    .then(response => {
      setPeople(response.data)
    })
  }
  useEffect(hook, [])

This way we can now see that useEffect() takes two parameters. Firstly, a function, or the effect itself. Once again, the doc is our friend:

By default, effects run after every completed render, but you can choose to fire it only when certain values have changed.

According to this, the effect is always run after the component has been rendered. In our case, we only want to execute the effect with the first render.

The second parameter of useEffect() is used to specify how often the effect is run. If the second parameter is an empty array [], the effect will only run with the first render.

You can fetch with axios now!

Well done! We've successfully performed a GET request with axios. We'll talk about sending data to the server in another post.

Resources

Video Producer to Teacher to Programmer...?

Rodrigo Rojas — Fri, 29 Jan 2021 01:20:27 +0000

My Journey to Becoming a Programmer

How did I get here?

This is a question I seem to be asking myself more and more ever since starting my coding bootcamp at Flatiron School. How did my path diverge from working as a video producer to eventually learning how to become a full stack programer? I think the answer primarily lies in my personality, and I’m not talking about the Myers & Briggs’ personality types.

If I could describe myself with one word it would be restless. Whether it’s in regards to staying in a place too long, or doing something so often that it becomes monotonous, I’m always looking for the next thing/project to do. However, in order to get a better understanding of how I got here, we have to go back.

I was born in Peru and lived there until I was seven. When my mom lost her job, she decided to move us to the United States in order to “have more opportunities”. Assimilating was hard at first, but eventually, I became a product of my environment, a typical American* kid. Obvious terms and conditions applied.

By this I mean that I received the occasional reminder that I wasn’t really supposed to be here, either because of my accent or strange name. This sense of not belonging could drive someone to give up, however I forgot to add that another good descriptor for myself would be stubborn. My stubbornness to quit combined with my restlessness was a recipe for destruction, especially for a single mom. Luckily enough, , I eventually found my place within a clique of misfits throughout my teenage years and got accepted to college by the skin of my teeth.

Living in The Big Apple was always a dream of mine. Ever since I visited as a teenager and saw the city in movies, New York City became synonymous with ‘success’ and ‘glamour’ in my eyes. Not to mention that a city that runs on Adderall seemed like a perfect fit for me.

I was so infatuated with the idea of having a NY lifestyle that figuring out what I wanted to major in during college became a secondary thought. Given that I wouldn’t have to declare a major until my second year, I can state for a fact that computer science / programming was the last thing on my mind. Eventually, my restlessness started kicking in again and was telling me that I had to study abroad.

It wasn’t until my year abroad in Peru that I started to get an idea of what I wanted to do in life. During this time that I was “studying” abroad, I learned more about myself rather than whatever I was supposed to in lectures.

This is an important takeaway because I eventually would later come to terms that academia no longer interested me. During my Year of Introspection as I like to call it, I was able to explore a culture that was part of my identity that I had not fully understood yet.

It was through the photographs of the people I encountered throughout my travels that led me to pursue a film career. I interned as a news photog in Lima until I moved back to NYC to graduate with a film degree. After college, I landed a job at a production company where I honed and perfected my skills, until parting ways to become an independent freelancer.

After living in NYC for 10 years and working in the video production field for 5, I felt that my job had started to become just “work”. Call it a moment of clarity, or just my (self-diagnosed) ADHD, that led me to packing everything up and moving to France. My time in France ticked another check milestone in my “What can I do next list”. During my time in France, I worked as an English teacher where I found the work to be extremely rewarding, until that is when COVID 19 hit.

At this point in my life, I’ve hit my dirty thirties and I’m not the spry young man that lived life with no plan. I knew that the pandemic would affect my employment status in France, and I was certain that I did not want to go back to producing video, so I decided to regroup and get my affairs in order back in CA where at least it’s sunny.

During the lockdown, my anxiety was turned up to 11 trying to find something to do. It was then that I logged into my old CodeCademy account and started going to town on some JS. My casual coding sessions turned into a daily routine, and I gave myself stretch goals of what else I could learn on my own.

There came a point however, where I found myself at an impasse. I was lost, but I didn’t want to give up just yet. Eventually, the thought of a coding bootcamp crossed my mind. I figured I’d apply just out of curiosity to see how far my obsessiveness would take me. So how did I get here? I haven’t looked back yet, and I’m hoping to share my coding journey with you for the next couple of months.

Gotta Have My Props

Rodrigo Rojas — Wed, 13 Jan 2021 22:14:47 +0000

React has a different approach to data flow & manipulation than other frameworks, and that’s why it can be difficult at the beginning to understand some concepts like props, state and so on.

I believe it’s better to keep explaining them in separated posts and in this blog post, I'm going to focus on React’s Props feature and how to use it.

What are Props?

React is a component-based library which divides the UI into little reusable pieces (or components). In some cases, those components need to communicate (send data to each other) and the way to pass data between components is by using props.

The main difference between state and props is that props are immutable. This is why the container component should define the state that can be updated and changed, while the child components should only pass data from the state using props.

These values can be anything: strings, objects (including arrays and functions), and so on. They give us the opportunity to make our components more dynamic, and a lot more reusable.

Using Props in React

First, define an attribute and its value.
Pass it down to child components using props.
Render the props data.

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent />
      </h1>
    );
  }
}

Up next we have our child component.

const ChildComponent = () => {  
  return <p>I'm the 1st child!</p>; 
};

If we want to reuse the child component, we're going to have a problem.

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent />
        <ChildComponent />
        <ChildComponent />
      </h1>
    );
  }
}

In this case, our parent component is going to render the same message 3 times.

What we'd like to do here instead is to get dynamic outputs. This way, each child component can have different data by using props.

Defining An Attribute and Its Value

We already know that we can assign attributes and values to HTML tags:

<a href="www.dev.to">Click here to visit Dev</a>;

We can do the same for React components by defining our own attributes and assigning values.

<ChildComponent someAttribute={value} anotherAttribute={value}/>

Let us declare a text attribute to the ChildComponent and then assign a string value: “I’m the 1st child”.

<ChildComponent text={“I’m the 1st child”} />

The ChildComponent now has a property and a value. Our next step is passing it down as props.

Passing Props Down to Child Components

Now let’s take the “I’m the 1st child!” string and pass it by using props.

Passing props is very simple. Like passing arguments to a function, we pass props into a React component and props bring all the necessary data.

const ChildComponent = (props) => {  
  return <p>Render the props here!</p>; 
};

Cool! So far we've created an attribute and its value, we've then passed it through props but we still can’t see it because we haven’t rendered it in the ChildComponent yet.

Before we move on to rendering props, note that when we console.log our props we get back an object:

Object {text: "I'm the first child"}

If you recall from my previous post about Javascript objects. We can access an object's elements with dot notation. Now we can render our text property with interpolation:

const ChildComponent = (props) => {  
  return <p>{props.text}</p>; 
};

Quick note: Notice how we're not using this to render our props? This is because in our example we're using a functional component rather than a class component.

Now let's add props to the other sibling components mounted on the ParentComponent

class ParentComponent extends Component {  
  render() {
    return (
      <h1>
        I'm the parent component.
        <ChildComponent text={"I'm the 1st child"} />
        <ChildComponent text={"I'm the 2nd child"} />
        <ChildComponent text={"I'm the 3rd child"} />
      </h1>
    );
  }
}

There we have it! We have successfully passed down props to the children components and rendered individual prop data.

Conclusion

Props stand for 'properties' and is a special React keyword.
Props are passed to components.
Props can only be passed to components in one-way (parent to child).
Props data is immutable (read-only).

Object of My Affection

Rodrigo Rojas — Wed, 02 Dec 2020 20:57:35 +0000

There are only seven fundamental data types in JavaScript, and six of those are the primitive data types: string, number, boolean, null, undefined, and symbol. With the seventh type, objects, we open our code to more complex possibilities. We can use JavaScript objects to model real-world things, like me, or we can use objects to build the data structures that make the web possible. But that's boring, let's use me as an example.

At their core, JavaScript objects are containers storing related data and functionality, but that deceptively simple task is extremely powerful in practice. We’ve been using the power of objects all along, but now it’s time to understand the mechanics of objects and start making our own!

Creating Object Literals

Objects can be assigned to variables just like any JavaScript type. We use curly girls, {}, to designate an object literal:

const rod = {}; // rod is an empty object :(

We fill an object with unordered data. This data is organized into key-value pairs. A key is like a variable name that points to a location in memory that holds a value.

We make a key-value pair by writing the key’s name, or identifier, followed by a colon and then the value. We separate each key-value pair in an object literal with a ,.

// An object literal with two key-value pairs
const rod = {
  hairColor: 'black',
  age: 'nunya'
};

Dot Notation for Accessing Object Properties

Properties of a JavaScript object can be accessed using the dot notation in this manner: object.propertyName. Nested properties of an object can be accessed by chaining key names in the correct order.

const rod = { 
  age: 'nunya',
  powers: {
    p1: 'sleeping',
    p2: 'programming'
  }
};
console.log(rod.age); // 'nunya'
console.log(rod.powers.p1); // 'sleeping'

Bracket Notation

The second way to access a key’s value is by using bracket notation, [ ].

We must use bracket notation when accessing keys that have numbers, spaces, or special characters in them. Without bracket notation in these situations, our code would throw an error.

const rod = {
  'Favorite Cheese': 'Camembert',
  'Wants Nap': true,
  hometown: 'Oakland',
  hungerLvl: 5
};
rod['Wants Nap'];   // Returns true
rod['Favorite Cheese'];   // Returns  'Camembert'
rod['hungerLvl'];   // Returns 5
rod['happinessLvl'];   // Returns undefined

With bracket notation you can also use a variable inside the brackets to select the keys of an object. This can be especially helpful when working with functions:

let returnAnyProp = (objectName, propName) => objectName[propName];

returnAnyProp(rod, 'Favorite Cheese'); // Returns 'Camembert'

If we tried to write our returnAnyProp() function with dot notation objectName.propName the computer would look for a key of 'propName' on our object and not the value of the propName parameter(trust me, I've made this mistake before).

Property Assignment

Once we define an object, we’re not stuck with all the properties we wrote. Objects are mutable meaning we can update them after we create them.

We can use either dot notation, ., or bracket notation, [], and the assignment operator, = to add new key-value pairs to an object or change an existing property.

One of two things can happen with property assignment:

If the property already exists on the object, whatever value it held before will be replaced with the newly assigned value.
If there was no property with that name, a new property will be added to the object.

It’s important to note that although we can’t reassign an object declared with const, we can still mutate it, meaning we can add new properties and change the properties that are there.

const rod = {age: 'nunya'};
rod = {age: 40}; // TypeError: Assignment to constant variable.
rod.age = 18; // Changes the value of the age property
rod.speed = 'Mach 5'; // Creates a new key of 'speed' with a value of 'Mach 5'

You can delete a property from an object with the delete operator.

const rod = {
  'Favorite Cheese': 'Camembert',
  'Wants Nap': true,
  motto: "I'm sleepy" 
};

delete rod.motto;  // Removes the motto property

Nested Objects

In application code, objects are sometimes nested— an object might have another object as a property which in turn could have a property that’s a collection of even more objects.

const rod = { 
  age: 'nunya',
  powers: {
  'Main Powers': {
    p1: 'sleeping',
    p2: 'programming'
 },
  'Secondary Powers': {
   p3: 'eating',
   p4: 'shopping'
}
  }
};

We can chain operators to access nested properties. We’ll have to pay attention to which operator makes sense to use in each layer. It can be helpful to pretend you are the computer and evaluate each expression from left to right so that each operation starts to feel a little more manageable.

rod.powers['Secondary Powers'].p4; // Returns 'shopping'

In the preceding code:

First the computer evaluates rod.powers, which results in an object containing the 'Main Powers' and 'Secondary Powers' objects.
We accessed the 'Secondary Powers' object by appending ['Secondary Powers'].
The 'Secondary Powers' object has a p4 property, accessed with .p4 which returned the value stored there: 'shopping' (I don't have a shopping problem I swear).

Summary

Woohoo! You made it to the end of my self-deprecating tutorial on JS objects. We’re well on our way to understanding the mechanics of objects in JavaScript. By building our own objects, we have a better understanding of how JavaScript built-in objects work as well(psstconsole). We can also start imagining organizing our code into objects and modeling real world things in code.

Extra Credit: Classes

One last thing before we go...
JavaScript is an object-oriented programming (OOP) language we can use to model real-world items. Classes are a tool that we'll use to quickly produce similar objects.

For example, imagine we have a daycare for doggos and want to create a catalog of all the dogs who belong to the daycare. Instead of creating an instance for every dog that joins the daycare, we can create a Dog class that serves as a template for creating new Dog objects. For each new dog, we can provide a value for their name.

class Dog {
  constructor(dogName) {
    this._name = dogName;
    this._behavior = 0;
  }

  get name() {
    return this._name;
  }
  get behavior() {
    return this._behavior;
  }   

  incrementBehavior() {
    this._behavior ++;
  }
}
const pooper = new Dog('Pooper');
console.log(pooper.name); // Pooper
console.log(pooper.behavior); // 0
pooper.incrementBehavior(); // Add one to behavior
console.log(pooper.behavior); // 1

Sources:

MDN Objects
Getter
Constructor
This
Console in Javascript

So You Think You Can Rails

Rodrigo Rojas — Tue, 10 Nov 2020 21:21:08 +0000

When I began coding with Rails only 3 weeks ago, I could state with confidence that I only understood about 20 percent of the reading material. The firehose of information was opened to max, and I had about two weeks to understand it all before our code challenge.

It was a lot of information, so I buckled down, read, and re-read the key READMEs, rewatched old lectures to the point that I found myself asking questions to my instructor from 4 days ago. In the end, I overcame, and passed! With this new albeit short feeling of triumph, I decided to write this post with some fundamental Rails commands to streamline your programming process.

Basic MVC Architecture

Model View Controller or MVC is a software design pattern for developing web applications.

Model - Responsible for maintaining data.
View - Presents all or some data to the User
Controller - Responds to user input and performs interactions between models and views

Create a new application

Install the Rails gem if you haven't done so before

$ gem install rails

Generate a new Rails app

$ rails new my-app

Initialize the database

$ rake db:create

Start the Rails server

$ rails s

Routes

Create a route that maps a URL to the controller action

# config/routes.rb
get 'welcome' => 'pages#home'

Shorthand for connecting a route to a controller/action

# config/routes.rb
get 'photos/show'

# The above is the same as: 
get 'photos/show', :to 'photos#show'
get 'photos/show' => 'photos#show'

Similarly, you can create all the RESTful routes for a resource by simply...

# config/routes.rb
resources :photos

HTTP Verb	Path	Controller#Action	Used for
GET	/photos	photos#index	display a list of all photos
GET	/photos_new	photos#new	return an HTML form for creating a new photo
POST	/photos	photos#create	create a new photo
GET	/photos/:id	photos#show	display a specific photo
GET	/photos/:id/edit	photos#edit	return an HTML form for editing a photo
PATCH/PUT	/photos/:id	photos#update	update a specific photo
DELETE	/photos/:id	photos#destroy	delete a specific photo

Create resources for specific actions...

# config/routes.rb
resources :photos, only: [:index]

Create a route to a static view, without an action in the controller

# config/routes.rb
# If there's a file called 'about.html.erb' in 'app/views/photos', this file will be 
#   automatically rendered when you call localhost:3000/photos/about
get 'photos/about', to: 'photos#about'

Reference: http://guides.rubyonrails.org/routing.html

Controllers

Generate a new controller

Attention: Capitalize controller names and pluralize

$ rails g controller Photos

You can generate a new controller with default actions, routes and views

$ rails g controller Photos index show

Reference: http://guides.rubyonrails.org/action_controller_overview.html

Models

Generate a model and create a migration for each table

Attention: Capitalize model names and singular

$ rails g model Photo

Generate a model and create a migration with table columns

$ rails g model Photo location:string description:text

The migration automatically created for the above command:

class CreatePhotos < ActiveRecord::Migration
  def change
    create_table :photos do |t|
      t.string :location
      t.text :description

      t.timestamps null: false
    end
  end
end

Reference: http://guides.rubyonrails.org/active_model_basics.html

Migrations

Migration Data Types

:boolean
:date
:datetime
:decimal
:float
:integer
:primary_key
:references
:string
:text
:time
:timestamp

Scaffolding

Scaffolding is great for prototypes but don't rely too heavily on it. Here's a good explanation on why: http://stackoverflow.com/a/25140503

$ rails g scaffold Photo location:string description:text
$ rake db:migrate

Rake

View all the routes in an application

$ rake routes

Seed the database with sample data from db/seeds.rb

$ rake db:seed

Run any pending migrations

$ rake db:migrate

Rollback the last migration performed

ATTENTION: Keep in mind that this command is destructive and you could lose your data. Make sure you run any pending migrations and re-seed after making the appropriate changes.

$ rake db:rollback

...will rollback your migrations one step.

$ rake db:rollback STEP=n

...will rollback your migrations n number of steps.

Path Helpers

Creating a path helper for a route

# Creating a path helper for a route
get '/photos/:id', to: 'photos#show', as: 'photo'

# app/controllers/photos_controller.rb
def show
@photo = Photo.find(params[:id])
end

# View for the action
<%= link_to 'Photo View Page', photo_path(@photo) %>

Once again, path helpers are automatically created when specifying a resource in config/routes.rb

# config/routes.rb
resources :photos

For example, let's look at all the RESTful routes for photos

HTTP Verb	Path	Controller#Action	Named Helper
GET	/photos	photos#index	photos_path
GET	/photos/new	photos#new	new_photo_path
POST	/photos	photos#create	photos_path
GET	/photos/:id	photos#show	photo_path(:id)
GET	/photos/:id/edit	photos#edit	edit_photo_path(:id)
PATCH/PUT	/photos/:id	photos#update	photo_path(:id)
DELETE	/photos/:id	photos#destroy	photo_path(:id)

Form Helpers

Connect a form to a model for creating or updating a resource.

Use this method if you're using strong params to protect against mass assignment.
Some helpful documentation on strong params and mass assignment: https://ropesec.com/articles/mass-assignment/

# app/controllers/photos_controller.rb
def new
  @photo = Photo.new
end

# app/controllers/photos_controller.rb
def create
  @photo = Photo.new(params.require(:photo).permit(:description, :location)
Photo.save
redirect_to photo_path(@photo)
end

# ERB view
<%= form_for @photo do |f| %>
  <%= f.text_field :location %>
  <%= f.text_area :description, size: "60x12" %>
  <%= f.submit "Submit" %>
<% end %>

And there you have it! Use this guide to help you understand the different rails commands to help you create your MVC along with RESTful routes for your Models.

References: [http://guides.rubyonrails.org/form_helpers.html]
[http://www.pragtob.info/rails-beginner-cheatsheet/]