Implement note creation auto adding

* Use set state hook function to automatically show newly created notes instead of making a new API request

Author: varunsingh87

components/CreateJottingButton/createJottingButton.js

@@ -11,6 +11,7 @@ export default function CreateJottingButton({
 	jotType,
 	requestFunc = "createJotting",
 	requestArg1 = jotType,
+	setJots
 }) {
 	const [newJotInputCls, setNewJotInputCls] = useState("invisible");
 	const [createJotBtnCls, setCreateJotBtnCls] = useState(
@@ -54,16 +55,21 @@ export default function CreateJottingButton({
 		if (e.key == "Enter") {
 			const jotName = e.target.value;
 			try {
-				await Requests[requestFunc](
+				const newJotResponseData = await Requests[requestFunc](
 					requestArg1,
 					jotName
 				);
+				setJots((prevJots, props) => {
+					console.info("New Jots State", [...prevJots, newJotResponseData]);
+					return [...prevJots, newJotResponseData];
+				});
 			} catch (e) {
 				console.error(e);
 				window.alert("A system error occurred");
 			} finally {
 				clearInput();
 				showBtn();
+				
 			}
 		} else if (e.key == "Escape") {
 			clearInput();

components/JottingList/noteList.js

@@ -2,7 +2,7 @@ import FetchError from "../FetchError/fetchError";
 import NotePreview from "../Jotting/notePreview";
 import jottingList from "./jottingList.module.css";
 
-export default function NoteList({ notes }) {
+export default function 	NoteList({ notes }) {
 	let noteList = <FetchError itemName="notes" />;
 
 	if (notes instanceof Array) {

components/JottingsControls/notesControl.js

@@ -19,7 +19,7 @@ export default function NotesControl({notesState, active}) {
 		<article className={`${active ? "active" : ""} ${jottingsControl.ownNoteList}`}>
 			<h1>Notes</h1>
 			{notes ? <NoteList notes={notes} /> : <ProgressSpinner />}
-			<CreateNoteButton jots={notes} />
+			<CreateNoteButton setJots={setNotes} />
 		</article>
 	);
 }

libs/Datastore/requests.js

@@ -161,7 +161,7 @@ export async function updateTaskStatus(id, completed) {
  */
 export async function createJotting(jotType, jotName) {
 	const queryString = `${jotType.toLowerCase()}`;
-	const response = BorumJotRequest.initialize(queryString)
+	const response = await BorumJotRequest.initialize(queryString)
 		.authorize()
 		.post(`name=${jotName}`)
 		.makeRequest();