Implement viewing of subsub*tasks

Author: varunsingh87

components/Jotting/subtask.js

@@ -0,0 +1,35 @@
+import useSWR from "swr";
+import { getTask } from "../../libs/Datastore/requests";
+import FetchError from "../FetchError/fetchError";
+import ProgressSpinner from "../ProgressSpinner/progressSpinner";
+import StyledCheckbox from "../StyledCheckbox/styledCheckbox";
+import Jotting from "./jotting";
+import JottingDetails from "./jottingDetails";
+import JottingOptionsBar from "./JottingOptionsBar";
+import SubtasksControl from "./subtasksControl";
+
+export default function Subtask({ id }) {
+
+    const { data, error } = useSWR(id, id => getTask(id).makeRequest());
+
+    if (!data) return <ProgressSpinner /> ;
+    if (error) return <FetchError itemName="task" />
+
+    console.debug("Subtask: ", data.data);
+
+    return (
+        <Jotting jotType="task" {...data.data}>
+            <JottingOptionsBar jotType="task" {...data.data}>
+                <div>
+                    <StyledCheckbox
+                        id={data.data.id}
+                        prefix="task-completion-box-"
+                        completed={data.data.completed == 1}
+                    />
+                </div>
+            </JottingOptionsBar>
+            <JottingDetails jotType="task" jottingInfo={data.data} />
+            <SubtasksControl task={data.data} />
+        </Jotting>
+    );
+}

components/Jotting/subtaskList.js

@@ -1,28 +1,28 @@
+import { useRouter } from "next/router";
 import useSWR from "swr";
 import { deleteTask, getSubtasksRequest } from "../../libs/Datastore/requests";
+import Jotting from "../../libs/Jotting";
 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());
+const fetcher = (id) => {
+	console.log(getSubtasksRequest(id));
+	return getSubtasksRequest(id.substring(2)).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 { data, error } = useSWR("ST" + id, fetcher);
 	const router = useRouter();
 
+	if (!data) return <ProgressSpinner />;
 	if (error) return <FetchError itemName="subtasks" />;
-	if (!data)
-		return <ProgressSpinner />;
 
 	const handleRemoveClick = (e) => {
 		const itemId = e.target.parentElement.id.substring(2);

components/Jotting/subtasksControl.js

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import CreateJottingButton from "../CreateJottingButton/createJottingButton";
+import SubtaskList from "./subtaskList";
+import jotting from "./jotting.module.css";
+
+export default function SubtasksControl({ task }) {
+    const [subtasks, setSubtasks] = useState(null);
+    return (
+        <div className={jotting.subtasksControl}>
+            <h3 className={jotting.subtaskHeading}>Subtasks</h3>
+            <SubtaskList id={task.id} subtasksState={[subtasks, setSubtasks]} />
+            <CreateJottingButton
+                requestFunc="createSubtask"
+                jotType="subtask"
+                jots={subtasks}
+                setJots={setSubtasks}
+                requestArg1={task.id}
+            />
+        </div>
+    );
+}

components/Jotting/task.js

@@ -7,6 +7,7 @@ import CreateJottingButton from "../CreateJottingButton/createJottingButton";
 import { useState } from "react";
 import StyledCheckbox from "../StyledCheckbox/styledCheckbox";
 import ShareButton from "../ShareButton/shareButton";
+import SubtasksControl from "./subtasksControl";
 
 export default function Task(task) {
 	return (
@@ -26,20 +27,3 @@ export default function Task(task) {
 		</Jotting>
 	);
 }
-
-function SubtasksControl({ task }) {
-	const [subtasks, setSubtasks] = useState(null);
-	return (
-		<div className={jotting.subtasksControl}>
-			<h3 className={jotting.subtaskHeading}>Subtasks</h3>
-			<SubtaskList id={task.id} subtasksState={[subtasks, setSubtasks]} />
-			<CreateJottingButton
-				requestFunc="createSubtask"
-				jotType="subtask"
-				jots={subtasks}
-				setJots={setSubtasks}
-				requestArg1={task.id}
-			/>
-		</div>
-	);
-}

components/JottingsControls/taskControl.js

@@ -1,7 +1,8 @@
 import { useRouter } from "next/router";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import UrlService from "../../libs/UrlService";
 import { useEscapeAlerter, useOutsideAlerter } from "../../libs/view";
+import Subtask from "../Jotting/subtask";
 import Task from "../Jotting/task";
 import ShareMenu from "../ShareMenu/shareMenu";
 import jottingsControl from "./jottingsControl.module.css";
@@ -11,31 +12,39 @@ export default function TaskControl({ tasks }) {
 	const urlService = new UrlService(router);
 	const ref = useRef(null);
 	const [showShareMenu, setShowShareMenu] = useState(false);
+	const [urlInfo, setUrlInfo] = useState(urlService.getQueryJottingInfo("task") || null);
+
+	useEffect(() => {
+		setUrlInfo(urlService.getQueryJottingInfo("task"));
+	}, [router.asPath]);
 
 	useOutsideAlerter(ref, router);
 
 	// Escape the jot popup when Escape is pressed
 	useEscapeAlerter(router);
 
-	urlService.setQueryToJottingInfo("task");
-
-	return tasks &&
-		((router.query.type &&
-			router.query.type == "task" &&
-			router.query.id) ||
-			urlService.queryHasJottingInfo("task")) ? (
+	// Load notes and tasks before proceeding with showing any task or subtask
+	return tasks && urlInfo != null ? (
 		<article
 			ref={ref}
 			className={`${jottingsControl.fullJotting} ${jottingsControl.taskControl}`}
 		>
+			{console.log("Searching for task with given id...", urlInfo[1])}
 			<div
 				ref={showShareMenu ? null : ref}
 				className={jottingsControl.jottingContent}
 			>
-				<Task
-					showShareMenuState={[showShareMenu, setShowShareMenu]}
-					{...tasks.find((item) => item.id == router.query.id)}
-				/>
+				{
+					tasks.find(item => item.id == urlInfo[1]) ? 
+					<Task
+						showShareMenuState={[showShareMenu, setShowShareMenu]}
+						{...tasks.find((item) => item.id == urlInfo[1])}
+					/> : 
+					<Subtask 
+						showShareMenuState={[showShareMenu, setShowShareMenu]} 
+						id={urlInfo[1]} 
+					/>
+				}
 			</div>
 
 			{showShareMenu && router.query.type == "task" ? (

libs/Datastore/requests.js

@@ -66,11 +66,10 @@ export async function getSharedJottings(abortController = null) {
 	return response;
 }
 
-export async function getTask(id, abortController = null) {
+export function getTask(id) {
 	const queryString = `id=${id}`;
-	return await BorumJotRequest.initialize(`task?${queryString}`)
-		.authorize()
-		.makeRequest(abortController);
+	return BorumJotRequest.initialize(`task?${queryString}`)
+		.authorize();
 }
 
 /**