Check the Status of Processing for Symbl Job API by Polling with a Custom useInterval Hook
Symbl has Job API that gives you an option to check your async tasks process status. You will use this Job API in polling manner, to get an update once video has completed processing.
Vladimir Novick: [0:00] On the video [inaudible] for processing to simple API, we get jobId and conversationId. What we need to do? First of all, we need to save them somewhere. We'll useState hook. Let's define conversationId, state variable, and let's define setConversationId. We'll useState for that. We'll also define jobId and setJobId. We'll use useState hook for that as well.
[0:39] We'll use custom hook. Use interval created by [inaudible] , but we change it a little bit adding stopFlag there. The hook uses savedCallback, savedCallback.current, but the stopFlag is the thing that basically limits the hook to run whenever we have the status change, the status is completed or whenever the jobId is not there.
[1:06] In order to use that, let's import our useInterval from hooks/index.js. Let's use it here. useInterval will get the function to run. We'll run it every second and we'll pass the custom stuff. Our stopFlag will be status is completed. Then we don't want to run our [inaudible] mechanism. Also, there is no jobId, meaning if we just started.
[1:41] We also add status and setStatus here to monitor the status of the job. To start using useInterval within the function, we'll use fetch. We'll call Symbl job API. The endpoint will be https://api.symbl.ai/v1/job, and we'll pass the jobId that we received when send video processing.
[2:17] We'll also need to pass the method as GET. We also need to pass headers, one of which will be our API token. As previously, x-api-key. We'll pass our token that we bring from our custom useAuth hook.
[2:40] Then whenever we receive the result, we'll get the rawResult. Then pass the json. Then whenever we get the result, we will need to setStatus to be our result.status. Whenever we get status as completed, this useInterval hook stops to run because of the custom stopFlag.
[3:12] Another thing that we need to add is inside our submitFileForProcessing. We need to update our job ID. Whenever we get the result from submitting the file, we need to set conversation ID to be result.conversationId. We also need to set our job ID to be result.jobId. Otherwise, our useInterval won't run because it's using jobId and it's a stopFlag. If we don't have jobId, it won't run.
[4:07] Let's try it out. Let's choose a file. Let's send for processing. If we go on the Network tab, we'll see that video is sent. Whenever we receive jobId and conversationId, we'll stop the pulling mechanism.
[4:40] As you can see, video finished processing. We'll start to get pulling into using Symbl Job API, and we get the status is in progress. Until we finally will receive the status as completed, and then the pulling mechanism will stop. As you can see here, the status is completed, and that's it. You don't need to pull Job API anymore.