Implement task completion ...viewing

Author: varunsingh87

components/Jotting/JottingOptionsBar.js

@@ -12,7 +12,7 @@ export default function JottingOptionsBar(props) {
 			await deleteJotting(props);
 			Jotting.closeJotting(router);
 		} catch {
-			alert("The note was not deleted due to a system error");
+			alert("The jotting was not deleted due to a system error");
 		}
 	};
 

components/Jotting/noteOptionsBar.js

@@ -12,7 +12,7 @@ export default function NoteOptionsBar(props) {
     };
 
     return (
-        <JottingOptionsBar {...props}>
+        <JottingOptionsBar jotType="note" {...props}>
             <button onClick={handleShareClick}>
                 <Image height={35} width={55} src="/images/share.png" alt="share icon" title="Share jotting" />
             </button>

components/Jotting/task.js

@@ -5,29 +5,38 @@ import JottingOptionsBar from "./JottingOptionsBar";
 import SubtaskList from "./subtaskList";
 import CreateJottingButton from "../CreateJottingButton/createJottingButton";
 import { useState } from "react";
+import StyledCheckbox from "../StyledCheckbox/styledCheckbox";
 
 export default function Task(task) {
 	return (
 		<Jotting jotType="task" {...task}>
-			<JottingOptionsBar {...task} />
+			<JottingOptionsBar jotType="task" {...task}>
+				<div>
+					<StyledCheckbox
+						id={task.id}
+						prefix="task-completion-box-"
+						completed={task.completed == 1}
+					/>
+				</div>
+			</JottingOptionsBar>
 			<JottingDetails jotType="task" jottingInfo={task} />
 			<SubtasksControl task={task} />
 		</Jotting>
 	);
 }
 
-function SubtasksControl({task}) {
+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]}/>
+			<SubtaskList id={task.id} subtasksState={[subtasks, setSubtasks]} />
 			<CreateJottingButton
 				requestFunc="createSubtask"
 				jotType="subtask"
-                jots={subtasks}
-                setJots={setSubtasks}
-                requestArg1={task.id}
+				jots={subtasks}
+				setJots={setSubtasks}
+				requestArg1={task.id}
 			/>
 		</div>
 	);