read24 - Admin UI - API and Navbar Refactor
August 23, 2020
The navigation bar is getting to be a little bit messy! Let’s lean this up visually so that more simple pages can be added. (For example, student management pages.)
The easiest thing to do when organizing the navigation bar is to just group the current links into their own sections. So for example:
- Books - Add - List - Classrooms - Add - List - Users - Add - Teachers - Add - List
Therefore, I will need to create
Teachers dropdown buttons.
Twitter Bootstrap provides the ability to do so, but in my experience it does not work so well with
react-router. In order to make this better, I can install additional helper libraries:
npm install --save react-bootstrap npm install --save-dev @types/react-bootstrap npm install --save react-router-bootstrap npm install --save-dev @types/react-router-bootstrap
react-bootstrap will provide me with some commonly used bootstrap components implemented in React.
react-router-bootstrap is a library that will integrate
react-router with Bootstrap.
Okay, now let’s refactor the
Navigation.tsx component to be composed of dropdown buttons rather than individual links.
Here, I will begin with using the
Dropdown component found in
react-bootstrap to create a dropdown. Under each
Dropdown is a
Dropdown.Menu. The former is what will be shown, while the latter is a container of links that will be displayed when the dropdown is clicked.
Then to make links to the pages for each
Dropdown.Item, I can use the
LinkContainer component found in
react-router-bootstrap. So, a basic dropdown menu for the
Books section will be implemented as:
<Dropdown> <Dropdown.Toggle> Books </Dropdown.Toggle> <Dropdown.Menu> <LinkContainer to="/book/add"> <Dropdown.Item>Add</Dropdown.Item> </LinkContainer> <LinkContainer to="/book/list"> <Dropdown.Item>List</Dropdown.Item> </LinkContainer> </Dropdown.Menu> </Dropdown>
From here, all other dropdown menu items can be implemented pretty much the same way. Once that is done, the menu is rendered to look like:
Next up, the API refactor. This is not a huge refactor. In fact, it will be minimal as the goal is to just move the
/admin routes away from
admin.ts (this file will no longer exist) and into their appropriate route files.
For example, the route
/admin/user/available will be moved to a
user.ts route file, with the route being renamed to
These routes should be less restrictive, and shouldn’t be limited to an admin context. In fact, down the line, I will create access control middleware to limit execution of certain routes to only be accessible by privileged users anyway.
This creates a potential feature set for a publicly accessible API to enable third parties to create their own read24 clients. I will think more about it when I cross that bridge, though.
Anyway, all routes should be moved, and the front-end components should be updated to hit those endpoints.
There isn’t really much code to see with the above. Today is more of a “house-keeping” session – this is mandatory in my point of view, as I want to prevent myself from creating more bloat, and potentially getting lost in code.
Next up, let’s work on managing students.