DEV Community: sanderdebr

JS ES6 Design Patterns: Factory

sanderdebr — Wed, 10 Mar 2021 18:18:03 +0000

Design patterns can make your code more flexible, more resilient to change and easier to maintain. In this post you will learn to use the the factory pattern in vanilla ES6 using an object-orientated way of programming.

What is the Factory pattern?
The factory pattern is a creational design pattern, which means it deals with object creation. There are 3 types of factory patterns:

Simple factory
Factory method
Abstract factory.

Let's see what they are!

🔨 Simple factory

Generates an instance without exposing any instantiation logic to the client.

When to use?
To avoid repeating the same code to generate objects, place it into a dedicated factory instead.

Example
In this example we'll create a factory that returns a Monster with private fields:

// Simple factory
class Monster {
  constructor(type, level) {
    this._type = type;
    this._level = level;
  }

  get type() {
    return this._type;
  }

  get level() {
    return this._level;
  }
}

const MonsterFactory = {
  makeMonster: function (type, level) {
    return new Monster(type, level);
  },
};

const dragon = MonsterFactory.makeMonster("Dragon", 17);
console.log(dragon.level);

🏭 Factory method

Provides a way to delegate instantiation logic to child classes.

When to use?
When the client does not know what exact sub-class it might need.

Example
In the following example we create two players: a Warrior and a Knight which both inherit from the Player class. For each player we'll call the fightMonster() method, which is described in the Player class. The actual monster that is created, depends on the implementation of the makeMonster method of the players themselves. The Warrior creates a Dragon monster with a health of 50 and after attacking it drops with 10 points:

class Dragon {
  constructor() {
    this.health = 50;
  }

  attack() {
    this.health -= 10;
  }
}

class Snake {
  constructor() {
    this.health = 40;
  }

  attack() {
    this.health -= 20;
  }
}

class Player {
  fightMonster() {
    const monster = this.makeMonster();
    monster.attack();
    return monster;
  }
}

class Warrior extends Player {
  makeMonster() {
    return new Dragon();
  }
}

class Knight extends Player {
  makeMonster() {
    return new Snake();
  }
}

const player1 = new Warrior();
console.log(player1.fightMonster());

const player2 = new Knight();
player2.fightMonster();

Abstract factory

Encapsulate a group of individual factories with a common goal. It separates the details of implementation of a set of objects from their general usage.

Imagine that you have a furniture shop with chair's and sofa's. Let's say you want to categorize them in e.g. Victorian and Modern furniture. You don't want to change existing classes as future vendors update their catalogs very often.

When to use?
When your code needs to work with various families of related products, but you don’t want it to depend on the concrete classes of those products—they might be unknown beforehand or you simply want to allow for future extensibility.

Example
In the example below we'll set up a class Application that takes in a factory. Based on the type of factory, e.g. a Windows factory, a certain type of Button gets returned. In our case a WinButton as the factory we provide is the WinFactory.

class WinFactory {
  createButton() {
    return new WinButton();
  }
}

class MacFactory {
  createButton() {
    return new MacButton();
  }
}

class WinButton {
  paint() {
    console.log("Rendered a Windows button");
  }
}

class MacButton {
  paint() {
    console.log("Rendered a Mac button");
  }
}

class Application {
  factory;
  button;

  constructor(factory) {
    this.factory = factory;
  }

  createUI() {
    this.button = factory.createButton();
  }

  paint() {
    this.button.paint();
  }
}

let factory;
let OS = "Windows";

if (OS === "Windows") {
  factory = new WinFactory();
} else if (OS == "Mac") {
  factory = new MacFactory();
}

const app = new Application(factory);

app.createUI();
app.paint(); // Output: Rendered a Windows button

And that's it!

More design patterns are coming, thanks for following this tutorial.

⚗️ React Redux CRUD app for beginners [with Hooks]

sanderdebr — Fri, 29 Jan 2021 14:06:05 +0000

Redux has been and still is the most used library for managing state within React applications. It provides many benefits but can be daunting to learn for beginners learning React. In this tutorial we will build a simple CRUD app using React and Redux.

Checkout the finished app here
Checkout the code here

🔨 Setup
👪 Loading users from state
➕ Adding a new user
🔧 Editing a user
🗑️ Deleting a user
✨ Loading new users asynchronously

Redux vs React Context API & useReducer

Last week I wrote a tutorial on how to use React's Context API and useReducer hook for managing state. The combinations of these two are awesome and should be, in my opinion, used for small to medium sized applications with not too complex state logic. When your app grows in size, or you want to be properly prepared for that, it's recommended to switch to Redux.

Benefits of Redux

Why would you add another library for managing state? I thought React is managing the state already? That's true but imagine you have many components and pages and they all need to fetch data from different API's and data sources and manage the state of how the user is interacting with that data and the interface. Quickly your app state can become a mess. The main benefits that I have discovered are:

Global state: Redux keeps all the state in one store, the single source of truth.
Predictable: Using the single store your app has little problems syncing your current state and actions with other parts of your application.
Maintainability: Because Redux has strict guidelines on how to structure the code, your code will be easier to mainting.

Let's get started!

🔨 1. Setup

Let's start by creating a new React app with the default configuration:
$ npx create-react-app redux-crud-app

First let's remove all the files inside the /src folder except for App.js and index.js. Clear out App.js and let's only return a word for now. Run the app with $ npm run start.

App.js

function App() {
  return (
    <h1>Hi</h1>
  );
}

export default App;

Let's add a simple CSS library so our app will look nice. I will use Skeleton CSS for this tutorial. Just go to index.html and add the following line before the ending tag:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />

The text should now be styled on your localhost. Let's add the standard React router package to handle our different pages as a development dependency:

$ npm install react-router-dom --save

App.js

import { Route, BrowserRouter as Router, Switch } from "react-router-dom";

import React from "react";
import { UserList } from "./features/users/UserList";

export default function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/">
            <UserList />
          </Route>
          <Route path="/add-user">
            <h1>Add user</h1>
          </Route>
          <Route path="/edit-user">
            <h1>Edit user</h1>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

And add a the UsersList component for the layout:

/features/users/UserList.jsx

export function UserList() {
  return (
    <div className="container">
      <div className="row">
        <h1>Redux CRUD User app</h1>
      </div>
      <div className="row">
        <div className="two columns">
          <button className="button-primary">Load users</button>
        </div>
        <div className="two columns">
          <button className="button-primary">Add user</button>
        </div>
      </div>
      <div className="row">
        <table class="u-full-width">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Email</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Dave Gamache</td>
              <td>dave@gmail.com</td>
              <td>
                <button>Delete</button>
                <button>Edit</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

👪 2. Loading users from state

First we have to add the redux store to our application. Let's install react-redux and the redux toolkit:
$ npm install @reduxjs/toolkit react-redux --save

Then create a file store.js with the following code:

store.js

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});

Later we'll add our Redux functions to mutate the state (reducers) here. Now we need to wrap our application inside the store by using Redux's provider wrapper:

index.js

import App from "./App";
import { Provider } from "react-redux";
import React from "react";
import ReactDOM from "react-dom";
import store from "./store";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Next up let's add the redux state and add our users to it. Then we'll fetch this state inside our UserList component.

We'll divide up our code into features. In our app we'll only have on feature, the users. Redux calls the collection of the logic per feature slices. Let's create one:

/features/users/usersSlice

import { createSlice } from "@reduxjs/toolkit";

const initialState = [
  { id: "1", name: "Dave Patrick", email: "dave@gmail.com" },
  { id: "2", name: "Hank Gluhwein", email: "hank@gmail.com" },
];

const usersSlice = createSlice({
  name: "users",
  initialState,
  reducers: {},
});

export default usersSlice.reducer;

Now we'll add our user slice (user part of state) to our store so we can access it anywhere in our application. Redux automatically creates the .reducer function of slices. So we'll add the user slice as follows:

store.js

import { configureStore } from "@reduxjs/toolkit";
import usersReducer from "./features/users/usersSlice";

export default configureStore({
  reducer: {
    users: usersReducer,
  },
});

I would recommend using Redux DevTools to see the current state and its differences

Lastly, let's render our user table based on our Redux state. To access the state in Redux we have to use the useSelector hook. This is just a function that returns a piece of the state. We can decide which piece we want by providing it with a function.

We'll ask for the users object in our state. Then we render this array as list of users.

UserList.jsx

import { useSelector } from "react-redux";

export function UserList() {
  const users = useSelector((state) => state.users);

  return (
    ...
          <tbody>
            {users.map(({ id, name, email }, i) => (
              <tr key={i}>
                <td>{id}</td>
                <td>{name}</td>
                <td>{email}</td>
                <td>
                  <button>Delete</button>
                  <button>Edit</button>
                </td>
              </tr>
            ))}
          </tbody>
    ...
  );
}

And that's how we render the state on the page with Redux, pretty doable right? 😃

➕ 3. Adding a new user

First let's create a basic form with hooks to manage the input fields. Notice that we are not using Redux here to manage the input fields state. This is because you do not need to put everything in Redux, actually it is better to keep state that is only needed in one component in that component itself. Input fields are the perfect example.

/features/users/AddUser.jsx

import { useState } from "react";

export function AddUser() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleName = (e) => setName(e.target.value);
  const handleEmail = (e) => setEmail(e.target.value);

  return (
    <div className="container">
      <div className="row">
        <h1>Add user</h1>
      </div>
      <div className="row">
        <div className="three columns">
          <label for="nameInput">Name</label>
          <input
            className="u-full-width"
            type="text"
            placeholder="test@mailbox.com"
            id="nameInput"
            onChange={handleName}
            value={name}
          />
          <label for="emailInput">Email</label>
          <input
            className="u-full-width"
            type="email"
            placeholder="test@mailbox.com"
            id="emailInput"
            onChange={handleEmail}
            value={email}
          />
          <button className="button-primary">Add user</button>
        </div>
      </div>
    </div>
  );
}

On submit we want to add the user to the state and sent the user back to the UserList component. If something fails, we'll display an error.

First we add a method/function to our Redux user slice. This method is for mutating the state, which Redux calls a reducer. Our method inside reducers receives the user state and the action, in this case the user form field values.

Redux automatically creates an action for us that we can use to call this function.

usersSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = [
  { id: "1", name: "Dave Patrick", email: "dave@gmail.com" },
  { id: "2", name: "Hank Gluhwein", email: "hank@gmail.com" },
];

const usersSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    userAdded(state, action) {
      state.push(action.payload);
    },
  },
});

export const { userAdded } = usersSlice.actions;

export default usersSlice.reducer;

To use this action function, we need to import the useDispatch hook from Redux. We'll check if the fields are not empty and then dispatch the userAdded action with our fields. To generate the correct user ID, we grab the length of our users array in the state and add one to it.

AddUser.jsx

import { nanoid } from "@reduxjs/toolkit";
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import { useState } from "react";
import { userAdded } from "./usersSlice";

export function AddUser() {
  const dispatch = useDispatch();
  const history = useHistory();

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [error, setError] = useState(null);

  const handleName = (e) => setName(e.target.value);
  const handleEmail = (e) => setEmail(e.target.value);

  const usersAmount = useSelector((state) => state.users.length);

  const handleClick = () => {
    if (name && email) {
      dispatch(
        userAdded({
          id: usersAmount + 1,
          name,
          email,
        })
      );

      setError(null);
      history.push("/");
    } else {
      setError("Fill in all fields");
    }

    setName("");
    setEmail("");
  };

return (
   ...
   {error && error}
          <button onClick={handleClick} className="button-primary">
            Add user
          </button>
   ...

We can add users to the store, awesome!

🔧 4. Editing a user

To edit a user we'll update our edit button first by linking it to the dynamic /edit-user/{id} page inside our UserList component:

<Link to={`/edit-user/${id}`}>
   <button>Edit</button>
</Link>

Then we'll add the new reducer to our Redux slice. It will find the user within our state and update it if it exists.

usersSlice.js

const usersSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    userAdded(state, action) {
      state.push(action.payload);
    },
    userUpdated(state, action) {
      const { id, name, email } = action.payload;
      const existingUser = state.find((user) => user.id === id);
      if (existingUser) {
        existingUser.name = name;
        existingUser.email = email;
      }
    },
  },
});

Our EditUser.jsx file will look very similar to AddUser.jsx except here we take the user id from the URL path using the useLocation hook from react-router-dom:

EditUser.jsx

import { useDispatch, useSelector } from "react-redux";
import { useHistory, useLocation } from "react-router-dom";

import { useState } from "react";
import { userUpdated } from "./usersSlice";

export function EditUser() {
  const { pathname } = useLocation();
  const userId = pathname.replace("/edit-user/", "");

  const user = useSelector((state) =>
    state.users.find((user) => user.id === userId)
  );

  const dispatch = useDispatch();
  const history = useHistory();

  const [name, setName] = useState(user.name);
  const [email, setEmail] = useState(user.email);
  const [error, setError] = useState(null);

  const handleName = (e) => setName(e.target.value);
  const handleEmail = (e) => setEmail(e.target.value);

  const handleClick = () => {
    if (name && email) {
      dispatch(
        userUpdated({
          id: userId,
          name,
          email,
        })
      );

      setError(null);
      history.push("/");
    } else {
      setError("Fill in all fields");
    }

    setName("");
    setEmail("");
  };

  return (
    <div className="container">
      <div className="row">
        <h1>Edit user</h1>
      </div>
      <div className="row">
        <div className="three columns">
          <label htmlFor="nameInput">Name</label>
          <input
            className="u-full-width"
            type="text"
            placeholder="test@mailbox.com"
            id="nameInput"
            onChange={handleName}
            value={name}
          />
          <label htmlFor="emailInput">Email</label>
          <input
            className="u-full-width"
            type="email"
            placeholder="test@mailbox.com"
            id="emailInput"
            onChange={handleEmail}
            value={email}
          />
          {error && error}
          <button onClick={handleClick} className="button-primary">
            Save user
          </button>
        </div>
      </div>
    </div>
  );
}

🗑️ 5. Deleting a user

I would like to invite to figure this one out for yourself! It will be a good excerise to practise what we've learned up till this point.

Hereby my solution for the reducer:

    userDeleted(state, action) {
      const { id } = action.payload;
      const existingUser = state.find((user) => user.id === id);
      if (existingUser) {
        return state.filter((user) => user.id !== id);
      }
    },

You can check the full solution with my code on github.

✨ 6. Loading new users asynchronously

Heads up - the following part is a bit trickier but very valuable to learn!

A nice feature would be to load in users from an external API. We will use this free one: https://jsonplaceholder.typicode.com/users.

Redux from itself is running code only synchronously. To handle ascync code it was most common to use something called a redux-thunk, which is just a simple function that allows async code as actions.

Nowadays, Redux has a built in feature to add async code. Many tutorials still use redux-thunk but the new configureStore function from redux has this built in already.

Let's add the API fetch to our usersSlice:

export const fetchUsers = createAsyncThunk("fetchUsers", async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  return users;
});

Then inside our slice we will add a property called extraReducers that holds a couple functions to handle the return of the API:

pending
fulfilled
rejected

Our API call returns a Promise which is an object that represents the status of an asynchronous operation, in our case an API call. Based on the Promise status we'll update our state.

usersSlicejs

const usersSlice = createSlice({
  name: "users",
  initialState: {
    entities: [],
    loading: false,
  },
  reducers: { ... },
  extraReducers: {
    [fetchUsers.pending]: (state, action) => {
      state.loading = true;
    },
    [fetchUsers.fulfilled]: (state, action) => {
      state.loading = false;
      state.entities = [...state.entities, ...action.payload];
    },
    [fetchUsers.rejected]: (state, action) => {
      state.loading = false;
    },
  },
});

We want to fetch this array of users as soon as our app loads and every time a user clicks on the LOAD USERS button.

To load it as soon as our app loads, let's dispatch it before our component inside index.js:

store.dispatch(fetchUsers())

And to dispatch it on our button:

onClick={() => dispatch(fetchUsers())}

That's it! We finished building our CRUD app using React, Redux and Hooks.

You can find the full source code here.
And you can checkout the final app here.

Thanks for following this tutorial, make sure to follow me for more! 😀

Flawless React State Management: useReducer and Context API

sanderdebr — Fri, 22 Jan 2021 12:31:00 +0000

✨ Introduction

Adding state to a React application can be tricky, especially when it's starts to grow in size. On which level do you manage the state? Which components do you give local state only? What about state that you need to access everywhere? Redux is a great library for managing state but it can be overkill in a small to medium application, which you'll probably need to make quite often.

In this tutorial we will build a small user management app that will teach you how to manage state in React with, in my opinion, currently the best way possible.

🎯 Goals

Setting up a React app
Using 100% React Hooks
Using Context API
Using useReducer hook
Loading API data asynchronously into our state
Adding theme toggle switch

📺 What we’ll make

Click here to see the app live in action.
Click hero to check out the github repo.

🔨 Setting up the application

Let's start by creating a new React app with create-react-app:
npx create-react-app user-management

I like to use Material UI or Tailwind in my React projects, let's use Material UI this time:
npm install @material-ui/core

And adding the Roboto font in our index.html:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

As well as adding the icon set of Material UI:
npm install @material-ui/icons

Then let's remove all the files except index.js and App.js as we will not use those.

Now we'll create a basic layout and dashboard that will hold a list of our users. We will wrap every page in a _layout.js function that provides a theme and template. Inside App.js we'll add the standard react-router functionality:

_layout.js

import { Box, Container, CssBaseline } from "@material-ui/core";
import React, { useState } from "react";

export default function Layout({ children }) {
  return (
    <>
      <CssBaseline />
      <Container maxWidth="md">
        <Box marginTop={2}>{children}</Box>
      </Container>
    </>
  );
}

App.js

import { Route, BrowserRouter as Router, Switch } from "react-router-dom";

import Layout from "./_layout";
import Users from "./Users";

function App() {
  return (
    <Layout>
      <Router>
        <Switch>
          <Route path="/">
            <Users />
          </Route>
          <Route path="/edit-user">
            <h1>Edit user</h1>
          </Route>
        </Switch>
      </Router>
    </Layout>
  );
}

export default App;

Users.js

import {
  Button,
  Divider,
  Grid,
  Paper,
  Typography,
  makeStyles,
} from "@material-ui/core";

import Brightness7Icon from "@material-ui/icons/Brightness7";
import React from "react";
import UserList from "./UserList";

const useStyles = makeStyles((theme) => ({
  paper: {
    padding: theme.spacing(4),
    margin: "auto",
  },
  img: {
    width: "100%",
  },
  divider: {
    marginBottom: theme.spacing(2),
  },
}));

export default function Users() {
  const classes = useStyles();

  return (
    <Paper className={classes.paper}>
      <Grid container justify="space-between" alignItems="start">
        <Grid item>
          <Typography gutterBottom variant="h4">
            Users
          </Typography>
        </Grid>
        <Grid item>
          <Grid container spacing={4} alignItems="center">
            <Grid item>
              <Button variant="contained" color="primary">
                Load users
              </Button>
            </Grid>
            <Grid item>
              <Brightness7Icon />
            </Grid>
          </Grid>
        </Grid>
      </Grid>
      <Divider className={classes.divider} />
      <UserList />
    </Paper>
  );
}

Also I've added a default icon already for our theme switch that we will make later.

Adding list of users

Let's now add cards that will hold our user information.

UserList.js

import { Grid } from "@material-ui/core";
import React from "react";
import User from "./User";

export default function UserList() {
  const users = [1, 2, 3];

  return (
    <Grid container spacing={2}>
      {users.map((user, i) => (
        <Grid item xs={12} sm={6}>
          <User key={i} user={user} />
        </Grid>
      ))}
    </Grid>
  );
}

User.js

import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import React from "react";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  media: {
    height: 140,
  },
});

export default function User() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Clementine Bauch
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            <strong>ID: </strong> Samantha
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            <strong>Username: </strong> Samantha
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            <strong>Email: </strong> Nathan@yesenia.net
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" variant="contained" color="secondary">
          Delete
        </Button>
        <Button size="small" variant="contained" color="primary">
          Edit
        </Button>
      </CardActions>
    </Card>
  );
}

We currently are just using some hard coded user data and an array with 3 items to show our users. In a further section we will load our users from an API and store them in our app state.

Before that, let's first create the theme switch using the Context API.

💡 Adding Context API

Create a new folder called context and in here add a folder called theme. Inside this folder we'll create the following 3 files: context.js, index.js and reducer.js.

I will explain each file step by step.

context.js
We'll be using React's Context API to wrap our app with some values which we would like to provide, in this case the theme settings.

First we'll create a new context"

const { createContext } = require("react");
const ThemeContext = createContext();`

Then we'll set up a wrapper function that provides the theme to our whole app:

<ThemeContext.Provider theme={currentTheme} setTheme={setTheme}>
      {children}
</ThemeContext.Provider>

To make this work with Material UI, we have to pass the theme into their createMuiTheme() function. We'll use React's useState hook to get and set the state. We'll also provide the setTheme function into our context.

We can consume the context values anywhere in our app by using the useContext() hook:
export const useTheme = () => useContext(ThemeContext);

The whole context then looks like this:

import React, { useContext } from "react";

import { createMuiTheme } from "@material-ui/core";

const { createContext } = require("react");

const ThemeContext = createContext();

export const useTheme = () => useContext(ThemeContext);

export const ThemeProvider = ({ children }) => {
  const dark = {
    palette: {
      type: "dark",
    },
  };

  const currentTheme = createMuiTheme(dark);

  return (
    <ThemeContext.Provider value={currentTheme}>
      {children}
    </ThemeContext.Provider>
  );
};

Next up we'll use index.js for easy importing our context files in other files:

index.js

import { useTheme, ThemeProvider } from "./context";

export { useTheme, ThemeProvider };

And we'll wrap our App inside App.js with the provider:

App.js

...
function App() {
  return (
    <ThemeProvider>
         ...
    </ThemeProvider>
  );
}
...

We'll update the _layout.js file so that we can provide our theme with material UI:

_layout.js

import {
  Box,
  Container,
  CssBaseline,
  ThemeProvider,
  createMuiTheme,
} from "@material-ui/core";

import React from "react";
import { useThemeState } from "./context/theme";

export const light = {
  palette: {
    type: "light",
  },
};

export const dark = {
  palette: {
    type: "dark",
  },
};

export default function Layout({ children }) {
  const { theme } = useThemeState();

  const lightTheme = createMuiTheme(light);
  const darkTheme = createMuiTheme(dark);

  return (
    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
      <CssBaseline />
      <Container maxWidth="md">
        <Box marginTop={2}>{children}</Box>
      </Container>
    </ThemeProvider>
  );
}

Now we can use the theme anywhere in our app by using the useTheme() hook. For example inside Users.js we can add the following to show a sun or moon based on our theme setting:

const theme = useTheme();
{theme.palette.type === "light" ? 
<Brightness7Icon /> : <Brightness4Icon />}

This is super helpful, we added a global state to our app! But what if we wanted to update that state? That's where the useReducer comes into the picture.

Adding useReducer

The React useReducer hook is an alternative to useState. It acceps a function that mutates the state object, and an initial state object.

The useReducer hook returns the state and a dispatch function, which we can use to fire off changes to our state. It is similar as how Redux works, but less complicated. (I still recommended to learn Redux down the road as it has more benefits for more complex applications).

Because not all components need to access the state and dispatch we will split them up into 2 contexts.

Our new context.js file then looks like the following:

context.js

import React, { useContext, useReducer } from "react";

import { themeReducer } from "./reducer";

const { createContext } = require("react");

const initialState = {
  switched: 0,
  theme: "light",
};

const ThemeStateContext = createContext();
const ThemeDispatchContext = createContext();

export const useThemeState = () => useContext(ThemeStateContext);
export const useThemeDispatch = () => useContext(ThemeDispatchContext);

export const ThemeProvider = ({ children }) => {
  const [theme, dispatch] = useReducer(themeReducer, initialState);

  return (
    <ThemeStateContext.Provider value={theme}>
      <ThemeDispatchContext.Provider value={dispatch}>
        {children}
      </ThemeDispatchContext.Provider>
    </ThemeStateContext.Provider>
  );
};

Awesome, next up let's create our first reducer called themeReducer in the file reducer.js.

reducer.js

export const themeReducer = (state, { type }) => {
  switch (type) {
    case "TOGGLE_THEME":
      return {
        ...state,
        switched: state.switched + 1,
        theme: state.theme === "light" ? "dark" : "light",
      };
    default:
      throw new Error(`Unhandled action type: ${type}`);
  }
};

The function above updates the state when an action with label "TOGGLE_THEME" comes in. If the action is unknown, it will throw an error.

We'll also update our initial state and themes inside our context.js file:

context.js

import React, { useContext, useReducer } from "react";

import { createMuiTheme } from "@material-ui/core";
import { themeReducer } from "./reducer";

const { createContext } = require("react");

export const light = {
  palette: {
    type: "light",
  },
};

export const dark = {
  palette: {
    type: "dark",
  },
};

export const lightTheme = createMuiTheme(light);
export const darkTheme = createMuiTheme(dark);

const initialState = {
  switched: 0,
  theme: lightTheme,
};

const ThemeStateContext = createContext();
const ThemeDispatchContext = createContext();

export const useThemeState = () => useContext(ThemeStateContext);
export const useThemeDispatch = () => useContext(ThemeDispatchContext);

export const ThemeProvider = ({ children }) => {
  const [theme, dispatch] = useReducer(themeReducer, initialState);

  return (
    <ThemeStateContext.Provider value={theme}>
      <ThemeDispatchContext.Provider value={dispatch}>
        {children}
      </ThemeDispatchContext.Provider>
    </ThemeStateContext.Provider>
  );
};

Now we can use both switched and theme anywhere in our application with: const { theme } = useThemeState(). Very cool!

Creating the theme toggle

Inside users.js we can now use our dispatch functionality:

Users.js

....
const { theme } = useThemeState();
const dispatch = useThemeDispatch();
...
<Grid item onClick={() => dispatch({ type: "TOGGLE_THEME" })}>
              {theme === "light" ? <Brightness7Icon /> : <Brightness4Icon />}
            </Grid>

Our theme toggle is working, awesome!

Loading users from an API

Let's create a new folder inside our context folder and call it users and add the same files as in theme but now also add actions.js to it.

We'll repeat the same code as we did for the theme context, except we will add actions.js this time as we want to perform an API fetch and based on the result update our state. Our reducer only should be concerned with updated the state directly, performing actions we will keep seperate just like Redux does.

actions.js

export const getUsers = async (dispatch) => {
  dispatch({ type: "REQUEST_USERS" });
  try {
    // Fetch server
    const response = await fetch(`https://jsonplaceholder.typicode.com/users`);

    if (!response.ok) {
      throw Error(response.statusText);
    }

    let data = await response.json();

    // Received users from server
    if (data.length) {
      dispatch({ type: "USERS_SUCCESS", payload: data });
      return data;
    }

    // No match found on server
    dispatch({
      type: "USERS_FAIL",
      error: { message: "Could not fetch users" },
    });

    return null;
  } catch (error) {
    dispatch({ type: "USERS_FAIL", error });
  }
};

When the function above gets called it will fetch user data from an API endpoint. "REQUEST_USERS" will set our state to loading: true. If users are returned, we'll update our state with them in our reducer, if not we'll also update our state error object:

reducer.js

export const usersReducer = (state, { type, payload, error }) => {
  switch (type) {
    case "REQUEST_USERS":
      return {
        ...state,
        loading: true,
      };
    case "USERS_SUCCESS":
      return {
        ...state,
        loading: false,
        users: payload,
      };
    case "USERS_FAIL":
      return {
        ...state,
        loading: false,
        error,
      };
    default:
      throw new Error(`Unhandled action type: ${type}`);
  }
};

Now it is up to you to wrap the users context around the application. You can do it the same way as we did for the theme.

Let's fetch our users when the user clicks on our 'LOAD_USERS' button by dispatching the right action:

Users.js

...
  const dispatchUsers = useUsersDispatch();
  const _getUsers = () => getUsers(dispatchUsers);
...
<Button onClick={_getUsers} variant="contained" color="primary">
                Load users
              </Button>
...

Now we can fetch users and save them in the state, let's show them in our application:

UserList.js

import { Grid } from "@material-ui/core";
import React from "react";
import User from "./User";
import { useUsersState } from "../context/users";

export default function UserList() {
  const { users, loading, error } = useUsersState();

  if (loading) {
    return "Loading...";
  }

  if (error) {
    return "Error...";
  }

  return (
    <Grid container spacing={2}>
      {users?.map((user, i) => (
        <Grid key={i} item xs={12} sm={6}>
          <User user={user} />
        </Grid>
      ))}
    </Grid>
  );
}

You can of course add some awesome loading spinners or display a better error, but hopefully you see how easy it is to load the app state wherever you need it and update the UI accordingly.

I would like to invite you to add the delete functionality! By adding a dispatch function to the delete button and removing the users inside the reducer based on its id.

Here is the code:

User.js

...
const dispatch = useUsersDispatch();
...
 <Button
          onClick={() => dispatch({ type: "DELETE_USER", payload: user.id })}
          size="small"
          variant="contained"
          color="secondary"
        >
          Delete
        </Button>

reducer.js

case "DELETE_USER":
      return {
        ...state,
        users: state.users.filter((user) => user.id !== payload),
      };

Persisting our state

One last thing we can do to improve our app is maintaining the app state when the user closes the window. This can be done by storing our states inside the users local storage and is called persisting the state.

First we'll add our state to the local storage every time our state changes inside our context.js files:

context.js

export const ThemeProvider = ({ children }) => {
  const [theme, dispatch] = useReducer(themeReducer, initialState);

  // Persist state on each update
  useEffect(() => {
    localStorage.setItem("theme", JSON.stringify(theme));
  }, [theme]);

  return ( ...

Then we'll change our initialstate to grab the state stored in local storage when it is available, otherwise use the initial state we declared already.

Instead of the initial state we'll pass in a initializer function into our reducers:

reducer.js

...
const initialState = {
  loading: false,
  error: null,
  users: [],
};

const initializer = localStorage.getItem("users")
  ? JSON.parse(localStorage.getItem("users"))
  : initialState;
...
const [state, dispatch] = useReducer(usersReducer, initializer);

We'll do this for both contexts.

You should see your apps state in the local storage of your browser, awesome! 🔥

Click here to see the app live in action.
Click hero to check out the github repo.

There are so many possibilities with these technologies, I hope this tutorial will help you in any kind of way!

Free HTML5 CSS3 Landing Page Template 2021 🚀

sanderdebr — Fri, 30 Oct 2020 11:12:40 +0000

Hi guys!

Start 2021 with a blast by using my free landing page template called Appy made with HTML5 and SASS. Can be used for e.g. SaaS software or app.

Checkout the live demo

Download

This layout is custom designed and built by me, free for commercial and personal use!

Techniques

HTML5 & CSS3 with animations
BEM CSS conventions
Independent components
Fully responsive
CSS Flexbox & Grid
Pure CSS menu toggle
Mobile first
0.6s load time

This template is using SASS so make sure to have node.js installed on your machine, see the repo for instructions:

Checkout the repository

If you would like to see more of these free templates, please let me know!

Build a Simple JavaScript App the MVC Way 🕹️

sanderdebr — Wed, 19 Aug 2020 13:37:54 +0000

Did you ever encountered a bit of a mess when looking at JavaScript code? Especially when there is a lot of code involved, JavaScript's flexible nature can easily create a bunch of tangled spaghetti code.

This is where code patterns and structures come into place. One of the most popular, widely used pattern is called the MVC pattern: model, view and controller.

In this article we would build a simple JavaScript application that:

Fetches pictures from the SplashBase API
Enables the user make a selection of those pictures
Enables the user to remove and change their selection
Using the MVC pattern with OOP and FP techniques for structuring our code

➡️ View source code

Fetching from this API only works on your local machine, as the API does not support HTTPS. However, this one is simple, free and does not require an API key.

Prerequisites

Basic JS and HTML
Basic Webpack

Let's get started! 😄

What is MVC?

A design pattern that separates an application into three parts:

Model: manages the data of the application (data layer)
View: visual representation of the model (presentation layer)
Controller: glues model and view together (application layer)

General rules

Model never touches the view. View never touches the model. Controller connects both.
Views do not run their own methods (e.g. a dialog should not open itself).
The larger the application, the more it will benefit from MVC.

1. Project setup

Let's start with setting up our package.json and installing the required dependencies.

npm init -y

Then replace the scripts and dependencies with the following:

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.7.0",
    "axios": "^0.19.2"
  }

And then run npm install to install the packages.

Next up, create the following folders and files:

/dist
--style.css
/src
--/js/index.js
--index.html

Because our focus is on learning MVC in JavaScript, you may just copy the following code for index.html and style.css below:

Click here for the HTML code
Click here for the CSS code

Subsequently we'll add a webpack.config.js file in our root folder to set up Webpack. Pour the following code in there:

.webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: ["@babel/polyfill", "./src/js/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
  },
  devServer: {
    contentBase: "./dist",
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

This will use our /src/js/index.js as input file and convert it bundle it into our /dist/ folder nicely. Also it will use our /src/index.html file as template and generate that file too in our output /dist/ folder.

Then create a file called .babelrc in the root and add the following code:

.babelrc

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "browsers": ["last 5 versions", "ie >= 8"]
        }
      }
    ]
  ]
}

Great! We are now ready to start coding some JavaScript.

2. Setting up controllers

If you run npm start Webpack will spin up a dev server for us where we can see our changes directly without reloading.

Our index.js file will serve as the controller of our application. We will create an object called state to keep track of the current state of the application. We then need two controllers: one for the search part and one for the collection part:

index.js

/*
** Global state of the app
*/

const state = {};

/*
** Search controller
*/

const searchController = () => {
    // 
}

/*
** Collection controller
*/

const collectionController = () => {
    //
}

Let's work on the search controller first. This is how it will work:

User types into the input field and presses the search button.
This will fire our controller that reads the input.
The controller will ask our Search Model to fetch pictures with the given input.
The controller will then ask the View to update the screen for the user with the fetched pictures, if any.

Inside /src/js/ create the folders models and views. Inside views create a file called base.js.

Inside base.js we will setup an object that holds all our HTML elements:

/views/base.js

export const elements = {
  searchInput: document.querySelector(".search__input"),
  searchButton: document.querySelector(".search__button"),
  searchResults: document.querySelector(".search__result"),
  error: document.querySelector(".search__error"),
  myPictures: document.querySelector(".my-pictures__collection"),
  removeButton: document.querySelector(".my-pictures__button"),
};

It is always good practice to structure data inside objects. Because these are the UI elements, we've placed this inside our views folder.

3. Creating the Search view

Next up we'll create our first view file inside /views/ called searchView.js. Let's set up the function to get the users input:

/views/searchView.js

import { elements } from "./base";

export const getInput = () => elements.searchInput.value;

Go back to the main index.js file, import this file and use it as follows to get the users input:

index.js

const searchController = () => {
  const query = searchView.getInput();
};

This is nice and all, but when does this function get fired? Well, when the users presses the search button! Let's create an event listener for this action inside our controller:

index.js

elements.searchButton.addEventListener("click", (event) => {
  event.preventDefault();
  searchController();
});

Make sure to import elements inside the controller file.

Everytime the user presses the search button, our seachController function will fire off and retrieve the users input from the searchView.getInput() function.

4. Creating the Search model

Next up we want to actually fetch some images based on the users input. For this we will use the free API from splashbase.

Fetching data and storing it into their own state is something a model will do. Create a new file inside /models/ called Search.js.

For our search model we will create a class Search that takes a query as constructor and also keeps track of an array of pictures inside the constructor.

/models/Search.js

export default class Search {
  constructor(query) {
    this.query = query;
    this.pictures = [];
  }
}

Back to our searchController function. First, we'll convert the function to an async function because we will have to wait for the API's result to come back. Then we'll check if the user actually typed something. If so, we'll create a new instance of Search, using the users input as query.

Next we'll try to fetch the pictures from the API, which are then stored inside our state.search object (instance of Search).

index.js

const searchController = async () => {
  const query = searchView.getInput();

  if (query) {
    state.search = new Search(query);
    try {
      await state.search.getPictures();
    } catch (err) {
      alert(`Something went wrong: ${err}`);
    }
  }
};

Let's create the method getPictures() inside our Search model. We'll be using axios to easily fetch data from the API. If successful, we'll store the result in Searchs own state called this.pictures.

/models/Search.js

import axios from "axios";

export default class Search {
  constructor(query) {
    this.query = query;
    this.pictures = [];
  }

  async getPictures() {
    try {
      const result = await axios(
        `http://www.splashbase.co/api/v1/images/search?query=${this.query}`
      );
      this.pictures = result.data.images;
    } catch (error) {
      alert(error);
    }
  }
}

Now the our controller should receive the requested pictures based on the users input when he clicks on search, great! Let's show the result on the UI next.

5. Displaying the result

If our Search model has successfully received some image data, we want to display it onto the screen.

First, let's create two methods to clear the input and the screen:

searchView.js

export const clearInput = () => (elements.searchInput.value = "");

export const clearResults = () => (elements.searchResults.innerHTML = "");

Back in index.js we'll call these methods right after our query starts:

index.js

state.search = new Search(query);
searchView.clearInput();
searchView.clearResults();

It would be nice to see a loading spinner while the pictures are being fetched. Let's create that next.

We'll need a renderSpinner() and a clearSpinner()function for this which we'll add in our base.js file:

base.js

export const renderSpinner = (element) => {
  const spinner = `<div class="spinner"></div>`;
  element.insertAdjacentHTML("afterbegin", spinner);
};

export const clearSpinner = () => {
  const spinner = document.querySelector(".spinner");
  if (spinner) spinner.parentElement.removeChild(spinner);
};

Our renderSpinner() function is able to add the loading spinner inside any element we provide it with. The clearSpinner() function finds the element and removes it.

Back into index.js we'll render our spinner right after clearing the screen, and remove it when the waiting for the API has finished:

index.js

const searchController = async () => {
  const query = searchView.getInput();

  if (query) {
    state.search = new Search(query);
    searchView.clearInput();
    searchView.clearResults();
    renderSpinner(elements.searchResults);

    try {
      await state.search.getPictures();
      clearSpinner();
    } catch (err) {
      alert(`Something went wrong: ${err}`);
    }
  }
};

For displaying the pictures, we need to check if the Search model was able to add pictures to it's local state. If so, we'll ask the searchView to render them to the screen:

index.js

if (state.search.pictures.length) {
    searchView.renderPictures(state.search.pictures);
} else {
    searchView.renderNoResults("No pictures found.");
}

searchView.js

const renderPicture = (picture) => {
  const markup = `
      <div class="search__item" data-id=${picture.id}>
        <img
          src=${picture.url}
          alt=""
          class="search__img"
        />
        <h4 class="search__text">${picture.id}</h4>
      </div>
      `;
  elements.searchResults.insertAdjacentHTML("beforeend", markup);
};

export const renderPictures = (pictures) => {
  pictures.forEach((picture) => renderPicture(picture));
};

export const renderNoResults = (msg) => {
  elements.searchResults.innerHTML = msg;
};

Awesome, our spinner and pictures should now display on screen! 😃

6. Adding and handling collection

Now that are search functionality is working, let's create the capability that the user is can select and remove pictures to and from their collection.

First, let's create the model called Collection:

/models/Collection.js

export default class Collection {
  constructor() {
    this.pictures = [];
  }

  get getSelectedPictures() {
    return this.pictures.filter((x) => x.selected === true);
  }

  get _getUnselectedPictures() {
    return this.pictures.filter((x) => x.selected === false);
  }

  addPicture(picture) {
    this.pictures.push(picture);
  }

  removePictures() {
    this.pictures = this._getUnselectedPictures;
  }

  toggleSelected(id) {
    const target = this.pictures.find((x) => x.id === id);
    target.selected = !target.selected;
  }
}

This model has its own state that stores an array of pictures. It has two getter methods, one of them is private (notice the underscore to indicate it is private method) because it is only used by an internal method.

The toggleSelected(id) method toggles the selected property of a given id to true or false.

Next up, the collection view.

/views/collectionView.js

import { elements } from "./base";

export const clearCollection = () => (elements.myPictures.innerHTML = "");

export const toggleSelected = (picture) => picture.classList.toggle("selected");

export const enableButton = () =>
  (elements.removeButton.classList = "my-pictures__button");

export const disableButton = () => {
  elements.removeButton.classList = "my-pictures__button disabled";
};

const renderPicture = (picture) => {
  const markup = `
      <div class="search__item ${picture.selected ? "selected" : ""}" data-id=${
    picture.id
  }>
        <img
          src=${picture.url}
          alt=""
          class="search__img"
        />
        <h4 class="search__text">${picture.id}</h4>
      </div>
      `;
  elements.myPictures.insertAdjacentHTML("beforeend", markup);
};

export const renderPictures = (pictures) => {
  pictures.forEach((picture) => renderPicture(picture));
};

It is similar to our searchView, except for toggling the remove button and toggling a selected picture.

Back to index.js let's start with the event listener for adding a picture to the collection.

index.js

// Add picture to collection
elements.searchResults.addEventListener("click", (event) => {
  let target;
  if (!event.target.classList.contains("search__item")) {
    target = event.target.parentElement;
  } else {
    target = event.target;
  }

  const id = parseInt(target.dataset.id);
  const alreadySelected = state.collection.pictures.find((x) => x.id === id);

  if (!alreadySelected && id) {
    const { url } = state.search.pictures.find((x) => x.id === id);
    state.collection.addPicture(new Picture(id, url));

    collectionController();
  }
});

We need to grab the dataset-id from the element that the user clicks on, so when a user clicks on an element inside the div we are looking for, we'll grab the parent element.

Then we'll check if this picture is already in our collection by using the find() method.

If not, we'll let our collection model add the picture to its state by creating a new model Picture which is very simple:

/models/Picture

export default class Picture {
  constructor(id, url) {
    this.id = id;
    this.url = url;
    this.selected = false;
  }
}

Finally, we'll call collectionController() to render our updated collection:

index.js

const collectionController = () => {
  collectionView.clearCollection();
  collectionView.renderPictures(state.collection.pictures);

  if (state.collection.getSelectedPictures.length) {
    collectionView.enableButton();
  } else {
    collectionView.disableButton();
  }
};

Next up we'll add the event listener inside our collection so users are able to mark pictures that they want to have removed, which is very similar as our event listener for adding pictures to the collection:

index.js

// Select picture for removal
elements.myPictures.addEventListener("click", (event) => {
  let target;
  if (!event.target.classList.contains("search__item")) {
    target = event.target.parentElement;
  } else {
    target = event.target;
  }

  const id = parseInt(target.dataset.id);

  if (id) {
    const picture = state.collection.pictures.find((x) => x.id === id);
    state.collection.toggleSelected(picture.id);

    collectionController();
  }
});

Then we also need to add the functionality to actually remove the selected pictures from our collection:

index.js

// Remove selected pictures
elements.removeButton.addEventListener("click", () => {
  if (state.collection.pictures.length) {
    state.collection.removePictures();
    collectionController();
  }
});

At last, we need to create a new instance of our Collection class on page load, so our application has a place where to store the images:

index.js

/*
 ** Startup on page load
 */

window.addEventListener("load", () => {
  state.collection = new Collection();
  state.collection.pictures.forEach((picture) =>
    collectionView.renderPicture(picture)
  );

  collectionController();
});

Make sure to import all the necessary files, the application should work now! 😀

➡️ View source code

Thanks so much for following this tutorial. If you have any questions or feedback please let me know.

Make sure to follow me for more tips and tricks! 👋

HowTo: Custom React localStorage Hook ⚓

sanderdebr — Mon, 22 Jun 2020 15:34:33 +0000

Traditionally React had two popular ways to share stateful logic between components: render props and higher-order components. Hooks solve many of the problems these two techniques have.

In this tutorial you will learn how to create your own Hooks in React by building a custom Hook for storing and reading the Local Storage web API! 😃

➡️ Checkout what we're building.

What is a custom hook?

First, let's check what a custom hook actually is. According to the official React docs, a custom Hook is a JavaScript function whose name starts with use and that may call other Hooks. Hooks are functions that let you hook into React state and lifecycle from function components). Sounds a bit vague still right. Next up, let's see what localStorage is.

Local Storage

The read-only localStorage property of the global window object gives us the possibility to store data at the client side without an expiration time (sessionStorage contrarily gets lost after closing the browser).

So.. what can you actually do with localStorage? Many things! Like:

Remembering last search term
Save your comment
Save the username
Toggle theme
Many more..

Keep in mind though:

Do not store sensitive user information in localStorage
Limited to 5MB across all major browsers
No form of data protection (do not store e.g. JWT tokens here)

Let's start with building our Hook!

Setting an item with localStorage is very easy. Let's set our theme to dark:

localStorage.setItem('theme', 'dark');

And reading is easy as well:

localStorage.getItem('theme');

Awesome right!

Now, what we actually want to achieve here is to use the localStorage methods from everywhere in our React application.

Let's create a new folder called /hooks and create a function called useLocalStorage that acceps two arguments: a key and an initialValue.

export const useLocalStorage = (key, initialValue) => {
  ...
}

export default useLocalStorage;

When we are finished with our Hook, we want to use it as follows:

// Destructuring off an array
const [storedTheme, setTheme] = useLocalStorage("theme");
// Get the current theme
const theme = storedTheme;
// Setting a theme
setTheme("dark");

This means our Hook has to return an array containing:

a value with the requested stored item in localStorage and
a function that can set an item in localStorage.

We'll use the useState Hook to let React keep track of the stored value.

import { useState } from "react";

export const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(initialValue);

  const setValue = (value) => {
    window.localStorage.setItem(key, value);
    setStoredValue(value);
  }

  return [storedValue, setValue];
}

We only have set up the basis but let's test it already! 🤖

Inside another component, import our Hook and add:

import React, { useEffect } from "react";
import { useLocalStorage } from "./hooks/useLocalStorage";

function App() {
  const [storedTheme, setTheme] = useLocalStorage("theme");

  useEffect(() => {
    setTheme("dark");
  }, [setTheme]);

  console.log(storedTheme);

  return <h1>Hi Dev</h1>
}

You should see 'dark' in your console and also you can see the localStorage items with Chrome Dev Tools:

We're not ready yet, let's improve our Hook!

Improving our Hook

We want to improve our hook so we can do the following:

Setting a default value
Store objects and functions
Add error handling if our function failes

To get our stored value, we will add a function to our useState Hook that checks if the item exists inside our localStorage. If not, we'll throw an exception with a try-catch block and return the initialValue so the state always stores our theme if localStorage failes.

We'll use JSON.parse() to transform an object to a string so we can also store objects.

...
export const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (err) {
      console.warn("Setting localStorage went wrong: ", err);
      return initialValue;
    }
  });
...
};

Awesome! 👍

To test this we can create use our hook to create a new storage item to store a name. Without setting it in localStorage yet, we can let useState store our name:

const [storedName, setUsername] = useLocalStorage("name", "Tim");
console.log(storedName); // Gives Tim without using localStorage

Finally, we'll add a try-catch block to our setValue function, add JSON.stringify() to transform our string back to an object and check if the stored value is a function:

...
const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };
...

Our complete Hook:

import { useState } from "react";

export const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (err) {
      console.error(err);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (err) {
      console.error(err);
    }
  };

  return [storedValue, setValue];
};

export default useLocalStorage;

That's it! We now have a custom hook that we can use anywhere in our application and store any variable we'll like.

Thanks for following this tutorial.

Make sure to follow me for more tips and tricks. 🤓

Simply explained: call(), apply() and bind()

sanderdebr — Sat, 06 Jun 2020 12:55:21 +0000

As an aspiring web developer you've must have come across either or all of these three methods: call(), apply(), and bind(). Always wanted to know how and when to use them? In this article I will show you how in a simply way!

RPG game

Let's say you are creating a RPG game and you have several functions that you want to use for every character:

// Basic actions as functions

function heal(amount) {
   // heal this character
}

function setLevel(level) {
   // sets level of this character
}

function mute() {
   // mute this character
}

Notice how I am using the this keyword in every function? This is because we want to apply the function for a specific character in the game.

RPG actions

Let's place our functions inside an object for easier use (another name for functions inside objects is methods) and return some logic:

// Basic actions as methods

const actions = {
   heal(amount) {
      return this.health += amount;
   },
   setLevel(level) {
      return this.level = level;
   },
   mute() {
      return this.sound = false;
   }
}

RPG characters

For our character let's create an object constructor that can produce characters:

// Object builder for characters

function Character (name, type, health) {
   this.name = name;
   this.type = type;
   this.health = health;
}

const Jessica = new Character("Jessica", "wizard", 10);
const Patrick = new Character("Patrick", "warrior", 10);

We've just created Jessica the wizard and Patrick the warrior!

Jessica is hurt

What if Jessica is wandering around and suddenly gets in a fight with one of the monsters in our RPG world? She will use a potion to heal herself with 20 points. So we have to use our heal() function with an amount of 20.

We've placed the heal function inside our object actions but now we want to call this function onto Jessica:

actions.heal.call(Jessica, 20);
console.log(Jessica) // She now has 30 HP instead of 10!

We have applied our function and Jessica, and she is back to live. That is basically all that call is: using a function directly on a receiver, in this case Jessica.

apply does the same thing, except you give parameters as an array:

// Add new method to our actions
actions.move = function(x, y, z) {
   return this.position = { x, y, z};
}

// Patrick's new location
const location = [2, 4, 6];

// Call new method on Patrick
actions.move.apply(Patrick, [...location]);

// Check where Patrick is now
console.log(Patrick.position); // { x: 2, y: 4, z: 6 }

Moving Patrick back to base

Let's say we want to move Patrick back into base camp with one command. Instead of writing our call or apply every time we can store this command with bind:

// Command to move Patrick back to base
const patrickToBase = actions.move.bind(Patrick, 0, 0, 0)

// Move Patrick back
patrickToBase();
console.log(Patrick.position); // { x: 0, y: 0, z: 0 }

So as we have seen call(), apply() and bind() are useful for borrowing methods (functions inside objects) to whatever object or primitive we want based on the value of the this keyword.

Awesome! Hope you have a better understanding of these 3 useful methods.

Mastering the JavaScript Reduce method ✂️

sanderdebr — Fri, 15 May 2020 12:05:33 +0000

JavaScript roughly has 30 built-in methods for manipulating arrays. Chances are that you are probably using map(), filter() or e.g. forEach() quite often. But how often do you use the reduce() method?

The reduce method is, in my opinion, the most powerful array method of JavaScript. For me it was unclear how this method exactly works for quite some time so in this article we will reveal the power of the reduce method! 😄

The basis

The reduce method always returns a single value, which is in contrast to map() and filter() which return a new array with one or more values.

It takes four arguments, but most of the time you'll only need the first two.

accumulator (often called acc)
current value (often called cur)
current index
source array

Let's say we have a list of scores and we want to display the sum of all scores. We could create a for-loop and count them in a new variable called total:

const scores = [23,63,23,35];
let total = 0;
for (i = 0; i < scores.length; i++) {
  total += scores[i];
}
console.log(total); // 144

Reduce makes this much easier. We give it a reducer function, that applies some action on every item in the given array, and an initial value from where we want to start (in this case 0).

const scores = [23,63,23,35];
const reducer = (acc, cur) => acc + cur;
const total = scores.reduce(reducer, 0);
console.log(total); // 144

We can refactor this to:

const scores = [23,63,23,35];
const total = scores.reduce((acc, cur) => acc + cur, 0);
console.log(total); // 144

Awesome! Let's continue.

Flattening an array

Let's say we have an array with multiple arrays inside:

let arrays = [[1, 2, 3], [4, 5], [6]];

and we want to convert this into one single array. How can we do this with reduce? We need to link together a.k.a. concatenate every array together, so we'll use concat() on every item and we'll set our initial value as an array:

const flatten = arrays => arrays.reduce((acc, curr) => acc.concat(curr), []);
flatten(arrays); // [1, 2, 3, 4, 5, 6]

Yay! Let's do another one. 😃

Splitting values of two given arrays into two groups

Let's say we receive two arrays: one with a list of numbers and one with a list of true/false values and we want to filter the first list of numbers based on their true/false value.

[1, 2, 3, 4], [true, true, false, true];

Another thing we can do easily with reduce! For our initial value, we'll set an array containing two empty arrays. We will apply the reduce method on the numbers array.

const splitTrueFalse = (arr, filter) => arr.reduce((acc, cur) => ... ,[[],[]]);

Remember the reduce method takes a third argument, the index? We will use the index to determine if the values is true or false based on the second array.

We'll push the current number in the the first array if its value in the filter array is true by checking filter[i] ? 1 : 0. We'll return our acc array so we can keep push values to it.

const splitTrueFalse = (arr, filter) => arr.reduce((acc, cur, i) => {
  acc[filter[i] ? 1 : 0].push(cur);
  return acc;
} ,[[],[]]);

We can refactor our code by returning acc in one line:

 const splitTrueFalse = (arr, filter) => arr.reduce((acc, cur, i) => (acc[filter[i] ? 0 : 1].push(cur), acc), [[], []]);

Cool! Let's make it a bit more difficult. 😎

Creating an object from given key-value pairs.

In this example we'll receive an array containing multiple arrays, each with a key-value pair.

const pairs = [['name', 'Sander'], ['age', 26], ['likes', 12]];

With reduce we can easily convert this to an object. First we'll set our initial value as an object, which we will fill it with every iteration.

const arrToObject = arr => arr.reduce((acc, cur) => ... , {});

Next up we'll have to convert each array to a key-value pair inside our object.
The key we can get by grabbing the first value inside our array: cur[0]
By using bracket notation we can set our key to a string value: acc[cur[0]].

The value we'll get by grabbing the second item in the current array: cur[1].
As in the example before, we return our acc accumulated value every time so we can build upon our object.

const arrToObject = arr => arr.reduce((acc, cur) => (acc[cur[0]] = cur[1], acc) , {});

Hope you have a better understanding of the awesome reduce method!

Make sure to follow me for more tips and tricks. 🧠

Symmetric Difference between two arrays in Vanilla JavaScript 🥓

sanderdebr — Sun, 03 May 2020 15:19:08 +0000

If you want to find the elements belonging to one but not both of two given sets, you are looking for the .. symmetric difference!

In this tutorial we will build a function that calculates the symmetric difference between two given arrays, after applying a provided function to each item in both arrays.

You will learn about:

Set objects (ES6 set of unique item)
map() and filter() methods to loop through arrays.

Let's say we have two arrays containing decimals numbers and we want to check if there are values which are not in both arrays after rounding them off downwards:

getSymmetricDifference([2.66, 3.44, 7.123], [2.44, 2.67, 6.48], Math.floor);

The first thing we want to do is place our arrays inside Sets. The Set object lets us store values of any type, whether primitive values (data that is not an object) or object references. A value in a set may only occur once, which is useful for us.

We could just put our array inside the Set() parameters but we want to apply the given function on each item. So we'll use the map method to create a new array populated with the results of calling the function on each item:

const getSymmetricDifference = (a, b, fn) => {
  const setA = new Set(a.map(item => fn(item)));
  const setB = new Set(b.map(item => fn(item)));
}

Our variables setA and setB are now containing only the unique, rounded off values of our given arrays.

Next up we want to filter out any values that exists on both arrays. To do this we'll run the filter() method on array A with the question if any item exists on set B and do the same for array B with set A.

This question will be answered with the has() method of Set that returns a boolean if this item exists inside the set. Using the ! (bang operator) we only include the false values.

...
const aFiltered = a.filter(item => !setB.has(fn(item)));
const aFiltered = b.filter(item => !setA.has(fn(item)));
...

Great! The only thing we have to do now is return an array containing both our aFiltered and bFiltered arrays. We can do this easily with the spread operator:

...
return [...aFiltered, ...bFiltered]
...

Then we'll refactor our code a bit to make it cleaner by putting our variables on one line and directly returning the combined array:

const getSymmetricDifference = (a, b, fn) => {
  const setA = new Set(a.map(item => fn(item))), setB = new Set(b.map(item => fn(item)));
  return [...a.filter(item => !setB.has(fn(item))), ...b.filter(item => !setA.has(fn(item)))]
};

That's it! We learned about the Set object, map() and filter() methods and other stuff of JavaScript. Have fun building things!

Make sure to follow me for more tutorials. 🧠

Deep Equality checking of Objects in Vanilla JavaScript 👨‍👦

sanderdebr — Tue, 28 Apr 2020 13:27:47 +0000

Did you ever found yourself in a situation where you needed to compare two objects to each other with JavaScript? Perhaps you then found out that JavaScript does not offer a native solution for this issue. In this tutorial we will build own implementation for this!

You will learn something about:

Pass by value vs pass by reference
Object.keys() method
Creating a recursive function

You could grab the Lodash library and use their .isEqual method to do a deep quality check of two objects but it is good practise to create solutions ourselves to practise vanilla JavaScript.

Let's say we have the following objects:

const obj1 = { name: 'Peter', stats: { points: 45, isActive: false }};
const obj2 = { name: 'Peter', stats: { points: 45, isActive: false }};

console.log(obj1 === obj2) // returns false

These two objects are exactly the same, still JavaScript returns false. Why?

This is because in JavaScript Primitives like strings and numbers are compared by their value. Objects on the other hand are compared by reference.

JavaScript assigns each object you create to its own place in memory. So even if you're objects have exactly the same content, their reference (place in memory) is different!

Let's start creating our function. We will set up a function called compareObjects that takes in two arguments. First we'll check if the two arguments are of the same type and contain the same value.

const compareObjects = (a, b) => a === b ? true : false;

const obj1 = { name: 'Peter', stats: { points: 45, isActive: false }};

compareObjects(obj1, obj1) // returns true

Next up we'll add the check if the two arguments are actually of the type object and also are not null values. We want to avoid type conversion so we'll use != instead of !==:

const compareObjects = (a, b) => {
 if (a === b) return true;

 if (typeof a != 'object' || typeof b != 'object' || typeof a == null || typeof b == null) return false;
}

Then we'll check the length of the object keys of both objects. If they are not of the same length, we are sure the object are not the same.

...
let keysA = Object.keys(a), keysB = Object.keys(b);
 if (keysA.length != keysB.length) return false;
...

Next up we'll loop over the keys of the keysA array with an for of loop. Use for of for arrays and for in for objects.

Inside this loop, we'll check if every key exists inside the keysB array. Next to that, we'll compare the values of every key by passing them back into our compareObjects function, making our function recursive (calling itself).

As soon as one of our keys of values is not the same, it will stop the loop and the function and return false.

...
for (let key of keysA) {
    if (!keysB.includes(key) || !compareObjects(a[key], b[key])) return false;
}
...

We also want to check if the methods are the same, we will do this by converting the function to a string on comparing the two values:

...
if (typeof a[key] === 'function' || typeof b[key] === 'function') {
   if (a[key].toString() != b[key].toString()) return false;
}
...

If the loop checked every key and passed every nested value back into its own function and none returned false, there is only one thing left to do: return true!

The complete function:

const compareObjects = (a, b) => {
 if (a === b) return true;

 if (typeof a != 'object' || typeof b != 'object' || a == null || b == null) return false;

 let keysA = Object.keys(a), keysB = Object.keys(b);

 if (keysA.length != keysB.length) return false;

 for (let key of keysA) {
   if (!keysB.includes(key)) return false;

   if (typeof a[key] === 'function' || typeof b[key] === 'function') {
     if (a[key].toString() != b[key].toString()) return false;
   } else {
     if (!compareObjects(a[key], b[key])) return false;
   }
 }

 return true;
}

Thanks for following this tutorial, make sure to follow me for more! 🧠

Please see the book Eloquent JavaScript for further reference.

I've Built an UX Skeleton Generator! ☠️🖍️

sanderdebr — Fri, 17 Apr 2020 15:14:51 +0000

Hi all! In my last post someone asked if there is a website that just generates a skeleton screen for you. I couldn't find one and this seemed to me like an awesome project to build! So I build one.

Check it out:
➡️ https://sanderdebr.github.io/skeleton-generator ⬅️

I decided to build a drawing tool that generates the CSS code for you, as well as an image of your skeleton (using html2canvas). I've used vanilla JS for this project to improve my JS skills. For the CSS I've used tailwind.

Functionalities:

Adding and removing blocks or circles
Changing the color of the elements
Changing the grid size
Dragging and resizing elements
Resizing the whole canvas
Generating an example HTML/CSS page with your skeleton

I started out with using the HTML5 canvas element, but I found out it is way easier to handle regular div nodes than to use the canvas for e.g. dragging and resizing multiple elements.

Things I would like to add:

Shiny gradient effect
Saving your skeleton in localStorage (object that holds all current elements is already there)
Smoother dragging and resizing
No loss of elements when changing the grid size

Pleas be aware that this app is a prototype and there are bugs in it, I've also did not use any bundler (for fast development reasons) so the code does not work in older browsers or Edge currently.

I hope this if of use to someone. Please let me know any feedback so we can make this tool better 😄

Repository can be found here.

Crafting Silky Smooth Transitions in React 🌊

sanderdebr — Sun, 12 Apr 2020 07:26:46 +0000

Noticed how some React apps have very smooth transitioning between their pages or views? These animations can improve the user experience tremendously.

In this tutorial I will show you how do this by using the React Transition Group, which used to be integrated in React but now has been moved to the react-transition-group package. It's is a very popular package for managing component states (including mounting and unmounting) over time, especially with animation in mind.

Combined with styled components and CSS animations we will make some awesome transitions! 😄

1. Setup

Let's start with creating a basic app that shows the user alerts on click of a button:

The notifications come and go, but it does not look so great without some effect. We can create an animation with CSS or JavaScript to e.g. fade them in and out but we want full control of our component state. What if you have a component that is loading asynchronous in the background and you're not sure when it has mounted? Let's continue.

Our App component holds the state of notifications with the useState hook. As default we set an empty array. By using styled-components we can add a globalStyle for our app. With the addNotification() function the button is able to add an notification object to the array. Then we map over the notifications to show them.

Note that inside our notification component, the background color is decided based on the props of the notification with styled components. As well as the margin top which is based on the amount of notifications there are, awesome! 👾

Next up we will make sure the notifications disappear after some time. We will handle this side effect inside the useEffect() hook. In here we'll set a time out function that slices the last element of our notifications array. We'll set the dependency to our notifications array so that it only fires when that changes.

Make sure to remove the timeout when the component unmounts, you can do this by adding a function on return of the useEffect() hook.

2. Transitioning

Let's improve the entering and exiting of our notifications with the react-transition-group package. First add the package with npm or yarn.

By wrapping out notification inside the transition component, we can modify it's properties based on the state of the transition:

entering
entered
exiting
exited

To add the transitions we need to wrap our notification component inside the transition component and give it an in property to decide the state and a timeout property to decide the length of the animation.

import { Transition } from "react-transition-group";

const MyNotification = ({ msg, visible, ...otherProps }) => {
  return (
    <Transition in={visible} timeout={3000}>
      {status => {
        return (
          <Notification status={status} {...otherProps}>
            {msg}
          </Notification>
        );
      }}
    </Transition>
  );
};

Now we can activate CSS animations based on the visibility status of the component. We also have to change the margin-top props for our notification component, as we need to count the amount of visible notifications instead of all notifications. We'll keep track of this in the useEffect hook which updated every time our notifications array gets updated.

  const [visibleNotifications, setVisibleNotifications] = useState([]);

  useEffect(() => {
    // Amount of visible notifications
    const visibleNotifications = notifications.filter(
      notification => notification.visible === true
    ).length;
    setVisibleNotifications(visibleNotifications);
  }, [notifications]);

const fadeIn = () => keyframes`
  0% { opacity: 0; }
  100% { opacity: 1 }
`;

const fadeOut = () => keyframes`
  0% { opacity: 1; }
  100% { opacity: 0 }
`;

const Notification = styled.div`
  position: absolute;
  border-radius: 7px;
  background: white;
  padding: 1rem;
  right: 1rem;
  top: ${props => `${props.visibleNotifications * 4 + 1}rem`};
  background-color: ${props =>
    props.type === "success" ? "#48bb78" : "#c53030"};
  opacity: 0;

  ${props =>
    props.status === "entered" &&
    css`
      animation: 1s linear forwards ${fadeIn};
    `}

  ${props =>
    props.status === "exiting" &&
    css`
      animation: 1s linear forwards ${fadeOut};
    `}
`;

Notice how we are changing the CSS animation based of the props status 👏

We then have to move our setTimeOut function outside of the useEffect() hook, inside the addNotification() function to avoid firing off every time our notifications state object gets changed. Also we'll give our notification the ID property so that we can refer back to it when changing the visibility.

Then let's update the notification array by changing the visible property to false after 3 seconds. We do not want to modify the state array directly because of immutability.

To do this, we will make a copy of the previous state which we receive from the useState() hook, update our notification by finding the right ID, and putting it back into our copied state. Then we'll update the state with our newly created state!

// Setting the visibility to 0 after x seconds
    setTimeout(() => {
      setNotifications(prevState => {
        // Copying the previous state
        let newState = [...prevState];
        // Updating our notification
        const target = { ...prevState[notifications.length], visible: false };
        // Putting updated notification back in copied state array
        newState[notifications.length] = target;
        // Updating our state with our new state!
        return newState;
      });
    }, 3000);

Make sure to set the timeOut duration the same as the duration of the transition timOut inside the notification component.

That's it, our notifications are coming in way smoother, awesome!

Checkout the full code:

Next steps could be:

Setting ID with uuid() package instead
Removing notifications from the array instead of setting the visiblity to 0
Crazier CSS animations

Make sure to follow me for more tricks! 🧠

DEV Community: sanderdebr

JS ES6 Design Patterns: Factory

🔨 Simple factory

🏭 Factory method

Abstract factory

⚗️ React Redux CRUD app for beginners [with Hooks]

Contents

Redux vs React Context API & useReducer

Benefits of Redux

🔨 1. Setup

👪 2. Loading users from state

➕ 3. Adding a new user

🔧 4. Editing a user

🗑️ 5. Deleting a user

✨ 6. Loading new users asynchronously

Flawless React State Management: useReducer and Context API

✨ Introduction

🎯 Goals

📺 What we’ll make

🔨 Setting up the application

Adding list of users

💡 Adding Context API

Adding useReducer

Creating the theme toggle

Loading users from an API

Persisting our state

Free HTML5 CSS3 Landing Page Template 2021 🚀

Techniques

Build a Simple JavaScript App the MVC Way 🕹️

Prerequisites

What is MVC?

General rules

1. Project setup

2. Setting up controllers

3. Creating the Search view

4. Creating the Search model

5. Displaying the result

6. Adding and handling collection

HowTo: Custom React localStorage Hook ⚓

What is a custom hook?

Local Storage

Improving our Hook

Simply explained: call(), apply() and bind()

RPG game

RPG actions

RPG characters

Jessica is hurt

Moving Patrick back to base

Mastering the JavaScript Reduce method ✂️

The basis

Flattening an array

Splitting values of two given arrays into two groups

Creating an object from given key-value pairs.

Symmetric Difference between two arrays in Vanilla JavaScript 🥓

Deep Equality checking of Objects in Vanilla JavaScript 👨‍👦

I've Built an UX Skeleton Generator! ☠️🖍️

Crafting Silky Smooth Transitions in React 🌊

1. Setup

2. Transitioning