From ebcf3c29ab638f9f2ca1362b7beed2a7b08c9275 Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Mon, 1 Jul 2024 14:08:10 +0530 Subject: [PATCH 1/8] add: label to language list option --- .../LanguageChoice/LanguagesList.tsx | 24 ++++++++++--------- src/pages/LandingPage/LandingPage.scss | 2 +- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/LanguageChoice/LanguagesList.tsx b/src/components/LanguageChoice/LanguagesList.tsx index 2d0c9dbf7..79bcd844f 100644 --- a/src/components/LanguageChoice/LanguagesList.tsx +++ b/src/components/LanguageChoice/LanguagesList.tsx @@ -1,13 +1,11 @@ import React from "react"; import i18n from "i18next"; - import { useRecoilState } from "recoil"; import { ILanguageListProps, ILanguage } from "@src/Interfaces/ILanguage"; import { vibrateWorks } from "@src/constants/vibrateCheck"; import { languageSelectionState } from "@src/store"; -export const LanguagesList = (props: ILanguageListProps) => { - const { languages, navigationCallback, type, hideSelected } = props; +export const LanguagesList = ({ languages, navigationCallback, type, hideSelected }: ILanguageListProps) => { const [, setIsLanguageChosen] = useRecoilState(languageSelectionState); const sortedLanguages = [languages[0], ...languages.slice(1).sort((a, b) => a.title.localeCompare(b.title))]; @@ -21,20 +19,24 @@ export const LanguagesList = (props: ILanguageListProps) => { if (type === "fragment" && navigationCallback) navigationCallback("/ZinZenFAQ"); else window.history.back(); }; + return (
{sortedLanguages.map((lang: ILanguage) => ( - + handleClick(lang.langId)} + checked={lang.selected} + readOnly + id={lang.sno.toString()} + /> + ))}
); diff --git a/src/pages/LandingPage/LandingPage.scss b/src/pages/LandingPage/LandingPage.scss index 378257937..efb1dd4f0 100644 --- a/src/pages/LandingPage/LandingPage.scss +++ b/src/pages/LandingPage/LandingPage.scss @@ -14,7 +14,7 @@ border-radius: 0.5rem; box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.25); - button { + label { width: 100%; display: flex; justify-content: space-between; From b6f682d576ce5d91b4cade808513e1b2851d11c5 Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Mon, 1 Jul 2024 17:22:58 +0530 Subject: [PATCH 2/8] add: hook to detect key press --- src/hooks/useKeyPress.ts | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/hooks/useKeyPress.ts diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts new file mode 100644 index 000000000..5d74b705a --- /dev/null +++ b/src/hooks/useKeyPress.ts @@ -0,0 +1,35 @@ +import { useEffect, useState, useCallback } from "react"; + +export const useKeyPress = (targetKey: string) => { + const [keyPressed, setKeyPressed] = useState(false); + + const downHandler = useCallback( + (event: KeyboardEvent) => { + if (event.key === targetKey) { + setKeyPressed(true); + } + }, + [targetKey], + ); + + const upHandler = useCallback( + (event: KeyboardEvent) => { + if (event.key === targetKey) { + setKeyPressed(false); + } + }, + [targetKey], + ); + + useEffect(() => { + window.addEventListener("keydown", downHandler); + window.addEventListener("keyup", upHandler); + + return () => { + window.removeEventListener("keydown", downHandler); + window.removeEventListener("keyup", upHandler); + }; + }, [downHandler, upHandler]); + + return keyPressed; +}; From 0758b7e7e40bccf49e115618dba32dbd55e2bf08 Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Mon, 1 Jul 2024 17:33:06 +0530 Subject: [PATCH 3/8] edit: trigger continue when enter pressed --- src/pages/FAQPage/FAQPage.tsx | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/pages/FAQPage/FAQPage.tsx b/src/pages/FAQPage/FAQPage.tsx index 954aac0cc..b29626ad0 100644 --- a/src/pages/FAQPage/FAQPage.tsx +++ b/src/pages/FAQPage/FAQPage.tsx @@ -1,15 +1,15 @@ /* eslint-disable no-unused-expressions */ -import React from "react"; +import React, { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; - +import { useRecoilValue } from "recoil"; +import { darkModeState } from "@src/store"; import chevronLeftIcon from "@assets/images/chevronLeft.svg"; - import ZAccordion from "@src/common/Accordion"; -import { vibrateWorks } from "@src/constants/vibrateCheck"; import OnboardingLayout from "@src/layouts/OnboardingLayout"; -import { useRecoilValue } from "recoil"; -import { darkModeState } from "@src/store"; +import { vibrateWorks } from "@src/constants/vibrateCheck"; +import { useKeyPress } from "@src/hooks/useKeyPress"; + import "./FAQPage.scss"; import "@translations/i18n"; @@ -24,6 +24,8 @@ export const FAQPage = () => { { header: t("qTooGoodToBeTrue"), body: t("ansTooGoodToBeTrue") }, ]; + const enterPressed = useKeyPress("Enter"); + const handleClick = () => { localStorage.setItem("checkedIn", "yes"); const invite = localStorage.getItem("pendingInvite"); @@ -36,6 +38,12 @@ export const FAQPage = () => { } }; + useEffect(() => { + if (enterPressed) { + handleClick(); + } + }, [enterPressed]); + return (

@@ -46,7 +54,8 @@ export const FAQPage = () => { defaultActiveKey={["1"]} showCount={false} style={{ background: "var(--bottom-nav-color)" }} - panels={QnA.map((ele) => ({ + panels={QnA.map((ele, index) => ({ + key: index.toString(), header: ele.header, body: (

From 4bc3a530da1639e7b6792f54efe62e8b8a9930ed Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Mon, 1 Jul 2024 17:34:03 +0530 Subject: [PATCH 4/8] add: hook to manage language list navigation --- src/hooks/useLanguageSelection.ts | 32 +++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/hooks/useLanguageSelection.ts diff --git a/src/hooks/useLanguageSelection.ts b/src/hooks/useLanguageSelection.ts new file mode 100644 index 000000000..6e81ab8e8 --- /dev/null +++ b/src/hooks/useLanguageSelection.ts @@ -0,0 +1,32 @@ +import { ILanguage } from "@src/Interfaces"; +import { useEffect, useState } from "react"; +import { useKeyPress } from "./useKeyPress"; + +export const useLanguageSelection = (languages: ILanguage[], handleClick: (langId: string) => void): number => { + const [focusedIndex, setFocusedIndex] = useState(0); + + const upPress = useKeyPress("ArrowUp"); + const downPress = useKeyPress("ArrowDown"); + const enterPress = useKeyPress("Enter"); + + useEffect(() => { + if (downPress) { + setFocusedIndex((prevIndex) => (prevIndex + 1) % languages.length); + } + }, [downPress]); + + useEffect(() => { + if (upPress) { + setFocusedIndex((prevIndex) => (prevIndex - 1 + languages.length) % languages.length); + } + }, [upPress]); + + useEffect(() => { + if (enterPress) { + const { langId } = languages[focusedIndex]; + handleClick(langId); + } + }, [enterPress]); + + return focusedIndex; +}; From ae17f2931a01ca51f2dc4b0756777adcef495041 Mon Sep 17 00:00:00 2001 From: vinaybadgujar102 Date: Mon, 1 Jul 2024 17:34:40 +0530 Subject: [PATCH 5/8] edit: consume useLanguageSelection hook --- .../LanguageChoice/LanguagesList.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/LanguageChoice/LanguagesList.tsx b/src/components/LanguageChoice/LanguagesList.tsx index 79bcd844f..cfa8dabb4 100644 --- a/src/components/LanguageChoice/LanguagesList.tsx +++ b/src/components/LanguageChoice/LanguagesList.tsx @@ -1,13 +1,14 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import i18n from "i18next"; -import { useRecoilState } from "recoil"; +import { useSetRecoilState } from "recoil"; import { ILanguageListProps, ILanguage } from "@src/Interfaces/ILanguage"; import { vibrateWorks } from "@src/constants/vibrateCheck"; import { languageSelectionState } from "@src/store"; +import { useLanguageSelection } from "../../hooks/useLanguageSelection"; export const LanguagesList = ({ languages, navigationCallback, type, hideSelected }: ILanguageListProps) => { - const [, setIsLanguageChosen] = useRecoilState(languageSelectionState); - const sortedLanguages = [languages[0], ...languages.slice(1).sort((a, b) => a.title.localeCompare(b.title))]; + const setIsLanguageChosen = useSetRecoilState(languageSelectionState); + const labelRefs = useRef([]); const handleClick = (langId: string) => { if (vibrateWorks) { @@ -20,11 +21,21 @@ export const LanguagesList = ({ languages, navigationCallback, type, hideSelecte else window.history.back(); }; + const focusedIndex = useLanguageSelection(languages, handleClick); + + useEffect(() => { + labelRefs.current[focusedIndex]?.focus(); + }, [focusedIndex]); + return (

- {sortedLanguages.map((lang: ILanguage) => ( + {languages.map((lang: ILanguage, index: number) => (