use combine key press

lifeparticle · Oct 27, 2023 · dbba6c9 · dbba6c9
1 parent d8f0810
commit dbba6c9
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 52 deletions.
diff --git a/ui/src/components/General/PopupSearch/index.tsx b/ui/src/components/General/PopupSearch/index.tsx
@@ -41,7 +41,7 @@ const PopupSearch: React.FC = () => {
 		);
 	}, [input]);
 
-	useCombinedKeyPress(handleModalOpen, ["Meta", "k"]);
+	useCombinedKeyPress(handleModalOpen, ["control/meta", "k"]);
 
 	return (
 		<Modal

diff --git a/ui/src/hooks/useCombinedKeyPress.ts b/ui/src/hooks/useCombinedKeyPress.ts
@@ -1,57 +1,42 @@
 import { useCallback, useEffect, useState } from "react";
-import useUserAgent from "./useUserAgent";
 
 type CallBackFunction = () => void;
 
-// mapping
-const keymap = new Map([["Meta", "control"]]);
-
 function useCombinedKeyPress(
 	callback: CallBackFunction,
 	keyCodes: string[]
 ): void {
-	const platform = useUserAgent();
 	const [pressedKeys, setPressedKeys] = useState<string[]>([]);
 
+	useEffect(() => {
+		const isMatched = compareArrays(pressedKeys, keyCodes);
+		if (isMatched) {
+			callback();
+			setPressedKeys([]);
+		}
+	}, [pressedKeys, keyCodes, callback]);
+
 	const handleKeyDown = useCallback(
 		(event: KeyboardEvent) => {
-			if (!pressedKeys.includes(event.key)) {
-				const key =
-					platform === "win" ? keymap.get(event.key) : event.key;
-				setPressedKeys((prev) => [...prev, key || ""]);
+			event.preventDefault();
+			const key = event.key.toLowerCase();
+			if (!pressedKeys.includes(key)) {
+				setPressedKeys((prev) => [...prev, key]);
 			}
-
-			console.log("handleKeyDown", event.key, callback);
 		},
-		[pressedKeys, platform]
+		[pressedKeys]
 	);
 
-	useEffect(() => {
-		console.log("pressedKeys", pressedKeys);
-		const identifyKey = () => {
-			for (const key of keyCodes) {
-				if (!pressedKeys.includes(key)) {
-					return false;
-				}
-			}
-			return true;
-		};
-		const val = identifyKey();
-		console.log("val", val);
-	}, [pressedKeys, keyCodes]);
-
 	const handleKeyUp = useCallback(
 		(event: KeyboardEvent) => {
-			const keyUp =
-				platform === "win" ? keymap.get(event.key) : event.key;
-			console.log("keyUp", keyUp);
-			const filteredKeys = pressedKeys.filter((key) => key !== keyUp);
-
-			setPressedKeys(filteredKeys);
-
-			console.log("handleKeyUp", event.key);
+			event.preventDefault();
+			const key = event.key.toLowerCase();
+			if (pressedKeys.includes(key)) {
+				const filteredKeys = pressedKeys.filter((key) => key !== key);
+				setPressedKeys(filteredKeys);
+			}
 		},
-		[pressedKeys, platform]
+		[pressedKeys]
 	);
 
 	useEffect(() => {
@@ -62,6 +47,19 @@ function useCombinedKeyPress(
 			window.removeEventListener("keyup", handleKeyUp);
 		};
 	}, [handleKeyDown, handleKeyUp]);
+
+	function compareArrays(pressedArray: string[], mainArray: string[]) {
+		if (pressedArray?.length !== mainArray?.length) return false;
+
+		for (const iterator of mainArray) {
+			const filteredArray = pressedArray.filter((key) =>
+				iterator.includes(key)
+			);
+			if (!(filteredArray?.length > 0)) return false;
+		}
+
+		return true;
+	}
 }
 
 export default useCombinedKeyPress;
diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss
@@ -13,8 +13,6 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			background: url("../../assets/About/card_bg.jpg") no-repeat left /
-				cover;
 
 			&_text {
 				backdrop-filter: blur(100px);

diff --git a/ui/src/pages/About/components/Credits.tsx b/ui/src/pages/About/components/Credits.tsx
@@ -43,33 +43,28 @@ const CREDITS_DATA: Credits[] = [
 		name: "Movie for hackers",
 		url: "https://github.com/k4m4/movies-for-hackers",
 	},
-	// {
-	// 	key: "5",
-	// 	name: "",
-	// 	url: "",
-	// },
 	{
-		key: "6",
-		name: "Hassaan Here",
-		url: "https://unsplash.com/photos/bKfkhVRAJTQ",
+		key: "5",
+		name: "unDraw",
+		url: "https://undraw.co/",
 	},
 	{
-		key: "7",
+		key: "6",
 		name: "Frontend Focus",
 		url: "https://frontendfoc.us/",
 	},
 	{
-		key: "8",
+		key: "7",
 		name: "React Status",
 		url: "https://react.statuscode.com/",
 	},
 	{
-		key: "9",
+		key: "8",
 		name: "Lucide",
 		url: "https://lucide.dev/",
 	},
 	{
-		key: "10",
+		key: "9",
 		name: "Dudeowl",
 		url: "https://99designs.com.au/profiles/dudeowl",
 	},

diff --git a/ui/src/pages/About/index.tsx b/ui/src/pages/About/index.tsx
@@ -10,7 +10,7 @@ const About = () => {
 	return (
 		<>
 			<div className={style.about}>
-				<div className={style.about__card}>
+				<Card className={style.about__card}>
 					<div className={style.about__card__intro}>
 						<Typography.Title
 							level={5}
@@ -50,7 +50,7 @@ const About = () => {
 							<p>{`— A node in the BinaryTree.`}</p>
 						</Typography.Title>
 					</div>
-				</div>
+				</Card>
 				<Card className={style.about__card} bordered={false}>
 					<Values />
 				</Card>