In this lecture. we will build the functionality to retrieve recorded fire detection logs.
First. install the following four packages.
Looking at the code. `const [page. setPage] = useState(1)` and `const pageSize = 10` are declared.
These variables are used to implement pagination.
First. `page` represents the current page number the user is viewing. with a default value of 1.
And `setPage` is a function used to change the page.
`pageSize` determines how many records are displayed per page. set to 10 in this case.
So. if the user is on page 1. they will see records 1 to 10.
And on page 2. they will see records 11 to 20.
The `handlePageChange` function is called when the user changes the page.
This function takes the new page number selected by the user and calls `setPage` to update the `page` state.
The `getDetectionLogs` function is responsible for fetching detection log data from the server.
This function takes `page` and `pageSize` values to request data for the corresponding page.
It uses `fetch` to send a request to the `http://localhost:8000/get_detection_log` endpoint.
Here. `page` and `pageSize` values are included in the URL to retrieve the desired data.
This function converts the data into JSON format before returning it.
In summary. this is an asynchronous function that fetches the detection log list for a specific page.
This section uses `useQuery` to fetch detection log data and calculate the total number of pages.
First. `useQuery` is used with React Query to fetch data.
queryKey` acts as a cache key. and by using `['get_detection_log'. page. pageSize]`.
It ensures that new data is requested whenever the page changes.
`queryFn` is the function that fetches data. calling `getDetectionLogs({ page. pageSize })` that we created earlier.
As a result. the fetched data becomes available through `data: getDetectionLogsData`.
Next. `pageCount` is a variable that calculates the total number of pages.
`getDetectionLogsData?.total_count` represents the total number of records received from the server.
By dividing this value by `pageSize` and using `Math.ceil()` to round up. It calculates the total number of required pages.
In summary. this part is responsible for fetching the data and calculating the total page count.
This section is responsible for displaying detection log data on the screen.
Animations are applied using Framer Motion.
The data received from `getDetectionLogsData` is bound to the UI.
Displaying the file name. message. creation time. image. and detected objects.
At the bottom. pagination is implemented using MUI’s Pagination component.
Allowing users to navigate between pages.
Finally. before wrapping up the lecture. here is your challenge.
1. Add a button on the Fire Detection Log page to navigate back to Home.
2. Improve the detection sensitivity settings to filter out detections with a confidence level below 0.7.
3. Enhance the CSS styling to improve the visual presentation.
Apply these improvements to your project and share your results.
If you submit your challenge results in the course review link. you will be entered into a draw for a special gift.
Thank you for your hard work.