Forem: jgifford82

Infinite Scroll

jgifford82 — Thu, 01 Jun 2023 01:53:23 +0000

I'm at the end of the fifth (and final!) phase of my coding boot camp. We previously learned about JavaScript, React, and Ruby on Rails. In this phase, we had to complete a full stack project utilizing React and Ruby on Rails that also implements something new that we hadn't learned in the boot camp. I chose to implement infinite scroll.

In my project, infinite scroll pulls in additional data as a user scrolls down the page. This can be a helpful alternative to fetching all the data up front when there is a large amount of data, which could potentially be slow to load.

It's possible to implement infinite scroll using React's built-in functions, though I chose to implement it using the react-infinite-scroll-component.

Here's how I did it:

1. Set up the backend controller

Note: As I build out projects, I like to set up each feature on the backend first, then the frontend, though you don't necessarily have to do it in this order.

My project is a tea recipe sharing app, and I wanted infinite scroll to pull in 3 teas at a time. Since it's pulling in multiple teas, it's going to route to the index method of the teas controller. Therefore, my routes.rb file needs the routing logic to have the teas resource with index method:
resources :teas, only: [:index]

In the teas controller, I set up the index method to GET 3 teas at a time alphabetically by name regardless of capitalization. The data is broken up into pages containing a specific number of items, 3 teas per page in this example, reducing the amount of data transferred and improving the overall performance. The page number parameter from the request is converted to an integer, and checks if the integer is positive. Otherwise, it defaults to 1 to prevent the database error "OFFSET must not be negative."

The line offset((page - 1) * per_page) skips the appropriate number of teas based on the current page number and the number of teas per page. Then, limit(per_page) limits the result to the specified number of teas per page.

    def index
        page = params[:page].to_i.positive? ? params[:page].to_i : 1
        per_page = 3

        teas = Tea.order('lower(name)').offset((page - 1) * per_page).limit(per_page)
        render json: teas, include: ['category', 'reviews', 'reviews.user']
    end

I tested this in Postman by sending a GET request to localhost:3000/teas, which successfully returns JSON displaying the first 3 teas in alphabetical order.

2. Install React infinite scroll component

With the backend taken care of, it's time to switch gears to the frontend. In my project, I navigated to the folder containing my frontend files to install the React infinite scroll component. It's important to install it in the correct folder directory, otherwise it could lead to errors, which I learned the hard way! After navigating to the correct folder, in this case "client," I ran npm i react-infinite-scroll-component based on the component documentation.

3. Import InfiniteScroll

The component that will utilize infinite scroll needs to import it. In my project, I used it in my TeasList component, so it has this code at the top:
import InfiniteScroll from "react-infinite-scroll-component";

4. Fetch data

When the TeasList component mounts, a useEffect hook fetches teas data as shown below. It's only pulling in the first page of teas since the backend was set up to divide the data into pages. It converts the data to JSON, then populates teas state with that data. I used useContext for teas state to prevent props drilling through multiple components.

  useEffect(() => {
    fetch("/teas?page=1")
      .then((r) => r.json())
      .then((data) => setTeas(data));
  }, [setTeas]);

At the top of the TeasList component, I imported the necessary hooks for that fetch:
import { useContext, useState, useEffect } from "react";

Teas context is imported as well:
import { TeasContext } from "../context/teas";

Inside the function body of the TeasList component, teas state is destructured from TeasContext so it can be used in the fetch request, as well as the next fetch request in the next step:
const { teas, setTeas } = useContext(TeasContext);

5. Fetch more data

The previous step only pulls in the first page of data when you first navigate to the page. Another function is needed to pull in more data. The fetchMoreTeas function below handles this. The function is triggered when the user reaches the end of the page. It updates teas state with newly fetched data, increments the page state for the next fetch, and sets hasMore to false if there are no more teas to fetch.

  const fetchMoreTeas = async () => {
    const response = await fetch(`/teas?page=${page + 1}`);
    const data = await response.json();
    if (data.length > 0) {
      setTeas((prevTeas) => [...prevTeas, ...data]);
      setPage((prevPage) => prevPage + 1);
    } else {
      setHasMore(false); 
    }
  };

Since the function updates page and hasMore state, both of those are set up within the TeasList component. The page state keeps track of the current page for fetching teas and is set with page 1 as the default value:
const [page, setPage] = useState(1);

The hasMore state keeps track of whether there is more data available for infinite scroll and is set as true by default.
const [hasMore, setHasMore] = useState(true);

6. Render InfiniteScroll component

Now that infinite scroll is imported and fetches are set up, we need to render the infinite scroll functionality. The data being displayed needs to be wrapped within <InfiniteScroll> </InfiniteScroll>. In the example below, teas state is being mapped over to display the tea name and blend, and the ul contains the tea id as a key. That code block is wrapped with InfiniteScroll, which contains props that are necessary for infinite scroll to work. You can find these props in the documentation as well as other props you can use depending on how you want to implement infinite scroll.

The dataLength prop is the length of the data array. If the length is falsy (0, null, or undefined), the OR operator evaluates to 0, ensuring a valid value so the page doesn't crash.
The next prop specifies the function that should be called when the user reaches the end of the scrollable content, which is fetchMoreTeas in this case.
The hasMore prop is a Boolean indicating if there is more data to load; fetchMoreTeas sets it to false when there is no more data.
The loader prop displays a "Loading..." header while loading more data.

return (
    <div>
      <InfiniteScroll
        dataLength={teas.length || 0}
        next={fetchMoreTeas}
        hasMore={hasMore}
        loader={<h4>Loading...</h4>}
      >
        {teas.map((tea) => (
          <ul key={tea.id}>
            {tea.name}
            {tea.blend}
          </ul>
        ))}
      </InfiniteScroll>
    </div>
  );
};

Hopefully this helps others implement infinite scroll! Happy scrolling!

Request response flow between React frontend & Ruby on Rails backend

jgifford82 — Thu, 30 Mar 2023 22:28:23 +0000

I'm at the end of the fourth phase of my coding boot camp. We previously learned about JavaScript, React, and Ruby. This phase focused on learning Rails, and we had to complete a full stack project utilizing React and Ruby on Rails. One of the concepts from this phase I'd like to dig into is the frontend to backend request response flow. This refers to data shared between a frontend JavaScript application and a backend API application. Rails will basically take an HTTP request and generate a properly-formatted response. I will use an example from my project.

1. Frontend Request
The process starts when the user interacts with the frontend and triggers an event, such as clicking a button or submitting a form. For example, the fetch request below is triggered when a user logs in. It sends a request to the endpoint /login.

An HTTP request is sent to the backend API endpoint. POST is the HTTP verb in this request. The request contains information, such as the user's input, which is their username and password in this case.

  function handleSubmit(e) {
    e.preventDefault();
    setIsLoading(true);

    fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(values),
    }).then((r) => {
      setIsLoading(false);
      if (r.ok) {
        setErrors([]);
        r.json().then((user) => {
          setUser(user);
          navigate("/books");
        });
      } else {
        r.json().then((err) => setErrors(err.error));
      }
    });

2. Backend Router
The backend Ruby on Rails server receives the request and routes it to the corresponding controller and action method contained in the routes.rb file. In the login route below, it's directing a POST request for the /login endpoint to the sessions controller's create method.

post "/login", to: "sessions#create"

3. Backend Controller
The controller communicates with the model to access or create data via Active Record. The create method within the sessions controller below will find the instance of User in the database by username and save the user id in the session, unless the username or password are invalid.

    def create
        user = User.find_by(username: params[:username])
        if user&.authenticate(params[:password])
          session[:user_id] = user.id
          render json: user, status: :created
        else
          render json: { error: "Invalid username or password" }, status: :unauthorized
        end  
    end

4. Backend Model
If data is being created, the model will handle validations or return errors for invalid data. The User model in my project has validations to ensure a username is present, unique, and has at least two characters, and that the password is 2-8 characters long.

class User < ApplicationRecord
    validates :username, presence: true, uniqueness: true, length: { minimum: 2 }
    validates :password, length: { in: 2..8 }

end

5. Backend Database
Valid data will be located in the database. If data is being created, valid data will be persisted to the database as a new row in the corresponding table and assigned an ID value.

6. Backend Serializer
The serializer will determine which attributes will be returned in the JSON response rendered by the controller methods. My user serializer specifies that the username and user id will be returned in the JSON response. That way, only the necessary data is sent to the frontend.

class UserSerializer < ActiveModel::Serializer
  attributes :id, :username
end

The server returns an HTTP response, which contains the JSON data, to the frontend. Using the login example, the user is now logged in and the process is complete!

Active Record Query Methods

jgifford82 — Mon, 02 Jan 2023 22:08:27 +0000

I'm wrapping up the third phase of my coding boot camp. In previous phases, we learned JavaScript and React. The main focus of this phase was learning Ruby. At the end of the phase, we had to complete a web project that ties everything together by building the frontend and creating a backend database. It was interesting to learn how the backend can function to organize data, which creates less work to be done on the frontend. That way, the frontend is mainly concerned with fetch requests rather than having to sort through or manipulate the data after it's fetched. The backend data organization was done using Active Record.

Active Record is a big piece of what we learned in phase 3 in conjunction with Ruby. Active Record is an Object Relational Mapper, or ORM for short. This is the connection between Ruby and our database. It translates the queries we write in Ruby into commands the database understands. It's also a lot easier than writing queries in SQL, since they're written more like plain English.

Active Record queries can be used to retrieve objects from the database, do calculations, retrieve records in a specific order, or limit records retrieved based on certain conditions.

Using an example from my project, I had a section where I wanted to display the ten most recently created events in the database in descending order. Here's how I did that:

    get "/events" do
        events = Event.order(created_at: :desc).limit(10)
        events.to_json
    end

Let's break that down. The .order method retrieves records from the database in a specific order. In the example, Event.order(created_at: :desc) is getting a set of event records and ordering them in descending order by the created_at field in the table. The .limit method is used to specify the number of records to be retrieved. In the example, .limit(10) is retrieving ten records. The .to_json method is used to convert a Ruby hash or array to a valid JSON string. In the example, events.to_json is taking the ten event records and converting them to a JSON string for the frontend side of the application.

This is what the ten most recently created events looks like on my website:

When I first started my project, I realized I could just chain all the methods together, rather than using a variable and breaking out methods on separate lines like I did in the example above. I thought it made more sense since it was less code to write out and easier to read. I learned the hard way that while it may work, it may not always be a best practice. It may be ok with smaller, simpler code blocks like the one below. I set it up for deleting a specific event in my table by chaining together the find, destroy, and to_json methods.

    delete "/events/:id" do
        Event.find(params[:id]).destroy.to_json
    end

However, chaining everything together for a patch request wasn't ideal. This is what I did at first:

    patch "/events/:id" do 
        Event.find(params[:id]).update(
            venue: params[:venue],
            date: params[:date],
            time: params[:time]
        ).to_json
    end

While this was working on the backend to update an event in my table, it was giving me trouble on the frontend. The frontend patch request was console logging "true" when I was expecting it to return the updated event object. This article helped me realize that to_json returns "true" by default. Breaking out each method separately using a variable as shown below solved the problem. It's cleaner to do it this way for longer, more complex code blocks.

    patch "/events/:id" do 
        event=Event.find(params[:id])
        event.update(
            venue: params[:venue],
            date: params[:date],
            time: params[:time]
        )
        event.to_json
    end

Overall, I really enjoyed learning Ruby and Active Record! It felt more straightforward than JavaScript or React, and it's fun using the methods for organizing data.

Resources:
https://guides.rubyonrails.org/active_record_basics.html
https://guides.rubyonrails.org/active_record_querying.html

Controlled Forms in React

jgifford82 — Mon, 19 Sep 2022 23:08:29 +0000

I'm coming to the end of my second phase of coding boot camp. This phase taught us about using the React framework, after having learned JavaScript in the first phase. I loved how much more organized React is and that it allows you to write code that looks like HTML. I found it to be a bit more user friendly, though it was a bit tricky to understand some of the ways it works. One of the trickiest things for me to understand is how to set up controlled forms, so I decided that would be the best topic for my next blog!

My understanding of the benefit of controlled forms is that we have better control of user entered data since it's updated in real time using the State Hook as the user inputs it on the form. The component re-renders each time the state variable changes, rather than having to manually refresh the page. If needed, other components or elements can use state values, which is helpful if you need to render form input on the page after it’s submitted.

To set up a controlled form, a state variable is needed, as well as a function that updates state when the form input changes.

Before setting up state, be sure to import the state hook. Refer to the React State Hook page for more info about state.

import React, { useState } from "react";

For controlled forms, the state variable is typically used to set the default input value as an empty string to reflect the empty field before the user enters anything on the form.

const [inputValue, setInputValue] = useState(“”);

Next, set up a function that updates the state variable when the form input changes. A best practice is to have it console log the event target value when initially setting it up so you can confirm it's capturing the form input before setting up the function to update the state variable.

function handleInputValueChange(event) {
  console.log(event.target.value);
}

Add an onChange event listener to the input element that calls the function within curly braces.

<input
   type="text"
   name="title"
   placeholder="Title"
   onChange={handleInputValueChange}
/>

If it’s working correctly, the console log should show everything typed in the form as it’s being typed.

Now that it’s capturing the input value, we can have it update the state variable. Instead of the console log, we need to change it to setState. In the example below, it’ll setInputValue to the event target value. If you have it console log the state variable outside of the function, you can confirm that the state variable is being updated as the user types something in the form’s input field.

function handleInputChange(event) {
  setInputValue(event.target.value);
}

console.log(inputValue)

That’s it! Now we have a basic set up for a controlled form. This can be done with each input field if there is more than one. It can also be used on other form elements, such as select. When you set up a function for the submit event, you can have it set the state variable back to an empty string to clear out the user’s input from the field after they click the submit button.

Hopefully this will help you make sense of controlled forms! React Forms is a great resource for setting up controlled forms. Happy coding!

How to make a fetch request

jgifford82 — Thu, 14 Jul 2022 17:28:47 +0000

In the first phase of my coding boot camp, I learned how to do a fetch request. It was confusing at first, but after a bit of practice, I realized how useful it can be.

A fetch request is a way of retrieving data from a database. The data can be added to the DOM after a page loads, which helps reduce rendering time. Fetch is a global method called on the window object.

There are a few different types of fetch requests, such as GET, POST, and DELETE. I’m focusing on the GET request, which was what I used for my phase 1 project. All you need to get started is a URL link to the database of your choice.

A basic way to set up a fetch request is to pass the URL string in as an argument, and add a couple of .then() methods that will convert the data to JSON and log it in the console. The data needs to be converted into JSON so you can work with it.

fetch(“URL of your choice")
       .then(response => response.json())
       .then(data => console.log(data))

You should see the data in the console log returned as arrays you can work with. This screenshot shows 3 nested arrays returned under object key results:

If you were to set up the request without converting the data to JSON, you’d only log the response from the fetch request in the console. This doesn’t provide data we can easily work with, so be sure to include a .then method that converts the fetch response data to JSON. Here’s an example of console logged data without being converted to JSON:

fetch("https://www.dnd5eapi.co/api/spells/")
            .then(data => console.log(data))

From the basic fetch layout, we can build out what we want to happen with the fetched data within the second .then. In my project, I set up code to display the fetched data on the web page by creating and appending elements using forEach on the nested results arrays (see below). The entire fetch request was built within a function, which is invoked when a user submits something in a search form.

function fetchSpells() {
        return fetch(`https://www.dnd5eapi.co/api/spells/?name=${document.getElementById("search-spells-form").value}`)
          .then(response => response.json())
          .then(data => data.results.forEach((element) => {
            console.log(element)
            let obj = element

            const spellsDiv = document.getElementById('spells-container')

            const ul = document.getElementById('spell-name')

            const h3 = document.createElement('h3')
            h3.innerHTML = obj.name

            const a = document.createElement('a')
            a.innerHTML = `https://www.dnd5eapi.co${obj.url}`
            a.href = `https://www.dnd5eapi.co${obj.url}`

            spellsDiv.append(ul)
            ul.append(h3)
            ul.append(a)
        }))

When I was trying to set up the forEach method on the fetched data, I got stuck because I set it up like this:

.then(data => data.forEach(element => console.log(element)))

It returned an error “data.forEach is not a function.” After a couple hours of searching online, trial and error, and frustration, I figured out the issue after talking through it with someone. We realized that the data I wanted to use was nested in the object key “results.” I just needed to add “results.” before forEach to get it to work.

I also learned that it’s not necessary to state “method: GET” in that type of fetch request since that’s what it does by default. The method only needs to be stated for the other types of fetch requests.

Hopefully this helps others learning about fetch requests. Happy fetching!

Resource:
“Fetch API - Web Apis: MDN.” Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API.