How to Implement Push Notifications using Strapi and Web Push

The importance of notifications in mobile and web applications cannot be over-emphasized as they are an important and integral part of any modern application. Users want to get updated when events or activities happen so they don't miss them.

Goal

Throughout this tutorial, we will be looking at how we can achieve push notifications in our React app with the aid of Strapi, Cron Jobs, and Rest API.

Prerequisites

To get the most out of this tutorial, you need the following:

• Basic knowledge of React.js
• NPM installed
• Node 14 or higher
• Tailwind CSS
• Axios
• Strapi v4

Using Router V6

The importance of routers in software applications cannot be over-emphasized as they are essential to how movements and data are passed from one screen or component to another.

Routers in React as a library have evolved over time; it has gotten even better with the new version of React Router v6, which is a groundbreaking update from the popular React Router v5.

React Router 6 vs React Router 5

• React Router v6 has a smaller bundle size compared to v5.
• There is no need for the “exact” prop parameter in Router v6 as in v5.
• UseHistory hook in React v5 has been replaced with useNavigate hook with more added functionalities.
• Redirect component in React v5 has been replaced with Navigate component in v6.
• ActiveStyle and ActiveClassName in React v5 have been removed from the NavLink component.
• Replacement of Switch component in React v5 with Routes component.
• See more features of React v6 in the documentation

Strapi Setup

To set up Strapi for your project, you need to run the following commands:

   npx create-strapi-app@latest push-notification --quickstart

After running the command above, dependencies get installed and our browser starts up, redirecting us to a login screen to create an admin account. Input the necessary credentials to create an admin account.

After creating an admin account, you will be directed to your dashboard, where you can set up Strapi for the asset management application.

On our admin dashboard, on the left, under plugins, click on Content-Type Builder to easily create a new collection type.

We will be creating two collection types called Assets and Logs. To achieve this, we will follow the steps below.

• After clicking the text button Create a new collection type, in the display name, we will name it Asset, the other fields will automatically fill up themselves unless you want to give them a different name.
• Afterwards, click on the continue button below to add the necessary fields.

Assets Collection

• name: This field will contain our assets' names.
• description: This will hold a description of the assets.
• model_number: Each asset will have a model number.
• category: Each asset will have a category, either perishable or non-perishable``.
• is_available: In this field, after creating the name, we will click on the advanced settings at the top of the dialog and make the default value of the is_available field true.
• validity_period: This field will hold how long the assets will stay.
• is_expired: This field will be set to “false” on default, and it will tell whether the asset has expired or not.

Log Collection

• collected_at: This field will hold details of when the assets were collected or uploaded.
• returned_at: This field will be set to null on default until an asset has been returned.

Notification Collection

• message: This text field will contain the body of the notification message.
• type: This field will show if the message is a log message, asset, or user.
• Metadata: This field is a json field that holds any extra data or provides more information about the notification.

Creating a Relationship Between the Assets and Logs

On the main navigation bar, click on the content-Type builder. For our two collections, Log and Assets, we add one more field to them of type Relational so we can relate our Log to many users. We will do the same for our Assets, but we will relate it to our Log collection.

Click on Add new field to this collection type and this field type is Relational .

Setting up Roles and Permissions

After creating this content, we need to make sure that our API is allowed to perform certain actions on the system. To do this,

• Click on the settings in the General category on the main navigation pane.
• Next, under *Users & Permissions Plugin*, click on Roles.
• Then, click on authenticated and all our collections will show up.
• Select on the Assets collection.
• Click on the dropdown button and check the following permissions: create, find and findOne.
• Next, select l**og collections under permissions and check the following permissions to create, find, update and findOne.
• Next, choose the Upload plugin under Roles and check all the permissions.

Note: Hit the save button in the top right corner of your screen to save your changes.

Setting up Push Notifications for the Application

Hurray! We made it to the push notification feature; let’s dive right in. We will be creating new collections called Notification and UserNotificationKey.

Notification Collection This collection will hold two(2) fields, namely:

1. Message: This field will contain the body of our notification with the type of text.
2. Metadata: This field is to hold more information about our notification and its type will be json.

UserNotificationKey

The collection will hold two fields:

a. Users_permissions_user: This field will carry a type Relation and will be related with Users default collection as shown in the image below.

b. subscription: This field will have a type json.

Dependencies for our Frontend

We will need the following dependencies to aid in building our frontend.

• React App with PWA Functions as we will be using service workers in this application. To install a pw react app, use the following commands:

  npx create-react-app my-app --template cra-template-pwa on your terminal.

• Axios - To make HTTP requests. To install this dependency, use the following command:

yarn add axios (if you use yarn as your package manager) or npm install axios (if you use npm as your package manager).

• TailwindCSS: A CSS library. To add TailwindCSS to your React app, follow the official documentation here.

• ReactRouterDOM (React Router v6): For handling routing on the app. To install this, use the following command:

yarn add react-router-dom (if you use yarn as your package manager) or npm install react-router-dom (if you use npm as your package manager).

Building the UI

This is what our front-end should look like once we are done with this tutorial.

As stated earlier, we will be using TailwindCSS majorly to style this application. We will also add some generic styles for a little more customisation. The generic styles are present in our index.css file.

Implementing Top Navigation

1    import React from 'react';
2    import { Link } from 'react-router-dom'
3    const Navbar = () => {
4      return (
5        <nav className="md:flex items-center justify-between p-6 md:p-12">
6          <div className="md:w-10/12">
7            <h3>ASSETS MANAGER</h3>
8          </div>
9          <div className="md:w-2/12 flex items-center justify-end md:w-4/12 -mx-4">
10            <div className="inline-block px-4">
11              <Link to="/">HOME</Link>
12            </div>
13            <div className="inline-block px-4">
14              <Link to="/assets">GUIDE</Link>
15            </div>
16            <div className="inline-block px-4">
17              <Link to="/">CONTACT</Link>
18            </div>
19          </div>
20        </nav>
21      );
22    };
23    export default Navbar;

Our Pages

For this project, we will be having four pages

• Asset Page
• Index Page: This page shows the list of assets and links to the Create Assets and Edit Assets pages and buttons for deleting a specific asset.
• Login Page: To enable authentication for already signed-up users on the app.
• Signup Page: To enable authentication for new users on the app.

Managing States in our Assets Application

Let’s dive into some preliminary procedures for managing states in our app. In this section, we will be making HTTP requests to Strapi to signup a new user on the app. The code block MainContext.js below shows how we will handle requests and states on the app.

1    import React, { createContext } from 'react';
2    import axios from 'axios';
3    axios.defaults.baseURL = "http://localhost:1337/api";
4    
5    const initialState = () => ({
6        user: localStorage.getItem("strapi")
7        ? JSON.parse(localStorage.getItem("strapi")).user
8        : null,
9        token: localStorage.getItem("strapi")
10        ? JSON.parse(localStorage.getItem("strapi")).token
11        : null,
12        assets:{
13          allAssets: null,
14          asset: null,
15        }
16      })
17    // create context
18    export const generalContext = createContext({})
19    export const StateAndEndpointHOC = (props) => {
20      const [state, setState] = React.useState(initialState);
21      let config = {
22        headers: {
23          'authorization': "Bearer " +state.token || null
24        }
25      }
26      const endpoints = {
27        login: async(params, callback)=> {
28          try{
29            const res = await axios.post('/auth/local', params)
30            console.log('endpoint result--login', res)
31            if(callback && typeof callback === 'function'){
32              callback(res, null)
33            }
34            console.log(res.data.user);
35            setState(() => ({...state, token: res?.data?.jwt, user: res.data.user }))
36            localStorage.setItem('strapi', JSON.stringify({
37              token: res?.data?.jwt,
38              user: res?.data?.user
39            }))
40            return res
41          }catch(err){
42            console.log(err.response.data.error.message)
43            if(callback && typeof callback === 'function'){
44              callback(null, err)
45            }
46            throw new Error(err)
47          }
48        },
49    
50        signup: async(params, callback)=>{
51          try{
52            const res = await axios.post('/auth/local/register', params)
53            console.log('endpoint result--signup', res)
54            if(callback && typeof callback === 'function'){
55              callback(res, null)
56            }
57            setState(() => ({...state, token: res?.data?.jwt, user: res?.data?.user}))
58            localStorage.setItem('strapi', JSON.stringify({
59              token: res?.data?.jwt,
60              user: res?.data?.user
61            }))
62            return res
63          }catch(err){
64            if(callback && typeof callback === 'function'){
65              callback(null, err)
66            }
67            throw new Error(err)
68          }
69        },
70    
71        getAssets: async(callback)=>{
72          try{
73            const res = await axios.get('/assets', config)
74            console.log('endpoint result--get', res)
75            if(callback && typeof callback === 'function'){
76              callback(res, null)
77            }
78            setState(() => ({ ...state, assets:{...state.assets, allAssets: res?.data?.data} }))
79            return res
80          }catch(err){
81            if(callback && typeof callback === 'function'){
82              callback(null, err)
83            }
84            throw new Error(err)
85          }
86        },
87    
88        getSingleAsset: async(id, callback)=>{
89          try{
90            const res = await axios.get(`/assets/${id}`, config)
91            console.log('endpoint result--get single asset', res?.data?.data)
92            setState(()=> ({...state, assets:{...state.assets, asset: res?.data?.data} }))
93            if(callback && typeof callback === 'function'){
94              callback(res, null)
95            }
96            return res
97          }catch(err){
98            if(callback && typeof callback === 'function'){
99              callback(null, err)
100            }
101            throw new Error(err)
102          }
103        },
104    
105        deleteSingleAsset: async(id, callback)=>{
106          try{
107            const res = await axios.delete(`/assets/${id}`, config)
108            console.log('endpoint result--get', res)
109            if(callback && typeof callback === 'function'){
110              callback(res, null)
111            }
112            return res
113          }catch(err){
114            if(callback && typeof callback === 'function'){
115              callback(null, err)
116            }
117            throw new Error(err)
118          }
119        },
120    
121        createAssets: async(data, callback)=>{
122          try{
123            const res = await axios.post('/assets',{ data }, config)
124            console.log('endpoint result--create', res)
125            if(callback && typeof callback === 'function'){
126              callback(res, null)
127            }
128            return res
129          }catch(err){
130            if(callback && typeof callback === 'function'){
131              callback(null, err)
132            }
133            throw new Error(err)
134          }
135        },
136    
137        editAssets: async(data, callback)=>{
138          try{
139            const res = await axios.put('/assets', { data }, config)
140            console.log('endpoint result--edit', res)
141            if(callback && typeof callback === 'function'){
142              callback(res, null)
143            }
144            return res
145          }catch(err){
146            if(callback && typeof callback === 'function'){
147              callback(null, err)
148            }
149            throw new Error(err)
150          }
151        },
152    
153        logout: ()=>{
154          localStorage.removeItem('strapi')
155          setState({...initialState})
156        }
157      }
158      const allProps = {...state, setState, endpoints }
159      
160      return <><props.app {...allProps } /></>
161    };

Entry Point

1    import React from 'react';
2    import AllRoutes from './components/Routes/AllRoutes';
3    import { BrowserRouter } from "react-router-dom";
4    import { generalContext, StateAndEndpointHOC } from './contexts/MainContext';
5    function App(props) {
6      const value = React.useMemo(() => props, [props]);
7      return (
8        <div className="App">
9          <BrowserRouter>
10            <generalContext.Provider value={value}>
11              <AllRoutes />
12            </generalContext.Provider>
13          </BrowserRouter>
14        </div>
15      );
16    }
17    // eslint-disable-next-line import/no-anonymous-default-export
18    export default () => <StateAndEndpointHOC app={App} />;

The above code in our app.js is where we pass the state manager as a prop to our context provider, which will supply states to all components of our application.

Handling Authentication

To Sign in as a User

1    import React, { useState, useContext } from 'react';
2    import { Link, Navigate } from 'react-router-dom';
3    import { generalContext } from '../contexts/MainContext';
4    import { subscribeUser } from '../subscription'
5    const Signup = () => {
6      const StateManager = useContext(generalContext)
7      const [loading, setloading] = useState(false);
8      const [error, setError] = useState(null)
9      const [state, setstate] = useState({
10        email: null,
11        username: null,
12        password: null,
13      });
14      const handleChange = (e) => {
15        setstate({ ...state, [e.target.name]: e.target.value });
16      };
17      const handleSubmit = (e) => {
18        e.preventDefault();
19        setloading(true);
20        !StateManager?.token && StateManager?.endpoints.signup(state, (success, error) => {
21          if(error){
22            setError(error.response.data.error.message);
23            return alert(error.response.data.error.message);
24          }
25          if(success){
26            setError(null)
27            subscribeUser(success.data)
28            StateManager.endpoints.getAssets()
29            return;
30          }
31          setloading(false);
32        })
33      };
34      if (StateManager?.token) {
35        console.log('token-login', StateManager?.token)
36        return <Navigate to="/assets" />;
37      }
38      return (
39        <div>
40          <div className="flex h-screen items-center justify-center">
41            <div className="md:w-6/12">
42              <form className="px-6 py-10" onSubmit={handleSubmit}>
43                <h6 color={"#112E46"} className="mb-8 text-center" fontWeight="700">
44                  Signup
45                </h6>
46                <div className="w-full mb-6">
47                  <input
48                    className="inline-block w-full p-6 c-black"
49                    placeholder="Email address"
50                    type="text"
51                    name="email"
52                    onChange={handleChange}
53                    value={state.email}
54                    required
55                  />
56                </div>
57                <div className="w-full mb-6">
58                  <input
59                    className="inline-block w-full p-6 c-black"
60                    placeholder="Username"
61                    type="text"
62                    name="username"
63                    onChange={handleChange}
64                    value={state.username}
65                    required
66                  />
67                </div>
68                <div className="w-full mb-2">
69                  <input
70                    className="inline-block w-full p-6 c-black"
71                    placeholder="password"
72                    type="password"
73                    name="password"
74                    onChange={handleChange}
75                    value={state.password}
76                    required
77                  />
78                </div>
79                <p
80                  className="mt-10 text-center"
81                >
82                  <Link to="/forgotPassword">Forgot password?</Link>
83                </p>
84                <div className="w-full flex items-center justify-center pt-10">
85                  <button
86                    className="inline-block w-auto border px-4 py-4"
87                    onClick={handleSubmit}
88                  >
89                    {loading ? 'loading...': 'Signup'}
90                  </button>
91                </div>
92                {error ? (
93                  <p
94                    style={{color: "red"}}
95                    className="mt-5 text-center"
96                  >
97                    {error}
98                  </p>
99                 ) : null}
100    
101                <p
102                  className="mt-16 text-center"
103                >
104                  to Login,  click {"      "}
105                  <Link to="/">here</Link>
106                </p>
107              </form>
108            </div>
109          </div>
110        </div>
111      );
112    };
113    export default Signup;

For the above component, we are basically extracting the state manager using the useContext hook and making a HTTP request to Strapi to sign up a new user on our app. The return of the user’s information and JWT token signifies that the user has signed up to our app.

To Log in as a User

1    import React, { useState, useContext } from 'react';
2    import { Link, Navigate } from 'react-router-dom';
3    import { generalContext } from '../contexts/MainContext';
4    import { subscribeUser } from '../subscription'
5    const Login = () => {
6      const StateManager = useContext(generalContext)
7      const [loading, setloading] = useState(false);
8      const [error, setError] = useState(null)
9      const [state, setstate] = useState({
10        identifier: "",
11        password: "",
12      });
13      const handleChange = (e) => {
14        setstate({ ...state, [e.target.name]: e.target.value });
15      };
16      const handleSubmit = (e) => {
17        e.preventDefault();
18        setloading(true);
19        !StateManager?.token && StateManager?.endpoints.login(state, async(success, error)=>{
20          if(error){
21            setError(error.response.data.error.message);
22            return alert(error.response.data.error.message);
23          }
24          if(success){
25            setError(null)
26            subscribeUser(success.data)
27            StateManager.endpoints.getAssets()
28            return;
29          }
30          setloading(false);
31        })
32      };
33      if (StateManager?.token) {
34        console.log('token-login', StateManager?.token)
35        return <Navigate to="/assets" />;
36      }
37      return (
38        <div>
39          <div className="flex h-screen items-center justify-center">
40            <div className="md:w-6/12">
41              <form className="px-6 py-10" onSubmit={handleSubmit}>
42                <h6 color={"#112E46"} className="mb-8 text-center" fontWeight="700">
43                  Login
44                </h6>
45                <div className="w-full mb-6">
46                  <input
47                    className="inline-block w-full p-6 c-black"
48                    placeholder="Email address"
49                    type="text"
50                    name="identifier"
51                    onChange={handleChange}
52                    value={state.email}
53                    required
54                  />
55                </div>
56                <div className="w-full mb-2">
57                  <input
58                    className="inline-block w-full p-6 c-black"
59                    placeholder="password"
60                    type="password"
61                    name="password"
62                    onChange={handleChange}
63                    value={state.password}
64                    required
65                  />
66                </div>
67                <p
68                  className="mt-10 text-center"
69                >
70                  <Link to="/forgotPassword">Forgot password?</Link>
71                </p>
72                <div className="w-full flex items-center justify-center pt-10">
73                  <button
74                    className="inline-block w-auto border px-4 py-4"
75                    onClick={handleSubmit}
76                  >
77                    {loading ? 'loading...': 'Login'}
78                  </button>
79                </div>
80                {error ? (
81                  <p
82                    style={{color: "red"}}
83                    className="mt-5 text-center"
84                  >
85                    {error}
86                  </p>
87                 ) : null}
88    
89                <p
90                  className="mt-16 text-center"
91                >
92                  to Signup,  click {" "}
93                  <Link to="/signup">here</Link>
94                </p>
95                
96              </form>
97            </div>
98          </div>
99        </div>
100      );
101    };
102    export default Login;

For the above component, we are basically extracting the state manager using the useContext hook and making an HTTP request to Strapi to login as an already-signed up user on our app. The return of the user’s information and JWT token signifies that the user has logged in on our assets manager app.

Assets Page

1    import React, { useContext, useEffect } from 'react';
2    import { Link } from 'react-router-dom';
3    import AssetsCard from '../../components/assets/AssetsCard';
4    import { generalContext } from '../../contexts/MainContext';
5    const AssetsPage = (props) => {
6      const StateManager = useContext(generalContext);
7      useEffect(()=>{
8        StateManager.endpoints.getAssets()
9      }, [])
10      return (
11        <div>
12          <div className="p-4 md:px-8 md:py-0">
13            <div className="flex justify-center items-center md:block">
14              <div className="w-full flex items-center md:justify-end pb-10">
15                <Link to="/asset/+"
16                  className="inline-block w-auto border px-4 py-4"
17                >
18                  Create a new asset
19                </Link>
20              </div>
21              <div className="md:hidden pb-10">
22                <div className="px-4 py-4">
23                  <p>{StateManager?.user?.email}</p>
24                  <button onClick={StateManager.endpoints.logout} className="text-capitalize c-CA9140">LOGOUT </button>
25                </div>
26              </div>
27            </div>
28            
29            
30            <div className="mt-8 md:flex md:flex-wrap my-2 md:-my-4">
31              {
32                StateManager?.assets?.allAssets ? StateManager.assets.allAssets.map((curr, idx)=>{
33                  return (
34                    <div className="md:w-4/12" key={idx}>
35                      <div className="px-2 md:px-4 py-2 md:py-4">
36                        <AssetsCard data={curr} />
37                        {props.children}
38                      </div>
39                    </div>
40                  )
41                }):(
42                  <div className="md:w-3/12">
43                    <div className="px-2 md:px-4 py-2 md:py-4">
44                     <h1> NO Asset </h1>
45                    </div>
46                  </div>
47                )
48              }
49            </div>
50          </div>
51        </div>
52      );
53    };
54    export default AssetsPage;

From the component above, once a user is authenticated, he is redirected to the asset index page which lists or holds all the available assets and buttons to create, edit, or delete an asset. When hovering on the asset card, two buttons are displayed to delete and edit assets.

Creating an Asset

1    import React, { useState, useContext } from 'react';
2    import { Link, useLocation, useNavigate, Navigate } from 'react-router-dom';
3    import { generalContext } from '../../contexts/MainContext';
4    import { subscribeUser } from '../../subscription'
5    const CreateAssets = ({token}) => {
6      const StateManager = useContext(generalContext)
7      const location = useLocation();
8      let navigate = useNavigate();
9      const [loading, setloading] = useState(false);
10      const [error, setError] = useState(null)
11      const [state, setstate] = useState({
12        name: '',
13        description: '',
14        model_number: '', 
15        validity_period: '',
16        category: '',
17        is_available: false,  
18        logs: [],
19        is_expired: false,
20      });
21      const handleChange = (e) => {
22        switch (e.target.type) {
23          case "number":
24            setstate({ ...state, [e.target.name]: parseFloat(e.target.value) });
25            break;
26          case "checkbox":
27            setstate({ ...state, [e.target.name]: e.target.checked });
28            break;
29          default:
30            setstate({ ...state, [e.target.name]: e.target.value });
31        }
32      };
33      const handleSubmit = (e) => {
34        e.preventDefault();
35        setloading(true);
36        StateManager?.endpoints.createAssets(state, (success, error) => {
37          if(error){
38            setError(error.response.data.error.message);
39            alert(error.response.data.error.message);
40          }
41          if(success){
42            setError(null)
43            subscribeUser(success.data)
44            StateManager?.endpoints.getAssets()
45            navigate('/assets');
46          }
47          setloading(false);
48        })
49      };
50      return (
51        <div>
52          <div className="px-4 md:px-8">
53            <div className="md:w-10/12">
54            <form className="px-6 py-10 md:py-0" onSubmit={handleSubmit}>
55                <h6 color={"#112E46"} className="mb-8 " fontWeight="700">
56                  Create a new Asset
57                </h6>
58                <div className="w-full mb-6">
59                  <p>Asset Name</p>
60                  <input
61                    className="inline-block w-full p-6 c-black"
62                    placeholder="Asset name"
63                    type="text"
64                    name="name"
65                    onChange={handleChange}
66                    value={state.name}
67                    required
68                  />
69                </div>
70                <div className="w-full mb-6">
71                  <p>Asset description</p>
72                  <input
73                    className="inline-block w-full p-6 c-black"
74                    placeholder="Asset name"
75                    type="text"
76                    name="description"
77                    onChange={handleChange}
78                    value={state.description}
79                    required
80                  />
81                </div>
82                <div className="w-full mb-2">
83                  <p>Asset model number</p>
84                  <input
85                    className="inline-block w-full p-6 c-black"
86                    placeholder="Asset model number"
87                    type="text"
88                    name="model_number"
89                    onChange={handleChange}
90                    value={state.model_number}
91                    required
92                  />
93                </div>
94                <div className="w-full mb-2">
95                  <p>Asset validity period</p>
96                  <input
97                    className="inline-block w-full p-6 c-black"
98                    placeholder="Asset validity period"
99                    type="date"
100                    name="validity_period"
101                    onChange={handleChange}
102                    value={state.validity_period}
103                    required
104                  />
105                </div>
106                <div className="w-full mb-2">
107                  <p>Asset category</p>
108                  <select 
109                    value={state.category} 
110                    className="inline-block w-full p-6 c-black" 
111                    onChange={(e)=> setstate({...state, category: e.target.value})}
112                  >
113                    <option value="perishable">perishable</option>
114                    <option value="nonperishable">nonperishable</option>
115                  </select>
116                </div>
117                <div className="w-full mb-2">
118                  <p>is Asset available?</p>
119                  <input
120                    className="p-6 c-black"
121                    type="checkbox"
122                    name="is_available"
123                    onChange={handleChange}
124                    value={state.is_available}
125                    required
126                  />
127                </div>
128                <div className="w-full mb-2">
129                  <p>is Asset expired?</p>
130                  <input
131                    className="p-6 c-black"
132                    type="checkbox"
133                    name="is_expired"
134                    onChange={handleChange}
135                    value={state.is_expired}
136                    required
137                  />
138                </div>
139                {/* <div className="w-full mb-2">
140                  <p>logs</p>
141                  <input
142                    className="inline-block w-full p-6 c-black"
143                    placeholder="logs"
144                    type="text"
145                    name="logs"
146                    onChange={handleChange}
147                    value={state.logs}
148                    required
149                  />
150                </div> */}
151                <div className="w-full flex items-center justify-center py-10">
152                  <button
153                    className="inline-block w-auto border px-4 py-4"
154                    onClick={handleSubmit}
155                  >
156                    {loading ? 'loading...': 'edit asset'}
157                  </button>
158                </div>
159              </form>
160            </div>
161          </div>
162        </div>
163      );
164    };
165    export default CreateAssets;

Once a user is authenticated, they can create a new asset. This is done by the user inputting the necessary information as shown in the code above.

Editing Assets

1    import React, { useLayoutEffect, useEffect, useState, useContext, useCallback, useMemo } from 'react';
2    import { useParams, useNavigate, Navigate } from 'react-router-dom';
3    import { generalContext } from '../../contexts/MainContext';
4    import { subscribeUser } from '../../subscription'
5    const EditAssets = () => {
6      const StateManager = useContext(generalContext)
7      const { id } = useParams();
8      let navigate = useNavigate();
9      const [loading, setloading] = useState(false);
10      const [error, setError] = useState(null)
11      const [state, setstate] = useState({
12        name: null,
13        description: null,
14        model_number: null, 
15        validity_period: null,
16        category: null,
17        is_available: false,  
18        logs: [],
19        is_expired: false,
20      });
21      const handleChange = (e) => {
22        switch (e.target.type) {
23          case "number":
24            setstate({ ...state, [e.target.name]: parseFloat(e.target.value) });
25            break;
26          case "checkbox":
27            setstate({ ...state, [e.target.name]: e.target.checked });
28            break;
29          default:
30            setstate({ ...state, [e.target.name]: e.target.value });
31        }
32      };
33      const handleSubmit = (e) => {
34        e.preventDefault();
35        setloading(true);
36        StateManager?.endpoints.editAssets(state, (success, error) => {
37          if(error){
38            setError(error.response.data.error.message);
39            alert(error.response.data.error.message);
40          }
41          if(success){
42            setError(null)
43            subscribeUser(success.data)
44            StateManager?.endpoints.getSingleAsset(id)
45            StateManager?.endpoints.getAssets()
46            navigate('/assets');
47          }
48          setloading(false);
49        })
50      };
51    
52      const getAsset =  useCallback(()=>{
53        console.log('location', id)
54        setloading(true);
55        return StateManager?.endpoints.getSingleAsset(id, (success, error) => {
56          if(error){
57            setError(error.response.data.error.message);
58            alert(error.response.data.error.message);
59          }
60          if(success){
61            setError(null)
62            subscribeUser(success)
63            setstate(()=> ({
64              name: StateManager?.assets?.asset?.attributes?.name,
65              description: StateManager?.assets?.asset?.attributes?.description,
66              model_number: StateManager?.assets?.asset?.attributes?.model_number,  
67              validity_period: StateManager?.assets?.asset?.attributes?.validity_period,
68              category: StateManager?.assets?.asset?.attributes?.category,
69              is_available: StateManager?.assets?.asset?.attributes?.is_available,  
70              logs: [],
71              is_expired: StateManager?.assets?.asset?.attributes?.is_expired,
72            }))
73          }
74          setloading(false);
75        })
76      },[]);
77      
78     
79      useEffect(() => {
80        getAsset()
81      }, [StateManager.assets.asset, id])
82      return (
83        <div>
84          {!loading &&  StateManager?.assets?.asset ? (
85            <div className="px-4 md:px-8">
86              <div className="md:w-10/12">
87                <form className="px-6 py-10 md:py-0" onSubmit={handleSubmit}>
88                  <h6 color={"#112E46"} className="mb-8 " fontWeight="700">
89                    Edit an Asset
90                  </h6>
91                  <div className="w-full mb-6">
92                    <p>Asset Name</p>
93                    <input
94                      className="inline-block w-full p-6 c-black"
95                      placeholder="Asset name"
96                      type="text"
97                      name="name"
98                      onChange={handleChange}
99                      value={state.name}
100                      required
101                    />
102                  </div>
103                  <div className="w-full mb-6">
104                    <p>Asset description</p>
105                    <input
106                      className="inline-block w-full p-6 c-black"
107                      placeholder="Asset name"
108                      type="text"
109                      name="description"
110                      onChange={handleChange}
111                      value={state.description}
112                      required
113                    />
114                  </div>
115                  <div className="w-full mb-2">
116                    <p>Asset model number</p>
117                    <input
118                      className="inline-block w-full p-6 c-black"
119                      placeholder="Asset model number"
120                      type="text"
121                      name="model_number"
122                      onChange={handleChange}
123                      value={state.model_number}
124                      required
125                    />
126                  </div>
127                  <div className="w-full mb-2">
128                    <p>Asset validity period</p>
129                    <input
130                      className="inline-block w-full p-6 c-black"
131                      placeholder="Asset validity period"
132                      type="date"
133                      name="validity_period"
134                      onChange={handleChange}
135                      value={state.validity_period}
136                      required
137                    />
138                  </div>
139                  <div className="w-full mb-2">
140                    <p>Asset category</p>
141                    <select 
142                      value={state.category} 
143                      className="inline-block w-full p-6 c-black" 
144                      onChange={(e)=> setstate({...state, category: e.target.value})}
145                    >
146                      <option value="perishable">perishable</option>
147                      <option value="nonperishable">nonperishable</option>
148                    </select>
149                  </div>
150                  <div className="w-full mb-2">
151                    <p>is Asset available?</p>
152                    <input
153                      className="p-6 c-black"
154                      type="checkbox"
155                      name="is_available"
156                      onChange={handleChange}
157                      checked={state.is_available}
158                      value={state.is_available}
159                      required
160                    />
161                  </div>
162                  <div className="w-full mb-2">
163                    <p>is Asset expired?</p>
164                    <input
165                      className="p-6 c-black"
166                      type="checkbox"
167                      name="is_expired"
168                      onChange={handleChange}
169                      checked={state.is_expired}
170                      value={state.is_expired}
171                      required
172                    />
173                  </div>
174                  {/* <div className="w-full mb-2">
175                    <p>logs</p>
176                    <input
177                      className="inline-block w-full p-6 c-black"
178                      placeholder="logs"
179                      type="text"
180                      name="logs"
181                      onChange={handleChange}
182                      value={state.logs}
183                      required
184                    />
185                  </div> */}
186                  <div className="w-full flex items-center justify-center pt-10">
187                    <button
188                      className="inline-block w-auto border px-4 py-4"
189                      onClick={handleSubmit}
190                    >
191                      {loading ? 'loading...': 'edit asset'}
192                    </button>
193                  </div>
194                </form>
195              </div>
196            </div>
197          ):!loading && error ?(
198            <div className="flex items-center justify-center min-h-screen">
199              <h1>{error}</h1>
200            </div>
201          ):(
202            <div className="flex items-center justify-center min-h-screen">
203              <h1>Loading...</h1>
204            </div>
205          )}
206          
207        </div>
208      );
209    };
210    export default EditAssets;

From the code above, users can edit an asset when they hover on the asset card as two buttons will show up, of which one is to edit the asset and the other is to delete the asset.

Implementing Push Notifications

We have finally reached the most important part of this article as we will be learning to create push notifications using cron jobs and web push.

What is Web Push?

Web Push is an npm package that helps users push real time events to clients, usually triggered from the backend and, in our case, Strapi is the backend.

To make use of this package, we need to install it using the following command: yarn add web-push.

Create a new web-push.js file in the config folder of our backend and add the following code:

1    const { readFileSync } = require('fs');
2    const { join } = require('path');
3    const webpush = require('web-push')
4    
5    const vapidKeys = JSON.parse(readFileSync(join(__dirname, 'vapidKeys.json')).toString());
6    webpush.setVapidDetails(
7      'mailto:example@yourdomain.org',
8      vapidKeys.publicKey,
9      vapidKeys.privateKey
10    )
11    const notify = async (strapi, data) => {
12      const users = await strapi.entityService.findMany(
13        'api::user-notification-key.user-notification-key', {
14        filters: {
15          subscription: {
16            $notNull: true
17          }
18        }
19      });
20      users.forEach(user => {
21        setTimeout(() => {
22          webpush.sendNotification(
23            user.subscription,
24            JSON.stringify(data)
25          ).then(() => console.log('notification sent')).catch(console.error)
26        }, 6000)
27      })
28    }
29    module.exports = {
30      webpush,
31      notify,
32    };

Let's dive in to what's happening in the code above.

To use the web-push package, we need to import the web-push package into our web-push.js folder and we need vapid keys to sign the push notifications. These keys can be generated using the following code that checks if there is already a file that holds the vapid keys else it creates a new one.

Web push documentation warns against generating vapid keys more than once. To ensure we do not have our vapid keys generated twice, we find a way to reach the already generated vapid key file and make a check as follows. We then read it and pass the values of that file to our web push detail function.

1    const pathToVapidKey = join(__dirname, 'vapidKeys.json'); 
2    
3    if (!existsSync(pathToVapidKey)) {
4      const keys = webpush.generateVAPIDKeys();
5      writeFileSync(pathToVapidKey, JSON.stringify(keys));
6    }
7    const vapidKeys = JSON.parse(readFileSync(pathToVapidKey).toString());
8    webpush.setVapidDetails(
9      'mailto:example@yourdomain.org',
10      vapidKeys.publicKey,
11      vapidKeys.privateKey
12    )

Trigger Notification

Recall that the field we gave the UserNotificationKey was a subscription field. We will fetch all subscription fields that are not empty and loop through for every user and use the webpush.sendNotification function to trigger notifications. We have added timing to the notification to avoid queuing of notifications. The code below shows how we can achieve this:

1    const notify = async (strapi, data) => {
2      const users = await strapi.entityService.findMany(
3        'api::user-notification-key.user-notification-key', {
4        filters: {
5          subscription: {
6            $notNull: true
7          }
8        }
9      });
10      users.forEach(user => {
11        setTimeout(() => {
12          webpush.sendNotification(
13            user.subscription,
14            JSON.stringify(data)
15          ).then(() => console.log('notification sent')).catch(console.error)
16        }, 6000)
17      })
18    }
19    module.exports = {
20      webpush,
21      notify,
22    };

Setting up Cron Job

Cron Job is a utility program that allows users to run or execute scripts periodically. To enable Cron Jobs, set cron.enabled to true in the server.js file, still in the config folder and declare the jobs as such:

1    const cronTasks = require("./cron-tasks");
2    module.exports = ({ env }) => ({
3      host: env('HOST', '0.0.0.0'),
4      port: env.int('PORT', 1337),
5      app: {
6        keys: env.array('APP_KEYS'),
7      },
8      cron: {
9        enabled: true,
10        tasks: cronTasks,
11      },
12    });

Cron Jobs will help you look out for expired assets and notify us when it expires. To set up Cron Job in our application, we created a file called cron-task.js in our config folder. This Cron Job will be executed every minute.

1    const { notify } = require('./web-push');
2    
3    module.exports = {
4      '*/1 * * * * *': async ({ strapi }) => {
5        
6        const expiredAssets = await strapi.entityService.findMany('api::asset.asset', {
7          filters: { 
8            validity_period: {
9              $lte: new Date()
10            },
11            is_expired: false
12          },
13        });
14        for (const e of expiredAssets) {
15          const notice = await strapi.entityService.create('api::notification.notification', {
16            data: {
17              message: `Asset ${e.name} with model number ${e.model_number} has expired`,
18              type: 'asset',
19              metadata: {
20                id: e.id
21              }
22            }
23          })
24      
25          await strapi.entityService.update('api::asset.asset', e.id, {
26            data: {
27              is_expired: true
28            }
29          });
30          await notify(strapi, notice);
31        }
32      },
33    };

Let’s explain what happening in our code:

1    module.exports = {
2      '*/1 * * * * *': async ({ strapi }) => {
3        
4        const expiredAssets = await strapi.entityService.findMany('api::asset.asset', {
5          filters: { 
6            validity_period: {
7              $lte: new Date()
8            },
9            is_expired: false
10          },
11        });

Based on the code above, we have a Cron Job that allows our function to run every minute as it filters through all assets and fetches all expired assets.

1     for (const e of expiredAssets) {
2          const notice = await strapi.entityService.create('api::notification.notification', {
3            data: {
4              message: `Asset ${e.name} with model number ${e.model_number} has expired`,
5    https://www.dropbox.com/scl/fi/dk7qxelfy1cibw3shkm6f/Implement-Push-Notification-Building-an-Asset-Manager-using-Strapi-Cron-jobs-and-Rest-API.paper?dl=0&rlkey=i9m7kjg6n6wipohk7prybugxf          type: 'asset',
6              metadata: {
7                id: e.id
8              }
9            }
10          })
11      
12          await strapi.entityService.update('api::asset.asset', e.id, {
13            data: {
14              is_expired: true
15            }
16          });
17          await notify(strapi, notice);
18        }
19      },

Next, it loops through the already fetched assets based on the filter from our first function and creates a notification body for every expired asset using their id as identifiers, after which the expired status of the assets are updated.

Add Notification on Creation and Deletion of Assets

We would like to be notified on every creation and deletion of assets in our application. To do this, we need to extend the asset controller. To access the assets controller, go to src >> api >> assets >> controllers >> asset.js.

1    const { createCoreController } = require('@strapi/strapi').factories;
2    module.exports = createCoreController(''api::asset.asset');

The code above is what we should see in our file initially but we will extend these controllers to be able to get notified on every operation made.

Recall that we only want to be notified when an asset is created or deleted so we add a notify object from web-push package.

1    'use strict';
2    const { notify } = require('../../../../config/web-push');
3    /**
4     *  asset controller
5     */
6    const { createCoreController } = require('@strapi/strapi').factories;
7    module.exports = createCoreController('api::asset.asset', ({ strapi }) => ({
8      async find(ctx) {
9        const response = await super.find(ctx);
10        return response;
11      },
12      async update(ctx) {
13        const response = await super.update(ctx);
14        return response;
15      },
16      async findOne(ctx) {
17        const response = await super.findOne(ctx);
18        return response;
19      },
20      async delete(ctx) {
21        const response = await super.delete(ctx);
22        await notify(strapi, { message: 'An asset has been deleted' });
23        return response;
24      },
25      
26      async create (ctx) {
27        const response = await super.create(ctx);
28        await notify(strapi, {
29          message: `An asset ${response?.data?.attributes?.name} has been created` 
30        });
31        return response;
32      }
33    }));

Conclusion

We have finally come to the end of this tutorial. In this tutorial, we looked at how the new react router and its benefits, and we also learnt how set up Strapi for our application. We also learned how to set up Strapi to push notifications and manage states in our asset manager in the process. We learned how to handle authentication from login to sign up and, most importantly, to push notifications from our Strapi backend using Cron Jobs and Web Push.

Resources

• GitHub Repo
• Strapi cron-task
• Understanding Cron Jobs
• Web Push