DEV Community: ericksong91

Basic Auth Routing and Redirecting using React Router v6

ericksong91 — Thu, 07 Sep 2023 16:27:49 +0000

Introduction

Hi y'all,

This is a quick tutorial on how to utilize some basic authentication routing using React Router v6. This will allow you to protect routes in your application from users who are not logged in.

You can also include route protection against users who do not have certain group permissions as well (that won't be covered today but would be easy to add).

I will also go over how to navigate the user back to the page that they were trying to access before logging in.

Lets get started!

Setting Up Our Project

First start by making a new vanilla React project:

npx create-react-app your-project-name

Move to the directory then type:

npm install react-router-dom

Components and Routing

To continue setup, lets make our sample components.

I'll be creating a components, auth and context folder to house the page components, authentication component and the user component:

Now let's go ahead and work on our context file, user.js.

If you're unfamiliar with context, you can read up more about context here. Basically, context allows us to provide a user token and setUser function to all of the components in our application. This isn't limited only to user and setUser; you can pretty much pass any prop you'd like to any component.

import React, { useState } from 'react';

const UserContext = React.createContext();

function UserProvider({ children }) {
    const [user, setUser] = useState(false);

    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    )
};

export { UserContext, UserProvider };

I'll be setting up the user token as a simple state variable so I can turn it on (true) or off (false) with a button. If we had a backend, this is where we would be communicating with the server to verify the user instead.

Make sure to remember to pass the user as well as setUser props so the other components can access them.

Next I'll open up my index.js file in the root of the directory and add these lines:

`index.js`

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
import { UserProvider } from './context/user';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <UserProvider>
    <Router>
    <App />
    </Router>
  </UserProvider>
);

I'm wrapping my <App /> component in <UserProvider> to give it access to the context file and also the <BrowserRouter> component (renamed to <Router>).

For Admin.js and Homepage.js let's give them both a generic template and some buttons for navigation using <Link />.

`./components/Admin.js`

import React from 'react'
import { Link } from 'react-router-dom'

function Admin({ setUser }) {
    return (
      <div>
        <h1>Admin</h1>
        <Link to="/" replace><button>Back to Home</button></Link>
      </div>
    )
}

export default Admin

`./components/Homepage.js`

import React from 'react'
import { Link } from 'react-router-dom'

function Homepage({ setUser }) {
  return (
    <div>
      <h1>Homepage</h1>
      <Link to="/admin" replace><button>Admin Page</button></Link>
    </div>
  )
}

export default Homepage

Now let's make a some routing in the <App /> component and also import the component that we just made.

import React, { useContext } from "react";
import { UserContext } from "./context/user";
import Admin from "./components/Admin";
import Homepage from "./components/Homepage";
import { Routes, Route } from "react-router-dom";

function App() {
  const { user, setUser } = useContext(UserContext);

  return (
   <div className="App">
    <Routes>
     <Route path='/' element={<Homepage />} />
     <Route path='/admin' element={<Admin />} />
     <Route path="login" element={<Login />} />
    </Routes>
   </div>
  );
}

export default App;

To test it, let's run npm start.

Great! Now we have some basic routing and a button that lets us navigate to / and /admin! Now that we have all our pages and routes set up, we need to protect them; go into auth.js and setup the authentication!

`./auth/auth.js`

import React from 'react'
import { useLocation, Outlet, Navigate } from 'react-router-dom';

function AuthLayout({ authenticated }) {
    const location = useLocation();
    return authenticated ? <Outlet /> : <Navigate to="/login" 
           replace state={{ from: location }} />;    
};

export default AuthLayout

In auth.js, we're importing useLocation, Outlet and Navigate from react router.

The return statement here is looking to check whether the prop authenticated is a truthy or falsey value. true is if the user is logged in, false if they're not.

<Navigate /> will navigate the user to /login if they're not logged in (user token reads false). We're saving our user's current location to the location variable then saving that state using state={{ from: location }} in <Navigate>.

(If you console.log(location), you can see the state changing every time the url changes; check your console when switching between /admin and /!)

Finally, <Outlet /> will render out the child components of a parent component; in this case, <AuthLayout /> will be our parent component. Every child component under <AuthLayout /> will render normally when the user token reads true.

Before we add <AuthLayout />, we need to add our <Login /> component as well.

./components/Login.js

import React from 'react'
import { useContext } from 'react'
import { UserContext } from '../context/user'

function Login() {
    const { user, setUser } = useContext(UserContext);

    return (
        <div>
            <h1>Login</h1>
            <button onClick={() => setUser(true)}>Login</button>
        </div>
    )
}

export default Login

With this component, the only prop we need is the setUser function using context. With this function, we can use it to login our user every time they click on the Login button.

Now let's go back to App.js and finish the routing. This time we'll import the <AuthLayout /> component and make it the parent component for <Homepage /> and <Admin />. We'll also import <Login /> but keep it unprotected.

./App.js

import React, { useContext } from "react";
import { UserContext } from "./context/user";
import Admin from "./components/Admin";
import Homepage from "./components/Homepage";
import Login from "./components/Login";
import AuthLayout from "./auth/auth";
import { Routes, Route } from "react-router-dom";

function App() {
  const { user, setUser } = useContext(UserContext);

return (
<div className="App">
 <Routes>
  <Route element={<AuthLayout authenticated={user} />}>
    <Route path='/' element={<Homepage />} />
    <Route path='/admin' element={<Admin />} />
  </Route>
  <Route path="login" element={<Login />} />
 </Routes>
</div>
  );
}

export default App;

In the <Route> component, we add <AuthLayout /> as the element and pass in the user prop. Since right now our user token reads false, it should automatically redirect us to /login instead.

Since <Login /> is not a child component of <AuthLayout />, /login is accessible even without a truthy user token.

Go ahead and spin up the instance again (or save) to refresh the changes. You should notice immediately that you have been redirected to /login. Try to manually change the url to / and /admin and you'll be redirected to /login every time.

Once you hit the Login button on /login....nothing happens? It's because we haven't added a conditional yet that redirects the user once they're logged in.

Let's go back to our <Login /> component and add that:

./components/Login.js

import React from 'react'
import { useContext } from 'react'
import { UserContext } from '../context/user'
import { useNavigate } from "react-router-dom";

function Login() {
    const { user, setUser } = useContext(UserContext);
    const navigate = useNavigate();

    if(user) {
        navigate('/')
    };

    return (
        <div>
            <h1>Login</h1>
            <button onClick={() => setUser(true)}>Login</button>
        </div>
    );
};

export default Login

We'll add useNavigate to redirect the user if the user token is a truthy value.

Save the changes and now try to login; it should be redirecting you now to / after you log in.

Redirecting the User After Logging In

What if now the user wants the ability to refresh or go directly to a page, login, then keep their place? Normally it would just redirect them to / because of our conditional in <Login />.

We can fix that by adding a conditional that uses the useLocation state that we saved in <AuthLayout />! Remember when console logging location it was saving your browser history to the location state.

Update your <Login /> component:

./components/Login.js 

import React, { useEffect } from 'react'
import { useContext } from 'react'
import { UserContext } from '../context/user'
import { useLocation, useNavigate } from "react-router-dom";

function Login() {
    const { user, setUser } = useContext(UserContext);
    const location = useLocation();
    const navigate = useNavigate();

    if (user && location.state?.from) {
        return navigate(location.state.from)
    };

    return (
        <div>
            <h1>Login</h1>
            <button onClick={() => setUser(true)}>Login</button>
        </div>
    )
}

export default Login

We added a different conditional that checks if user token is true AND location has an available state that we can use to redirect with navigate.

To test this, let's update our <Homepage /> and <Admin /> components to include logout buttons. We'll also update <App /> to pass in the setUser prop but you could also use context instead if you'd like.

./App.js

import React, { useContext } from "react";
import { UserContext } from "./context/user";
import Admin from "./components/Admin";
import Homepage from "./components/Homepage";
import Login from "./components/Login";
import AuthLayout from "./auth/auth";
import { Routes, Route } from "react-router-dom";

function App() {
  const { user, setUser } = useContext(UserContext);

return (
<div className="App">
 <Routes>
  <Route element={<AuthLayout authenticated={user} />}>
    <Route path='/' element={<Homepage {setUser}=setUser />} />
    <Route path='/admin' element={<Admin {setUser}=setUser  />} />
  </Route>
  <Route path="login" element={<Login />} />
 </Routes>
</div>
  );
}

export default App;

./components/Homepage.js

import React from 'react'
import { Link } from 'react-router-dom'

function Homepage({ setUser }) {
  return (
    <div>
      <h1>Homepage</h1>
      <Link to="/admin" replace><button>Admin Page</button></Link>
      <button onClick={() => setUser(false)}>Logout</button>
    </div>
  )
}

export default Homepage

./components/Admin.js

import React from 'react'
import { Link } from 'react-router-dom'

function Admin({ setUser }) {
    return (
      <div>
         <h1>Admin</h1>
         <Link to="/" replace><button>Back to Home</button></Link>
         <button onClick={() => setUser(false)}>Logout</button>
      </div>
    )
}

export default Admin

Save the changes or spin up the instance again and go ahead and login.

After logging in, navigate to /admin using the buttons then logout. Once you're logged out, when you log in again you should notice that you've been returned to the /admin page instead of /!

Conclusion

React Router v6 is a very powerful tool that can be used for authentication and conditional redirects after logging in. This will make your app robust and more user friendly.

Notes

Please let me know in the comments if I've made any errors or if you have any questions! Still new to ReactJS and React Router v6 but I hope this was useful!

Credits

React Router v6 Documentation

Creating Protected Routes

Redirect After Login with React Router v6 (video)

Using Ruby on Rails and ActiveModel::Serializer (AMS) to Control Your Data (Review)

ericksong91 — Thu, 25 May 2023 23:33:46 +0000

Introduction

Hi y'all,

This is a quick review on how to utilize the Serializer gem for Ruby on Rails. ActiveModel::Serializer or AMS, is a great way to control how much information an API sends as well as a way to include nested data from associations.

There are many instances where your backend will store extraneous data that isn't needed for the frontend or data that should not be shown. For example, for a table of User data, you would not want to display password hashes. Or if you have a relational database about Books with many Reviews, you would not want to include all the Reviews with every Books fetch request until you explicitly needed it.

This tutorial will assume you already know the basics of using Rails models and migrations along with making routes and using controllers.

Setting Up Our Relational Database

Before we begin, lets come up with a simple relational table with a many-to-many relationship:

Museums have many Users (Artists) through Paintings
Users (Artists) have many Museums through Paintings

The table shows a many-to-many relationship between Museums and Users (Artists), joined by Paintings. The arrows in the table indicate the foreign keys associated with each table in Paintings.

Now lets make our models and migrations:



# models/museums.rb
class Museum < ApplicationRecord
    has_many :paintings
    has_many :users, -> { distinct }, through: :paintings
end

# models/paintings.rb
class Painting < ApplicationRecord
    belongs_to :user
    belongs_to :museum
end

# models/users.rb
class User < ApplicationRecord
    has_many :paintings, dependent: :destroy
    has_many :museums, -> { distinct }, through: :paintings
end

*Note: -> { distinct } will make sure there are no duplicate data when the User or Museum data is retrieved.

The schema after migration should look something like this:



# db/schema.rb
  create_table "museums", force: :cascade do |t|
    t.string "name"
    t.string "location"
    t.string "bio"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "paintings", force: :cascade do |t|
    t.string "name"
    t.string "bio"
    t.string "img_url"
    t.integer "year"
    t.integer "user_id"
    t.integer "museum_id"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "users", force: :cascade do |t|
    t.string "username"
    t.string "password_digest"
    t.string "bio"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

In your seeds.rb file, make some generic seed data.



# db/seeds.rb
# Example Seed Data:

user = User.create!(username: "John", password:"asdf", 
       password_confirmation: "asdf", bio: "Test")

musuem = Museum.create!(name: "Museum of Cool Things", location: 
         "Boston", bio: "Cool Test Museum")

painting = Painting.create!(name: "Mona Lisa", bio: "very famous", 
           img_url: "url of image", year: 1999,
           user_id: 1, museum_id: 1

Now in our Config folder, lets make a simple Index route just for Users in routes.rb.



# config/routes.rb
Rails.application.routes.draw do
  resources :users, only: [:index]
end

Then in our users_controller.rb, lets make a simple function that shows all Users.



# controllers/users_controller.rb
class UsersController < ApplicationController
    def index
        user = User.all
        render json: users
    end
end

Now boot up your server and go to /users to see what kind of data you're getting back:



[{
"id":1,
"username":"John",
"password_digest":"$2a$12$GXCFijd75p4VXj3OazNpFu52.nKbd0ETBbZUutVZAQqlyGCVphPGW",
"bio":"Test.",
"created_at":"2023-05-14T01:47:42.292Z",
"updated_at":"2023-05-14T01:47:42.292Z"
},

Yikes! You definitely don't want to have all this information, especially not the password hash. Lets get into our serializers and fix that.

Setting Up and Installing AMS

First, we want to install the gem:



gem "active_model_serializers"

Once the gem has been installed, you can start to generate your serializer files using rails g serializer name_of_serializer in your console.

Lets add one for each of our models:



rails g serializer museum
rails g serializer user
rails g serializer painting

This should make a Serializer folder in your project directory with the files museum_serializer.rb, user_serializer.rb and painting_serializer.rb. Once we have these files, we can now control what kind of information we're getting.

It is important to note that as long as you're following naming conventions, Rails will implicitly look for the serializer that matches the model class name.

For example, for Users:



# models/user.rb
class User < ApplicationRecord
# code
end

# serializers/user_serializer.rb
class UserSerializer < ActiveModel::Serializer
end

Rails will look for the serializer that has the class name of User then the word 'Serializer' (UserSerializer). It will look for this naming convention for the default serializer.

Now lets try modifying some of the information we get back.

Managing Data from Fetch Requests

Excluding Information

Lets reload our /users GET request and see what happens now.



[{}]

Looks like we're getting no information now but don't fear; we just need to tell the serializer what data we want. Lets start with just grabbing :id, :username and their :bio by adding some attributes.



# serializers/user_serializer.rb
class UserSerializer < ActiveModel::Serializer
  attributes :id, :username, :bio
end

Reloading our GET request, we now have:



[{
"id":1,
"username":"John",
"bio":"Test"
}

Perfect! Now we can control what information we want to get from our GET request.

Adding Nested Data

Now lets say we want to include the paintings that belong to a user. We already have our relationships mapped out in our model files but we also need to add these macros to our serializers.



# serializers/painting_serializer.rb
class PaintingSerializer < ActiveModel::Serializer
    attributes :id, :name, :bio, :img_url, :user_id, :museum_id, 
    :year

    belongs_to :user
    belongs_to :museum
end

# serializers/user_serializer.rb
class UserSerializer < ActiveModel::Serializer
  attributes :id, :username

  has_many :paintings
end

Refreshing /users again will display:



[{
"id":2,
"username":"John",
"bio":"Test",
"paintings":[
        {
          "id":1,
          "name":"Mona Lisa",
          "bio":"very famous",
          "img_url":"url of image",
          "user_id":1,
          "museum_id":1,
          "year":1999
}]}

Throwing this relationship into the UserSerializer and PaintingSerializer will allow you receive nested data of Paintings belonging to a User. The information nested in the User data will reflect what is in the PaintingSerializer!

Adding a Different Serializer for the Same Model

You can also add a new serializer that includes different information from the default serializer. Lets say for a single User, we want them to have a list of Museums and Paintings on their profile page.

Make a new serializer called user_profile_serializer.rb. We'll use this serializer to also include the museum data for a user.



# serializers/museum_serializer.rb
class MuseumSerializer < ActiveModel::Serializer
    attributes :id, :name, :bio, :location
end

# serializers/painting_serializer.rb
class PaintingSerializer < ActiveModel::Serializer
    attributes :id, :name, :bio, :img_url, :user_id, :museum_id, 
    :year

    belongs_to :user
    belongs_to :museum
end

# serializers/user_profile_serializer.rb
class UserProfileSerializer < ActiveModel::Serializer
  attributes :id, :username, :bio

  has_many :paintings
  has_many :museums, through: :paintings
end

Rails will not use this serializer file by default but you can call for it when rendering your JSON. In your users_controller.rb file, you can change what serializer you use for a specific request. Make the appropriate changes in routes.rb by including :show and adding it to the controller.



# config/routes.rb
Rails.application.routes.draw do
  resources :users, only: [:index, :show]
end

# controllers/users_controller.rb
# For this example, we'll just assume we're looking for the User of ID 1

class UsersController < ApplicationController
    def index
        users = User.all
        render json: users
    end

    def show
        user = User.find_by(id: 1)
        render json: user, status: :created, 
                     serializer: UserProfileSerializer
    end
end

Loading up /users/1 gives us:



[{
"id":2,
"username":"John",
"bio":"Test",
"paintings":[
        {
          "id":1,
          "name":"Mona Lisa",
          "bio":"very famous",
          "img_url":"url of image",
          "user_id":1,
          "museum_id":1,
          "year":1999
}],
"museums": [
        {
          "id": 1,
          "name": "Museum of Cool Things",
          "bio": "Cool Test Museum",
          "location": "Boston",
}]}

We look for the specific User, and if that User is found, we render their information and include the museums nested data as well.

Conclusion

Serializers are very powerful as they let you control the data your API is sending.

Notes

Please let me know in the comments if I've made any errors or if you have any questions. Still new to Ruby on Rails and AMS but would like to know your thoughts :)

Extra Reading, Credits and Resources

ActiveModel::Serializer Repo

A Quick Intro to Rails Serializers

Quickstart Guide to Using Serializer

DB Diagram

Object Inheritance Basics Review (Ruby)

ericksong91 — Mon, 06 Feb 2023 21:11:27 +0000

Introduction

Object inheritance means that a child (or sub) class will inherit all the methods and attributes of a parent (or super) class. This allows the user to have some reusability of code and reduces redundancy.

For example, if we have a Car, Airplane and Boat class, they would share a lot of common attributes such as name, manufacturer, fuel type etc. If we suddenly had to change one of these attributes, we would have to change it for all three classes!

We can circumvent this problem by make a fourth class, Vehicle, that could encompass a lot of the common attributes and methods for each vehicle type. This would reduce the amount of code and changes would be a lot less time consuming.

Coding Example: `Book` and `Textbook` Class

Lets say we have a Book class:

class Book

 attr_accessor :title, :author, :pages

 def initialize(title, author, pages)
  @title = title
  @author = author
  @pages = pages
 end

 def flip
  "Flipping through the pages!"
 end

 def cost
   "I got this cool book for free!"
 end
end

Now lets also include a Textbook class:

class Textbook
 attr_accessor :title, :author, :pages

 def initialize(title, author, pages)
  @title = title
  @author = author
  @pages = pages
 end

 def subject
   "Subject: Math"
 end
end

You can already see that Book and Textbook share the title, author and pages attribute. You also want to be able to flip through both books. The only difference is that the Textbook class teaches a subject, Math.

If we instead change the Textbook class into a subclass or child class of Book, we can save ourselves some code. We use the < symbol to inherit the class:

class Textbook < Book
 def subject
   "Subject: Math"
 end
end

Now lets initialize a new instance with both classes:

new_book = Book.new("Hello!", "John Smith", 60)
new_textbook = Textbook.new("Calculus", "Mister Math", 450)

puts new_book.title
 => Hello!

puts new_book.author
 => John Smith

puts new_book.pages
 => 60

puts new_book.flip
 => Flipping through the pages!

puts new_book.cost
 => I got this cool book for free!

puts new_textbook.title
 => Calculus

puts new_textbook.author
 => Mister Math

puts new_textbook.pages
 => 450

puts new_textbook.flip
 => Flipping through the pages!

puts new_textbook.subject
 => I got this cool book for free!

Now the issue we're running into is that textbooks usually don't cost nothing! Fortunately, we can supersede the method cost from Book with our own cost in Textbook:

class Textbook < Book
 def subject
   "Subject: Math"
 end

 def cost
   "I got this used for $300!"
 end
end

Now calling the method cost on Textbook will result in:

puts new_textbook.cost
 => I got this used for $300!

When Ruby executes the code, it first looks at the class of the instance and looks for the method. If it cannot find the method, it will go up to the parent class and look for that method there.

Conclusion

Object inheritance is a useful and key component to how classes work in Ruby. It helps improve reusability of code and allows for modular design which improves flexibility and saves time.

Notes

Please let me know in the comments if I've made any errors. Still new to Ruby but would like to know your thoughts :)

Credits and Additional Resources

Ruby Class
How Does Inheritance work in Ruby? - Tutorials Point
Object Inheritance - Geeks for Geeks

Using Controlled and Uncontrolled Components in React, Quick Review

ericksong91 — Mon, 21 Nov 2022 01:34:15 +0000

Introduction

Today I will be talking about uncontrolled vs controlled components in React from the perspective of a student.

React is a Javascript library that allows web developers to modularize their web applications into separate and reusable components. This also comes with very convenient features that allow you to control how data is handled in forms.

One of these features is Controlled Components.

Controlled Components

Controlled components are forms that are handled entirely by a React component and a hook called useState. useState is a hook that automatically refreshes the application whenever a change is made to its state variable (prop). Form elements become controlled elements once the value is set to a prop.

In the case of controlled forms, it will track every change done to the form (every input down to the letter).

This is useful because the application can keep track of what the user is inputting before they hit submit.

A simple way to set this up would be to have a basic form like so:

import React, { useState } from "react";

function Form() {
    const [name, setName] = useState("");

    console.log(name);

    return (
        <form>
            <input type="text" value={name} onChange=
                {(e) => setName(e.target.value)} />
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

When typing into the field, you'll see that the state variable name is updating in real time with its current value. The onChange event uses the setName function to change the value of name to the current target value using e.target.value.

This is useful in cases where you need features such as:

Immediate feedback to input validation
Disabling a submission before the field has valid input
Forcing specific characters (numbers only, no special characters, etc)

Uncontrolled Components

Uncontrolled components are more traditional forms that are controlled by the DOM instead of an individual component. Uncontrolled components use the useRef attribute. You can use useRef as a way to access values from the DOM.

import React, { useRef } from "react";

function Form() {

    const ref = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(ref.current.value)
    };

    return (
        <form>
            <input type="text" ref={ref} />
            <button type="submit" onClick= 
               {handleSubmit}>Submit</button>
        </form>
    );
}

export default Form;

We first bring in the useRef hook then we use a ref attribute in our JSX to give the current value to our ref variable. This gives us access to the submitted form information.

Although useRef is used here as a way to get information directly from the DOM, it has more uses such as holding data that will persist through application re-renders. You can check out React JS useRef Hook to see more details about the useRef hook.

You won't use uncontrollable forms very often but here are a few examples of when you may want to use it:

Media playback
Maintaining focus
Selecting text
Integrating 3rd party DOM libraries
Imperative animations
etc

Conclusion

Both types of forms have their merit but for most intents and purposes, controlled components are preferred.

Notes

Please let me know in the comments if I've made any errors. Still new to JS and React but would like to know your thoughts :)

Credits and Additional Resources

React JS Forms
React JS State
React JS Refs and the DOM
React JS useRef Hook
Controlled vs Uncontrolled Forms in React
Rethinking UI (video)

Logical Operators Review

ericksong91 — Tue, 20 Sep 2022 19:16:14 +0000

Logical Operators Review

Introduction

Hello! Today I'd like to review some logical operators to prepare for my exams tomorrow. This post will just be class notes for me and anyone else to use as a quick review on Logical Operators.

Overview: NOT(!), AND(&&), OR(||)

NOT(!):

Operates on an expression, returns the opposite of its truthiness.

AND(&&):

Takes two expressions, returns the first expression that returns false.

OR(||):

Takes two expressions, returns the first expression that returns true.

NOTE: Anything with a value in it is inherently true. Anything without a value is false. Quick examples below.

"string"
1
3.14
-123123
"false"

Are all considered true, because they have a value.

0
""
undefined
null

Are all considered false, because they contain no values.

1. The Bang Operator, NOT (!)

NOT(!):

Operates on an expression, returns the opposite of its truthiness.

As stated above, when adding the Bang operator to an expression, you will output the opposite of its current Boolean state. Truthy values become false and falsey values become true.

NOTE: There is no limit to the amount of ! you can add to an expression. It will just keep flipping between the two Boolean states with every !.

Lets look at an example:

const truthy = true
const falsey = false

!truthy
=> Expected output: false

!falsey
=> Expected output: true

!!truthy
=> Expected output: true

!!falsey
=> Expected output: false

!!!!!!!!!!!!!!truthy
=> Expected output: true

You can add as many Bang operators as you want and it will just keep switching Boolean states as there are operators.

Now lets look at some additional examples where the values aren't just true or false.

const truthy = "String"
const falsey = 0

Boolean(truthy)
=> Expected output: true

Boolean(falsey)
=> Expected output: false

!truthy
=> Expected output: false

!falsey
=> Expected output: true

The truthiness of a value isn't limited to just true or false. As noted earlier, expressions with a value are considered true while expressions without any value are considered false.

NOTE: You can use the built in JS object wrapper, Boolean(), to determine if a value is true or false AND to also convert the value into a boolean. You can also use the Bang operator to convert the value into a boolean as well (simply by using !!).

2. The AND Operator (&&)

AND(&&):

Takes two expressions, returns the first expression that returns false.

Lets look at a simple example:

const expression1 = 'truthy'
const expression2 = 0

expression1 && expression2
=> Expected output: 0

The returned expression is the value of expression2. Since expression 2 is the first false statement being compared, it will return that value.

Lets look at another example, this time using mathematical expressions:

4 * 3 && 11 * 0
=> Expected output: 0

Notice that it will give us the resultant value of the right hand expression since that is the expression with the false value.

Now what happens when both sides are true?

4 * 3 && 11 + 12
=> Expected output: 23

It returns the 2nd expression's value, despite it being true. This is because && is required to return a value and if both sides are true, it will return the last expression it evaluated (which in this case is the right hand expression).

3. The OR Operator (||)

OR(||):

Takes two expressions, returns the first expression that returns true.

Works much like the AND (&&) operator except it returns the first expression it finds that is true.

Lets look at some examples:

const truthy = "I am Truth"
const falsey = null

falsey || truthy
=> Expected output: "I am Truth"

1 * 33 || 42 * 10
=> Expected output: 33

42 * 10 || 1 * 33
=> Expected output: 420

const zero = 0 || "0"

console.log(zero)
=> Expected output: "0"

console.log(typeof(zero))
=> Expected output: String

Notice how in the last example, the value of a string that contains "0" is considered a value and therefore true.

Wrap Up

Hope this wasn't too confusing and gave a quick review of logical operators.

Credits

W3 School Boolean
MDN Boolean

Quick Review (of some) JS Iterator Methods

ericksong91 — Thu, 15 Sep 2022 19:45:18 +0000

Reviewing .map(), .find(), .filter(), .reduce() and .forEach()

Introduction

Today I'll be reviewing some JS iterator methods in an attempt to have a better grasp on the concepts. I'll be going over .map(), .filter(), .find(), .reduce() and forEach().

Below is a quick summary table:

Syntax	Description
array.map(callbackFunction)	Creates a new array made with elements that have been mutated by a function
array.find(callbackFunction)	Returns the *first* element in the array that satisfies the provided test function
array.filter(callbackFunction)	Returns *all* of the elements in an array that satisfies the provided test function
array.reduce(callbackFunction, initialValue)	Walks through every element in an array, passing it to a function, then adds that result to the previous result. Initial value optional.
array.forEach(callbackFunction)	Changes original array made with elements that have been mutated by a function

.map() Method

.map() executes a function over each element in an array, then returns us a new array.

For example:

Lets say we have an array with a set of 4 numbers.

const array1 = [1, 3, 5, 7]

And a function that takes a number and multiplies it by 2.

function multiplier(e){
   return e * 2
}

If we invoke the .map() method on the array using the multiplier function, then each element in the array will be passed into that function. Essentially, every element will be multiplied by 2.

const array1 = [1, 3, 5, 7]

function multiplier(e){
   return e * 2
}

const newArray = array1.map(multiplier)

console.log(array1)
console.log(newArray)
==> Expected output: [1, 3, 5, 7]
==> Expected output: [2, 6, 10, 14]

Take note that the original array was not changed.

.find() Method

.find() returns the first element in an array that satisfies the test function's conditions, read from left to right.

For example:

Lets say we have an array of words, with varying word lengths.

const array1 = ["blast", "past", "ghast", "last", "mast", "make"]

Then lets have a test callback function that returns a word that is greater than 4 letters long.

function findArr(e){
  return 4 < e.length ;
}

Using the .find() method, we can find all words in the array that have a word length greater than 4. In this case, it should be either blast or ghast. However, since .find() only looks for the very first element that satisfies the condition, it should only return blast.

const array1 = ["blast", "past", "ghast", "last", "mast", "make"]

function findArr(e){
  return 4 < e.length ;
}

const find = array1.find(findArr)

console.log(find)
==> Expected output: "blast"

As expected, since only blast and ghast have greater than 4 letter lengths and blast is the very first word in the array that satisfies this condition, it returns blast only.

.filter() Method

.filter() returns all the elements in an array that satisfies the test function. Unlike .find(), it finds all elements in the array that satisfy this condition and returns a new array.

Lets take our last example from .find() and use .filter() instead.

Using the .filter() method, we can find all words in the array that have a word length greater than 4. In this case, it should be blast and ghast.

const array1 = ["blast", "past", "ghast", "last", "mast", "make"]

function filterArr(e){
  return 4 < e.length ;
}

const filter = array1.filter(filterArr)

console.log(filter)
==> Expected output: ["blast", "ghast"]

Since only blast and ghast have greater than 4 letter lengths, they were both returned in a new array with just those two words.

.reduce() Method

.reduce() is a iterator method used to summarize an array into a single value. You pass a callback function into .reduce() and you have the additional option of passing in an initial value.

The callback function is passed two arguments: the previous value returned from the loop and the next value in the array. If there was an initial value given, it will use that as its first "previous value" in the calculation.

If there is no initial value, it takes index #0 of the array as the initial value instead. See below for clarification.

For example:

Lets take our array from our .map() example as well as an initial value of 2.

const array1 = [1, 3, 5, 7]

const initialValue = 2

And now lets make our reducer function multiply the previous value, with the current element in the array.

function reducer(previousValue, currentElement){
   return previousValue * currentElement
}

Using the .reduce() method, we're going to see it calculate:

Previous Value * Current Element

Through every element in the array, starting with the initial value.

const array1 = [1, 3, 5, 7];

const initialValue = 2;

const finalValue = array1.reduce(reducer, initialValue);

function reducer(previousValue, currentElement){
  return previousValue * currentElement
}

console.log(finalValue)
=> Expected output: 210

The calculation written out:

2 (initial value) * 1 (array1[0]) = 2

2 (previous value) * 3 (array1[1]) = 6

6 (previous value) * 5 (array1[2]) = 30

30 (previous value) * 7 (array1[3]) = 210

Now lets take the same example but forego passing in an initial value. This time it takes the value at array1's index #0 and uses that as its initial value.

const array1 = [1, 3, 5, 7];

const finalValue = array1.reduce(reducer);

function reducer(previousValue, currentElement){
  return previousValue * currentElement
}

console.log(finalValue)
=> Expected output: 105

The calculation written out:

1 (array1[0]) * 3 (array1[1]) = 3

3 (previous value) * 5 (array1[2]) = 15

15 (previous value) * 7 (array1[3]) = 105

.reduce() is a great iterator for distilling arrays down into a single value by applying a function.

.forEach() Method

.forEach() works very similarly to .map() in that it takes a function then applies to to every element in the array. However! An important distinction is that it does not return a new array. In fact, it does not return anything.

Lets take the first example and try doing .forEach() instead of .map():

const array1 = [1, 3, 5, 7]

function multiplier(e){
   return e * 2
}

const newArray = array1.forEach(multiplier)

console.log(array1)
console.log(newArray)
==> Expected output: [1, 3, 5, 7]
==> Expected output: undefined

You'll notice now that the code returns undefined for newArray instead of an array. That is because the .forEach() method does not return data.

If you add a console.log() in the function itself, you'll notice that the individual elements in the array are still being operated on.

const array1 = [1, 3, 5, 7]

function multiplier(e){
   return console.log(e * 2)
}

array1.forEach(multiplier)

console.log(array1)
==> Expected output: 2
==> Expected output: 6
==> Expected output: 10
==> Expected output: 14
==> Expected output: [1, 3, 5, 7]

.forEach() is typically used in cases where you cannot use any other iterator methods for your specific purposes. It is very similar to other JS for/while loops.

Notes

Please let me know in the comments if I've made any errors; I am still very new to coding in JS and these are notes to try to help me understand the concepts better.

Credits

MDN .map()
MDN .find()
MDN .filter()
MDN .reduce()
MDN .forEach()

Reviewing Javascript Comparisons

ericksong91 — Tue, 19 Jul 2022 19:30:56 +0000

Hi y'all,

This is where I'm going to be taking some notes on specific Comparison operators in Javascript. Typing this out will help me remember the specifics and may also be useful to you as a reference sheet! I will also be attempting to transliterate what the code is saying to make it easier to read.

Equality and Inequality Operators

The Strict Equality Operator (===)
Equal without any type conversions

60 === 60;
// 60 (number) is strictly equal to 60 (number)
> true


60 === "60";
// 60 (number) is strictly equal to 60 (string)
> false

The Strict Inequality Operator (!==)
Unequal without any type conversions

60 !== 60;
// 60 (number) is strictly not equal to 60 (number) 
> false


60 !== "60";
// 60 (number) is strictly not equal to 60 (string) 
> true

The Loose Equality Operator (==)
Equal with any type conversions (with extra examples)

*Extra examples aren't necessarily accurate but they're true in the confines of the coding language

60 == "60";
// 60 (number) is loosely equal to 60 (string) 
> true

true == 1;
// true is loosely equal to 1 (number)
> true

"0" == false;
// 0 (string) is loosely equal to false
> true

null == undefined;
// null is loosely equal to undefined
> true

" " == 0;
// Empty Quotations is loosely equal to 0 (number)
> true

The Loose Inequality Operator (!=)
Inequal with any type conversions

60 != "60";
// 60 (number) is not equal to 60 (string)
> false

61 != 60;
// 61 (number) is not equal to 60 (number)
> true

Relational Operators

greater than (>)
greater than or equals (>=)
less than (<)
less than or equals (<=)

*Important to note that Javascript will attempt to convert strings into numbers here

*For the last example, note that if both sides of the inequality are strings, it will only compare them lexicographically (left to right, by each character). It will NOT convert the whole string into a number.

70 > "60";
// 70 (number) is greater than 60 (string)
> true

70 >= 70;
// 70 (number) is greater than or equal to 70 (number)
> true

70 < "80";
// 70 (number) is less than 80 (string)
> true

70 <= "71";
// 70 (number) is less than or equal to 71 (string)
> true

"70" > "8";
// 70 (string) is greater than 8 (string)
> false (see note above)

Sources

MDN:

DEV Community: ericksong91

Basic Auth Routing and Redirecting using React Router v6

Introduction

Setting Up Our Project

Components and Routing

Redirecting the User After Logging In

Conclusion

Notes

Credits

Using Ruby on Rails and ActiveModel::Serializer (AMS) to Control Your Data (Review)

Introduction

Setting Up Our Relational Database

Setting Up and Installing AMS

Managing Data from Fetch Requests

Excluding Information

Adding Nested Data

Adding a Different Serializer for the Same Model

Conclusion

Notes

Extra Reading, Credits and Resources

Object Inheritance Basics Review (Ruby)

Introduction

Coding Example: Book and Textbook Class

Conclusion

Notes

Credits and Additional Resources

Using Controlled and Uncontrolled Components in React, Quick Review

Introduction

Controlled Components

Uncontrolled Components

Conclusion

Notes

Credits and Additional Resources

Logical Operators Review

Logical Operators Review

Introduction

Overview: NOT(!), AND(&&), OR(||)

1. The Bang Operator, NOT (!)

2. The AND Operator (&&)

3. The OR Operator (||)

Wrap Up

Credits

Quick Review (of some) JS Iterator Methods

Reviewing .map(), .find(), .filter(), .reduce() and .forEach()

Introduction

.map() Method

.find() Method

.filter() Method

.reduce() Method

.forEach() Method

Notes

Credits

Reviewing Javascript Comparisons

Equality and Inequality Operators

Relational Operators

Sources

Coding Example: `Book` and `Textbook` Class