DEV Community: Alec Grey

Controlled Forms with Frontend Validations using React-Bootstrap

Alec Grey — Fri, 29 Jan 2021 22:05:54 +0000

I've been working on my capstone project for the last couple of weeks, and with it I've had a chance to learn a lot more about react-bootstrap for putting together functional, and aesthetically pleasing web pages. One place that this framework has really helped me to up my game is in creating responsive forms. Pairing with React hooks, you can very easily make forms that store input in state, keep control form values, and display invalidations when necessary. Lets create a simple form with react & react-bootstrap to see how it's done!

Link to Repo

App Setup

We're going to build a simple form with a few fields. To start, lets initialize our app with npx create-react-app form-demo. Next we're going to add react-bootstrap to our project with either npm install --save react-bootstrap or yarn add react-bootstrap.

Because React-Bootstrap comes with specific out-of-the-box styling, it is also helpful to add vanilla-bootstrap for additional customization. To do this, start with either npm install --save bootstrap, or yarn add bootstrap, then import it into your index.js or App.js files:



// ./src/App.js
// ...other imports
import 'bootstrap/dist/css/bootstrap.min.css';

Now that our app is set up, we can start building out our basic form.

Form Building with React-Bootstrap

Like all components, we need to use import in order to bring them in for availability in our app. Now that we have the library installed, we can easily add react-bootstrap components to our app:



// ./src/App.js
// ...other imports
import Form from 'react-bootstrap/Form';

This convention is consistent throughout the library, but I highly suggest reviewing the documentation for specific import instructions.

Building the form follows very straightforward convention, but also keeps room open for styling choices to be mixed in. Here is the code for our form, which will be used to review food items at a restaurant:



const App = () => {
  return (
    <div className='App d-flex flex-column align-items-center'>
      <h1>How was your dinner?</h1>
      <Form style={{ width: '300px' }}>
        <Form.Group>
          <Form.Label>Name</Form.Label>
          <Form.Control type='text'/>
        </Form.Group>
        <Form.Group>
          <Form.Label>Food?</Form.Label>
          <Form.Control as='select'>
            <option value=''>Select a food:</option>
            <option value='chicken parm'>Chicken Parm</option>
            <option value='BLT'>BLT</option>
            <option value='steak'>Steak</option>
            <option value='salad'>Salad</option>
          </Form.Control>
        </Form.Group>
        <Form.Group>
          <Form.Label>Rating</Form.Label>
          <Form.Control type='number'/>
        </Form.Group>
        <Form.Group>
          <Form.Label>Comments</Form.Label>
          <Form.Control as='textarea'/>
        </Form.Group>
        <Button type='submit'>Submit Review</Button>
      </Form>
    </div>
  )
}

Lets break this down:

Following React convention, we have the div wrapping the rest of the component.
We wrap the entire form in a single Form component
Each field is grouped using the Form.Group component wrapper. This generally follows a 1:1 rule for Group:Field, but there are advanced cases such as having multiple fields on a single row where you could wrap multiple fields.
Use Form.Label for labelling each field. You can use added styling on the form group in order to make this display inline with your form input, but by default they will stack vertically.
Use Form.Control to designate the input field. Here we have a couple of options for inputs. If your field resembles an HTML input tag, you can use type='type' to determine what type of input field it will be. In our example we use type='text' and type='number'. If you will be using another HTML tag, such as a <select> tag, you can use the as='tag' designation to determine what you get. In our example we use both an as='select' and an as='textarea' to designate these.
To submit the form, we add a button to the bottom with a type='submit' designation. Personally, I prefer not to use the 'submit' type, as we will more than likely be overriding the default submit procedure anyway.

As you can see, we can very quickly build a form that is aesthetically pleasing, but the important next step is to make it functional!

Updating State with Form Input

Using react hooks, we're going to create 2 pieces of state: the form and the errors.



const [ form, setForm ] = useState({})
const [ errors, setErrors ] = useState({})

The form object will hold a key-value pair for each of our form fields, and the errors object will hold a key-value pair for each error that we come across on form submission.

To update the state of form, we can write a simple function:



const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value
    })
  }

This will update our state to keep all the current form values, then add the newest form value to the right key location.

We can now add callback functions for onChange on each form field:



// do for each Form.Control:
<Form.Label>Name</Form.Label>
<Form.Control type='text' onChange={ e => setField('name', e.target.value) }/>

As you can see, we are setting the key of 'name' to the value of the input field. If your form will be used to create a new instance in the backend, it is a good idea to set the key to the name of the field that it represents in the database.

Great! Now we have a form that updates a state object when you change the value. Now what about when we submit the form?

Checking for errors on submit

We now need to check our form for errors! Think about what we don't want our backend to receive as data, and come up with your cases. In our form, we don't want

Blank or null values
Name must be less than 30 characters
Ratings above 5 or less than 1
Comments greater than 100 characters

Using these cases, we're going to create a function that checks for them, then constructs an errors object with error messages:



const findFormErrors = () => {
    const { name, food, rating, comment } = form
    const newErrors = {}
    // name errors
    if ( !name || name === '' ) newErrors.name = 'cannot be blank!'
    else if ( name.length > 30 ) newErrors.name = 'name is too long!'
    // food errors
    if ( !food || food === '' ) newErrors.food = 'select a food!'
    // rating errors
    if ( !rating || rating > 5 || rating < 1 ) newErrors.rating = 'must assign a rating between 1 and 5!'
    // comment errors
    if ( !comment || comment === '' ) newErrors.comment = 'cannot be blank!'
    else if ( comment.length > 100 ) newErrors.comment = 'comment is too long!'

    return newErrors
}

Perfect. Now when we call this, we will be returned an object with all the errors in our form.

Let's handle submit now, and check for errors. Here is our order of operations:

Prevent default action for a form using e.preventDefault()
Check our form for errors, using our new function
If we receive errors, update our state accordingly, otherwise proceed with form submission!

now to handle submission:



const handleSubmit = e => {
    e.preventDefault()
    // get our new errors
    const newErrors = findFormErrors()
    // Conditional logic:
    if ( Object.keys(newErrors).length > 0 ) {
      // We got errors!
      setErrors(newErrors)
    } else {
      // No errors! Put any logic here for the form submission!
      alert('Thank you for your feedback!')
    }
  }

By using Object.keys(newErrors).length > 0 we are simply checking to see if our object has any key-value pairs, or in other words, did we add any errors.

Now that we have errors, we need to display them in our form! This is where we will add our last bit of React-Bootstrap spice: Form.Control.Feedback.

Setting Invalidations and Feedback

React bootstrap allows us to add a feedback field, and to tell it what and when to display information.

On each of our forms, we will add an isInvalid boolean, and a React-Bootstrap Feedback component tied to it:



<Form.Group>
    <Form.Label>Name</Form.Label>
    <Form.Control 
        type='text' 
        onChange={ e => setField('name', e.target.value) }
        isInvalid={ !!errors.name }
    />
    <Form.Control.Feedback type='invalid'>
        { errors.name }
    </Form.Control.Feedback>
</Form.Group>

With this added, Bootstrap will highlight the input box red upon a true value for isInvalid, and will display the error in Form.Control.Feedback.

There's one final step however! We need to reset our error fields once we have addressed the errors. My solution for this is to update the errors object in tandem with form input, like so:



const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value
    })
    // Check and see if errors exist, and remove them from the error object:
    if ( !!errors[field] ) setErrors({
      ...errors,
      [field]: null
    })
  }

Now, when a new input is added to the form, we will reset the errors at that place as well. Then on the next form submission, We can check for errors again!

Final product in action:

Thanks for reading! I hope this was helpful.

My Tech Resolutions for 2021

Alec Grey — Tue, 05 Jan 2021 05:24:07 +0000

Last week I had some well-needed rest from my coding bootcamp with Flatiron. While I tried my best to stay off the code editor, I did spend a few hours here and there, and ended up spending more time than I should have watching tech-related youtube videos... One video that caught my attention the most was this video regarding tech trends & predictions for 2021.

Now that I'm less than a month away from the end of my bootcamp, the thought of entering the job market has become all too real, and it made me think a lot about what I'm going to have to teach myself once the guided work ends. In that regard, I thought it would be helpful to write out some tech resolutions for 2021:

1. Learn C++

It's often said that learning coding fundamentals and concepts is much more important than learning languages, and I 100% agree. However, I've also heard that it is valuable to learn at least one lower-level language, and I've also, also heard that it is valuable to learn a form of C. Because of that, I've added C++ to the top of my list of languages to dive into for 2021.

C++ has a reputation for being one of the most difficult languages to pick up, an idea which is summed up great this article. Here's a great excerpt:

"With C++ you really need to know what and why you and the computer are doing what you’re doing.

This can be thrown in contexts of 'efficient operations' or 'garbage collection' or 'memory management' or whatever – but it all boils down to the same idea at the end of the day."

Long-story-short, C++ gives you a lot of power and freedom when it comes to data management, storage, and in what coding paradigms you follow, but that also means you'll need a stronger understanding of computer science to succeed. I for one am excited to see what great and terrible things I do to my Macbook while I figure this all out.

Here is a great blog if you need some good C-heerleading.

2. Develop a full-stack MERN application

MERN is one of those cool buzzwords that you see online a lot, and there are plenty of great tutorials that can help you on the path to building your own MERN application.

MERN stands for:

Mongo DB
Express JS
React JS
Node JS

This is a back-to-front Javascript application. One of the big takeaways I gleaned from the 2021 trends/predictions is the general plateau-ing of Javascript as a language, and how it's actually a pretty cool thing. Javascript is not going away any time soon, and there are supposedly fewer and fewer big updates to be made.

Key things to know about each of the technologies:

MongoDB - Data is stored in a NoSQL format, meaning that instead of database tables with rows and columns, you have documents inside of collections, each with data stored in JSON objects! Because we utilize this data structure, we can store more powerful data such as arrays!
ExpressJS - A backend-oriented framework for NodeJS. It can be used to build multi-page web applications, following a model-view-controller structure, but is more commonly used to develop a backend-API to use alongside...
ReactJS - Arguably the most popular front-end JS framework.
NodeJS - A runtime environment for Javascript, allowing it to be executed outside of the browser. It's the glue of the whole application!

As a sidenote - this is also a great time to learn Typescript as well...

3. React Native - or - Flutter

I've flip-flopped on this many times in the last few months, and I'm leaning towards React Native at the moment. Here is a fantastic article that compares the two platforms in depth (spoiler alert-Flutter won).

What are the benefits of learning either platform? They both allow users to develop cross-platform applications, using a single codebase. This cuts down a lot of time and energy wasted learning one language for iOS and another for Android development. Time is money, and since I'm planning my next mobile-app like a career criminal going back in for 'one last job', I'm expecting a huge return on investment.

4. A Testing Framework

Honestly, I can't tell if this will be me favorite or least-favorite technology I learn this year, but I have a feeling it will be one of them. I recently had my first experience in automation, creating a web-scraping script to grab apartment listings off of Craigslist. If using a testing framework is anything like that, I'll be looking forward to it.

The frontrunner for me is Jest. It's one of the strongest contenders for JS testing frameworks, and it's built with React in mind.

This list could go on forever...

There are a ton of things I would love to learn this year, but those are the top 4 on my list. I'm sure at least 3 will change by March.

Cheers.

Quick Guide to PDF generation in Ruby

Alec Grey — Mon, 30 Nov 2020 21:05:31 +0000

I recently learned about some additional controller functionality that expanded beyond the simple render 'view' that I used in my first Rails project. Since my project had to do with generating lists for a user, I was understandably excited when I learned about the send_file method. The possibility of sending a user data via a PDF was always a stretch-goal, but I had no idea where to start.

Though the send_file method gave me a good starting point, I still had a huge issue: how do I create a custom PDF?

Luckily, with some google-magic, I stumbled on some great articles that helped me out, particularly this great video from Upcase. We're going to look specifically at creating custom PDFs, but I'd highly suggest checking out the video for a more in-depth look at adding this to your own Rails project

Where We're Going

We're going to take a look at the process for setting up creating a custom PDF in Ruby, including:

The tools/gem dependencies needed
How to use the tools to generate a simple test PDF
Customizing the layout/data of your PDF

Tools / Gems

To get started, we are going to need to install wkhtmltopdf. In your terminal, use brew to complete the install process:

$ brew install --cask wkhtmltopdf

wkhtmltopdf is a straightforward tool that works by taking HTML and CSS, and converting it into a PDF document.

Unfortunately, wkhtmltopdf cannot be used directly in our Ruby application. This is where we will need the PDFKit gem. Either install globally, or add it to your gemfile in a rails application:

$ gem install pdfkit

Generating a simple test PDF

PDFKit allows us access to very simply take a string of HTML code, and convert it into a PDF document, that we can download to a file location.

require 'pdfkit'

def generate_pdf_from_html(html, route)
    kit = PDFKit.new(html)
    kit.to_file(route)
end

With our basic PDF converter method defined, let's give it some data and see what happens!

html = '<h1>Hello, Globe!</h1>'
route = './hello.pdf'

generate_pdf_from_html(html, route)

Running this application, I now should have a new pdf document in the current directory with the name hello.pdf:

Spruce things up with CSS!

The great thing about this process is that wkhtmltopdf and PDFKit can take any viable HTML and convert it to PDF format. Let's take advantage of that by adding <style> to the head of our HTML!

html = "
    <head>
        <style>
            body {
                text-align: center;
                background-color: gray;
            }
            h1 {
                color: white;
            }
        </style>
    </head>
    <body>
        <h1>Doggos are cool</h1>
        <p>I like doggos, they are very cool.</p>
    </body
    "

Now if we run our application again, we will get a stylized PDF as the result!

Keep in mind, these all default to an 8.5 x 11 document, which is convenient for if we want to make anything printable!

I hope this helps add a nifty tool to your belt. Again, I would highly suggest watching this video from Upcase, which gives an in-depth look at integrating this functionality into a Rails application.

Cheers.

Yield

Alec Grey — Tue, 10 Nov 2020 21:10:30 +0000

Intro

Of the many things I take for granted as a beginner Rubyist, I think the concept I've taken for granted the most is code blocks, and the keyword yield. I assumed that do and end were just inherent parts of enumerables, conditional statements, and forms.

The truth is, we can take advantage of these code blocks in our own methods, and access them with the keyword yield.

What is yield?

yield is a built-in Ruby keyword. A list of all Ruby keywords can be found here.

When yield is interpreted, it begins the execution of the code-block that directly succeeds the method:

def execute_block
   yield
end

execute_block { puts "Hello" } 
"Hello"
#=> nil

execute_block do
   2 + 2
end 
#=> 4

In the above example, we have a method that simply executes the code block it is given. When the yield keyword is hit, the method is paused, and the block is ran. The result of the block gets returned to the method, and execution can continue.

Now that we've seen the basic idea of blocks & yield, let's look at some cool implementation.

Performance testing

A common use for a custom yield method is when performance testing a method or block of code.

def speedtest
    t1 = Time.now
    result = yield
    t2 = Time.now
    puts t2 - t1
    result
end

This method will take a time-stamp before and after the execution of a block. It will take the difference of those times to find the runtime, then return the result of the code-block.

speedtest { 1 + 1 }
1.0e-06
=> 2

speedtest { [1, 1].reduce(:+) }
3.0e-06
=> 2

Customized Conditional-flow

Let's make our own conditional flow:

def allow_if_true(method, false_message)
    return false_message unless yield
    method
end

With this method, we limit the execution of method, so that it only runs if the given block returns true.

allow_if_true(top_secret_internet_stuff, "Access Denied") do
   session[:username] == "Bill Gates"
end

Now, we can successfully keep safe all of the internet's deep dark secrets. Take that hackers!

What about enumerating?

Fun fact: We can pass parameters to our yield! Let's take a look at how we can use that by making our own each-like enumerator:

def do_stuff_to(arr)
   return "not an array!" unless arr.class == Array
   count = 0
   while count < arr.length
      yield arr[count]
      count += 1
   end
   arr
end

With this simple implementation, we

First assure we have the right data-type with unless
Iterate over the array with a while loop & count
Display the original array at the end.

do_stuff_to([1, 2, 3]) do |i|
   puts i ** 2
end
1
4
9
#=> [1, 2, 3]

Did you notice the |i|? When we pass a value to yield, we denote it's presence by declaring it in pipe-notation in the block. Just like our built-in enumerable methods, we have a parameter for each value passed to the yield.

Closing

To be completely honest, at this point I don't know how useful a custom yield method will be to your day-to-day development. But at the very least, I hope this helps de-mystify this concept to you, and that you'll be more comfortable knowing what goes on when you see these come up.

Cheers!

.reduce: a versatile array method

Alec Grey — Sun, 18 Oct 2020 22:54:15 +0000

.reduce is a confusing enumerable. But I'd like to think that what makes it confusing can also make it a powerful tool.

Today I'd like to dispel some of the confusion, and also show some examples of versatile of a method it is.

What does .reduce do?

Let's start with an easy example: Let's say we have an array of numbers that we want to reduce down to a single value, it's sum. (Let's also say a powerful, Ruby-based wizard took away our .sum method)

array = [1, 1, 1]

array.reduce(0) {|sum, i| sum + i} #=> 3

OK. Let's unpack what the code just did, above.

.reduce as an accumulator method

Above, we gave .reduce a single parameter (reduce(0)), as well as named two variables within the pipes (|sum, i|). Let's call the parameter the start value, and the two variables the memo, and current_element, respectively.

array.reduce(start) {|memo, current_element| statement}

current_element is fairly straightforward; it is the current value of the array you are iterating over.

memo stores the return value of the previous iteration.

start provides an optional starting-point, by passing it's value as the first value of memo.

Let's look at the above example again, but this time at each iteration that is happening:

array = [1, 1, 1]

array.reduce(0) {|sum, i| sum + i}

# 1st: 0 + 1 #=> 1
# 2nd: 1 + 1 #=> 2
# 3rd: 2 + 1 #=> 3

Each iteration is adding the sum value to the current_element, then saving that return as the next value for sum. At the end of the iteration, the final value of sum is returned!

Before we move on... remember how I said that the parameter value was optional? If we don't pass in the start value, the method will take array[0] for the first value of memo, and start iterating with array[1]!

array = [1, 1, 1]

array.reduce {|sum, i| sum + i} #=> 3

Now that we understand the basics, let's get into some of the fun versatility that .reduce has to offer.

Using conditional logic to control our returns

Well, I guess I forgot my repellent. The pesky wizard came back and this time he took our max_by method... How am I supposed to find the largest name out of this group of names?

names = ["Gandalf", "Saruman", "Radagast"]

Well let's see what .reduce can do!

names.reduce do |longest, current|
    if current.length > longest.length
        current
    else
        longest
    end
end #=> 'Radagast'

By implementing some control-flow, we can look at each value of the names array, and either return the current if it's longer than the longest, or keep the same value of longestfor the next iteration.

This could be written more elegantly as well:

names.reduce do |longest, current|
    current.length > longest.length ? current : longest
end #=> 'Radagast'

Ternary operators make up some of the bread-and-butter of .reduce control flow.

There is a glaring flaw in our method, however. What happens when two or more names are of the same length?

names = ["Bronson", "Dave", "Swanson", "Steve", "Johnson"]

Our current .reduce method will only return the first longest name, since no subsequent values will pass true for current.length > longest.length!

Returning multiple values with .reduce

Remember how we can pass an optional start parameter to our method? Well we can actually use this to our advantage to create a .reduce method that returns an array of multiple responses!

names = ["Bronson", "Dave", "Swanson", "Steve", "Johnson"]

names.reduce([""]) do |long_names, current|
    if current.length > long_names[0].length
        [current]
    elsif current.length == long_names[0].length
        long_names << current
    else
        long_names
    end
end #=> ["Bronson", "Swanson", "Johnson"]

To break this down, we need to keep the output consistent across each iteration, so since we want an array of strings, we put an array with an empty string as the start value. After each iteration, we can either start a new array if current is greater than the previous longest name, we can add to the array if current is the same length as the previous longest name, or we can move on, by returning the long_names array in it's current form.

.reduce is a powerful tool, so I hope this helped make it more clear how it works. There's still power yet to be explored with this enumerable, so as a cliffhanger, I'll leave you with another way to refactor the sum example from earlier:

Instead of array.reduce {|sum, i| sum + i}...

Why not try array.reduce(:+)?