DEV Community: ChristianC93

Leveraging Active Storage for Efficient File Management in a Calorie Tracker Application

ChristianC93 — Mon, 10 Apr 2023 21:42:19 +0000

Active Storage for Efficient File Management in a Calorie Tracker Application

Active Storage is a powerful and flexible file management solution for Ruby on Rails applications. It facilitates the process of uploading, storing, and processing files by abstracting away the complexities of dealing with various storage services. In my calorie tracker application I incorporated Active Storage in order to manage user uploaded meal images.

Getting started with active storage begins with running the following command:
rails active_storage:install
This command generates a migration that creates three tables named active_storage_blobs, active_storage_variant_records, and active_storage_attachments.
Next we have to let active storage know where we are storing the user uploaded files. For the purposes of this application I chose local.
config.active_storage.service = :local

Upon creating my Meal model I added an :image attribute that will represent the user uploaded image.
rails g model meal name, calories, image
In my meal model I now have access to the macro has_one_attached which lets each meal have one file attached to it.
class Meal < ApplicationRecord
has_one_attached :image

Next in my Meals Controller I permit the :image attribute in my meals params method,
def meal_params
params.require(:meal).permit(:name, :calories, :image)
end

Now that I have the backend setup for meals, I can now create a form in my frontend that accepts an image upload.

Add Today's Meals

       <form className='form' encType="multipart/form-data" onSubmit={handleSubmit }>
           <div>
               <label htmlFor="name">Name:</label>
               <input type="text" id="name" name="name" value={ formData.name } onChange={ handleChange } />
           </div>
           <div>
               <label htmlFor="calories">Calories:</label>
               <input type="number" id="calories" name="calories" value={ formData.calories } onChange={ handleChange } />
           </div>
           <div>
               <label htmlFor="image">Upload an image:</label>
               <input type="file" id="image" name="image" accept="image/*" onChange={ handleChange } />
           </div>
           <div>
               <input type="submit" value="Add Meal" />
           </div>
       </form>

Now when a user submits the form with an image, it will be automatically associated with the meal using Active Storage.
Here is the handleSubmit function for submitting the form,
const handleSubmit = (e) => {
e.preventDefault();
dispatch(clearErrors());
const data = new FormData();

   data.append("meal[name]", e.target.name.value);
   data.append("meal[calories]", e.target.calories.value);


   if (e.target.image.files[0] !== undefined ) {
       data.append("meal[image]", e.target.image.files[0]);
   }

   dispatch(addMeal(data))

Since we are making a post to an API, using the new FormData provides an easy way to handle file uploads without needing to encode the file data manually and packaging it into a format that can be sent to the server using fetch api.

For my application I want to display these images for the user, however one thing active storage doesn’t do automatically is create urls for the images that can be used as the src for image tags.

In order to do this, I created a custom method in the meal model,
class Meal < ApplicationRecord
has_one_attached :image

has_many :user_meals, dependent: :destroy
has_many :users, through: :user_meals

validates :name, :calories, presence: true
validates :calories, numericality: { only_integer: true }

def image_url
Rails.application.routes.url_helpers.url_for(image) if image.attached?
end
end

Image_url generates a full url for an attached image if it exists.
If I now take a look at all the meals that are added I can see that there is an image_url key,
"id": 9,
"name": "Rice, Spaghetti, and Chicken bites",
"calories": 850,
"created_at": "2023-04-04T13:48:23.407Z",
"image_url": "http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2ac2835b2e1a0f3604c23770ab5eff527e690d4c/Rice,%20Spaghetti,%20Chicken.jpg",

With that image_url key there I can render the image by using meal.image_url as the src value for an img tag.

function Meal({ meal }) {
return (

{meal.name}

Date: {new Date(meal.created_at).toLocaleDateString()}

Calories: {meal.calories}

)
}

export default Meal;

Rails Bcrypt Gem

ChristianC93 — Tue, 31 Jan 2023 21:44:00 +0000

Rails’ Bcrypt Gem

As developers, when we are making web applications we always dream about other people using them. We think about how users will interact with our applications, and how they will ultimately use it to make their lives better. One important aspect, maybe the most important, is the security of our users. Whenever we make software we must always think about the security of our user’s information. Wrongdoers are always ready to take advantage of applications that have little to no security. When using Rails for the backend of your web application we can use the Bcrypt gem to better protect our user’s password.

How does Bcrypt work? The bcrypt gem uses a password hashing function that is computationally slow which makes it difficult for malicious hackers to attack our users’ passwords. When a new user signs up for our application bcrypt hashes their password and stores that hash in the database. From that point on when the user wants to login, they input their password, it then gets hashed and compared to the hashed password in the database, and if it matches the hashed password in the database they are then signed in.

In order to apply this to our rails application we first make sure that our user model has the macro has_secure_password. This macro gives us access to the password and password_confirmation methods as well as the authenticate method. Our user model must also have a password_digest attribute and that is what automatically adds the password and password_confirmation fields to our database.

class User < ApplicationRecord
has_secure_password
validates :username, presence: true, uniqueness: true
end

def create
user = User.create!(user_params)
render json: user, status: :created
end

private

def user_params
params.permit(:username, :password, :password_confirmation, :image_url)
end

Take a look at the user_params method. This method is using strong params to permit username, image_url but also password, and password_confirmation. This is due to the password_digest attribute on the user model.

Now that the create action is set up we can move on to setting up the login functionality. Think about how this process would work step by step. A user would input their username and password and if the information is correct they are then signed in.

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: { errors: ["Incorrect username or password"] }, status: :unauthorized
end
end

The create action in our sessions controller completes the first step, find a user in our database with the username the user input. If that user exists and their password is authenticated they are then logged in. The authenticate method is doing the final step of checking to see if the password that the user input matches the one in the database. If for whatever reason authentication fails the user will not be logged in and instead will see the error “Incorrect username or password”.

Now we have everything in place to have users that can sign up, log in and use our applications all with a strong level of security thanks to bcrypt.

Keyword Arguments

ChristianC93 — Fri, 18 Nov 2022 23:05:09 +0000

Keyword Arguments, What are they? Why should we use them?

Keyword arguments are a more specific way to pass arguments to a method. They allow you to set parameters as keys and the arguments as the values of those keys, similar to a hash. Take for instance we have a Person class. class Person
attr_accessor :name, :greeting
def initialize(name, greeting)
@name = name
@greeting = greeting
end

def introduction
puts "#{@greeting} my name is #{@name} "
end
end

chris = Person.new("chris", "hi there");
joe = Person.new("hello", "joe");

Now we see here that Chris instance of the Person class, has a name of “chris” and a greeting of “hi there”. When we call the introduction method it prints out correctly “hi there my name is chris” to the terminal.
However if we move over to the joe instance of this Person class we see that the arguments are in a different order. When we call the introduction method on the joe instance it prints out “joe my name is hello”. This doesn’t make much sense and represents an issue that positional arguments can create. Now this example would be obvious to most people. What if we had a situation where we were instead working with two sets of names, a first and last name.

class Person
attr_accessor :first_name, :last_name
def initialize(first_name, last_name)
@first_name = first_name
@last_name = last_name
end

def introduction
puts "Hello #{first_name} #{last_name} is present."
end
end

person1 = Person.new("jackson", "harper");
person2 = Person.new("riley", "lincoln");

Here’s an example where we have two arguments, a first and last name. Person1 is initialized with “jackson” and “harper”, so when we call the introduction method on person1 we get “Hello jackson harper is present.”. However these two names are actually pretty common and can be used interchangeably, so how can we be sure that it’s not supposed to be Harper Jackson? The same can be said for person2 it can either be lincoln riley or riley lincoln. These examples are admittedly contrived but they illustrate the point that using positional arguments isn’t always the best way to handle our arguments.
These shortcomings can be fixed by using keyword arguments. Keyword arguments make it so that we do not have to worry about which order we passed our arguments.

class Person
attr_accessor :first_name, :last_name
def initialize(first_name: , last_name:)
@first_name = first_name
@last_name = last_name
end

def introduction
puts "Hello #{first_name} #{last_name} is present."
end
end

person1 = Person.new(first_name:"jackson", last_name:"harper");
person2 = Person.new(first_name:"lincoln", last_name:"riley");
person3 = Person.new(last_name:"carter", first_name:"james");

As we can see now each instance of the person class is now initialized with keyword arguments named first_name and last_name. This makes it clear what information belongs in each argument to not just me but also whomever may be working or looking at my code. If you take a look at person3 you can also see that order does not matter. I initialized person3 by passing in the last name keyword argument first but when we call the introduction method on person3 we still get the information in the right order as it still prints the first name and then the last name.
Keyword arguments are a great tool to use especially when you’re working with Classes. They can be a hint as to what kind of data type each argument is expecting, and it makes it so that you are less prone to inputting the wrong information.

Understanding the component tree and re-renders in React.

ChristianC93 — Tue, 16 Aug 2022 15:30:00 +0000

When working in React, it is crucial to understand how your component tree is organized. Usually you would have the top most level component and child components of said top most level component. Many cases the child components would also have their own set of child components as well. Understanding how your component tree is organized is crucial so that you can send the right information to the right components.

If, for example, I wanted to send an array of stocks from my App component to my StockContainer component, I could pass that data as props to my MainContainer and again down to the StockContainer. StockContainer could then render those individual stocks by using the Stock component because it now has the relevant data due to my knowledge of the component hierarchy.

Another thing to consider regarding the component tree is the relationship between components. If a component returns another component. The component that’s returning is considered a parent and the returned component is considered a child of that component. As seen prior, if we want to send data down to a child component, we use props. If we want to send information up the component tree however, we would need to pass a callback function from the parent component to the child component and invoke it in the child component.

function App() {
const [stocks, setStocks] = useState([]);

useEffect(() => {
fetch(" http://localhost:3001/stocks")
.then((resp) => resp.json())
.then((stocks) => setStocks(stocks))
}, [])

function sortStockByTicker() {
const sortedStocks = [...stocks].sort((a, b) => {
if(a.ticker < b.ticker) { return -1; }
if(a.ticker > b.ticker) { return 1; }
return 0;
})
setStocks(sortedStocks);
}

function sortByPrice() {
const sortedStocks = [...stocks].sort((a, b) => {
if(a.price < b.price) { return -1; }
if(a.price > b.price) { return 1; }
return 0;
})
setStocks(sortedStocks);
}

return (

);
}

function SearchBar({sortByTicker, sortByPrice, onCategoryChange}) {
return (

Sort by:

type="radio"
value="Alphabetically"
name="sort"
checked={null}
onChange={null}
onClick={sortByTicker}
/>
Alphabetically

type="radio"
value="Price"
name="sort"
checked={null}
onChange={null}
onClick={sortByPrice}
/>
Price

Passing the callback functions, defined in the App component, down the component tree to the SearchBar component, and binding it to an event to be invoked as a result of a specific user interaction, lets the App component have access to the information the child component has.

In React, re-renders are triggered due to a change in state or new props being passed to another component.

function App() {
const [stocks, setStocks] = useState([]);

useEffect(() => {
fetch(" http://localhost:3001/stocks")
.then((resp) => resp.json())
.then((data) => setStocks(data))
}, [])

As you can see we have an initial state of an empty array, and after fetching data from the url we set our state to the data we got back from the resolved promise. Our stocks variable can now be passed down as a prop to any component that needs it.

Let’s say we have rendered all the data from our stocks variable on the page. Each individual stock has an onclick event. This is where knowledge of how re-renders work really helps. We want two things to happen each depending on where in the page the event took place. If the stock was clicked in the StockContainer we want that stock to appear in the PortfolioContainer. If the stock was clicked in the PortfolioContainer we want that stock to be deleted.

We know we need a separate state for the portfolio because it's going to change. We’re also going to need callback functions in order to communicate to the parent component that there has been a change in the PortfolioContainer and or the StockContainer.

function MainContainer({stocks, sortByTicker, sortByPrice}) {
const [portfolio, setPortfolio] = useState([]);

function handleAddStock(stock) {
const clickedStock = stocks.find((s) => s === stock)
if (portfolio.includes(clickedStock)) {

} else {
setPortfolio([...portfolio, clickedStock]);
}
}

function handleRemoveStock(stock) {
const newPortfolio = portfolio.filter((p) => p !== stock)
setPortfolio(newPortfolio);
}

function onCategoryChange(e) {
setCategory(e.target.value);
}

return (

);
}

MainContainer is the parent to both StockContainer and PortfolioContainer so we set our portfolio state there. We also define our callback functions and pass them to their respective components as props.

function PortfolioContainer({portfolio, onRemoveStock}) {
return (

My Portfolio

{portfolio.map((stock) => {
return (

)
})}

);
}
function StockContainer({stocks, onAddStock, category}) {

const stocksToDisplay = stocks.filter((stock) => {
if (category === "") {
return stocks;
} else {
return stock.type === category;
}
})

return (

Stocks

{stocksToDisplay.map((stock) => {
return (

)})}

);
}

Something neat about a re-render is that a generically named prop like onStockClick can have different values depending on which route down the component tree the information traveled. So for instance if the re-render happened as a result of a change in the StockContainer, onStockClick will have a value of onAddStock. If the re-render happened as a result of a change in the PortfolioContainer onStockClick will have a value of onRemoveStock.

This was the biggest takeaway for me on how a re-render truly works. The same prop can have a different value depending on where functions or variables are defined in the component tree.

The first stop in my coding journey-The First Project

ChristianC93 — Thu, 21 Apr 2022 13:33:08 +0000

As I began my journey into the coding landscape, I arrived at the point where I would create my first project. After looking through various APIs, I was informed of the PokeAPI. I love Pokemon, so when I saw the PokeAPI, I instantly knew I wanted to use it as well as how I wanted to use it. I have always wanted to build some sort of Pokemon randomizer after seeing many play throughs of Pokemon Randomizer Nuzlockes on youtube. I now had my vision as well as the resources and knowledge I needed to build it.

First thing I needed of course was a randomizer. Luckily getting a Pokemon was simple, I just had to get the url and select the id at the end of it to get a Pokemon. Since all the id’s are integers I had to have a function that could give me a random number as an integer. I used a function
that was available at MDN, which is a really helpful resource in general, to create my random integers. I attached that function at the end of my fetch url passing in 1 and 809 as my arguments. This allowed me to get random Pokemon from generation 1 to generation 8.

function randomId(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
}

function getRandomPokemon() {
fetch(https://pokeapi.co/api/v2/pokemon/${randomId(1,809)})
.then(resp => resp.json())
.then(pokemon => renderPokemonCard(pokemon))
}

As for what information from the API I wanted to include on the page, the name and image of the Pokemon was obvious. However I thought there was so much more information available to me that would help someone if they did not know some of the Pokemon introduced in later generations. I decided to grab the pokedex number, as well as their typing. Therefore, I created a renderPokemonCard function which would take a Pokemon object as its argument. The renderPokemonCard function would then create html elements for the pokemon’s name, official artwork, pokedex number, and its types. I also added a heart button so that someone could “like” the pokemon if it was one of their favorites. Afterwards, that content would be the html content of the pokemonDiv that was created. Lastly the pokemonDiv would be appended to the pokemonContainer.

In order to render the Pokemon on the page, I created a function called getRandomPokemon which would make the fetch call, convert the information to a JSON object and pass it to my renderPokemonCard as an argument.

It was all looking great, however I could not attach an event listener to the heart button. This was because the cards were being created dynamically. I would get an error when I tried grabbing the element before it was rendered on the page. In order to solve this issue, I used event delegation to target the heart button. By using event delegation I was able to attach the event listener to the parent div that was already created. This allowed me to then create my callback function, which would run only when the element matched the condition I had created. Another added benefit of using event delegation was not having to write out code for every heart button that could potentially be rendered.

function renderPokemonCard(pokemon) {
const pokemonDiv = document.createElement("div");
const pokemonCard = `

${pokemon.name[0].toUpperCase() + pokemon.name.slice(1)}

favorite

#${pokemon.id.toString().padStart(3, "0")}

${pokemonTypes(pokemon.types)}
`
pokemonDiv.innerHTML = pokemonCard;
pokemonDiv.addEventListener("mouseover", highlightCard);
pokemonDiv.addEventListener("mouseout", normalizeCard);
pokemonDiv.addEventListener("click", getHeartButton);
pokemonContainer.appendChild(pokemonDiv);
}

To wrap it all up, the last thing I wanted to do was to highlight the card if a user hovered over it. To do this I attached an event listener to the pokemonDiv and used event delegation to target the card and changed its color to a light yellow.

function highlightCard(e) {
if (e.target.matches(".card")) {
e.target.style.backgroundColor = "lightyellow";
}
}

function normalizeCard(e) {
if (e.target.matches(".card")) {
e.target.style.backgroundColor = "";
}
}

Creating this randomizer was such a fun way to really put what I have learned so far to the test. There were moments where I needed to stop myself and refocus because I wanted to add more. I’m sure I’ll go back to this project and update it with all the knowledge I gain as I dive deeper into coding. The journey has only just begun and it’s one I’m sure glad I have decided to take.