Implement subtasks of subtasks

Author: varunsingh87

components/Jotting/jotting.module.css

@@ -92,6 +92,14 @@
 	flex-direction: column;
 }
 
+.subtaskTitle {
+	background: none;
+	border: none;
+	font-size: 1em;
+	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	text-align: left;
+}
+
 .subtaskHeading {
 	margin: 0 0 3px 0;
 }

components/Jotting/jottingDetails.js

@@ -24,14 +24,12 @@ export default function JottingDetails({ jottingInfo, jotType }) {
 	};
 
 	// Request the body if not passed by parent component
-	if (jottingInfo.body == null) {
-		useCancelableRequest(
-			getBody, // Request function
-			setBody, // State dispatcher
-			[jottingInfo.id, jotType], // Parameters of request function
-			[jottingInfo.id] // Dependency list
-		);
-	}
+	useCancelableRequest(
+		getBody, // Request function
+		setBody, // State dispatcher
+		[jottingInfo.id, jotType], // Parameters of request function
+		[jottingInfo.id] // Dependency list
+	);
 
 	// Display body if the body was successfully received
 	if (typeof body == "string") {

components/Jotting/subtaskList.js

@@ -1,28 +1,28 @@
-import { useEffect, useState } from "react";
-import { useRecurringRequest } from "../../libs/Datastore/requestHelpers";
-import { deleteTask, getSubtasks } from "../../libs/Datastore/requests";
-import ProgressSpinner from "../ProgressSpinner/progressSpinner";
+import useSWR from "swr";
+import { deleteTask, getSubtasksRequest } from "../../libs/Datastore/requests";
 import FetchError from "../FetchError/fetchError";
+import ProgressSpinner from "../ProgressSpinner/progressSpinner";
 import RemoveableListItem from "../RemoveableListItem/removeableListItem";
 import StyledCheckbox from "../StyledCheckbox/styledCheckbox";
 import jotting from "./jotting.module.css";
+import Link from "next/link";
+import Jotting from "../../libs/Jotting";
+import { useRouter } from "next/router";
+
+const fetcher = (id) => getSubtasksRequest(id).makeRequest(new AbortController());
 
 /**
  * @param { {id : number } } props The info about the task
  * @param {number} props.id The id of the parent task
  */
 export default function SubtaskList({ id, subtasksState }) {
 	const [subtasks, setSubtasks] = subtasksState;
+	const { data, error } = useSWR(id, fetcher);
+	const router = useRouter();
 
-	// componentDidUpdate() - recur subtasks
-	useRecurringRequest(() => {
-		getSubtasks(id)
-			.then((response) => {
-				if (response != subtasks)
-					setSubtasks(response);
-			})
-			.catch(() => {});
-	});
+	if (error) return <FetchError itemName="subtasks" />;
+	if (!data)
+		return <ProgressSpinner />;
 
 	const handleRemoveClick = (e) => {
 		const itemId = e.target.parentElement.id.substring(2);
@@ -41,28 +41,45 @@ export default function SubtaskList({ id, subtasksState }) {
 			.catch(alert);
 	};
 
-	if (subtasks instanceof Array)
-		return (
-			<ul className={jotting.subtasks}>
-				{subtasks.map((item) => {
-					return (
-						<RemoveableListItem
-							key={item.id}
-							handleRemoveClick={handleRemoveClick}
-							removeText="X"
-							id={"s-" + item.id}
-							content={item.title}
+	return (
+		<ul className={jotting.subtasks}>
+			{data.data.map((item) => {
+				return (
+					<li key={item.id} className="removeableListItem">
+						<StyledCheckbox
+							id={item.id}
+							prefix="subtask-completion-box-"
+							completed={item.completed == 1}
+						/>
+						<button className={jotting.subtaskTitle} onClick={() => Jotting.openJotting(router, "task", item)}>{item.title}</button>
+						<button
+							onClick={handleRemoveClick}
+							className="removeItemButton"
 						>
-							<StyledCheckbox
-								id={item.id}
-								prefix="subtask-completion-box-"
-								completed={item.completed == 1}
-							/>
-						</RemoveableListItem>
-					);
-				})}
-			</ul>
-		);
-	else if (subtasks != null) return <FetchError itemName="subtasks" />;
-	else return <ProgressSpinner />;
+							X
+						</button>
+						<ul className={jotting.subsubtasks}>
+							{item.subtasks.map(grandchild => (
+								<li key={grandchild.id}>
+									<StyledCheckbox
+										id={grandchild.id}
+										prefix="subtask-completion-box-"
+										completed={grandchild.completed == 1}
+									/>
+									<button className={jotting.subtaskTitle} onClick={() => Jotting.openJotting(router, "task", grandchild)}>{grandchild.title}</button>
+									<button
+										className="removeItemButton"
+									>X</button>
+								</li>
+							))}
+						</ul>
+					</li>
+
+				);
+			})}
+		</ul>
+	);
+
+
+
 }

components/JottingsControls/jottingsControl.js

@@ -92,7 +92,6 @@ export default function JottingsControl(props) {
 	useEffect(() => {
 		makeLabelsRequest();
 		makeJottingsRequests();
-		console.log(router.asPath);
 	}, []);
 
 	const showList = list => router.asPath.includes(`list=${list}`)

components/JottingsControls/jottingsControl.module.css

@@ -44,20 +44,11 @@
 	.fullJotting {
 		display: grid;
 		grid-row: 2 / 5;
-		grid-column-end: -1;
 		justify-self: flex-start;
 		overflow: auto;
 		grid-template-columns: 255px repeat(6, 175px);
 	}
 
-	.taskControl {
-		grid-column-start: 1;
-	}
-
-	.noteControl {
-		grid-column-start: 2;
-	}
-
 	.jottingContent {
 		grid-row: 1 / 2;
 		grid-column: 1 / -3;

libs/Datastore/BorumRequest.ts

@@ -1,5 +1,5 @@
 export default class BorumRequest extends Request {
-    private commonHeaders: HeadersInit = {};
+    commonHeaders: HeadersInit = {};
     private init: RequestInit = {};
 
     constructor(input: RequestInfo, init?: RequestInit) {

libs/Datastore/requests.js

@@ -66,6 +66,13 @@ export async function getSharedJottings(abortController = null) {
 	return response;
 }
 
+export async function getTask(id, abortController = null) {
+	const queryString = `id=${id}`;
+	return await BorumJotRequest.initialize(`task?${queryString}`)
+		.authorize()
+		.makeRequest(abortController);
+}
+
 /**
  * Makes GET request to API to get body of the note
  * @param {number} id The id of the note whose body is getting fetched
@@ -179,14 +186,16 @@ export async function createSubtask(id, jotName) {
 }
 
 export async function getSubtasks(id) {
-	const queryString = `id=${id}`;
-	const { data } = await BorumJotRequest.initialize(`subtasks?${queryString}`)
-		.authorize()
-		.makeRequest();
+	const { data } = await getSubtasksRequest(id).makeRequest();
 
 	return data;
 }
 
+export function getSubtasksRequest(id) {
+	const queryString = `id=${id}&subsubtasks`;
+	return BorumJotRequest.initialize(`subtasks?${queryString}`).authorize();
+}
+
 /**
  *
  * @param {number} id id of the note

libs/Datastore/responseHelpers.js

@@ -29,7 +29,6 @@ export function useCancelableRequest(
 	props,
 	dependencyList = []
 ) {
-	// componentDidMount(), componentDidUpdate(), componentWillUmmount()
 	useEffect(() => {
 		const abortController = new AbortController();
 

libs/UrlService.js

@@ -61,8 +61,7 @@ export default class UrlService {
 		if (!this.queryHasJottingInfo(jotType)) return;
 
 		this.router.query = {
-			type: jotType,
-			jotType: jotType,
+			type: jotType, jotType,
 			id: parseInt(query[1]),
 			title: query[2],
 		};

pages/Home/home.module.css

@@ -12,7 +12,7 @@
 @media only screen and (min-width: 800px) {
 	.main {
 		grid-template-rows: auto 100px repeat(2, 200px) 30px;
-		grid-template-columns: 255px 15% 15%;
+		grid-template-columns: 255px repeat(6, 13%);
 	}
 }