DEV Community: Miriamfark

Display Backend Errors to the Frontend

Miriamfark — Fri, 17 Mar 2023 03:28:25 +0000

Errors are awesome. Errors tell you that something needs to be fixed. If one would not have the error, it would be very frustrating as things would not work and we would not know why. The more specific an error is, the more helpful it is. The best errors are the ones that tell you what is wrong and what you can do to fix it.

When users sign up for an account, or fill out a form on an app, there are (hopefully) validations being checked before a new instance is added to the database. If the data being submitted is not valid, the best case scenario would be for a very specific error message to show up on the screen and direct the user in what to do to submit their information correctly. In this post we will describe how to grab an error from a rails backend and conditionally display it on a react frontend.

Let's get started!

1. Validations in the Model

For each model that you create, you can specify what validations are necessary. To do this you would use Active Record validation methods.

In the example below, a user signs up for an account and creates a new user instance. These validations check that

there is a username
the username is unique
there is a password
there is an email address
the email address fits the criteria of a valid email address

class User < ApplicationRecord
    validates :name, uniqueness: true
    validates :password, presence: true
    validates :email, presence: true, format: /\w+@\w+\.{1}[a-zA-Z]{2,}/
end

If any of these requirements are not met, the user will not be able to sign up. At the same time an error is being generated based on these validations. Now, how will the user see the error and know where they went wrong?

2. Controller Error Handling

The next step takes place in the controller. In the User Controller, there is a create method that handles adding a new user.

  def create
        user = User.create!(user_params)
        session[:user_id] = user.id
        render json: user, status: :created
    rescue ActiveRecord::RecordInvalid => e
        render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
    end

In this case, it is necessary to use the .create! method, as the bang operator (!) will throw an error if saving fails due to the data not passing the validations. If that is the case, we will render a json object that displays an array of error messages.

{
    "errors": [
        "Name has already been taken",
        "Email is invalid"
    ]
}

3. Save the Error to React State on the Frontend

Now is when we can finally send the error to the frontend. The best way to capture the value of the error is to save it to state. State should initially be set as false, as no errors actually exist on the page load.

const [errors, setErrors] = useState(false)
Then comes the submit form function. Within the submit is a post request to the backend, sending the new user object to be validated.

function handleSubmit(e) {
        e.preventDefault()
        const user = {
            name,
            password,
            passwordConfirmation,
            email
        }
        fetch('/signup', {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(user)
    })
    .then((r) => {
        if(!r.ok) {
            return r.json().then((e) => setErrors(Object.values(e).toString()))
        } else {
            return r.json().then((data) => dispatch(signupUser(data)))
        }
    })
}

We need two different ways to handle the response, based on wether or not the post request was successful. If the information was successfully saved, then the user information is sent to my redux store to be processed. If not, we need to set the errors in state to the error values of the json object. I converted the array into a string so it would not have to be mapped before displaying.

4. Display the Error

Finally! The error is saved in a string format in state. Now all that is needed to display the error to the user is a simple ternary expression. If there is an error, display the error. If not, don't.

{ errors ? <h5 class="text-danger">{errors}</h5> : null }

Using Action Mailer to Send Emails from a Rails App

Miriamfark — Thu, 16 Mar 2023 03:31:33 +0000

This post contains a beginners guide to using Action Mailer to send emails from a Rails app.

My latest project for Flatiron school is The Carpool App - one central place for parents to post and find carpools for their kids. A big part of parents arranging carpools includes parents communicating with each other, especially to request for their child to join a carpool, and then for the driver of the carpool to either accept or reject the join request. As parents are not expected to keep their eyes glued to the website to see the updates, it became necessary to have the parents updated by sending them an email.

As my project is built on Rails, Action Mailer was the simplest, built in choice to use to send emails. As Action Mailer is not part of the curriculum at Flatiron, it meant that I needed to teach this bit of technology to myself. At first I was confused about how to implement Action Mailer, but once I got it figured out, and that first email came through, I recognized a familiar "railsy" approach that emphasizes naming conventions and a configuration similar to the MVC pattern (model, view, controller).

Let's get started!

Generate a mailer

rails g mailer MailerName

Generating a mailer is the simplest way to get started as Rails will generate the following files:

app/mailers/mailer_name_mailer.rb
app/views/mailer_name_mailer
test files in both spec/mailers/mailer_name_spec.rb and
spec/mailers/previews/mailer_name_preview.rb

Decide the default email address

All of the mailers inherit from ApplicationMailer. If all of the emails in your app will be coming from the same email address, you can set the default email in one location, in the ApplicationMailer.

class ApplicationMailer < ActionMailer::Base
  default from: 'example@gmail.com'
  layout 'mailer'
end

You will probably want to open up a new email account with your app name in it to send out app related emails.

Add an Email Action to the Mailer

The next step is actually deciding what email you would like to send. For example, if you would like to send an email welcoming a new user to the app, you can create a welcome email. This would simply be a method in you mailer, defining the name of the email, what parameters are being passed in, where the email should be sent, and the subject of the email.

def welcome_email(user)
    @user = user
    mail(to: @user.email, subject: 'Welcome to The Carpool App')
  end

Creating a View

After defining the email, it is time to decide what the email should look like. What will the email say? This is determined in by creating a new file in app/views/mailer_name_mailer called welcome_email.html.erb. It is important to note two things. Firstly, the name of the file must be in the folder named after your mailer. Secondly, the file must follow the naming conventions of being called the same name as your email method. This sticks to a Rails principle of convention over configuration, meaning that by following conventions there is a lot less work required to configure the different files.

Note: This file is an html.erb file, which is an html file with ruby embedded within.

Once you have created the file, copy and paste the following inside.

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body>
    <h1>Welcome to The Carpool App!</h1>
    <p>Thanks for joining and have a great day!</p>
  </body>
</html>

You can edit or add any other information inside the email. Using interpolation you could personalize the email with the user's name.

<h1>Welcome to The Carpool App, <%= @user.name %>!</h1>

... or add a link to bring the user back to your app ...

<a href="<%= @url %>" target="_blank">Click Here!</a>

Call the Email Method in a Controller

Now that you have figured out exactly what the email should look like and what it should say, you need to call the email method. The best place to do this is in a controller action. As my example is an email sent when a new user signs up for an account, I will call the email method in my create action of the Users Controller.

class UsersController < ApplicationController
    skip_before_action :authorize, only: [:create]

    def create
        user = User.create!(user_params)
        session[:user_id] = user.id
        if user
            MailerNameMailer.welcome_email(user).deliver_now
        end
        render json: user, status: :created
    rescue ActiveRecord::RecordInvalid => e
        render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
    end

end

Config

To ensure that everything will work correctly, copy and paste the following into your config/environments/development.rb file.

config.action_mailer.perform_caching = false
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
config.action_mailer.perform_deliveries = true

If you choose to have your emails sent from a gmail account, you will need to include the following.

config.action_mailer.default_options = {from: 'example@gmail.com'}
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
address:              'smtp.gmail.com',
port:                 587,
user_name:            'example',
password:             'password',
authentication:       'plain',
enable_starttls_auto: true  }

I had some trouble with gmail allowing me to sign in from my app, and so I had to go into my new gmail account, enable two step verfication, and then create an app specific password to include above.

Another great option is to use the letter opener gem. This is a great tool to use in development, because instead of the app actually sending the email, instead it opens a new tab on your browser with the email view. This is really helpful to see what is going on with the email as it happens. If you are using the letter opener gem, you would need to install it:

gem install letter_opener -v 1.4.1

and include it in your config/environments/development.rb file.

config.action_mailer.delivery_method = :letter_opener

And that is it! You are now ready to send an email from your Rails app!

Using Redux to Make a Global State

Miriamfark — Tue, 03 Jan 2023 17:36:49 +0000

Hi!

I was working on my Phase-4 project for Flatiron, and ran into a very annoying problem.

The project requirements were to build a rails server with three associated models, and a react front end with full CRUD that would also update state.

I only want a user to see their own data, and therefore sent all of a user's data in one large user object. This made updating state based on CRUD actions very difficult and confusing.

The solution to this problem was to use a state management system: I chose to use Redux.

Redux works by storing state in a separate component known as a store, and allowing all components access to the store. This changes state into a global variable. No more passing down endless props! Any component that needs access to state or updates state can access it directly from the redux store.

1. Install React-Redux and Redux Toolkit

I used Redux Toolkit to minimize the amount of code I needed to write. Install redux toolkit and react-redux by running

nnpm install @reduxjs/toolkit react-redux

2. Wrap App with Provider

This is my index.js, where I am importing a Provider from react-redux and using it to wrap my entire app. I am then importing my store and passing it in as props to the Provider. This gives my entire app direct access to the state stored in the redux store.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux"; 
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import store from "./redux/store"

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

3. Create a Store

Next, create a store to hold your state. The simplest way to create a store is to use redux toolkit's configureStore(). The store contains two pieces of state, my user and a list of recipients.

import { configureStore } from "@reduxjs/toolkit";
import { recipientsSlice } from "./recipientsSlice";
import { usersSlice } from "./usersSlice";

const store = configureStore({
  reducer: {
    recipients: recipientsSlice.reducer,
    users: usersSlice.reducer
  },
});

export default store;

4. Set Up Slices

A slice is made up of actions and reducers. The actions are methods to change state, while the reducer applies the change to the current state.

The reducers job is to combine two pieces of the app - the current state and an action. It is a method that takes in the current state and the action we want to do to update state and returns the updated state.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

export const fetchRecipients = createAsyncThunk('recipients/getRecipients', async () => {
    try{
        const getRecipients = await axios.get('/recipients');
        const res = await getRecipients.data;
        if (getRecipients.status === 200) {
            return res;
          } else {
            return res.error;
          }
    } catch(e) {
        return e.error;
    }
});

export const postRecipient = createAsyncThunk('recipients/postRecipient', async (recipient) => {
    const newRecipient = await axios.post('/recipients', recipient);
    const res = await newRecipient.data;
    return res;
});

export const recipientsSlice = createSlice({
        name: "recipients",
        initialState: {
          recipients: [],
          isFetching: false,
          isSuccess: false,
          isError: false,
          errorMessage: "",
        },
        extraReducers: {
          [postRecipient.fulfilled]: (state, { payload }) => {
              state.isFetching = false;
              state.isSuccess = true;
              state.recipient = [...state.recipient, payload]
          },
          [postRecipient.pending]: (state) => {
              state.isFetching = true;
          },
          [postRecipient.rejected]: (state, { payload }) => {
              state.isFetching = false;
              state.isError = true;
              state.errorMessage = payload.error;
          },
          [fetchRecipients.fulfilled]: (state, { payload }) => {
              state.recipient = payload;
              state.isFetching = false;
              state.isSuccess = true;
              return state;
          },
          [fetchRecipients.rejected]: (state, { payload }) => {
              state.isFetching = false;
              state.isError = true;
              state.errorMessage = payload.error;
          },
          [fetchRecipients.pending]: (state) => {
              state.isFetching = true;
          },
        },
})

5. Access State in React Components

Finally, we need to access state in a react component, as well as tell state when to update from the component. To do this there are two tools to use: useSelector and useDispatch. Both are imported into a component from "react-redux", and can be called in any component.

UseSelector is used to specify which values from state should be displayed.

useDispatch is used to send an action to the reducer.

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from "react-redux";
import { userSelector, clearState, loginUser } from '../redux/usersSlice';

const LoginForm = () => {

    const { isError, errorMessage } = useSelector(userSelector)

    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")
    const [errors, setErrors] = useState(false)

    const dispatch = useDispatch()

    useEffect(() => {
        if (isError) {
            setErrors(errorMessage)
            dispatch(clearState())
        }
    }, [isError, dispatch, errorMessage])

    function handleSubmit(e) {
        e.preventDefault()
        const user = {
            username,
            password
        }
        dispatch(loginUser(user))
    }

  return (
    <div className="row container valign-wrapper">
        <form onSubmit={handleSubmit} className="col s8">
            <div className="row">
                <div className="input-field col s8">
                    <label>Username </label>
                    <input 
                        type="text"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                    ></input>
                </div>
                <div className="input-field col s8">
                    <label>Password</label>
                    <input 
                        type="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    ></input>
                </div>
                <div className="input-field col s8">
                    <input className="btn" type="submit" value="Log In" />
                </div>
            </div>
        </form>
        { errors ? <h5>{errors}</h5> : null }
    </div>
  )
}

export default LoginForm

And there it is! State is now stored in a redux store, making it a global variable. No more passing down confusing props in order to update state in so many places.

Thanks for reading!

ORM Explained

Miriamfark — Tue, 04 Oct 2022 02:08:45 +0000

Hi All!

I am back with another blog post, this time to tell you all about ORM's - Object-Relational Mapping.

Object - Relational Mappers are a developers dream. Every app will need a database to persist information and allow full, dynamic CRUD abilities. Speaking to a database involves learning a database language, usually SQL. This is what a SQL request looks like:

$SELECT * FROM table_name;

A more complicated SQL request including a condition may look like this:

$SELECT * FROM table_name WHERE id = 1

However, ORMs change that by being the intermediate layer, the go between, for the database and your preferred programming language.

How Do ORMs Work?

Object-Relational Mappers work by establishing a link between object-oriented programming classes and database tables. Each row in a table is represented by an instance of the linked class.

What an ORM is really doing is "wrapping" the SQL statements that will talk to the database in code, to automate the SQL requests, and avoid repetition. This makes sense according to programmers #1 rule: Keep it DRY! (Don't repeat yourself!) it is similar to creating a method that performs a task and calling that method multiple times. It cuts down on annoying, repetitive code, and you can use a language that is more familiar.

For example, if you are building a to-do app (check out mine!) you will need a table of tasks. Every time you want to add a new task to the table, you will have to write a SQL statement such as:

$ INSERT INTO tasks (name, category, minutes) VALUES ('Sweeping', 'Housework', 20)

Instead, an ORM will abstract away that logic and you can more easily say:

$ Task.create(name:'Sweeping, category:'Housework', minutes:20)

This is much more familiar, much cleaner, and much quicker!

ORM Conventions

Following ORM conventions is very important, as many of the functions depend on the conventions being followed. If you don't follow the conventions, your ORM will not work!

Tables are lower case and plural. Example: tasks, days, categories
Classes are upper case and singular. Example: Task, Day, Category

It is important to remember that every table is linked to a class and every instance is linked with a row in a table. However, the row is not the object and the object is not the row. The object is merely a representation of what actually exists within the database.

Common ORM Capabilities

Most ORMs, such as Active Record, have amazing capabilities. With very little code you can get access to very useful methods. Here are methods for Create, Read, Update and Delete.

1. Create

$ Day.create(name: 'Sunday')

or you can instantiate a new day without saving, or save it in a separate command.

sunday = Day.new
sunday.name = 'Sunday'
sunday.save

2. Read

There are several ways of reading data, depending on information you require. If you would like all the rows of a specific table you would say:

$ Day.all

for just the first day in a collection you can say

$ Day.first

you can search by name, id, or other attribute

$ Day.find_by(name: 'Sunday)

3. Update

To update an attribute, you will usually have to first find the attribute by searching for and then updating.

monday = Day.find_by(name: 'Monday')
monday.update(name: 'Meatless Monday')
```

`

####4. Delete
Likewise, for delete you will first have to find the object and then delete it.

`

```
monday = Day.find_by(name: 'Monday')
monday.destroy
```

`

## For More Information
https://guides.rubyonrails.org/active_record_basics.html

Nested Dynamic Routes with React Router

Miriamfark — Mon, 25 Jul 2022 20:27:00 +0000

One of the futures I really enjoyed using in React Router was the nested routes hook and useParams.

The React Router documentation defines a dynamic segment as :

Dynamic Segment - A segment of a path pattern that is dynamic, meaning it can match any values in the segment. For example the pattern /users/:userId will match URLs like /users/123

In order to use this cool future, we need useParams() which is defined as:

URL Params - The parsed values from the URL that matched a dynamic segment.

This is very helpful for when you have multiple nested routes, such as in an ecommerce store or blog. A parent component shows a list of objects that are links to more information about each product. Without dynamic routing, one would have to manually create a card and route for each product, which is incredibly inefficient especially for stores with many products. This is also a bad idea because as products are added or changed, it requires that the code be updated. Thank goodness for dynamic routing! Keep reading to see how it's done!

In App.js I used react-router-dom and to render my route to ComponentDetail.js.

<Route path="locations-detail/:id" element={<ComponentDetail locations={locations} passport={passport} setPassport={setPassport} bucketList={bucketList} setBucketList={setBucketList} />} />

As you can see, the path=”location-detail/:id”, with id being a dynamic variable.

Moving on, with ComponentDetail.js, I imported useParams from react-router-dom and then destructured the useParams object with id as my url variable.

let { id } = useParams();

I then used some conditional rendering to render my LocationCard.js, to display the correct location.

if (location.id == id) { return( <LocationCard passport={passport} key={location.id} id={location.id} city={location.city} country={location.country} location={location} setPassport={setPassport} food={location.food} landmark={location.landmark} bucketList={bucketList} setBucketList={setBucketList} reviews={location.comments} />
)

Now, when a user click on location link, the url displays the correct location id and the correct information is displayed on the screen. How cool is that?

Using Data Attributes For A Dynamically Added Five-Star Rating System

Miriamfark — Sat, 19 Mar 2022 21:51:37 +0000

I learned something new!

This blog post describes a new-to-me HTML attribute data, and how I used it to solve my five-star rating woes.

I encountered some trouble while working on a JavaScript project. I was trying to build out a five-star rating system for data fetched from JSON server.

A card was dynamically created for each object from the JSON server and appended to the page to display the JSON data.
Part of the card is a div containing five a tags with a rating star. I added an event listener to each star to listen for a click, and with JavaScript, I added a class name of ‘active’ to the clicked star and all the stars to its left. Using CSS, anything with a class of ‘active’ was at full opacity.

The issue that I was having, was that I had gathered all my stars into an array and added the click event to all the stars. Unfortunately, when I clicked on a star, it did not differentiate between the stars on its parent card and the stars on previous cards, as all the stars were part of the same array. When I did a for loop counting the stars indices and console logging the index of a clicked star, it did not stop at five the way I had intended, but continued looping through all six cards, coming to a total of thirty!

I reached out to my awesome instructor Enoch, and he gave me the idea to use Data-* attribute. Datasets are an HTML attribute that can be used to store extra information on standard HTML elements which does not need to be seen or read. This makes it easy to differentiate between similar HTML elements that need to have the same class, but would be too annoying to make each its own id. What I did was add a data attribute called rating to each star as it is created, and assigned each star a number from 1-5. Now each card it its own parent node containing five unique stars, and the click event when rating is contained within its parent card.

star1.dataset.rating = 1
      star2.dataset.rating = 2
      star3.dataset.rating = 3
      star4.dataset.rating = 4
      star5.dataset.rating = 5

A data attribute is easy to add dynamically in JavaScript, but it must be noted that a data attribute is a string and must be parsed into an integer if you are storing numbers.

const addRating = (e) => {
      console.log(e.target)
      const starDiv = e.target.parentNode
      const rating = parseInt(e.target.dataset.rating, 10)

      const aStars = starDiv.querySelectorAll('a')

      for (let i = 0; i < rating; i++) {
        const a = aStars[i]
        a.classList.add('active')
      }
    }

Here is my function called by my event listener. When a star is clicked, it calls addRating, which loops through the stars and adds a class ‘active’ to the clicked star and all the stars with a rating number lower than the clicked star within its parent node!

Learning about using the data attribute is really exciting because there are so many ways to use this attribute. It is useful for any situation in which you would like to include extra data on an HTML element that does not need to be seen on the page. The only downside of using datasets is that it is currently unsupported on Internet Explorer.

Please let me know your feedback, I would love to hear what you think!

Coding: First Impressions

Miriamfark — Tue, 08 Mar 2022 20:33:04 +0000

Hi! I’m Miriam!

I am currently enrolled in a coding boot camp, work part time as an office manager in an educational institution, and am a mom of two kids (a three year old girl and a one year old boy – they are adorable!) As I work in the morning while my kids are in preschool and day care, coding only happens at night, after the kids are sleeping. Once the kids drift off into slumber, I shift gears from Mommy to ….Coder!

Coding kind of feels like my superpower. It is challenging, stimulating, at times it can be maddening, and when it finally clicks, it is very satisfying. I alternate between being intimidated of, and enjoying, the mental challenge.

The time that I spend learning and practicing code is me-time. After a busy day of feeding, dressing, diapering, working in the office, some more cooking, feeding, and playing (which I love doing 😊) I crave the silence and peacefulness of sitting in front of my computer and getting lost in a new Javascript skill.

Before I started boot camp, I didn’t even know what a computer programmer did. I kind of imagined a coder as a stereotypical nerd typing in a magical series of zeros and ones. I certainly never considered myself doing that! However, after doing a career consultation, I found that the logical problem solving of programming was a great match for my abilities. I was also encouraged by a friend who had done a software engineering bootcamp, had gotten a great job as a frontend developer, and was loving it!

I remember one of the first skills I learned was to write a HTML tag. Seeing the words that I had typed “Hello, World!” appear on the screen felt tremendous. It may not have been the first steps on the moon, but it sure was exciting! For a few days after, every website I encountered I felt a kinship to. After all, someone else had also written an HTML tag for that website!

I am currently in Phase 1 of my program, which focuses on HTML, CSS, and Javascript. I learned about DOM manipulation, event listeners, and fetch requests which I am putting altogether now in my Phase-1 project.

I will be back soon with another post detailing my challenges in putting together a five star rating system for my project.

Thanks for reading!