Extending the Admin Console
With the basics in place, this lesson is all about extending the Admin Console with parameterized routing and query strings.
Extending the Admin Console App#
You should be pretty happy with yourself at this point. Not only have we built a realistic admin console using React and some of its clever features, we’ve also fitted a complete routing system with working navigation.
In this lesson we’re going to extend and augment the existing console with a few additions:
A data list of users that we’ll use to dynamically populate the existing
Userscomponent and a newEditUsercomponent.Parameterized, dynamic routing that will pluck a specific user from our data list.
A mechanism to handle query string parameters, which are a common requirement in most navigation systems.
Let’s dive right in and edit our project, back in VS Code.
Creating users.json#
We're going to replace the static, hard-coded user data in the Users.jsx file with dynamically-generated data. This will simulate a realistic app where we may fetch data from an API or otherwise load it from an external source.
Create a new folder called /data under the /src folder. In this new folder create a new file called users.json.
Unsurprisingly, we’re going to populate this file with some JSON data, namely an array of user objects. Nothing tricky here, just some regular JS objects representing individual users with properties like name, email and department.
Complete contents of users.json#
The entire JSON file for our users should look like this:
{ "data": [ {"id": 8,
"name": "Sally Appleseed",
"email": "[email protected]",
"department": "Management",
"employment_date": "01 Jan 2014"
},
{"id": 13,
"name": "Dave Davis",
"email": "[email protected]",
"department": "Management",
"employment_date": "07 Mar 2017"
},
{"id": 11,
"name": "Alexis Macintosh",
"email": "[email protected]",
"department": "Logistics",
"employment_date": "24 Apr 2020"
},
{"id": 2,
"name": "Mark Studdart",
"email": "[email protected]",
"department": "Marketing",
"employment_date": "19 May 2016"
},
{"id": 56,
"name": "Don Swanson",
"email": "[email protected]",
"department": "Maintenance",
"employment_date": "13 Feb 2018"
}
]
}
Editing Users.jsx#
The current Users component contains a static HTML table with some user data hard-coded in it.
Let’s change this to simulate a realistic fetching of some data and dynamically map some user data into the existing table.
What’s more, we’re going to add a new actions column to the table. In here, we’ll be placing a button that will allow us to click through to the editing component that we’ll build out later on.
Updating the imports#
Because we want to use a button that directs users to another URL, we’ll bring in the Link component from react-router-dom.
We also need to bring in the user data from the users.json file we just created, so we do that here too.
import React from 'react';
import { Link } from 'react-router-dom';
// Dataimport users from '../data/users.json';
Helper functions#
We’re going to outline a single helper function here, getEditTime(). This is a really simple function that creates a new Date() object, and then crafts a return string from various Date functions. The returned string represents the current time.
const getEditTime = () => {
const now = new Date();
return `${now.getHours()}:${now.getMinutes()}:${now.getMilliseconds()}`;
};
We’ll be using this function to provide us with an edit time in our table’s action links and it’ll be passed to the routing system as a query string parameter value.
Updating the JSX#
We need to make three edits here.
First, we’re going to remove all of the existing table data, i.e. everything inside of the
<tbody>tag.Next, we’ll add a new header row to our table and name it
Actions.The final edit involves adding a new body contents for the table. It’ll look like this:
<table className="table">
<thead>
<tr>
<th>User id</th>
<th>Name</th>
<th>Email</th>
<th>Department</th>
<th>Employment date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{users.data.map(user => (
<tr>
<th>{user.id}</th>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.department}</td>
<td>{user.employment_date}</td>
<td>
<Link to={`/users/${user.id}?edited=${getEditTime()}`}>
edit </Link> </td> </tr> )) } </tbody> </table>It looks the same as any single row from the hard-coded version, but this time we’re outputting each row as a result of the map() function, iterating over our users that we brought in as part of the imports section.
Notice that we’ve replaced the static strings with their dynamic counterparts from each user data object.
We’ve also added an additional <td> element here too, that will represent our Actions column data. In this case, it’s a Link component.
We’re building up a dynamic URL path to pass to the Link component which will end up looking like this:
/users/1?edited=12:01:03/users/2?edited=12:02:08/users/3?edited=12:03:04…and so on
We haven’t defined any route to handle this type of URL path just yet, but we’ll discuss that later in the lesson. For now, it’s enough to know that we’re generating a number of similar URL paths, each with a different user id value, appended with a query string parameter, edited - the value of which is set to the current time returned from our helper function.
The complete updated component#
This page is a preview of Beginner's Guide to Real World React