DEV Community: sarahnosal

Nested Resource Routing

sarahnosal — Wed, 09 Feb 2022 21:09:35 +0000

Nested resources give us a way to document the parent/child relationship in our routes and URLs.

As an example, let's says we're planning a wedding and looking at venues so we create a Rails app with a venues resource and a reviews resource where you can display all venues in an area and each venue has many reviews. What we would like to end up with is a path like /venues/1/reviews to see all the reviews for a particular venue or /venues/1/reviews/2 to read a particular individual reviews for a venue.

A normal but rather cumbersome way to achieve these results would be to write some routes with dynamic segments and telling them exactly which controller will handle the actions. Then write the code for the actions in the venue_controller to do the work. The routes would look like this:

get '/venues/:venue_id/reviews', to: 'venues#index'
get '/venues/:venues_id/reviews/:id', to: 'venues#review'

And the actions like this:

def index
  venue = Venue.find(params[:venue_id])
  reviews = venue.reviews
  render json: reviews, include: :venue
end

def review
  review = Review.find(params[:id])
  render json: review, include: :venue
end

Although this way works, it violates Separation of Concerns because the responsibility of rendering reviews is now under the venues_controller, and not only that it violates Don't Repeat Yourself (DRY) because the same code is essentially repeated in the reviews_controller.

Thankfully Rails has an easier way to do this but we need to utilize the ActiveRecord associations between our venues and our reviews. A venue has_many :reviews and a review belongs_to :venue. Because of this we can consider reviews to be a child of a venue. This allows Rails to consider it a nested resource of a venue for routing purposes. Our new routes will look like:

resources :venues, only: [:show] do
   resources :reviews, only: [:show, :index]
end

resources :reviews, only: [:show, :index, :create]

Now rather than dealing with the venues_controller we are instead dealing with the reviews_controller for the nested routes, so we are no longer violating Separation of Concerns. Not only that, but we only need the code for the :show and :index actions that is already in the reviews_controller, rather than redoing it in the venues_controller, so no more repeating code!

The last step is updating the :index action in the reviews_controller to handle the nested resource.

def index
   if params[:venue_id]
      venue = Venue.find(params[:venue_id])
      reviews = venue.reviews
   else
      reviews = Review.all
   end
   render json: reviews, include: :venue
end

The conditional is used to differentiate if a wedding planner is trying to access all reviews of all the venues or if they are trying to access all reviews of a specific venue. Hopefully this quick lesson allows you to keep your routes clean without any violations of Separation of Concerns or Dry!

RegEx What?

sarahnosal — Wed, 26 Jan 2022 14:29:08 +0000

If you're anything like I was 10 minutes prior to writing this blog- you have little to no understanding of what RegEx do or when to use them. Well lucky for you, you've stumbled upon this article, and I'm here to enlighten you.

RegEx- or regular expressions- are powerful ways to search through strings or blocks of text for particular patterns. Some basic tasks they can be used for are data validation, searching, mass file renaming, and finding records in a database. Think creating emails, usernames, or passwords on a website- there's always requirements like one uppercase character, or a special symbol. Well how do you think the site knows whether or not you've typed in a valid password or email? RegEx.

There are two ways to write RegEx, either between two forward slashes: /your regex/ or the long way by creating a regular expression object: Regexp.new('your regex'). Writing a series of letters or numbers in your RegEx will result in a search for the exact matches of this pattern anywhere in the string that you're searching. However- the only reason to use the plain forward slashes way of writing regex is if you want to find a specific word, or pattern within the string you're searching through. If you would like to search for multiple specific characters, like vowels, you would need to include brackets- /[aeiou]/. This will search the string for every instance of each of those vowels. One cool feature of RegEx is the ability to use ranges, for instance if you want to find every number in your string, rather than writing /[0123456789], you could simply write [0-9], and it would return the same results.

Now you're probably thinking...'okay I know how to write RegEx but how do I incorporate that into Ruby?' Well I got you. There are a few Ruby methods that you can pass your RegEx to and they'll return some different results. First- scan. It will return an array of all items in your string that match a given RegEx. See the example below:

"Duchess is the cutest dog ever".scan(/[aeiou]/)
=> ["u", "e", "i", "e", "u", "e", "o", "e", "e"]

Next is match. It will return the first item in your string that matches the RegEx as a MatchData object. Using Duchess as an example again:

"Duchess is the cutest dog ever".match(/\w+est/)
=> #<MatchData "cutest">

A fantastic resource for figuring out more RegEx syntax is Rubular. I know I haven't gone too crazy in depth into this crash course on RegEx, but I hope I've given you enough of a push in the right direction to use this in your own code. Or at least the resources to find out more information and ways to find new patterns. Happy coding!

How to make forms reusable and dynamic in React.

sarahnosal — Wed, 05 Jan 2022 16:45:05 +0000

We've all seen forms on different websites before so we know how big they can get with lots of different fields. Making these types of forms in react can be a bit tedious if you don't know how to make them more dynamic and reusable.

Up until now the typical way to make a form is to set State for each input field...first name, last name, address, what have you. If you were to create a basic form to collect someone's contact information, it might look something like the below example:

import React, { useState } from "react";

function Form() {
  const [firstName, setFirstName] = useState("Sarah");
  const [lastName, setLastName] = useState("Nosal");
  const [address, setAddress] = useState("123 Zephyr Cove")
  const [email, setEmail] = useState("example@gmail.com");


  function handleFirstNameChange(event) {
    setFirstName(event.target.value);
  }

  function handleLastNameChange(event) {
    setLastName(event.target.value);
  }

  function handleAddressChange(event) {
    setAddress(event.target.value);
  }

  function handleEmailChange(event) {
    setEmail(event.target.value);
  }

  return (
    <form>
      <input 
         type="text" 
         onChange={handleFirstNameChange} 
         value={firstName} />
      <input 
         type="text" 
         onChange={handleLastNameChange} 
         value={lastName} />
      <input 
         type="text" 
         onChange={handleAddressChange} 
         value={address} />
      <input 
         type="text" 
         onChange={handleEmailChange} 
         value={email} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

As you can see, this can get pretty long and tedious, especially when you have multiple fields whose values you are trying to capture, which is not uncommon for a form on any website today. Plus, if you want to add anymore fields you would have to add a new state variable by calling useState() to hold the value of the new input field, as well as add a new handleChange function to handle updating state for that field.

Let's try making this form again using a dynamic onChange event handler. Our first step will be refactoring the state variables so we are only calling state once. To do that, we have to make an object representing all of our input fields as shown below:

import React, { useState } from "react";

function Form() {
  const [formData, setFormData] = useState({
     firstName: "Sarah",
     lastName: "Nosal",
     address: "123 Zephyr Cove",
     email: "example@gmail.com",
  })

This already looks way better than calling state 4 different times. If we need to add another input field in the future, rather than creating a new state variable and calling state for that new input field, we would simply add a new key:value pair to our formData object.

Next we have to update the handleChange functions to update the state (I will put all the code together at the end):

function handleChange(event) {
   const name= event.target.name;
   const value= event.target.value;

   setFormData({
      ...formData,
      [name]: event.target.value,
    });
 }

We are setting a new state whenever we submit the form, so we have to use the spread operator here to copy all the key/value pairs into our new state object. As you can see we have condensed all the handleChange functions for each input into one reusable function. The only way we can do this is if we give a name attribute to each input field and if that name attribute matches the key in formData object. So now if we wanted to add an input field to our form all we would have to do is add a key/value pair and add the name attribute to that new input that matches the corresponding key. Check out the final code below!!

import React, { useState } from "react";

function Form() {
  const [formData, setFormData] = useState({
    firstName: "Sarah",
    lastName: "Nosal",
    address: "123 Zephyr Cove",
    email: "example@gmail.com",
  });

  function handleChange(event) {
    const name = event.target.name;
    const value = event.target.value;

    setFormData({
      ...formData,
      [name]: value,
    });
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="firstName"
        onChange={handleChange}
        value={formData.firstName}
      />
      <input
        type="text"
        name="lastName"
        onChange={handleChange}
        value={formData.lastName}
      />
      <input
        type="text"
        name="address"
        onChange={handleChange}
        value={formData.address}
      />
      <input
        type="text"
        name="email"
        onChange={handleChange}
        value={formData.email}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

I hope you can apply this dynamic onChange event handler to any future forms you create to make them more streamlined and the code easier to read!!

My Journey to Software Engineering

sarahnosal — Fri, 10 Dec 2021 00:13:03 +0000

Getting into coding and the field of Software Engineering has been a bit of a whirlwind, but one that I am excited to be a part of. Having received a BS in Finance from Grove City College, my prior professional history consisted of finance and sales related positions; with my most recent title being that of a Financial Advisor at an online car dealership. After working in that position for a year and a half, I realized it was too taxing emotionally and mentally to continue long-term, and I didn't see myself moving up with the company to continue my career path. It was time to make a change. I spent some time researching various career paths and industries to get into, and finally landed on Software Engineering being the choice for me.

After looking extensively at the different options out there, I landed on FlatIron as the school for me. The curriculum is sound and their values as a school seemed to align with mine as well. I am currently finishing up the first phase and so far have been very pleased with the amount I've learned. So far, we've covered bits of:

HTML
JavaScript
CSS (minimally)

One thing I do wish I had done prior to enrolling in FlatIron is engaging in more self-teaching. There are many great resources out there that I have started utilizing to supplement the FlatIron curriculum, these being:

Jumping into coding has been overwhelming at times but very interesting! Phase 1 has been great so far and I am very excited to see where the rest of the program leads me.