Books List
Explore more about designing the book view that includes column-wise sorting of books.
Now that we have a way to call our REST API, let’s have a look at the view component of the application that will display all of the books in our database as a formatted list. Doing that will require several aspects:
Container component
├── Title bar
│ ├── Title
│ └── Close button
├── Table component
│ ├── Column headings
│ └── Rows of book records
├── Function to get data on load
├── Function to sort data
└── Wait icon to display while getting data
About the application
In this application we have three state variables:
books, which stores a list of books.sortkey, which sorts the table column-wise.showprogress, which shows the wait icon until it is required.
Next, we have the getBooks() function that will list down all of the books on our book view. We also have an IconButton component to close the view, and a BooksTable component that will be mainly responsible for providing us with a fully functional table view. Finally, we have the CircularProgress component, which will tell the user to wait until the fetch call returns with some data.
This is what the application will look like:
Copyright (c) 2020 John Sheehan Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
About the view components
We’ll now have a look at our individual components that make up this view. We usually have the option of creating them as separate files or combining them all into one file. In this case, we’ll use two files:
- One is for the main view.
- The second is just for the list itself.
First view component
We have a folder called views/ under bookapp/client/src/. Inside that folder, we have an empty __init__.py file for Python to recognize it as a package and a folder called ...