DEV Community: victoriaehrbar

Fetch requests in JavaScript

victoriaehrbar — Wed, 16 Mar 2022 19:07:34 +0000

Most of the time in your applications, you will need to access data, or "fetch" it from another source, such as a server, API, etc.

This is where fetch requests come in handy.

I'll use this free API about dogs for dummy data.

A fetch request starts out looking like this:

fetch("https://dog.ceo/api/breeds/image/random");

All this does is request the data though; we need some kind of response so we can actually see this data.

fetch("https://dog.ceo/api/breeds/image/random").then((response) => {

});

The response object needs to be translated into a JSON so we are able to use it.

fetch("https://dog.ceo/api/breeds/image/random").then((response) => {
  return response.json();
});

Since the json() method also returns a promise, let's return that promise and use another then().

fetch("https://dog.ceo/api/breeds/image/random")
  .then((response) => {
    return response.json();
  })
  .then((json) => {
    console.log(json);
  });

Don't forget to add a catch() method at the end of the series of then() methods to catch any errors for unsuccessful requests.

fetch("https://dog.ceo/api/breeds/image/random")
  .then((response) => {
    return response.json();
  })
  .then((json) => {
    console.log(json);
  })
  .catch((err) => {
    console.log(err);
  });

React Components

victoriaehrbar — Wed, 16 Mar 2022 18:43:52 +0000

Yesterday I passed my final assessment at Flatiron School on React. I personally found this section to be tough as there was a lot of material to review beforehand. I spent a lot of time mastering the differences between various components, so I thought I would outline it in a blog post.

What is a component and what are the different types of components?
The official React documents on components define it as so:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Components contain functions and create presentation of the code. There are two types of components, container and presentational components. There are also two ways to write components, as either functional or class.

Container vs. Presentational

Container components deal with function rather than presentation. They tend to be stateful, and will use the redux store to send data to other containers or presentational components.

Presentational components are used to render views on the frontend. They are stateless and do not have access to redux.

Functional vs. Class

Functional components are written as JavaScript functions an explicitly use return. The return value of the function depends on the props that are passed in. Functional components are used when you are coding presentational components without their own state or access to lifecycle methods.

Class components are a JavaScript class that extends React. Class components have lifecycle methods that are used to fetch data and create objects. They are stateful components that control how state changes.

Repost: Flatiron School Phase 1 CLI Project

victoriaehrbar — Tue, 15 Mar 2022 01:05:21 +0000

(This was posted on the Learn.co blogging platform for my Phase 1 Flatiron School project; it is being cross-posted here due to the transition to Canvas and the removal of the Learn.co blogging function).

I have just completed my CLI Project! I had a little bit of a hard time getting started, mostly due to the decision between scraping and using an API. I had never used an API and felt unfamiliar with them. I had attended a few study group sessions and learned a little bit more about the pros and cons of scraping vs. using an API, and ultimately opted to use an API in my project. It was also a little bit new for me writing code without tests to pass, but it was a great learning experience.

Once I found a list of public APIs, the idea of building an app around drink recipes became very appealing, so this is what I ultimately chose. With the limited availability of bars and restaurants during 2020 and into 2021, I have been trying to experiment with at-home cocktail recipes. I figured I would actually potentially use this app in my real life outside of Flatiron School, so that became a bonus perk of this project.

Originally I had planned to only make this project about margarita recipes, but I was pushed by Dustin during study group to expand this to any drink recipe. I therefore was able to modify the code so the API would take any drink recipe input and, if valid, output a recipe with instructions for the user. This was a pretty cool unexpected feature I wasn’t planning on originally having, but made the project more fun and ultimately more useful.

Once I got the API class working, I moved on to displaying the objects. Once this worked, I also added the feature of asking for a new input if the user put in a drink that the API did not have a recipe for.

This project definitely taught me a lot about Object Oriented Ruby and I am happy to have synthesized my skills into this project. I was able to connect with peers I hadn’t met before and work with others and learned a lot at the CLI study group sessions. Now that I’ve completed the first project I feel more confident in my abilities to tackle the next ones and am more aware of the resources available to me.

React Project: Flatiron School Phase 5

victoriaehrbar — Tue, 08 Mar 2022 01:21:49 +0000

I have just finished my final project at Flatiron School. This 5th and final module focuses on React and Redux.

This project rates and reviews different BBQ restaurants. As a new Texan, I am attempting to try as many BBQ restaurants as possible from The Top 50 Texas BBQ Joints: 2021 Edition from Texas Monthly.

Similarly to the Phase 4 JavaScript project, this project was created with 2 repos (frontend; backend). The backend is a Ruby on Rails API and the frontend was created with the create-react-app command. I decided to keep this project very simple in an MVP format, as I will have the option to enhance this project, as well as my 4 other projects, after graduation as a way of keeping my coding skills up to date.

The backend was fairly simple to set up. I used the Rails scaffold generator to create the BBQ model and some seed data.

Then I moved on to the frontend. The create-react-app command adds boilerplate code to get started. I then used npm to add Redux, Thunk, and React Router. As stated before, I decided to leave this in an MVP format so I can enhance this project after I graduate, so I did not add bootstrap or any styling.

Then I had to set up the App component, the Index component, the redux store, and my reducer.

I then set up my BBQ components (index, form, listitem). ListItem displays the restaurants nicely on the index, and the form allows the user to add a new BBQ restaurant review.

The addition of a navbar allows the user to go to the home page, add a BBQ restaurant, or view all of them.

Overall, this was a tough project and I learned a lot about React and Redux. I look forward to building more features on this project in the future.

JavaScript Project

victoriaehrbar — Fri, 14 Jan 2022 17:34:42 +0000

I finished my phase 4 project for Flatiron School! I created a single-page web application for my JavaScript project.

I created 2 separate repos for the front end and back end. The back end was fairly similar to the phase 3 Rails project, with controllers, models, and has_many relationships.

My project was a book review/tracker, where a user can input a title, author, description, and category/genre. A category has_many books and a book belongs_to a category.

While it was interesting to create a mini Rails project and review some old material, I was most interested in the front end JavaScript portion and refining what I learned in phase 4. I utilized the fetch method to get the book data to display on the page, display new posts, and to delete posts.

The back end part of the project required creating a Rails API, which was interesting as the phase 3 Rails project did not incorporate this. The front end JavaScript portion of this project communicates with the API for the front end and back end to work together.

In JavaScript, event listeners are used to create actions. For example, my project has an attachDeleteButtonListener, which lets the server know that when the delete button is clicked, that book entry should be removed from the page. There is also another event listener that lets the page know to create a new book when "submit" is clicked on the new book form.

Overall, the JavaScript project was a great fusion of Rails and JavaScript that allowed me to synthesize my JavaScript knowledge and create a fun single-page web application.

Rails Blog Post

victoriaehrbar — Tue, 30 Nov 2021 19:42:42 +0000

I finished my Rails blog post for my Phase 3 project at Flatiron School.

I decided to create a project similar to my Sinatra project; my Sinatra project was a "pupdate" blog to keep up with puppy updates and my Rails project is about rating dog training. Dogs are given a score, top scores are displayed separately, and the scores have space for descriptions on training progress.

I created models and controllers for the training updates, the dogs, and the users. A breed model also allowed for a dog to belong_to a breed. I set up the has_many and belongs_to relationships as needed.

Users are able to log in, log out, see the dogs listed that are available to provide a training score for, or create a new dog to score. Validations are in place so users are not able to update others' scores or added dogs.

Another element of this project that is more advanced than Sinatra is that there is the option to log in with Google. Omniauth allows users to log in with third-party logins, such as Facebook, Twitter, Github, or Google. I chose to do Google. Users can use their Google account to log in.

If you want to check out my project, here is the GitHub repo.

Sinatra Assessment

victoriaehrbar — Tue, 28 Sep 2021 23:43:09 +0000

I just got a new puppy, so I was inspired to create the Pupdate Blog to create posts about my puppy's training progress. However, anyone can sign up, log in, and create their own Pupdates about their own dog.

First, I used the corneal-new gem to create boilerplate code. I added views, models, and controllers.

Users sign up using an email and password. I used the bcrypt gem to ensure the user's password is protected.

Then I set up the UsersController and PupdatesController files and mounted them in config.ru. I also added "user Rack::MethodOverride" to give access to Rack middleware so my app will have access to HTTP verbs other than GET and POST, such as PATCH and DELETE.

I created two migrations with rake db:create_migration: one for the users table and one for the pupdates table. The users table has 3 columns: name, email, password_digest. The pupdates table has a title, content, and a user_id.

Next, I created a seed file to fill the table with some dummy data to play with and test the app's functionality.

Back in the controllers, I created the routes needed for the UsersController to sign up, log in, and log out. I also added in the PupdatesController the ability to create a new post, edit a post, and delete a post. I also authenticated the user to ensure that a user can't edit or delete other users' posts. Helper methods were useful for that!

Since all of the functions are behaving well, I added some UX features. I used the flash gem to flash messages at users to give them information. For example, when you delete a post, "Pupdate deleted" appears on the screen. Users also see a flash message when they enter invalid login credentials.