Request subtasks recurringly (fix bug)

* Implement new requestHelpers module with new useRecurringRequest custom hook
* Implement useRecurringRequest - custom hook for firing a request every 3 seconds
* Use in SubtaskList component
* Fixes bug that appeared when jotting list was made recurringly

Author: varunsingh87

components/Jotting/subtaskList.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useRecurringRequest } from "../../libs/Datastore/RequestHelpers";
 import { deleteTask, getSubtasks } from "../../libs/Datastore/requests";
 import CircularProgress from "../CircularProgress/circularProgress";
 import FetchError from "../FetchError/fetchError";
@@ -13,15 +14,16 @@ import jotting from "./jotting.module.css";
 export default function SubtaskList({ id, subtasksState }) {
 	const [subtasks, setSubtasks] = subtasksState;
 
-	// componentDidMount() - initally request subtasks
-	useEffect(() => {
-		(async function () {
-			try {
-				const initialSubtasks = await getSubtasks(id);
-				setSubtasks(initialSubtasks);
-			} catch {}
-		})();
-	}, []);
+	// componentDidUpdate() - recur subtasks
+	useRecurringRequest(() => {
+		getSubtasks(id)
+			.then((response) => {
+				if (response != subtasks) {
+					setSubtasks(response);
+				}
+			})
+			.catch(() => {});
+	});
 
 	const handleRemoveClick = (e) => {
 		const itemId = e.target.parentElement.id.substring(2);

libs/Datastore/requestHelpers.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+
+/**
+ * Custom hook for firing the same request every 3 seconds
+ */
+export function useRecurringRequest(makeRequest, interval = 3000) {
+    useEffect(() => {
+        const updateData = setInterval(() => {
+            makeRequest();
+        }, interval);
+        
+        return () => clearInterval(updateData);
+    }, []);
+}