WEBVTT

1
00:00:01.543 --> 00:00:08.341
In this lecture. we will build the functionality to retrieve recorded fire detection logs.  

00:00:10.010 --> 00:00:13.346
First. install the following four packages. 

00:00:17.142 --> 00:00:21.354
Looking at the code. `const [page. setPage] = useState(1)` and `const pageSize = 10` are declared.  

00:00:22.313 --> 00:00:25.859
These variables are used to implement pagination. 

00:00:26.651 --> 00:00:33.950
First. `page` represents the current page number the user is viewing. with a default value of 1. 

00:00:34.993 --> 00:00:38.621
And `setPage` is a function used to change the page.  

00:00:39.664 --> 00:00:46.004
`pageSize` determines how many records are displayed per page. set to 10 in this case.  

00:00:47.088 --> 00:00:52.093
So. if the user is on page 1. they will see records 1 to 10.  

00:00:52.093 --> 00:00:55.597
And on page 2. they will see records 11 to 20.  

00:00:58.516 --> 00:01:03.855
The `handlePageChange` function is called when the user changes the page.  

00:01:04.856 --> 00:01:12.530
This function takes the new page number selected by the user and calls `setPage` to update the `page` state.  

00:01:13.865 --> 00:01:20.830
The `getDetectionLogs` function is responsible for fetching detection log data from the server.

00:01:21.915 --> 00:01:28.421
This function takes `page` and `pageSize` values to request data for the corresponding page.  

00:01:29.422 --> 00:01:34.260
It uses `fetch` to send a request to the `http://localhost:8000/get_detection_log` endpoint.  

00:01:35.053 --> 00:01:41.476
Here. `page` and `pageSize` values are included in the URL to retrieve the desired data.  

00:01:42.060 --> 00:01:47.107
This function converts the data into JSON format before returning it.  

00:01:47.565 --> 00:01:55.198
In summary. this is an asynchronous function that fetches the detection log list for a specific page.  

00:01:57.200 --> 00:02:04.165
This section uses `useQuery` to fetch detection log data and calculate the total number of pages.  

00:02:04.749 --> 00:02:08.962
First. `useQuery` is used with React Query to fetch data.  

00:02:09.629 --> 00:02:16.469
queryKey` acts as a cache key. and by using `['get_detection_log'. page. pageSize]`.  

00:02:16.636 --> 00:02:20.849
 It ensures that new data is requested whenever the page changes.  

00:02:21.307 --> 00:02:28.773
`queryFn` is the function that fetches data. calling `getDetectionLogs({ page. pageSize })` that we created earlier.  

00:02:29.232 --> 00:02:33.695
As a result. the fetched data becomes available through `data: getDetectionLogsData`.  

00:02:34.362 --> 00:02:39.826
Next. `pageCount` is a variable that calculates the total number of pages.  

00:02:40.410 --> 00:02:45.915
`getDetectionLogsData?.total_count` represents the total number of records received from the server.  

00:02:46.791 --> 00:02:55.717
By dividing this value by `pageSize` and using `Math.ceil()` to round up.  
It calculates the total number of required pages.  

00:02:56.509 --> 00:03:03.766
In summary. this part is responsible for fetching the data and calculating the total page count.  

00:03:05.351 --> 00:03:10.899
This section is responsible for displaying detection log data on the screen.  

00:03:11.858 --> 00:03:14.986
Animations are applied using Framer Motion.  

00:03:16.029 --> 00:03:20.658
The data received from `getDetectionLogsData` is bound to the UI. 

00:03:20.658 --> 00:03:27.081
Displaying the file name. message. creation time. image. and detected objects.  

00:03:29.959 --> 00:03:35.340
At the bottom. pagination is implemented using MUI’s Pagination component.  

00:03:35.673 --> 00:03:38.927
Allowing users to navigate between pages.  

00:03:39.636 --> 00:03:44.515
Finally. before wrapping up the lecture. here is your challenge.

00:03:45.808 --> 00:03:50.063
1. Add a button on the Fire Detection Log page to navigate back to Home.  

00:03:50.939 --> 00:03:58.404
2. Improve the detection sensitivity settings to filter out detections with a confidence level below 0.7.  

00:03:59.614 --> 00:04:03.910
3. Enhance the CSS styling to improve the visual presentation.  

00:04:04.911 --> 00:04:09.582
Apply these improvements to your project and share your results.

00:04:10.541 --> 00:04:19.175
If you submit your challenge results in the course review link. you will be entered into a draw for a special gift.

00:04:20.260 --> 00:04:22.345
Thank you for your hard work.