New App Config wth dummy config for Form, Redux setup (Config, panel config, field config, localisation) setup initial commit #3242
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,6 +1,6 @@ | ||||||||||||||||||||||||||||||||||||||||||
| import { useTranslation } from "react-i18next"; | ||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||
| import React, { Fragment, useEffect } from "react"; | ||||||||||||||||||||||||||||||||||||||||||
| import { EmployeeModuleCard } from "@egovernments/digit-ui-react-components"; | ||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||
| const ROLES = { | ||||||||||||||||||||||||||||||||||||||||||
|
|
@@ -27,9 +27,9 @@ const CampaignCard = () => { | |||||||||||||||||||||||||||||||||||||||||
| const { t } = useTranslation(); | ||||||||||||||||||||||||||||||||||||||||||
| const microplanStatus = "RESOURCE_ESTIMATIONS_APPROVED"; | ||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||
| useEffect(() => { | ||||||||||||||||||||||||||||||||||||||||||
| sessionStorage.removeItem("HCM_SELECTED_TAB_INDEX"); | ||||||||||||||||||||||||||||||||||||||||||
| }, []); | ||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+30
to
+32
Contributor
There was a problem hiding this comment. Move useEffect above the early return. The useEffect hook is called after a conditional early return (line 24), violating React's Rules of Hooks. Hooks must be called unconditionally and in the same order on every render. When the employee lacks required roles, the component returns null before reaching the useEffect, breaking the hook calling order. Apply this diff to fix the hook placement: const CampaignCard = () => {
+ useEffect(() => {
+ sessionStorage.removeItem("HCM_SELECTED_TAB_INDEX");
+ }, []);
+
if (!Digit.Utils.didEmployeeHasAtleastOneRole(Object.values(ROLES).flatMap((e) => e))) {
return null;
}
const { t } = useTranslation();
const microplanStatus = "RESOURCE_ESTIMATIONS_APPROVED";
- useEffect(() => {
- sessionStorage.removeItem("HCM_SELECTED_TAB_INDEX");
- }, []);📝 Committable suggestion
Suggested change
🧰 Tools🪛 Biome (2.1.2)[error] 30-30: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render. Hooks should not be called after an early return. For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order. (lint/correctness/useHookAtTopLevel) 🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||
| let links = [ | ||||||||||||||||||||||||||||||||||||||||||
| // { | ||||||||||||||||||||||||||||||||||||||||||
|
|
@@ -55,6 +55,12 @@ const CampaignCard = () => { | |||||||||||||||||||||||||||||||||||||||||
| roles: ROLES.CAMPAIGN_MANAGER, | ||||||||||||||||||||||||||||||||||||||||||
| // count: isLoading?"-":data | ||||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||||
| { | ||||||||||||||||||||||||||||||||||||||||||
| label: t("NEW APP CONFIGURATION"), | ||||||||||||||||||||||||||||||||||||||||||
| link: `/${window?.contextPath}/employee/campaign/new-app-configuration-redesign?variant=app&masterName=FormConfig&fieldType=FieldTypeMappingConfig&prefix=CMP-2025-09-29-009540&localeModule=APPONE&tenantId=mz&campaignNumber=CMP-2025-09-29-009540&formId=default&projectType=Schisto`, | ||||||||||||||||||||||||||||||||||||||||||
| roles: ROLES.CAMPAIGN_MANAGER, | ||||||||||||||||||||||||||||||||||||||||||
| // count: isLoading?"-":data | ||||||||||||||||||||||||||||||||||||||||||
| }, | ||||||||||||||||||||||||||||||||||||||||||
nabeelmd-eGov marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||||||||||||||||||||||||||||||||||
| { | ||||||||||||||||||||||||||||||||||||||||||
| label: t("ACTION_TEST_SETUP_CAMPAIGN_FROM_MICROPLAN"), | ||||||||||||||||||||||||||||||||||||||||||
| link: `/${window?.contextPath}/employee/campaign/setup-from-microplan?status=${microplanStatus}`, | ||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix a11y: clickable div must be keyboard‑accessible.
Add role, tabIndex, and key handler for Enter/Space. Also satisfies lint a11y errors.
I can run a quick pass to add roles/keys where needed elsewhere too.
📝 Committable suggestion
🧰 Tools
🪛 Biome (2.1.2)
[error] 201-212: Static Elements should not be interactive.
To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
(lint/a11y/noStaticElementInteractions)
[error] 201-212: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
🤖 Prompt for AI Agents