🚚 update: Highlight directly by clicking commits in CommitSelector (#19)

Improve UI by removing the checked commit highlighter button and adding a heading

Author: HarshKapadia2

src/components/App/App.jsx

@@ -33,6 +33,7 @@ function App() {
 
 	useEffect(() => {
 		if (objectData.objects !== undefined) {
+			setIsLoading(true);
 			const updatedObjectData = colorObjectsAndConnections(
 				objectData,
 				selectedCommits

src/components/CommitSelector/CommitSelector.css

@@ -15,17 +15,20 @@
 	z-index: 2;
 }
 
+#commit-selector h2 {
+	margin: 0.5em 0.5em 1em 0.5em;
+}
+
 #commit-selector-commit-wrapper,
-#commit-selector-shortcut-btn-wrapper,
-#commit-selector-btn-wrapper {
+#commit-selector-shortcut-btn-wrapper {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }
 
-#commit-selector-btn-wrapper {
-	padding-bottom: 0.5em;
+#commit-selector-shortcut-btn-wrapper {
+	margin-bottom: 1em;
 }
 
 #commit-selector-dismiss {
@@ -35,7 +38,7 @@
 }
 
 #selector-commit-wrapper {
-	max-height: 73vh;
+	max-height: 71vh;
 	overflow: auto;
 	width: 100%;
 	display: flex;

src/components/CommitSelector/CommitSelector.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import "./CommitSelector.css";
 import cross from "./cross.svg";
 
@@ -12,11 +12,13 @@ const CommitSelector = ({
 		new Array(commits.length).fill(false)
 	);
 
+	const timeoutInstance = useRef();
+
 	useEffect(() => {
 		if (selectedCommits.length === 0)
 			setIsChecked(new Array(commits.length).fill(false));
 		else {
-			const updatedCheckedState = [];
+			let updatedCheckedState = [];
 			for (let i = 0; i < commits.length; i++) {
 				if (
 					selectedCommits.some(
@@ -34,14 +36,25 @@ const CommitSelector = ({
 	const handleCheckboxChange = (index) => {
 		let checkboxState = [...isChecked]; // Can't directly assign, as passing by reference isn't considered as a change
 		checkboxState[index] = !checkboxState[index];
+
 		setIsChecked(checkboxState);
+		debouncedCommitSubmission(checkboxState);
+	};
+
+	const debouncedCommitSubmission = (checkboxState) => {
+		clearTimeout(timeoutInstance.current);
+
+		timeoutInstance.current = setTimeout(
+			() => submitSelectedCommits(checkboxState),
+			900
+		);
 	};
 
-	const submitSelectedCommits = () => {
+	const submitSelectedCommits = (checkboxState) => {
 		let commitArr = [];
-		for (let i = 0; i < commits.length; i++) {
-			if (isChecked[i] === true) commitArr.push(commits[i].hash);
-		}
+		for (let i = 0; i < commits.length; i++)
+			if (checkboxState[i] === true) commitArr.push(commits[i].hash);
+
 		selectCommits(commitArr);
 	};
 
@@ -73,6 +86,8 @@ const CommitSelector = ({
 					</button>
 				</div>
 
+				<h2>Highlight Commits</h2>
+
 				<div id="commit-selector-shortcut-btn-wrapper">
 					<button onClick={() => submitAllCommits()}>
 						Highlight All Commits
@@ -83,12 +98,6 @@ const CommitSelector = ({
 					</button>
 				</div>
 
-				<div id="commit-selector-btn-wrapper">
-					<button onClick={() => submitSelectedCommits()}>
-						Highlight Checked Commits
-					</button>
-				</div>
-
 				<div
 					id="selector-commit-wrapper"
 					onWheel={(event) => event.stopPropagation()}