Polish and update for 0.3.0

Author: varunsingh87

components/Jotting/jotting.js

@@ -0,0 +1,25 @@
+import jotting from "./jotting.module.css";
+import JottingOptionsBar from "./JottingOptionsBar";
+import JottingTitle from "./jottingTitle";
+import { useRef } from "react";
+import { useOutsideAlerter } from "../../libs/view";
+import { useRouter } from "next/router";
+
+export default function Jotting(props) {
+	const ref = useRef(null);
+	const router = useRouter();
+
+	useOutsideAlerter(ref, router);
+
+	return (
+		<div ref={ref} className={jotting.fullJotting}>
+			<JottingOptionsBar {...props} />
+			<JottingTitle
+				id={props.id}
+				originalTitle={props.title}
+				jotType={props.jotType}
+			/>
+            {props.children}
+		</div>
+	);
+}

components/Jotting/jottingDetails.js

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 /**
  * The component for the body or details of a jotting
  * @param { {jotType: string, jottingInfo: any } } props The component props object
- * @param { {id: number} } props.jottingInfo The object representation of the jotting
+ * @param { {id: number, body?: string} } props.jottingInfo The object representation of the jotting
  * @param {string} props.jotType The type of the jotting
  */
 export default function JottingDetails({ jottingInfo, jotType }) {
@@ -21,8 +21,11 @@ export default function JottingDetails({ jottingInfo, jotType }) {
 
 	// componentDidMount(), componentDidUpdate() - getBody
 	useEffect(() => {
-		console.log("Fetching body...");
-		getBody(jottingInfo.id, jotType).then((response) => setBody(response));
+		if (jottingInfo.body != null) {
+			setBody(jottingInfo.body);
+		} else {
+			getBody(jottingInfo.id, jotType).then((response) => setBody(response));
+		}
 	}, [jottingInfo.id]);
 
 	if (typeof body == "string") {
@@ -37,5 +40,5 @@ export default function JottingDetails({ jottingInfo, jotType }) {
 		);
 	}
 
-	return body || body == "" ? bodyEl : <CircularProgress />;
+	return body != null ? bodyEl : <CircularProgress />;
 }

components/Jotting/note.js

@@ -1,14 +1,10 @@
-import jotting from "./jotting.module.css";
-import JottingOptionsBar from "./JottingOptionsBar";
-import JottingTitle from "./jottingTitle";
 import JottingDetails from "./jottingDetails";
+import Jotting from "./Jotting";
 
 export default function Note(note) {
 	return (
-		<div className={jotting.fullJotting}>
-			<JottingOptionsBar {...note} jotType="note" />
-			<JottingTitle id={note.id} originalTitle={note.title} jotType="note" />
+		<Jotting jotType="note" {...note}>
 			<JottingDetails jottingInfo={note} jotType="note" />
-		</div>
+		</Jotting>
 	);
 }

components/Jotting/notePreview.js

@@ -5,15 +5,13 @@ import { useRouter } from "next/router";
 export default function NotePreview(props) {
 	const router = useRouter();
 
-	const handleNoteBtnClick = e => {
+	const handleNoteBtnClick = (e) => {
 		Jotting.openJotting(router, "note", props);
 	};
-	
+
 	return (
 		<data className={jotting.jotting} value={"N" + props.id}>
-			<button onClick={handleNoteBtnClick}>
-				{props.title}
-			</button>
+			<button onClick={handleNoteBtnClick}>{props.title}</button>
 		</data>
 	);
 }

components/Jotting/task.js

@@ -1,12 +1,11 @@
-import jotting from "./jotting.module.css";
-import JottingOptionsBar from "./JottingOptionsBar";
-import JottingTitle from "./jottingTitle";
+import Jotting from "./Jotting";
+import JottingDetails from "./jottingDetails";
 
 export default function Task(task) {
+    console.log(task);
     return (
-        <div className={jotting.fullJotting}>
-            <JottingOptionsBar {...task} jotType="task" />
-            <JottingTitle id={task.id} originalTitle={task.title} jotType="task" />
-        </div>
+        <Jotting jotType="task" {...task}>
+            <JottingDetails jotType="task" jottingInfo={task} />
+        </Jotting>
     );
 }

libs/view.js

@@ -1,12 +1,37 @@
+import { useEffect } from "react";
+import Jotting from "./Jotting";
+
 /**
  * Enum for describing the state of the content's view
  */
 export const CONTENT_STATE = {
-  VISIBLE: "visible",
-  FADE_IN: "fadeIn",
-  FADE_OUT: "fadeOut",
-  INVISIBLE: "invisible",
+	VISIBLE: "visible",
+	FADE_IN: "fadeIn",
+	FADE_OUT: "fadeOut",
+	INVISIBLE: "invisible",
 };
 
 Object.freeze(CONTENT_STATE);
 
+/**
+ * Hook that clears url if user clicks outside of the component
+ * @borrows {@link https://stackoverflow.com/a/42234988/9860982}
+ * @param ref The React ref object returned from useRef()
+ * @license CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/)
+ * @author Ben Bud
+ */
+export function useOutsideAlerter(ref, router) {
+	useEffect(() => {
+		const handleClickOutside = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) {
+        Jotting.closeJotting(router);
+			}
+		};
+
+		// Bind the event listener
+		document.addEventListener("mousedown", handleClickOutside);
+
+		// Unbind the event listener on clean up
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [ref]);
+}

package.json

@@ -4,7 +4,7 @@
   "author": {
     "name": "Varun Singh"
   },
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/Home/home.js

@@ -126,7 +126,7 @@ export default function Home({ fade, onFadeInLogin, setFade }) {
 				router.query.id) ||
 				urlMatchesDisplayJotting("task")) ? (
 				<div className={home.fullJotting}>
-					<Task {...router.query} />
+					<Task {...tasks.find(item => item.id == router.query.id)} />
 				</div>
 			) : (
 				""