796b8010b1
[MICROBA-1621] * Add a table to the BulkEmailTaskHistory component of the task manager. * Add a table to the BulkEmailPendingTasks component of the task manager. * Extract messages to messages.js. * Add custom hook used to make REST API calls to edx-platform on a regular cadence (every 30 seconds). * Use the new hook in BulkEmailPendingTasks to retrieve pending instructor tasks for display in a table. * Create a new BulkEmailHistoryTable component to cutdown on code duplication between task manager componenets that display tables. * Refactor existing components to use the new BulkEmailHistoryTable component (and reduce amount of duplicate code in the task manager) * Use a StatefulButton (over a regular button) to show a spinner/loading icon when fetching data for our tables.
29 lines
720 B
JavaScript
29 lines
720 B
JavaScript
import { useEffect, useRef } from 'react';
|
|
|
|
/**
|
|
* A custom hook used by the BulkEmailPendingTasks component to periodically make an API call on a regular interval.
|
|
* This is lifted from: https://overreacted.io/making-setinterval-declarative-with-react-hooks/.
|
|
*/
|
|
export default function useInterval(callback, delay) {
|
|
const savedCallback = useRef();
|
|
|
|
// Remember the latest callback
|
|
useEffect(() => {
|
|
savedCallback.current = callback;
|
|
}, [callback]);
|
|
|
|
// Set up the interval
|
|
useEffect(() => {
|
|
function tick() {
|
|
savedCallback.current();
|
|
}
|
|
|
|
if (delay !== null) {
|
|
const id = setInterval(tick, delay);
|
|
return () => clearInterval(id);
|
|
}
|
|
|
|
return null;
|
|
}, [delay]);
|
|
}
|