Forem: Joseph Chow

Value Types vs Reference types in JavaScript Explained

Joseph Chow — Mon, 18 Jan 2021 00:53:08 +0000

When storing a variable in JavaScript, the JavaScript engine may store it as one of two types of values: a primitive or reference value. Understanding the difference in how they behave will help to avoid mistakes while manipulating them.

An Example

Instead of jumping straight into a boring explaination, consider this script:

const firstList = ['A', 'B', 'C'];
const secondList = firstList;
secondList.push('D');
console.log('firstList:', firstList);
console.log('secondList:', secondList);

We may expect the output to be:

"firstList:" ['A', 'B', 'C'];
"secondList:" ['A', 'B', 'C', 'D'];

But instead, we get an output of:

"firstList:" ['A', 'B', 'C', 'D'];
"secondList:" ['A', 'B', 'C', 'D'];

What Happened

This is because of how JavaScript treats arrays in memory. Arrays are stored as a reference value, so JavaScript will only copy the reference to that point in memory. This means that to the original array and not the value of the array.

Diving deeper, when accessing the varible as a primitive value, you are manipulating the actual value stored of that variable. In other words, the variable that is assigned a primitive value is accessed by value.

Unlike storing a primitive value, when you create an object, you are accessing the reference of that object in memory, rather than the actual value of that object. In other words, it means a variable that is assigned an object is accessed by reference.

Fixing our Example

The spread operator will create a new reference value in memory.

const firstList = ['A', 'B', 'C'];
const secondList = [...firstList];
secondList.push('D');
console.log('firstList:', firstList); // "firstList:" ['A', 'B', 'C'];
console.log('secondList:', secondList); // "secondList:" ['A', 'B', 'C', 'D'];

In ES5, you could copy an array into a new reference value with the slice method.

const firstList = ['A', 'B', 'C'];
const secondList = firstList.slice();
secondList.push('D');
console.log('firstList:', firstList); // "firstList:" ['A', 'B', 'C'];
console.log('secondList:', secondList); // "secondList:" ['A', 'B', 'C', 'D'];

However, the slice method cannot be used to create sparse arrays or arrays with 'holes' in them.

let array = [];
array[2] = 2;
array[4] = 4;

console.log(array.slice()); // [empty × 2, 2, empty, 4]
console.log(...array); // undefined undefined 2 undefined 4

Diving Deeper

Javascript has six data types that values are assigned as primative type: Boolean, null, undefined, String, Number, and Symbol. Like mentioned above, the values in primative types are accessed only by value, so they can be copied by value. The values can be copied and changed with no relation to each other.

let a = true;
let b = 'hello';
let x = a;
let y = b;
console.log(x, y, a, b); // true, 'hello', true, 'hello'
x = null;
y = undefined;
console.log(x, y, a, b); // null, undefined, true, 'hello'

Arrays, Functions, and Objects are all derived from object contructors in JavaScript. An explaination for this can be found here. The important thing to understand is that objects are passed by reference value. Like mentioned above, a varible assigned an object only knows is the location of the object in memory, not the object itself. Here is an example of a common bug that occurs when working with objects:

let vehicleOne = {
  seats: 2,
  airConditioning: true
};
let vehicleTwo = vehicleOne;
vehicleOne.color = 'red';
console.log(vehicleOne.color); // 'red'
console.log(vehicleTwo.color); // 'red'

vehicleTwo = {...vehicleOne};
vehicleOne.color = 'white';
console.log(vehicleOne.color); // 'white'
console.log(vehicleTwo.color); // 'red'

By using the '=' operator, we only assigned vehicleTwo the reference to the object, so any changes made to the vehicleOne object will alter the same spot in memory that vehicleTwo is assigned. Once again, we used the spread operator to copy and create a new reference value for vehicleTwo to avoid this error. This is why objects are known to be mutable in JavaScript.

This is also why you need to treat state in React as immutable, because the reference value will not change if you try and manipulate the state directly. You can read more about treating state as being immutable in React here.

Deep Copying

Both times we used the spread operator, it managed to create us a reference value for a new object. However, there is a catch. Consider this script:

const bookOne = {
  title: 'Primative Types vs Reference Values in JavaScript',
  pages: 50,
  info: {
    name: 'Joseph',
    publication: 'dev.to'
  }
}

const bookTwo = { ...bookOne }


bookTwo.title = 'Immutability in JavaScript';
bookTwo.info.publication = 'medium.com';

console.log('Book One title:', bookOne.title); // 'Primative Types vs Reference Values in JavaScript'
console.log('Book One authors:', bookOne.info.publication); // 'dev.to'

console.log('Book Two:', bookTwo.title); // 'Immutability in JavaScript'
console.log('Book Two:', bookTwo.info.publication); // 'dev.to'

Only the title of bookTwo changed. If one of the elements is another reference value to another object, all it would do is make a copy of the reference value into memory and it will not change what it’s referenced to. Here is a great article for further reading into how to deep copy objects in JavaScript.

How to setup LESS with React without Ejecting

Joseph Chow — Sun, 10 Jan 2021 18:04:24 +0000

SASS has been natively supported since React 16.7 with a single additional package node-sass. It can be easily integrated simply by adding node-sass and importing your pre-processed stylesheet.

// package.json

"dependencies": {
   "node-sass": "^5.0.0"
 }
...

// App.js

@import 'stylesheet.scss'

However, there is not such an easy solution to handle compiling LESS stylesheets. This is problematic because to manually configure webpack to compile our LESS stylesheets requires us to eject from the default create-react-app configuration.

Ejecting is an irreversible process that can add frustrations in development down the line. You can alternatively use a package like react-app-rewired to slightly modify the webpack configs, but that requires rewiring all your run react scripts, and additionally, there may be unforeseen side effects down the line. That is a lot just to use LESS stylesheets in your app.

Stuff can break. - Dan Abramov

So, if we decide to use LESS stylesheets in our app, let us see how to set it up with your react app, without having to eject from create-react-app and modifying your webpack config manually.

You can take a look at the completed boilerplate setup here.

Installing Our Packages

Let us begin with creating a new create-react-app project.

npx create-react-app less-boilerplate-demo

We will be implementing our compiler to watch the LESS file in our directory to export to our desired output directory. So each time our LESS file changes, the updates will reflect in real time for ease of development. We will first start by installing our packages for less and our compiler as dev dependencies.

npm install less less-watch-compiler concurrently --save-dev

Setting up LESS Watcher Config

The less-watcher-compiler package takes a json file for configuration. Create a json file called less-watcher.config.json in our base directory. It can be setup to watch the relevant directories for edits and output directories to compile into.

In this demo, we are just working with the base create-react-app boilerplate directories. So we will be watching our src directory and outputting back into the src. However, you can modify your config json file to input and output to match your project file structure. For more information, check out the docs.

// less-watcher.config.json

{
  "watchFolder": "src/",
  "outputFolder": "src/",
  "sourceMap": true,
  "runOnce": false,
  "enableJs": true
}

For this demo, I will be adding an App.less directly into my src folder and changing two color variables to test the compiler.

// App.less

@app-primary: #0f3460;
@app-secondary: #e94560;

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
}

.App-header {
  background-color: @app-primary;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: @app-secondary;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Setting up Project Scripts

We want to run the compiler when we run our app start script in development. So let us install the concurrently package as a dev dependency so that we can run our compile script together with react-scripts.

npm install concurrently --save-dev

Next, let us modify our start script in our package.json to run run our less compiler based on our configuration file when starting our development server.

// package.json

...

  "scripts": {
    "start": "concurrently --kill-others \"less-watch-compiler --config less-watcher.config.json\" \"react-scripts start\"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

...

Congratulations!!

Now, when you run npm start you can make modifications to your less stylesheet file and see your edits in your app upon saving your file. If you want to take a look at the complete code, or create your own fork, check out my repo here.

Creating Resilient Components with useMemo

Joseph Chow — Mon, 04 Jan 2021 23:54:50 +0000

Today we will looking at a principle of creating resilient components in React and creating a useful custom hook with the useMemo hook. Sometimes when creating a component, we can assume that it will only be used once.

However, that assumption may lead into problems sharing props when reusing a simple component. In our example here today, we will look at creating a resilient form component.

Sometimes we assume a certain component is only ever displayed once. Such as a navigation bar. This might be true for some time. However, this assumption often causes design problems that only surface much later. - Dan Abramov

You can check out the completed code to follow along here and the demo in action here.

The Setup

We will start by bootstrapping a project with create-react-app and installing the react-bootstrap and shortid packages. I will be using the shortid package in this demo to create our randomly generated unique IDs, but you can use any method you like to create a random ID string.

npx create-react-app usememo-resilient-components;
cd usememo-resilient-components;
npm i react-boostrap shortid;
npm start;

Don't forget to add the CDN link for the bootstrap css files as react-bootstrap does not include them. You can follow the react-bootstrap docs here.

// index.html

...
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>
...

Creating the form handler

Let's start by going into our App.js, clearing out the boilerplate, and creating our form handler. We will set an empty object using the useState hook to store our parameters. To maximize modularity, in our form handler function we will pass a callback to setParams that target the name and value attributes of as many form elements as necessary.

Also, let's import some bootstrap elements from our react-bootstrap package and set the container and column to display for now. Your App.js should look like this:

// App.js

import { useState } from "react";
import { Container, Col } from "react-bootstrap";

function App() {
  const [params, setParams] = useState({});
  const handleChange = (e) => {
    const param = e.target.name;
    const value = e.target.value;
    setParams((prevParams) => {
      return { ...prevParams, [param]: value };
    });
  };

  return (
    <Container>
      <Col lg="5">
        <h1>Generate Unique IDs Demo</h1>
      </Col>
    </Container>
  );
}

export default App;

Creating our form and displaying the input

Next, create we will create our form component. For this demo, I have imported a basic two element form from react-bootstrap, but feel free to add as many form elements as you want. Our component will be passed our handler function as a prop from App.js to handle our form onChange attribute.

// InputForm.js

import { Form } from "react-bootstrap";

export default function InputForm({ handleChange }) {
  return (
    <Form className="mb-2">
      <Form.Group>
        <Form.Label>Email</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          name="email"
          onChange={handleChange}
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter Name"
          name="name
          onChange={handleChange}
        />
      </Form.Group>
    </Form>
  );
}

To see what our returned parameters are in state, we could simply log them to our console, but I have created a component to display our parameters on our page for this demo. My component will map through all of the parameters passed from our form handler in App.js and display them in a Jumbotron element.

// DisplayInput.js

...

import React from "react";
import { Jumbotron } from "react-bootstrap";

export default function DisplayInput({ params }) {
  const paramKeys = Object.keys(params);
  return (
    <Jumbotron>
      {paramKeys.map((key) => {
        return <p key={key}>{key + ": " + params[key]}</p>;
      })}
    </Jumbotron>
  );
}

...

Now we can import both elements into our App.js and pass the handler to our form component and pass our parameters in state to our display component.

// App.js
...

import DisplayInput from "./Components/DisplayInput";
import InputForm from "./Components/InputForm";

...

return (
  <Container>
    <Col lg="5">
      <h1>Generate Unique IDs Demo</h1>
      <InputForm handleChange={handleChange} />
      <DisplayInput params={params} />
    </Col>
  </Container>
);

...

When you run npm start, you should be able to see our the name and value of our inputs displayed in our Jumbotron.

The Problem

This becomes problematic when you want to reuse the same form component again with the same handler. In our App.js, let's render our form component again.

// App.js

...

return (
  <Container>
    <Col lg="5">
      <h1>Generate Unique IDs Demo</h1>
      <InputForm handleChange={handleChange} />
      <InputForm handleChange={handleChange} />
      <DisplayInput params={params} />
    </Col>
  </Container>
);
...

You can see in the figure below that our parameters prop will not distinguish between our inputs from both form components:

We could solve this issue with writing a separate form handler function. But let's say that you want to use the form component multiple more times. You would have to create a separate function to pass to each form.

Creating a custom useMemo hook

useMemo is a hook included in react that returns a memoized value. This means that it will only fire if one of its dependencies changes. This means that it will not recalculate methods that are computationally expensive upon each re-render, if its passed values do not change. You can read more about it in the react hooks docs here.

Under a new directory, we will create our custom useUniqueId.js hook file. We will create a variable and pass useMemo our id generator function and an empty array. Like with the useEffect hook, the empty array will tell useMemo to only fire once per component render. Lastly, our hook will return generated unique id with our element name suffix.

// useUniqueId.js

...

import { useMemo } from "react";
const shortid = require("shortid");

const useUniqueId = () => {
  const uniqueId = useMemo(() => shortid.generate(), []);
  return (elementNameSuffix) => `${uniqueId}_${elementNameSuffix}`;
};

export default useUniqueId;

...

Now we can import our custom useUniqueId hook into our form component and pass it to our name attributes in the form elements.

// useUniqueId.js

...

import { Form } from "react-bootstrap";
import useUniqueId from "../helpers/useUniqueId";

export default function InputForm({ handleChange }) {
  const generateId = useUniqueId();
  return (
    <Form className="mb-2">
      <Form.Group>
        <Form.Label>Email</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          name={generateId("email")}
          onChange={handleChange}
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter Name"
          name={generateId("name")}
          onChange={handleChange}
        />
      </Form.Group>
    </Form>
  );
}

...

Finally, let's run our app again and see the result.

As you can see, now our parameters can be distinguished uniquely from each other, no matter how many times we render our form component!

Congratulations!!

We now our form components can be rendered multiple times without having to worry about our parameters being lost and overwritten. Our custom hook can also be used on any attribute in any component that you want to re-use.

You can check out the completed code here and the demo in action here.

Handling multi-page API calls with React Hooks

Joseph Chow — Wed, 30 Dec 2020 19:09:25 +0000

Today we will be walking through an example of how to make continuous API calls to fetch multiple pages of data. Our goal is to build a small web app using React and the HooksAPI that will load dynamically based on user parameters.

We will be fetching data from the free API CheapShark API, which provides data for sales across multiple game vendors. CheapShark returns data on a page by page basis, so multiple API calls will have to be made to fetch results when there is more than one page of results returned.

You can check out the completed demo project here and the completed code here.

App Overview

Our demo app will allow users to take in three parameters for searching through game deals. You can see in the CheapShark API docs which parameters can be taken in. We will be using Axios to fetch the data and the Reach Hooks API to handle user actions.

You can try an example of what the CheapShark API returns in an example call here: https://www.cheapshark.com/api/1.0/deals?storeID=1&upperPrice=15&pageSize=5.

The API returns all the deals it can find with a price under 15 dollars, but without a page number parameter and a maximum page size of 5, it only returns one page of results. We will see how to handle getting all the results through pagination below.

Initial Project Setup

So let's begin with the basic create-react-app boilerplate and install the axios package. For more information, check out the create-react-app docs.

npx create-react-app steam-sales-pagination;
cd steam-sales-pagination;
npm i axios;
npm start;

First lets create a custom hooks file called useFetchGames.js in a helpers directory to handle fetching our data from CheapShark. This custom hook will need to take in to take in user entered search parameters and the page number of results, so we need to declare them as props.

Let's also declare our base URL we will be working with to call the API as a constant variable. We will be using axios to make our API calls and the useEffect and useReducer hooks to handle user actions and fetching data, so let go ahead and import those as well.

// useFetchGames.js

...

import { useReducer, useEffect } from "react";
import axios from "axios";

const BASE_URL =
  "https://cors-anywhere.herokuapp.com/https://www.cheapshark.com/api/1.0/deals?storeID=1&pageSize=5";

export default function useFetchGames(params, page) {
  return <div></div>;
}

...

Creating our Reducer

Back in our useFetchGames hook, lets create our reducer. First we will need to define our actions. Create an action for making the request, getting our data, error messages, and a next page.

// useFetchHooks.js

...

const ACTIONS = {
  MAKE_REQUEST: "make-request",
  GET_DATA: "get-data",
  ERROR: "error",
  NEXT_PAGE: "next-page",
};

...

In our reducer, we will create a switch statement to handle our actions. In our MAKE_REQUEST action we will set loading our loading variable to be true and our games array to be empty whenever a new request with new parameters is made. In our GET_DATA action we will return the state, set the loading state back to false, and populate our games array from our action payload. In the case of our ERROR action, we will do the same except the games array will be set to empty and our error variable will be set to our payload error.

Our final action to set is NEXT_PAGE. We will be dispatching this action after checking for another page of results with our second API call. We will define the payload below when we write our API calls.

// useFetchHooks.js

...

function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.MAKE_REQUEST:
      return { loading: true, games: [] };
    case ACTIONS.GET_DATA:
      return { ...state, loading: false, games: action.payload.games };
    case ACTIONS.ERROR:
      return {
        ...state,
        loading: false,
        error: action.payload.error,
        games: [],
      };
    case ACTIONS.NEXT_PAGE:
      return { ...state, hasNextPage: action.payload.hasNextPage };
    default:
      return state;
  }
}

...

Now that our actions are defined, let us finish writing our hook. First we need to pass the useReducer hook from react to our reducer and our initial state. useReducer will return us our state and dispatch function. We can set our hook to return our state now.

// useFetchHooks.js

...

export default function useFetchGames(params, page) {
  const [state, dispatch] = useReducer(reducer, { games: [], loading: true });
  return state;
}

...

We will be using the useEffect hook from react to dispatch our actions each time our parameters change. Since we will be calling useEffect each time our parameters change, we will need to cancel our request process if the user is entering more parameters as our requests are made. We will set up a cancel token from axios and set useEffect to return when that happens. You can read more about cancel tokens from axios here.

After getting our first batch of data, we will need to make another request with the same parameters with the page number incremented one higher. Whether if there is data returned on a next page, it is here we will dispatch our NEXT_PAGE action to be true or false. Here is how your hook should look:

// useFetchHooks.js

...

export default function useFetchGames(params, page) {
  const [state, dispatch] = useReducer(reducer, { games: [], loading: true });

  useEffect(() => {
    const cancelToken1 = axios.CancelToken.source();
    dispatch({ type: ACTIONS.MAKE_REQUEST });
    axios
      .get(BASE_URL, {
        cancelToken: cancelToken1.token,
        params: { pageNumber: page, ...params },
      })
      .then((res) => {
        dispatch({ type: ACTIONS.GET_DATA, payload: { games: res.data } });
      })
      .catch((e) => {
        if (axios.isCancel(e)) return;
        dispatch({ type: ACTIONS.ERROR, payload: { error: e } });
      });

    const cancelToken2 = axios.CancelToken.source();
    axios
      .get(BASE_URL, {
        cancelToken: cancelToken2.token,
        params: { pageNumber: page + 1, ...params },
      })
      .then((res) => {
        dispatch({
          type: ACTIONS.NEXT_PAGE,
          payload: { hasNextPage: res.data.length !== 0 },
        });
      })
      .catch((e) => {
        if (axios.isCancel(e)) return;
        dispatch({ type: ACTIONS.ERROR, payload: { error: e } });
      });

    return () => {
      cancelToken1.cancel();
      cancelToken2.cancel();
    };
  }, [params, page]);

  return state;
}

...

Testing our Fetch Hook

Let's head back to our main App.js import useFetchGames. We will need to import the useState hook. Set the initial state for our parameters to an empty object and our default page to be 0.

After that, we can pass our parameters and page number to our useFetchGames hook. useFetchGames will be returning our array of games, loading state, potential error messages, and whether another page of data can be fetched from the API. We can log our results as a test. If you run the app now, you can see the default results populated in our console.

// App.js

...

import { useState } from "react";
import useFetchGames from "./helpers/useFetchGames";

function App() {
  const [params, setParams] = useState({});
  const [page, setPage] = useState(0);
  const { games, loading, error, hasNextPage } = useFetchGames(params, page);

  console.log(games, loading, error, hasNextPage);

  return (
    <div>
      <h1>Seach Steam Sales</h1>
      <h5>
        Powered by <a href="https://apidocs.cheapshark.com/">CheapShark API</a>
      </h5>
    </div>
  );
}

export default App;

...

Setting Up Our Search Form

Right now, we nor the user cannot change the parameters to fetch more specific data, so let us build out our UI. First, install the react-bootstrap package so that we can easily template out some user components.


npm i react-bootstrap

Next, let us create a new functional component called SearchForm.js under a new Components directory in our project. Here is an example of some of the parameter searches formatted with react-boostrap elements.

Make sure you give the name element in each search component matching the parameter name found on CheapShark API. I have used title, upperPrice, and lowerPrice as an example.

// SearchForm.js

...

import React from "react";
import { Form, Col } from "react-bootstrap";

export default function SearchForm({ params, onParamChange }) {
  return (
    <Form className="mb-4">
      <Form.Row className="align-items-end">
        <Form.Group as={Col}>
          <Form.Label>Title</Form.Label>
          <Form.Control
            placeholder="eg. Bioshock"
            onChange={onParamChange}
            value={params.title}
            name="title"
            type="text"
          />
        </Form.Group>
        <Form.Group as={Col}>
          <Form.Label>Highest Price</Form.Label>
          <Form.Control
            placeholder="eg. 29.99"
            onChange={onParamChange}
            value={params.upperPrice}
            name="upperPrice"
            type="text"
          />
        </Form.Group>
        <Form.Group as={Col}>
          <Form.Label>Lowest Price</Form.Label>
          <Form.Control
            placeholder="eg. 5.99"
            onChange={onParamChange}
            value={params.lowerPrice}
            name="lowerPrice"
            type="text"
          />
        </Form.Group>
      </Form.Row>
    </Form>
  );
}


...

Let's head back to our App.js and create a handler function for our parameter changes. In SearchForm.js we set the names of our parameters to match the parameters found in our API, so now we can set our parameters in an array. The beauty of this is that we can expand the app and add more search parameters in a modular format easily. All you would need to do is add another element to SearchForm.js with a matching name parameter to our API.

Also, we will set the page result to send to the API back to 0 when the search parameters change. Next pass both the parameter and handler function to our search form component. Now we will be able to test adding parameters to our search and see them logged in the console.

// App.js

...

  const handleParamChange = (e) => {
    const param = e.target.name;
    const value = e.target.value;
    setPage(0);
    setParams((prevParams) => {
      return { ...prevParams, [param]: value };
    });
  };

...

<SearchForm params={params} onParamChange={handleParamChange} />

...

Displaying Our Results

Now that we can change our search parameters and effectively fetch data from our API, let us create some demo UI elements to display our findings. Create another functional component Game.js that takes in the game objects from the API as a prop. Check out the CheapShark API docs to see what game metadata you have to work with.

Here is an example displaying the game title, sale prices, release dates, and a link to the game on the Steam storefront:

// Game.js

...

import React, { useState } from "react";
import { Card, Button, Collapse } from "react-bootstrap";

export default function Game({ game }) {
  const [open, setOpen] = useState(false);

  return (
    <Card className="mb-3">
      <Card.Body>
        <div className="d-flex justify-content-between">
          <div>
            <Card.Title>
              {game.title} -{" "}
              <span
                className="text-muted font-weight-light"
                style={{ textDecoration: "line-through" }}
              >
                ${game.normalPrice}
              </span>
              <span>{" - "}</span>
              <span className="font-weight-light">${game.salePrice}</span>
            </Card.Title>
            <Card.Subtitle className="text-muted mb-2">
              Release Date:{" "}
              {new Date(game.releaseDate * 1000).toLocaleDateString()}
            </Card.Subtitle>
          </div>
          <img
            className="d-none d-md-block"
            height="50"
            alt={game.title}
            src={game.thumb}
          />
        </div>
        <Card.Text>
          <Button
            onClick={() => setOpen((prevOpen) => !prevOpen)}
            variant="primary"
          >
            {open ? "Hide Details" : "View Details"}
          </Button>
        </Card.Text>
        <Collapse in={open}>
          <div className="mt-4">
            <div>Metacritic Score: {game.metacriticScore}</div>
            <Button
              variant="success"
              href={`https://store.steampowered.com/app/${game.steamAppID}/`}
            >
              Check it out
            </Button>
          </div>
        </Collapse>
      </Card.Body>
    </Card>
  );
}

...

Now we can import our Game component into our App.js. We will import the Container and Spinner component from react-bootstrap so that we can contain our Game component and show a spinner while our app is fetching the data. We can also add in an if statement to display our errors from the API if they occur.

// App.js
...

import { Container, Spinner } from "react-bootstrap";
import Game from "./components/Game";

...

  {loading && <Spinner animation="border" variant="primary" />}
  {error && <h1>{error.message}</h1>}
  {games.map((game) => {
    return <Game key={game.steamAppID} game={game} />;
  })}

...

Pagination

Lastly, let us create pagination to let our user browse through multiple pages of search results. Create a Pagination.js file under the Components directory. This functional component will take in page, setPage, and hasNextPage as props.

Using the pagination component from react-bootstrap, we can create logic based on the page prop to only display the back button if the user has navigated past the first page and only display the next page button if the hasNextPage prop is true. Also, we can use logic based on the page prop to set the ellipsis component to display only if the user has navigated past the second page.

We will a need a function to pass to our onClick elements to adjust the page prop up or down, based on which element the user wants to click to navigate. The function will take in the appropriate increment or decrement to use the setPage prop. When the setPage prop is called, our useEffect hook in useFetchGame.js will dispatch the action to make the next two API calls.

// Pagination.js

import React from "react";
import { Pagination } from "react-bootstrap";

export default function GamesPagination({ page, setPage, hasNextPage }) {
  const adjustPage = (amount) => {
    setPage((prevPage) => prevPage + amount);
  };

  return (
    <Pagination>
      {page !== 0 && <Pagination.Prev onClick={() => adjustPage(-1)} />}
      {page !== 0 && (
        <Pagination.Item onClick={() => setPage(0)}>1</Pagination.Item>
      )}
      {page > 1 && <Pagination.Ellipsis />}
      {page > 1 && (
        <Pagination.Item onClick={() => adjustPage(-1)}>{page}</Pagination.Item>
      )}
      <Pagination.Item active>{page + 1}</Pagination.Item>
      {hasNextPage && (
        <Pagination.Item onClick={() => adjustPage(1)}>
          {page + 2}
        </Pagination.Item>
      )}
      {hasNextPage && <Pagination.Next onClick={() => adjustPage(1)} />}
    </Pagination>
  );
}

Now we can import and add our pagination component to our App.js and pass it the page, setPage, and hasNextPage props. I have placed mine above and below our Game components so the user can navigate from the top or bottom.

// App.js

...

import Pagination from "./components/Pagination";

...

  <SearchForm params={params} onParamChange={handleParamChange} />
  <Pagination page={page} setPage={setPage} hasNextPage={hasNextPage} />
  {loading && <Spinner animation="border" variant="primary" />}
  {error && <h1>{handleError(error)}</h1>}
  {games.map((game) => {
    return <Game key={game.steamAppID} game={game} />;
  })}
  <Pagination page={page} setPage={setPage} hasNextPage={hasNextPage} />

...

Congratulations!!

Now, you have a simple app to browse game sales on steam. If you want to take a look at the complete code, or create your own fork, check out my repo here.

How to use Dynamic Imports in ES2020

Joseph Chow — Tue, 29 Dec 2020 18:46:26 +0000

One of the most exciting new features, for me, in ES2020 is the ability to dynamically import your files. This means that rather than importing all your potentially necessary files at the top of your file, you can just import files based on need.

Imports

Import was introduced in ES2015, since then we have been able to natively load our modules in our code. We could divide our modules into export classes or functions that organizes our code into manageable sections. However, the JavaScript engine needed to resolve all the imports first before executing the code.

Why use dynamic imports?

As developers, we should always be aiming to reduce load times anywhere possible. It may not be necessary, but optimizing code always feels nice. Using dynamic imports, we can avoid importing a large bundle which will let us have blazing fast apps. Dynamic imports also allows us to navigate situations where a module you want to import does not exist when the component is first loaded. This way, you can set logic to load the files with only a few lines of code.

How do we use them?

Here is an example with the old system introduced with ES2015. Note that without extra bundling tools, we need to set the type attribute specifically to module:


<script type="module">
  import add from './add.js';

  add(7, 4); // returns 11
</script>

ES2020 allows us to use the import keyword as a function. There is now also no need to set the type because import() will work from a script:


<!-- No need to typeset -->
<script>
  import('./add.js')
    .then(module => module.default(3, 7)) //returns 10
    .catch(error => // log error here);
</script>

A really common use case scenario is when you may potentially never need to import a module, like when something is loaded dependent on user action. For example, this allows us to be super flexible loading page modules based on button presses:


document.getElementById("button")
.addEventListener("click", async () => {
    const { nextPage } = await import("./NextPage.js");
    nextPage();
});

Now the user experience is improved with snappier loads with only a few simple refactors. If you want to read more about ES2020 and Dynamic Importing, check out the MDN docs.

Originally published at https://www.josephc.how/dynamic-imports-es2020/

How to do Dark Mode with React Hooks

Joseph Chow — Tue, 29 Dec 2020 17:52:31 +0000

Dark Mode is one of the latest features being widely adopted across apps and websites. Dark colours can prolong the battery life of mobile devices. The savings, according to Google with the Dark Mode offered on the YouTube app, allows a 15 percent energy reduction at 50 percent brightness and a huge 60 percent reduction at 100 percent bightness. Apple confirmed moving forward in 2020, their phones will feature OLED screens.

Check out the completed demo here. The completed code for this demo can be found here.

Why React Hooks

We know with React components allows top-down data flow that helps us organize an application into small manageable pieces of UI. However, with only the component model, components become large and difficult to refactor. In addition, logic may need to be duplicated between components. Hooks are great because they allow us to organize logic within a component into discreet units that are easy to reuse.

However, we often can’t break complex components down any further because the logic is stateful and can’t be extracted to a function or another component. - Dan Abramov

Implementing Hooks

For simplicity in demonstrating how to implement React Hooks with Dark Mode, we will be using localStorage so the browser will remember our user's preference upon reload. In more complex web applications, the user's preference can be stored in a database. So let's begin with Facebook's standard React boilerplate. Clone the repo, change directory into the newly created project folder, and run the application. For more information, check out the docs.

npx create-react-app dark-mode;
cd dark-mode;
npm start;

Next, let's add our CSS colour variables. We can start with just a colour and a background colour, but you can add more if you would like to build out a larger colour scheme. This way, we are modularizing our colour styling in a consistent way that can be easily implemented across our site.

// App.css

...

html[data-theme="light"]  {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

html[data-theme="dark"]  {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

...

To set the variables, replace the header CSS in the App.css file like so:

// App.css

...

.App-header {
  background-color:var(--background-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color:var(--color);
}

...

Creating theme-toggle component

Create a new file in the src* folder and name it **ThemeToggle, or something to that effect. This is currently a starter project, if you like, you can create a separate ThemeToggle directory. Here, we are going to 'use' the useState hook to store the current theme preference.

// ThemeToggle.js

...

  const ThemeToggle = () => {
    const [darkMode, setDarkMode] = useState(
      localStorage.getItem("theme") === "dark" ? true : false
    );
    useEffect(() => {
      document
        .getElementsByTagName("HTML")[0]
        .setAttribute("data-theme", localStorage.getItem("theme"));
    }, []);
  };

...

If a user is accessing the site for the first time, there will not be a preference set in the localStorage. Our Strict Equality Comparison operator will throw false and the darkMode hook to apply the light theme across the application.

This is done using the HTML data- attribute, which allows us to store information in semantic HTML elements. We will use it in the method that is going to be triggered to switch the theme to dark, or vice-versa. Using the same logic, we can also call our setDarkMode hook from earlier to set the theme in localStorage.

// ThemeToggle.js

...

  const switchThemes = () => {
    if (isDark === false) {
      localStorage.setItem("theme", "dark");
      document
        .getElementsByTagName("HTML")[0]
        .setAttribute("data-theme", localStorage.getItem("theme"));
      setDarkMode(true);
    } else {
      localStorage.setItem("theme", "light");
      document
        .getElementsByTagName("HTML")[0]
        .setAttribute("data-theme", localStorage.getItem("theme"));
      setDarkMode(false);
    }
  };

...

The last thing we need to do in ThemeToggle is return the button to be imported.

// ThemeToggle.js

...

  return (
    <label className="switch">
      <input
        type="checkbox"
        defaultChecked={isDark}
        onChange={() => toggleThemeChange()}
      />
      <span className="slider round" />
    </label>
  );

...

Now, to test, we can import it into our App.js.

// App.js

...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          React Hooks Dark Mode Starter
        </p>
        <ThemeToggle />
      </header>
    </div>
  );
}

...

Congratulations!!

Now, you have a usable element that can place wherever you want in your application. If you want to take a look at the complete code, or create your own fork, check out my repo here.

Originally published at https://www.josephc.how/react-hooks-dark-mode/