DEV Community: Caleb Alessandro Rodriguez

Looping Over Objects.

Caleb Alessandro Rodriguez — Mon, 25 Jul 2022 16:05:59 +0000

Ever wanted to loop over an object and change all of the values? Like when you're building a react app with state and you have multiple inputs. Now maybe you want to clear all of the state with a clear button? Let me show you one way I came by from the amazing Wes Bos.

I will be showing this in vanilla JS.

First, let's make the object

const product1 = {
   name: 'Giant Sour Gummy Worm',
   price: 35.00,
   description: 'A giant gummy worm coated with sour powder and waiting to be eaten!',
   image: 'https://images.vat19.com/worlds-largest-sour-gummy-worm/worlds-largest-gummy-worm-sour-flavor-1.jpg',
   availability: 'FOR_SALE',
}

Now that we have the object we need to loop over it by changing it to an array. Using Object.entries()

Object.entries(product1)

If we console.log() that we should get something like this.

[
  [ 'name', 'Giant Sour Gummy Worm' ],
  [ 'price', 35 ],
  [
    'description',
    'A giant gummy worm dunked in sour powder and waiting to be eaten!'
  ],
  [
    'image',
    'https://images.vat19.com/worlds-largest-sour-gummy-worm/worlds-largest-gummy-worm-sour-flavor-1.jpg'
  ],
  [ 'availability', 'FOR_SALE' ]
]

Do you see how each array has two items? The first is the key and the second is the value!

Now if we simply map() over the array we can change all of the inner array values.

const mappedProduct = Object.entries(
    product1
    ).map(([key, value]) => [key, ''])

When we map over it now we must destructor the key and value with [key, value]. When we want to change all values we enter a new value like so [key, 'new value']. In this case we're just clearing the values so I left an empty string to keep it blank.

Now console.log(mappedProduct) will give us

[
  [ 'name', '' ],
  [ 'price', '' ],
  [ 'description', '' ],
  [ 'image', '' ],
  [ 'availability', '' ]
]

Awesome now all we have to do is change it back to an object! This is super simple all we need is Object.fromEntries(). Everything has to be wrapped in it, Like this.

const clearedProduct = Object.fromEntries(
  Object.entries(
    product1
  ).map(([key, value]) => [key, ''])
)

And with that we're done, if we console.log(clearedProduct) we'll get this.

{ 
  name: '', 
  price: '', 
  description: '', 
  image: '', 
  availability: '' 
}

If you're still having some trouble visualizing this, here is a replit I made

TLDR: Using Object.entries() and Object.fromEntries() we can loop over an object by turning it into an array and then back into an object

Object.fromEntries(
  Object.entries(
    objectYouWantToLoopOver
  ).map(([key, value]) => [key, ''])
)

Fetching data depending on the date.

Caleb Alessandro Rodriguez — Wed, 09 Mar 2022 19:17:13 +0000

In the past three weeks of building my capstone project for a software engineering boot camp I'm close to graduating from, I came upon an issue(one of many). Every day I needed to fetch a prompt from my rails backend based on what date that prompt instance has. In this Dev-Blog, I'll show you what I came up with. I'm sure there's a better way, but this is mine.
Note: I'm using a JS react frontend and a ruby on rails backend

Let's start with the backend. First set up your resources.

rails g resource Prompt title date:date

make sure to use a date table when generating them. Once that's finished you can go ahead and migrate.

rails db:migrate

Okay cool, now let's look in the Prompt controller. You should have something like this.

class PromptsController < ApplicationController

end

Before we forgot to go into the config file and down somewhere near the bottom should be a routes.rb file. Go ahead and add a new route to it, name it whatever you want, I'm going to name it...

get '/prompts/:date', to: 'prompts#show_prompt_by_date'

Now, let's go ahead and make the method for grabbing the data by the date.

class PromptsController < ApplicationController

  def show_prompt_by_date 
     #grabbing the specific prompt using the params
     prompt = Prompt.find_by(date: params[:date])

     #rendering/error handling
     if prompt
        render json: prompt, status: :ok
     else
        render json: { errors: ["Prompt not found"] }, status: :not_found
     end
  end

  private

  #being safe
  def prompt_params
     params.permit(:date)
  end
end

If you're using sterilizers go ahead and add date and whatever other table you want to show up in front of the attributes.

class PromptSerializer < ActiveModel::Serializer
  attributes :title, :date
end

If you aren't then when you render the prompt render it with includes.

render json: prompt, include[:title, :date, status: :ok

After all that lets add some seed data
seeds.rb

Prompt.destroy_all

Prompt.create!(title: "July, 15th, 2020", date: 7152022)
Prompt.create!(title: "March, 9th, 2020", date: 392022)
Prompt.create!(title: "March, 10th, 2020", date: 3102022)

puts "done seeding"

Now go ahead and seed!
rails db:seed

That's it for the backend!

Now for the frontend.

First in whatever component you want to fetch the data in you'll need to set up a few things, I'll be using the hooks useState(for grabbing state) and useEffect(for fetching whenever window is loaded). Let's import that and also get and format the current date.

App.js

import React, { useState, useEffetc } from "react";

function App(){
  //setting up our useState for assigning a prompt 
  const [prompt, setPrompt] = useState([])

  //grabs the current date/time
  const currentDate = new Date();

  //formatting our date for fetching
  const date = `${current.getMonth()+1}${current.getDate()}${current.getFullYear()}`;

  return(
    <div>nothing here yet</div>
  )
}

export default App;

Now all that is left to do is set up our useEffect/fetch and do something with the fetched data.

App.js

useEffect(() => {
  //your url might be different, such as: http://localhost:4000/prompts/${date}

  fetch(`/prompts/${date}`)
  .then((r) => r.json())
  .then(data => {
     setPrompt(data)
     fetchPosts(data.id)
   })
}, [date]);

//doing something with the data
return (
  <div>{prompt.title} : {prompt.date}</div>

That's pretty much it, run your backend with rails start and your front with npm start. Hopefully, this was helpful, thank you for reading.

How to use mouse coordinates to make an image button with React.

Caleb Alessandro Rodriguez — Sat, 08 Jan 2022 07:44:42 +0000

Starting my Phase 2 Project for the Software Engineering course I'm enrolled in at Flatiron school I was honestly a bit unsure and even scared about one obstacle, finding and using mouse coordinates. Starting off my project partners and I came up with the idea to make a simple point and clicker game. We were then informed that a good way to do this would be to select a section of the window and using coordinates we could turn that given area into a button. Before I get into this I would like to say I'm only a student and my knowledge of JS and React is not big. Secondly, finding the mouse coordinates are very simple but instead of writing out a whole new, probably worse explanation, here is the explanation I followed by Jason Brown. Anyways let's get into it.

Assuming you followed Mr. Brown's tutorial you should have a useMousePosition component all ready to go. I'm going to use the art I made from the project as an example and introduce you to Slippy.

Above you can see currently Slippy is sleeping, I would like to be able to click on the WAKE button to well wake him up. Thanks to useMousePosition, the coordinates of the button, and some conditional logic I can do so, lets go ahead and put this image of Slippy in an useState after importing both the image and hook.

Let's start by grabbing the coordinates of each corner we want.

You should end up with four different numbers, two for the x position and two for the y position. Make sure to write those numbers down, and separate them according to which x and y go together.

Now before anything else, you need to import useMousePosition into the component you want to use it in and save it to a variable as a value to be used later on. I also like to take it a step further and destructor and save x and y as well, like so.

import React { useState } from "react";
import slippySleeping from "./images/slippySleeping.gif";
import { useMousePosition } from "./useMousePosition";

App function(){
  const [slippy, setSlippy] = usestate(slippySleeping)

  const position = useMousePosition();
  const x = position.x;
  const y = position.y;

  return (
   <img src={slippy} alt="Slippy Sleeping" />
  );
};

export default App;

Now that we have this set up we can add an on click to the image tag and link a function inside of it. Let's call the function wakeSlippy. This function will hold the conditional logic and change the previous state to a new state, with that in mind make sure to import your second image. You should end up with something like this.

import React { useState } from "react";
import slippySleeping from "./images/slippySleeping.gif";
import awakeSlippy from "./images/awakeSlippy.gif";
import { useMousePosition } from "./useMousePosition";

App function(){
  const [slippy, setSlippy] = usestate(slippySleeping)

  const position = useMousePosition();
  const x = position.x;
  const y = position.y;

  function wakeSlippy(){
    setSlippy(awakeSlippy);
  }

  return (
   <img src={slippy} onClick={wakeSlippy} alt="Slippy Sleeping" />
  );
};

export default App;

What we have right now will change the image no matter where we click on the image, let's fix that. Remember those coordinates? Well, it's time to use them. The conditional logic should look something like this.

if(x < biggerNumX && y < biggerNumY && x > lesserNumX && y > lesserNumY) { 
  setSlippy(awakeSlippy;
}

What we've done here is find the corners of the button and make
a square with the conditional logic. Now all you need to do is put it into the wakeSleepy function and you should have something like this.

If you wanted to put Slippy back to bed all you'd need to do is get the coordinates for the bed and add some more conditional logic and that's it, pretty simple! One final word, this method of making buttons can be pretty unreliable unless you update your code for all screen sizes.

First Day at Flatiron and my biggest struggle.

Caleb Alessandro Rodriguez — Thu, 25 Nov 2021 07:20:55 +0000

Up to this point my day online, in Zoom calls, and working through labs(Assignments) had been pretty good. I had been working through labs with little to no trouble for the most part Until phase-1-first-class-functions-lab. The lab started of moderately normal, it wasn't "easy" but it wasn't super hard. The thing with Flatiron and its assignments is that the README.md files, explaining what to do but not completely telling, are worded in a way that you have to read over and over to understand. but maybe that's just me being literate and Flatiron trying to teach me to be literate with code. Just being a beginner I don't understand enough yet. In the end I spent too much time on this part of the code.

const selectingDrivers = [returnFirstTwoDrivers, returnLastTwoDrivers];

 const createFareMultiplier = i => {
     return function(i) {
         return i * i;
     }
 }

But it was one of the best feelings in the world completing it.

P.S: Excuse my subpar grammar, I don't write/blog much.