read24 - Admin UI - API and Navbar Refactor

August 23, 2020

Roger Ngo

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 Books, Classrooms, Users, and 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.Toggle, and 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 /user/available.

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.