DEV Community: Rachel Stark

React Context API

Rachel Stark — Sun, 21 May 2023 04:29:35 +0000

Today, I'm sharing my experience of leveraging the power of React Context API with the useContext hook for authentication in React. My current project is relatively small, with each main page handling its own state, but there's one crucial element that constantly needs to be passed down throughout the entire application: the USER.

Authentication is a vital aspect of any application, ensuring that users have secure access to the appropriate features and data. Implementing React Context API and the useContext hook into my project, really made me realize how much prop drilling and state lifting could be eliminated.

Before I get started I would like to point out that I did not use Context for the user's account information. This example is purely for Authentication for logging in and out of the app and having just enough data for authorization. To achieve this, I only needed to pass the user's ID and username, allowing control of which features are accessible and customize the user experience accordingly. On the backend, I used Rails and created a dedicated serializer to carefully manage the user information being sent to the front-end for authentication purposes. The aim is to ensure both security and a personalized experience for each user.

First, create a contexts folder in your src file in React app that contains a new .js file called AuthContext.js.
src/contexts/AuthContext.js

Next to create a context for our user object call the createContext method in the file and create a provider component named AuthContextProvider that takes in props, formatted just like any other React component. (React snippets extension in VS Code, you can call rafce)

import { createContext } from 'react'

const AuthContextProvider = (props) => {

  return (
    <AuthContext.Provider value={}>
    </AuthContext.Provider>
  )
}

export default AuthContextProvider

The component receives a value prop, which determines the desired state or data for the context. Next, create state for the user in the provider and plugging in a simple object for testing. (Don't forget to import useState) Pass the user as the value for the AuthContext. Then, add the children for the AuthContext { props.children }.

import { useState, useContext, createContext } from 'react'

const AuthContextProvider = (props) => {
   const [user, setUser] = useState({user_id: 1, username: "James"})

  return (
    <AuthContext.Provider value={ user }>
        {props.children}
    </AuthContext.Provider>
  )
}

export default AuthContextProvider

We want to render an AuthContext.Provider with the value of the user and wrap all of the components' children allowing the the children to have access to the value that is passed in. ( user ) Now, in the App.js, I'm going to wrap my entire app with the provider because all of it needs the user in some way or passed down to their children. Make sure to import the AuthContextProvider!

import AuthContextProvider from '../contexts/AuthContext';

function App() {

  return (
    <>
      <AuthContextProvider>
        <NavBar  />
        <Routes>
          <Route path="/" element={<Home  />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/signin" element={<SignIn  />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/trucks" element={<Trucks />} />
        </Routes>
      </AuthContextProvider>
    </>
  );
}

export default App;

Now all of the child components should have access to the value of the AuthContext.Provider. To get access to this context, you need to use the useContext hook from react in the components that need the user (context) and pass in the context that was created. (AuthContext). This will return the value of the user.

import { useContext } from 'react'
import { useAuth } from '../contexts/AuthContext'

const Home = () => {
  const user = useContext(AuthContext)

  return (
    <div>
      <h1>{user.username}</h1>
    </div>
  );
}

export default Home

There is a way to shorten this since you will probably use it in a lot of components. Go back to your context file and create a custom hook.

import { useState, useContext, createContext } from 'react'

export const AuthContext = createContext()

const AuthContextProvider = (props) => {
    const [user, setUser] = useState({user_id: 1, username: "James"})

  return (
    <AuthContext.Provider value={ user }>
        {props.children}
    </AuthContext.Provider>
  )
}

export const useAuth = () => useContext(AuthContext)

export default AuthContextProvider

Here you can create a function called useAuth() that returns the output of useContext(AuthContext) (which is the value prop). Now when you go back to a child component, you can reduce your code and just call useAuth() instead of calling and importing useContext. see below:

import { useAuth } from '../contexts/AuthContext'

const Home = () => {
  const navigate = useNavigate()
  const user = useAuth()

  return (
    <div>
      <h1>{user.username}</h1>
    </div>
  );
}

export default Home

Once you have it set up, I suggest testing it out to make sure you have it all working. Then you can move on to fetching your user data and setting the state. From there add your logIn and logOut functions. See below how I added the functions to the value object. You will pass them to the children the same way as above, only make sure you deconstruct so your component has access to them.
const { user, logOut } = useAuth()

import { useState, useContext, createContext, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

export const AuthContext = createContext()

const AuthContextProvider = (props) => {
    const [user, setUser] = useState(null)
    const navigate = useNavigate()

    useEffect(() => {
      fetch("/auth").then((resp) => {
        if (resp.ok) {
          resp.json().then((newUser) => {
            setUser(newUser);
          });
        }
      });
    }, []);

    const logInUser = (userObj) => {
      setUser(userObj);
      navigate("/");
    };

    const logOut = () => {
      fetch("/logout", {
        method: "DELETE",
      }).then((resp) => {
        if (resp.ok) {
          setUser(null);
        }
      });
      navigate("/");
    };

  return (
    <AuthContext.Provider value={ {user, logOut, logInUser} }>
        {props.children}
    </AuthContext.Provider>
  )
}

export const useAuth = () => useContext(AuthContext)

export default AuthContextProvider

I was hesitant to implement useContext at first, but like most code... once you understand it, you wonder how you lived without it. I hope this can be helpful to someone, I'm always open to learning more so don't be afraid to leave a comment.

--
You can connect with me on LinkedIn & GitHub

Resources:
React - useContext

React useContext

Introducing Validations

Rachel Stark — Sat, 21 Jan 2023 20:52:29 +0000

Active Record validations allow you control data saved to your database and help prevent headaches down the road! From a properly formatted date... to making sure a username is unique upon signup, Active Record provides pre-defined helpers you can use to make sure the input meets requirements. Let's take a look at some common validations that help keep your database tables cohesive.

There are a few ways you can provide validations for data but the most efficient way is by using them server side at the model level. Model level validations are database agnostic (compatible with any database), cannot be bypassed by the end users, and are easy to test and maintain. Now that being said, there are benefits to having both server side and client side validation! It can improve application performance by not having to process invalid data. To get the grasp of the differences and benefits of using both, check out this article.

So where in the process do validations take place? Active Record validations allow us to validate data before being stored in our database. They are triggered when using the create, save and update methods. The validations run right before the SQL commands are sent to the database, so if any fail, Active Record will not perform the SQL INSERT or UPDATE. If the record is invalid, create returns the object, save and update return false, and all the bang versions of these methods raise an exception. (e.g. create!) Here is a list of methods that skip validations.

The presence helper makes sure that the specified attribute(s) are not empty. A nil or a blank string value will be invalid.

class Student < ApplicationRecord
  validates :name, :grade, presence: true
end

In the example above, Active Record will not create a new student without a name and grade. The direct opposite helper is absence, which will make sure the attribute(s) are nil or a blank string.

It's common to need a unique attribute value, for example, you would probably want unique usernames for your application. Here the helper will search the Student table for existing records to determine the uniqueness of the specified attribute.

class Student < ApplicationRecord
  validates :username, uniqueness: true
end

There is a scope option available with uniqueness that allows you to specify additional columns to consider when checking for uniqueness.

class Assignment < ApplicationRecord
  belongs_to :student
  validates :title, presence: true, uniqueness: { scope: :student_id }
end

This is requiring that the combination of the assignment title and student_id be unique. Other student accounts can have the same assignment title, but it will not be duplicated in any student account.

There are many options for validating the length of an attribute's value...

class Student < ApplicationRecord
  validates :name, length: { minimum: 5 } # sets minimum
  validates :bio, length: { maximum: 500 } # sets maximum
  validates :password, length: { in: 5..12 } # provides a range
  validates :library_number, length: { is: 8 } # must match length
end

You can customize error messages using default error messages :wrong_length, :too_long, and :too_short. Note that the default messages are plural(e.g. 'characters'). There is also %{count} which is a placeholder for the number constraint being used.

class Student < ApplicationRecord
  validates :bio, length: { maximum: 500,
    too_long: "%{count} characters is the maximum allowed" }
  # sets maximum, custom message specifying the character limit
end

You might need to format strings for your application, in which case, you can test if they match specifications given using the :with option. This can come in handy to check that a valid email address is entered or if you wanted to exclude numbers/symbols.

class Student < ApplicationRecord
  validates :name, format: { with: /\A[a-zA-Z]+\z/,
    message: "only allows letters" }
end

This helper ensures attributes have only numeric values. To specify only integer numbers, use :only_integer set to true. The numericality helper does not allow nil values. To allow for this option you can use allow_nil: true.

class Test < ApplicationRecord
  validates :score, numericality: { only_integer: true }
end

:greater_than
:greater_than_or_equal_to
:equal_to
:less_than
:less_than_or_equal_to
:other_than (value must be other than the supplied value)
:in (value must be in the supplied range)
:odd
:even

This helper compares two values and will validate only if the comparison is true. Below the validation requires the race :start_time to be :less_than the :finish_time or it will be invalid.

class Race < ApplicationRecord
  validates :start_time, comparison: { less_than: :finish_time }
end

These are the supported options for comparison:
:greater_than
:greater_than_or_equal_to
:equal_to
:less_than
:less_than_or_equal_to
:other_than (value must be other than the supplied value)

Before I wrap up, I wanted to demonstrate some of the many ways you can check your validations using the rails console:

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

$ rails console

>> user1 = User.create(username: "")
=> #<User id: nil username: nil, created_at: nil, updated_at: nil>
#create returns the object with no id assigned, meaning it did not save to the database

>> user1.save
=> false

>> user2 = User.create!(username: "")
=> ActiveRecord::RecordInvalid (Validation failed: Username can't be blank)
#using the bang operator with create raises an exception when invalid

>>user3 = User.create(username: "Thor").valid?
=> true

>>user1.valid?
=> false
#you can use the opposite .invalid? 

>>user1.errors.any?
=> true
>>user1.errors.full_messages
=>  ["Username can't be blank"]

I only scratched the surface on what's possible using Active Record validations! Explore more pre-built helpers, conditional and custom validations, and validation errors.

You can connect with me on LinkedIn & GitHub

Resources: Rails Guides - Active Record Validations

Seeking Ruby Array Methods...

Rachel Stark — Mon, 19 Sep 2022 22:03:49 +0000

Code challenges may keep you awake, but the outcome depends on the effort you make. Look to Ruby and you just might find a shortcut of some kind. Listed below are the methods you seek to make your code short and sweet.

Here you'll find a quick introduction to a few of the most used array methods in Ruby. Open up IRB in your terminal to test some of these array methods below with me and create some of your own.

The .shuffle method in Ruby returns a new array with all the elements of the original array.. shuffled.

method_card = [“uniq”, “sample”, “rotate”, “reverse”]
method_card.shuffle
# => [“reverse”, “sample”, “uniq”, “rotate”] 

lucky_number = [13, 5, 3, 8, 15]
lucky_number.shuffle
# => [5, 15, 3, 8, 13]

The .sample method returns a random element or an array of random elements from the original array. Elements will not be repeated unless the original array contained duplicate elements.

fortune = ["It will come to pass", "Error 404 Fortune not found", "Not this year", "I will not tell"] 

fortune.sample
# => "I will not tell" 
fortune.sample
# => "Error 404 Fortune not found
fortune.sample(2)
# => ["Not this year", "I will not tell"] 
fortune.sample(3)
# => ["It will come to pass", "Error 404 Fortune not found", "Not this year"]

The .reverse method returns a new array that contains the original array's elements in reverse order. You can also check out .reverse_each for more options.

fortune_teller = ["Madame Ruby", "Great React", "Code Seeker"] 
tellers = fortune_teller.reverse  
# => ["Code Seeker", "Great React", "Madame Ruby"] 

lucky_number = [13, 5, 3, 8, 15]
my_numbers = lucky_number.reverse
# => [15, 8, 3, 5, 13]

The .sort method returns a new array with the elements from the original array sorted. It does so by using the <=> operator to compare elements in the array. It's also referred to as the "spaceship operator", you can learn more about this operator. The .sort method will sort numbers from least to greatest and strings in alphabetic order. You can also chain on the .reverse method to get your new array in descending order.

lucky_number = [13, 5, 3, 8, 15] 
num1 = lucky_number.sort          
# => [3, 5, 8, 13, 15] 
num2 = lucky_number.sort.reverse  
# => [15, 13, 8, 5, 3] 

answer = ["yes", "no", "maybe", "doubtful"] 
a1 = answer.sort   
# => ["doubtful", "maybe", "no", "yes"] 
a2 = answer.sort.reverse 
# => ["yes", "no", "maybe", "doubtful"]

If you want to sort an array that contains something other than numbers or strings, then you would need to use .sort_by. Learn more

The .uniq method comes in handy when working with lists of data that have some duplicate elements. You could filter out duplicate data by iterating through the array but why do that when you can simply use .uniq. The .uniq Ruby method is a non destructive method that returns a new array after removing duplicate elements from the original array.

lucky_number = [6, 13, 5, 3, 13, 8, 6]
num1 = lucky_number.uniq    
# => [6, 13, 5, 3, 8] 

# sort and discard duplicates
num2 = lucky_number.sort.uniq
# => [3, 5, 6, 8, 13] 

# sort by descending and discard duplicates
num3 = number.sort.reverse.uniq
# => [13, 8, 6, 5, 3]

Also note, that if you are merging data and want to avoid duplicates, you can use the | pipe operator which will merge arrays and discard any duplicates.

number_charm = [6, 13, 5, 3, 13, 8, 6]
number_choice = [4, 13, 3, 15, 18] 
combine = number_charm | number_choice
# => [6, 13, 5, 3, 8, 4, 15, 18] 

# using sort to organize
combine.sort
# => [3, 4, 5, 6, 8, 13, 15, 18]
# no duplicates from merge

Whenever you find yourself using this method often, you may consider exploring Ruby sets. With Ruby sets, all items in a set are guaranteed to be unique. You can learn about the difference between sets and arrays. If you want to change the original array, you will need to use .uniq! which is destructive. More details on that coming up.

The .rotate method returns a new array that rotates the elements of the original array so that the count comes first. You can also use negative numbers to rotate in the opposite direction. -1 being the last element of the array.

answer = ["yes", "no", "maybe", "doubtful"] 
a1 = answer.rotate     # => ["no", "maybe", "doubtful", "yes"] 
a2 = answer.rotate(2)  # => ["maybe", "doubtful", "yes", "no"] 
a3 = answer.rotate(3)  # => ["doubtful", "yes", "no", "maybe"] 
a4 = answer.rotate(-1) # => ["doubtful", "yes", "no", "maybe"] 
a5 = answer.rotate(-2) # => ["maybe", "doubtful", "yes", "no"]

When using the non destructive methods above you are preserving the original data. By adding an exclamation point ! to the end of these methods, you are creating a bang method. Bang methods must be used with caution because they are destructive, meaning they will mutate the data the method is called on.

Learn more Ruby array methods...

You can connect with me on LinkedIn & GitHub

Resources: Ruby-Doc.org, educative, Canva

Beginner React Mistakes

Rachel Stark — Thu, 23 Jun 2022 18:13:43 +0000

Are you starting out in React? Just as you were getting the hang of JavaScript, here comes React and JSX with little "ghosts" that sneak up on you. As a level one player, let's explore a few basic gotchas as we begin to navigate the maze of React.

There are gotchas in every programming language and let's face it, even the well-seasoned players still get caught by the ghosts occasionally. You'll never get that hour of your life back that you spent searching for that error that turned out to be a minor gotcha. Don't be hard on yourself.. we have all been there.. and odds are, it will happen again.

Keys must be unique or you will receive an error!
"Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity" React

Below when using .map() I used key={ghost.index} which triggers a warning message:

function GhostList({ ghosts }) {

  const displayGhosts = ghosts.map((ghost) => 
    <Ghost key={ghost.index} ghost={ghost} />)

  return (
      <div>
        <h1>Gotcha Ghosts</h1>
        <ul>
          {displayGhosts}
        </ul>
      </div>
  )
}

You should not be using an array index for keys and should only be used as a last resort. Doing so can cause errors/bugs in your code and cause issues with component state. Level Up - Tell Me Why Instead opt for the element.id or another unique string that will identify the list item. Here I used the ghost.id for my key but alternatively I could use key={ghost.name} if there is no id available and each name is unique.

const displayGhosts = ghosts.map((ghost) => 
    <Ghost key={ghost.id} ghost={ghost}/>)

Recently I received this warning when working with keys:
I thought what am I doing wrong? I was dealing with an array of objects (like my ghosts), and the key's value was an array...

const ghosts = [
        {
            "id": 1,
            "name": "Inky",
            "color": "blue",
            "altNames":["Fickle", "Bashful"]
        },
        {
            "id": 2,
            "name": "Blinky",
            "color": "red",
            "altNames":["Chaser", "Shadow"]
        },
        {
            "id": 3,
            "name": "Pinky",
            "color": "pink",
            "altNames":["Ambusher", "Speedy"]
        },
        {
            "id": 4,
            "name": "Clyde",
            "color": "orange",
            "altNames":["Stupid", "Pokey"]
        }
    ]

When you .map() through the "altNames" array to display them on the DOM, you can not use key={ghost.id} or key={ghost.name}. These will not provide a unique key for each element of the "altNames" array (list) and you will receive an error like the one above. The following was my solution, by assigning altName as the key to each element. This only works because in this data each altName (elements in array) is unique:

function Ghost({ ghost }) {
  const displayAltNames = ghost.altNames.map((altName) => 
    <li key={altName}>{altName}</li>
  )

  return (
      <div>
        <h3>Ghost: {ghost.name}</h3>
        <p>Color: {ghost.color}</p>
        <p>Other Names:</p>
        <ul>{displayAltNames}</ul>
      </div>
  )
}

In JSX you can only return one parent element. Notice in the code below there are two parent <div>s with children trying to be returned. In the console, you will receive a syntax error.

function Ghost({ ghost }) {
  const displayAltNames = ghost.altNames.map((altName) => (
    <li key={altName}>{altName}</li>
    ));

  return (
      <div>
        <h2>Say hello to {ghost.name}!</h2>
      </div>
      <div>
        <h3>Ghost: {ghost.name}</h3>
        <p>Color: {ghost.color}</p>
        <p>Other Names:</p>
        <ul>{displayAltNames}</ul>
      </div>
  );
}

As you can see, the error even suggests what to do. After getting this error once, you’ll know exactly what mistake to look for in your code. I wish all errors were this obvious! Now, how do you fix this? You could wrap it all in another <div> OR use <React.Fragment>. If you need those two <div>s you can now return them by wrapping your return with <React.Fragment>:

return (
    <React.Fragment>
      <div>
        <h2>Say hello to {ghost.name}!</h2>
      </div>
      <div>
        <h3>Ghost: {ghost.name}</h3>
        <p>Color: {ghost.color}</p>
        <p>Other Names:</p>
        <ul>{displayAltNames}</ul>
      </div>
    </React.Fragment>
  );
}

Or if I just had one <div, I could replace it with <React.Fragment> or the shortened syntax <> </>

return (
    <>
      <h3>Ghost: {ghost.name}</h3>
      <p>Color: {ghost.color}</p>
      <p>Other Names:</p>
      <ul>{displayAltNames}</ul>
    </>
  );
}

You can also use <React.Fragment> to replace a wrapping element to avoid cluttering the DOM with unneeded nodes. When selecting your wrapping element, keep in mind a key is the only attribute that can be passed to <React.Fragment>. Why must JSX expressions have only ONE parent element?

Another potential JSX snag is components must begin with an uppercase, which is quite conflicting from what we have learned in JavaScript. This new naming convention is one of the first gotchas you encounter in React. Below are two different errors triggered by forgetting to capitalize component names.

<ghost /> should be <Ghost />
console error...

function ghostList({ ghosts }) {...
export default ghostList;
console error....

Also check your import component names because that error will tell you something is really wrong! It is good practice to intentionally experiment with errors throughout your code when learning so you can be familiar with different error messages.

"When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement." React

When gathering data for the pac-man ghosts, I noticed all of them have playful names.. but then there is Clyde. When I saw the original Japanese names... poor Clyde's original name is "Stupid". There has to be some long lost story on how Clyde got his name... if you know.. share! Now it's time to chomp on another React power pellet and level up to gotchas dealing with state and hooks.

You can connect with me on LinkedIn & GitHub

Resources: Namco, React, Canva

JavaScript .filter( )

Rachel Stark — Mon, 09 May 2022 04:57:18 +0000

There is a wealth of information and videos on how to apply the filter() method, but as we know, the best learning comes from coding along and experimenting on our own. So let's dive in...

const newArray = array.filter(function(element) {
    return //conditional statement
})
console.log(newArray)
//=> returns array with filtered elements

The filter() method takes a callback function containing search criteria used to filter through the target array. Each element of the target array is passed through the callback function looking for a truthy value and then a new array of elements that proved true is returned. If no elements pass as true, then filter() will return an empty array. This method is non-destructive because it does not mutate the original array.

Some optional parameters for this method are index (if you want to start the iteration from a specific point in the array) and thisArg, which you can read about here.

Using the same syntax as above, let's write in a simple conditional statement.

const myArray = [ 3, 2, 1, "go", 1]

const numArray = myArray.filter(function(element){
    return element > 1
})

console.log(numArray)
//=> [3, 2]

That was easy, right? There are easier/cleaner ways to code this but for learning purposes, I like seeing details! Next up is some data you can use to follow along or create some of your own filter() code.

If you told me one day I would be typing out The Office's character data to practice coding, I would have laughed, but here I am!! And yes, I did find that some fans had calculated character ages based on random bits of information in the show.

const officeCharacters = [
    {
        character: "Michael Scott",
        gender: "male",
        age: 40,
        job: "Branch Manager"
    },
    {
        character: "Dwight Schrute",
        gender: "male",
        age: 35,
        job: "Salesman"
    },
    {
        character: "Pam Beesly",
        gender: "female",
        age: 26,
        job: "Receptionist"
    },
    {
        character: "Jim Halpert",
        gender: "male",
        age: 26,
        job: "Salesman"
    }
]

Keeping the same syntax as above we want to return an array of male characters only by filtering through the characters gender values. Since the data provided is an array of objects, we will need use dot notation to access the keys' values.

const maleCharacters = officeCharacters.filter(function(char) {
    return char.gender === "male"
})

console.log(maleCharacters)
//=> returns new array with only the male characters

Sorry, Pam!

Now let's filter characters under the age of 40. This time using an arrow function and setting the condition to less than or equal to 39.

const ageBelowForty = officeCharacters.filter(char => char.age <= 39)

console.log(ageBelowForty)

Here we see the returned array ageBelowForty in the browser console.

If you're anything like me.. you're probably thinking age and gender are not really the best filters for employees so here is one more, same idea but filtering job position..

const salesEmployees = officeCharacters.filter(char => char.job === "Salesman")
console.log(salesEmployees)
//=> returns array of 2 salesman

What about multiple conditions? YES. Let's give it a go..

const filterCharacters = officeCharacters.filter(char => {
    return char.age >= 30 && char.gender === "male"
})
console.log(filterCharacters)
//=> returns an array of 2 characters (Michael and Dwight)

Say we are not sure what we are looking for but know what we don't want. Try out the !== operator.

This is just a simplified start to filter. Can you imagine how handy this is for large arrays of objects? There are many different ways to write conditionals making .filter() a good JavaScript BFF.

If you need to filter through the array for one specific element, try the .find() method. This method returns the first element that passes as true.
Not sure you are working with an array? Check out the .isArray() method on MDN. The .filter() method works only on arrays (including arrays of objects like above) and it will throw an error message if not applied correctly.

I know "salesman" is out-dated and should be sales representative, but that is the job title used in the show. IYKYK

You can connect with me on LinkedIn & GitHub

Resources: MDN, Eloquent Javascript, w3schools, Canva