From 4ac06997bb6b70887f2494b9e8757ae7744be178 Mon Sep 17 00:00:00 2001
From: Frowmza <66181451+Frowmza@users.noreply.github.com>
Date: Sat, 2 Mar 2024 23:38:05 +0100
Subject: [PATCH] refactor(keyPress hook): use all controls to 1 useKeyPress
---
web/build/index.html | 2 +-
web/src/components/MainContainer.tsx | 15 +++++++--------
2 files changed, 8 insertions(+), 9 deletions(-)
diff --git a/web/build/index.html b/web/build/index.html
index ff5fd4f..48e2179 100644
--- a/web/build/index.html
+++ b/web/build/index.html
@@ -5,7 +5,7 @@
NUI React Boilerplate
-
+
diff --git a/web/src/components/MainContainer.tsx b/web/src/components/MainContainer.tsx
index f9dc07d..692fcb1 100644
--- a/web/src/components/MainContainer.tsx
+++ b/web/src/components/MainContainer.tsx
@@ -18,21 +18,20 @@ const upperCase = (text: string) => {
const MainContainer: React.FC = () => {
const { setMenuData, menu } = useContext(CardsContext);
+ const keyPress = useKeyPress(['ArrowRight', 'ArrowLeft', 'Enter', 'Backspace'], true);
if (menu.current === 'exit') return null
- const arrowsClick = useKeyPress(['ArrowRight', 'ArrowLeft'], true);
- const enterClick = useKeyPress('Enter');
- const backspace = useKeyPress('Backspace');
+
const [selected, setSelected] = useState({mod: ''})
const [cardsCount, setCardsCount] = useState<{total: number, current: number}>({total: 0, current: 0})
useEffect(() => {
- if (backspace) handleClick({mod: 'back'}, menu, setMenuData)
- if (enterClick && selected.mod !== '') handleClick(selected, menu, setMenuData)
- if (arrowsClick) {
+ if (keyPress == 'Backspace') handleClick({mod: 'back'}, menu, setMenuData)
+ else if (keyPress == 'Enter' && selected.mod !== '') handleClick(selected, menu, setMenuData)
+ else if (keyPress == 'ArrowRight' || keyPress == 'ArrowLeft') {
const updatedData = [...menu.data];
const foundSelected = menu.data.find(obj => obj.selected === true);
const selectedIndex = foundSelected ? menu.data.indexOf(foundSelected) : 0;
- const directionMultiplier = arrowsClick === 'ArrowRight' ? (selectedIndex + 1) : (selectedIndex - 1 + menu.data.length);
+ const directionMultiplier = keyPress === 'ArrowRight' ? (selectedIndex + 1) : (selectedIndex - 1 + menu.data.length);
const nextIndex = directionMultiplier % menu.data.length
const nextObject = updatedData[nextIndex]
const isToggle = nextObject.toggle
@@ -41,7 +40,7 @@ const MainContainer: React.FC = () => {
if (typeof nextObject.id === 'number' && !isToggle) fetchNui('applyMod', nextObject.id)
setMenuData({ ...menu, data: updatedData });
}
- }, [backspace, enterClick, arrowsClick]);
+ }, [keyPress]);
const RenderCards = useMemo(() => {
let icon = menu.currentMenu === 'decals' && DecalsSvg || menu.currentMenu === 'wheels' && WheelsSvg || menu.currentMenu === 'paint' && (() => Icon(faFillDrip)) || (() => Icon(faCar))