added facility search #1556
added facility search #1556
Conversation
📝 Walkthrough📝 WalkthroughWalkthroughThe changes introduce several new components and configurations related to facility management within the micro UI framework. A new CSS class for popups has been added, alongside a new React component, Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 25
🧹 Outside diff range comments (1)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js (1)
Inconsistent Naming of FacilityPopup Component
- The
FacilityPopupcomponent is imported inModule.jscorrectly.- In
UICustomizations.js, it is imported asFacilityPopUp, which has inconsistent casing.- Ensure consistent naming (
FacilityPopup) across all imports to prevent potential import errors and maintain code reliability.🔗 Analysis chain
Line range hint
52-77: Consider alphabetical sorting and verify FacilityPopup usage.While the changes look good, here are two suggestions for improvement:
Consider sorting the componentsToRegister object alphabetically for easier maintenance and readability.
Ensure that the FacilityPopup component is correctly used in other parts of the application where needed.
To verify the usage of FacilityPopup in the codebase, you can run the following script:
This script will help identify where FacilityPopup is being used and imported throughout the codebase.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Search for FacilityPopup usage in the codebase # Test: Search for FacilityPopup usage echo "Searching for FacilityPopup usage:" rg --type js 'FacilityPopup' # Test: Check if FacilityPopup is imported in other files echo "Checking for FacilityPopup imports:" rg --type js 'import.*FacilityPopup'Length of output: 905
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
📒 Files selected for processing (8)
- health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/facility.scss (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js (2 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/FacilityMappingConfig.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js (8 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMappnig.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (3 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/FacilityMappingConfig.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMappnig.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (1)
Pattern
**/*.js: check
🪛 Biome
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
[error] 20-22: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 19-19: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 20-22: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 26-33: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMappnig.js
[error] 6-6: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
[error] 14-16: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🔇 Additional comments (8)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMappnig.js (1)
13-13: Verify the existence of the "inbox-search-wrapper" class.The component uses the className "inbox-search-wrapper", but its styling is not visible in this file. Ensure that this class is defined in your CSS files or styled-components to avoid potential styling issues.
Run the following script to check for the usage of this class name:
✅ Verification successful
Verified: The "inbox-search-wrapper" class is properly defined in the CSS files and is used correctly within the components.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for the usage and definition of the "inbox-search-wrapper" class # Test: Search for the class name in CSS files echo "Searching for 'inbox-search-wrapper' in CSS files:" rg --type css 'inbox-search-wrapper' # Test: Search for the class name in JS/JSX files (for styled-components) echo "Searching for 'inbox-search-wrapper' in JS/JSX files:" rg --type js 'inbox-search-wrapper'Length of output: 3694
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js (2)
9-11: LGTM: Component setup and configuration.The translation setup and configuration retrieval look good. The use of
useTranslationhook andfacilityMappingConfigis appropriate for the component's needs.
41-41: LGTM: Component export.The default export of the FacilityPopUp component is correct and follows common React practices.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js (1)
24-24: LGTM: FacilityPopup import added correctly.The import statement for the new FacilityPopup component is correctly implemented.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (2)
69-71: LGTM: Additional MDMS data requestsThe addition of "facilityType" and "facilityStatus" to the MDMS data requests is appropriate for implementing the facility search functionality. This change will ensure that the necessary data for facility types and statuses is available in the application.
Line range hint
1-195: Summary of changesThe changes in this file successfully introduce new functionality for facility search and assignment, aligning with the PR objective. The additions include:
- A new import for the FacilityCatchmentMapping component (with a typo to be fixed).
- Additional MDMS data requests for facility types and statuses.
- A new PrivateRoute for the facility assignment functionality.
These changes enhance the application's capabilities for facility management within the microplanning context. Please address the typo in the import statement, and the changes look good to merge after verification.
🧰 Tools
🪛 Biome
[error] 74-74: Use Number.Infinity instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.Infinity instead.(lint/style/useNumberNamespace)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/FacilityMappingConfig.js (2)
50-50: Review the regular expression patterns for accuracyThe regex patterns used in the validation for
facilityNameandresidingVillageare complex and may be overly restrictive. Consider reviewing and testing these patterns to ensure they correctly validate user input without unintended exclusions.Also applies to: 95-95
66-66: Ensure 'state' properties are correctly populatedIn the options for
facilityTypeandstatus, you're usingstate?.facilityType || []andstate?.facilityStatus || []. Verify thatstate.facilityTypeandstate.facilityStatusare correctly populated to prevent potential issues if these properties are undefined or null.Run the following script to check where
state.facilityTypeandstate.facilityStatusare assigned:Also applies to: 80-80
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/facility.scss
Show resolved
Hide resolved
...micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMappnig.js
Outdated
Show resolved
Hide resolved
...micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMappnig.js
Outdated
Show resolved
Hide resolved
...micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMappnig.js
Outdated
Show resolved
Hide resolved
...micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMappnig.js
Outdated
Show resolved
Hide resolved
...h/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js
Show resolved
Hide resolved
...h/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js
Show resolved
Hide resolved
...h/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js
Show resolved
Hide resolved
...h/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js
Show resolved
Hide resolved
...h/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
📒 Files selected for processing (4)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js (2 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMapping.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (3 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMapping.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (1)
Pattern
**/*.js: check
🪛 Biome
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js
[error] 18-20: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 17-17: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 18-20: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 24-31: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMapping.js
[error] 14-16: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🔇 Additional comments (8)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMapping.js (3)
1-4: LGTM: Imports are well-organized and appropriate.The imports are correctly structured, importing necessary components and hooks. The use of a separate configuration file (
facilityMappingConfig) promotes modularity and maintainability.
6-9: LGTM: Component structure follows best practices.The
FacilityCatchmentMappingcomponent is well-structured as a functional component. It correctly uses theuseTranslationhook for internationalization and retrieves configuration data, promoting maintainability and separation of concerns.
10-19: LGTM: Rendering logic is clear and well-structured.The component's rendering logic is straightforward and effective. It correctly uses the
Headercomponent with a translated string and theInboxSearchComposerwith the retrieved configuration. The use of a React Fragment is appropriate for wrapping multiple elements without adding extra nodes to the DOM.🧰 Tools
🪛 Biome
[error] 14-16: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js (1)
1-39: Overall assessment: Good implementation with minor improvements needed.The
FacilityPopUpcomponent introduces a new feature for facility mapping, which aligns well with the PR objectives. The overall structure and functionality of the component are appropriate for its purpose.Key points:
- The component correctly utilizes React hooks and external libraries.
- The popup structure with a search composer and close button is logically implemented.
- Minor issues were identified and addressed in the previous comments, including unused imports, JSX structure improvements, and proper use of key props.
To further improve the component:
- Implement the suggested changes for JSX structure and prop usage.
- Remove the unused Card import.
- Consider adding prop-types for better type checking and documentation.
- Evaluate if any unit tests should be added to ensure the component's functionality.
🧰 Tools
🪛 Biome
[error] 18-20: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 17-17: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 18-20: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 24-31: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js (1)
24-24: LGTM: FacilityPopup import added correctly.The import statement for the new
FacilityPopupcomponent is correctly added and follows the existing import style in the file.health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (3)
190-190: Existing concern: MissingFacilityCatchmentMappingcomponentThe previous review comment regarding the missing
FacilityCatchmentMappingcomponent is still applicable to this code segment.
19-19: Verify the existence ofFacilityCatchmentMappingcomponentEnsure that the
FacilityCatchmentMappingcomponent exists at the specified path"./FacilityCatchmentMapping". This will prevent runtime errors due to missing modules.To confirm, run the following script:
✅ Verification successful
Verification Successful:
FacilityCatchmentMappingcomponent exists🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if FacilityCatchmentMapping.js exists in the specified directory. fd --type f "FacilityCatchmentMapping.js" --exec echo "Found: {}"Length of output: 187
70-71: Verify MDMS entries forfacilityTypeandfacilityStatusEnsure that the MDMS configurations for
"facilityType"and"facilityStatus"exist and are properly defined in thehcm-microplanningmodule to prevent runtime errors when accessing this data.To confirm, run the following script:
| <InboxSearchComposer | ||
| configs={config} | ||
| ></InboxSearchComposer> | ||
| </div> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Use self-closing tag for InboxSearchComposer.
The InboxSearchComposer component is rendered without children, so it should use a self-closing tag for better readability and to follow JSX best practices.
Please update the code as follows:
- <InboxSearchComposer
- configs={config}
- ></InboxSearchComposer>
+ <InboxSearchComposer
+ configs={config}
+ />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <InboxSearchComposer | |
| configs={config} | |
| ></InboxSearchComposer> | |
| </div> | |
| <InboxSearchComposer | |
| configs={config} | |
| /> | |
| </div> |
🧰 Tools
🪛 Biome
[error] 14-16: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
| import React, { useState, useMemo, Fragment, useEffect } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { PopUp, Button, Card } from "@egovernments/digit-ui-components"; | ||
| import { InboxSearchComposer } from "@egovernments/digit-ui-react-components"; | ||
| import facilityMappingConfig from "../configs/FacilityMappingConfig"; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Consider reorganizing imports for better readability.
The imports are relevant and there are no unused imports. However, consider organizing them in the following order for better readability:
- React and related libraries
- External libraries (e.g., react-i18next)
- Internal components and utilities
Here's a suggested reorganization:
import React, { useState, useMemo, Fragment, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { PopUp, Button, Card } from "@egovernments/digit-ui-components";
import { InboxSearchComposer } from "@egovernments/digit-ui-react-components";
import facilityMappingConfig from "../configs/FacilityMappingConfig";| import { InboxSearchComposer } from "@egovernments/digit-ui-react-components"; | ||
| import facilityMappingConfig from "../configs/FacilityMappingConfig"; | ||
|
|
||
| const FacilityPopUp = ({ details, onClose }) => { |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Consider adding prop-types for better type checking.
To improve the component's robustness and documentation, consider adding prop-types. This will help catch potential issues early and provide better documentation for the component's API.
Example:
import PropTypes from 'prop-types';
// ... component code ...
FacilityPopUp.propTypes = {
details: PropTypes.shape({
additionalDetails: PropTypes.shape({
name: PropTypes.string
})
}),
onClose: PropTypes.func.isRequired
};Would you like assistance in implementing prop-types for this component?
| const FacilityPopUp = ({ details, onClose }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const config = facilityMappingConfig(); | ||
|
|
||
| return ( | ||
| <> | ||
| <PopUp | ||
| onClose={onClose} | ||
| heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`} | ||
| children={[ | ||
| <InboxSearchComposer | ||
| configs={config} // dummy config | ||
| ></InboxSearchComposer>, | ||
| ]} | ||
| onOverlayClick={onClose} | ||
| footerChildren={[ | ||
| <Button | ||
| className={"campaign-type-alert-button"} | ||
| type={"button"} | ||
| size={"large"} | ||
| variation={"secondary"} | ||
| label={t(`MICROPLAN_CLOSE_BUTTON`)} | ||
| onClick={onClose} | ||
| />, | ||
| ]} | ||
| className={"facility-popup"} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Improve JSX structure and prop usage.
There are several improvements that can be made to the JSX structure:
- Use self-closing tags for elements without children.
- Avoid passing children as a prop to PopUp.
- Add key props to elements in iterables.
Apply these changes to address the issues:
<PopUp
onClose={onClose}
heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`}
- children={[
- <InboxSearchComposer
- configs={config} // dummy config
- ></InboxSearchComposer>,
- ]}
+ >
+ <InboxSearchComposer
+ configs={config} // dummy config
+ />
onOverlayClick={onClose}
footerChildren={[
<Button
+ key="close-button"
className={"campaign-type-alert-button"}
type={"button"}
size={"large"}
variation={"secondary"}
label={t(`MICROPLAN_CLOSE_BUTTON`)}
onClick={onClose}
- />,
+ />
]}
className={"facility-popup"}
/>These changes will improve the component's structure and address the static analysis warnings.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const FacilityPopUp = ({ details, onClose }) => { | |
| const { t } = useTranslation(); | |
| const config = facilityMappingConfig(); | |
| return ( | |
| <> | |
| <PopUp | |
| onClose={onClose} | |
| heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`} | |
| children={[ | |
| <InboxSearchComposer | |
| configs={config} // dummy config | |
| ></InboxSearchComposer>, | |
| ]} | |
| onOverlayClick={onClose} | |
| footerChildren={[ | |
| <Button | |
| className={"campaign-type-alert-button"} | |
| type={"button"} | |
| size={"large"} | |
| variation={"secondary"} | |
| label={t(`MICROPLAN_CLOSE_BUTTON`)} | |
| onClick={onClose} | |
| />, | |
| ]} | |
| className={"facility-popup"} | |
| /> | |
| </> | |
| ); | |
| }; | |
| const FacilityPopUp = ({ details, onClose }) => { | |
| const { t } = useTranslation(); | |
| const config = facilityMappingConfig(); | |
| return ( | |
| <> | |
| <PopUp | |
| onClose={onClose} | |
| heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`} | |
| > | |
| <InboxSearchComposer | |
| configs={config} // dummy config | |
| /> | |
| onOverlayClick={onClose} | |
| footerChildren={[ | |
| <Button | |
| key="close-button" | |
| className={"campaign-type-alert-button"} | |
| type={"button"} | |
| size={"large"} | |
| variation={"secondary"} | |
| label={t(`MICROPLAN_CLOSE_BUTTON`)} | |
| onClick={onClose} | |
| /> | |
| ]} | |
| className={"facility-popup"} | |
| /> | |
| </> | |
| ); | |
| }; |
🧰 Tools
🪛 Biome
[error] 18-20: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 17-17: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 18-20: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 24-31: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
| import React, { useState, useMemo, Fragment, useEffect } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { PopUp, Button, Card } from "@egovernments/digit-ui-components"; | ||
| import { InboxSearchComposer } from "@egovernments/digit-ui-react-components"; | ||
| import facilityMappingConfig from "../configs/FacilityMappingConfig"; | ||
|
|
||
| const FacilityPopUp = ({ details, onClose }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| const config = facilityMappingConfig(); | ||
|
|
||
| return ( | ||
| <> | ||
| <PopUp | ||
| onClose={onClose} | ||
| heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`} | ||
| children={[ | ||
| <InboxSearchComposer | ||
| configs={config} // dummy config | ||
| ></InboxSearchComposer>, | ||
| ]} | ||
| onOverlayClick={onClose} | ||
| footerChildren={[ | ||
| <Button | ||
| className={"campaign-type-alert-button"} | ||
| type={"button"} | ||
| size={"large"} | ||
| variation={"secondary"} | ||
| label={t(`MICROPLAN_CLOSE_BUTTON`)} | ||
| onClick={onClose} | ||
| />, | ||
| ]} | ||
| className={"facility-popup"} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default FacilityPopUp; |
There was a problem hiding this comment.
Remove unused Card import.
The Card component is imported but not used in the component. Remove the unused import to keep the code clean:
- import { PopUp, Button, Card } from "@egovernments/digit-ui-components";
+ import { PopUp, Button } from "@egovernments/digit-ui-components";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import React, { useState, useMemo, Fragment, useEffect } from "react"; | |
| import { useTranslation } from "react-i18next"; | |
| import { PopUp, Button, Card } from "@egovernments/digit-ui-components"; | |
| import { InboxSearchComposer } from "@egovernments/digit-ui-react-components"; | |
| import facilityMappingConfig from "../configs/FacilityMappingConfig"; | |
| const FacilityPopUp = ({ details, onClose }) => { | |
| const { t } = useTranslation(); | |
| const config = facilityMappingConfig(); | |
| return ( | |
| <> | |
| <PopUp | |
| onClose={onClose} | |
| heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`} | |
| children={[ | |
| <InboxSearchComposer | |
| configs={config} // dummy config | |
| ></InboxSearchComposer>, | |
| ]} | |
| onOverlayClick={onClose} | |
| footerChildren={[ | |
| <Button | |
| className={"campaign-type-alert-button"} | |
| type={"button"} | |
| size={"large"} | |
| variation={"secondary"} | |
| label={t(`MICROPLAN_CLOSE_BUTTON`)} | |
| onClick={onClose} | |
| />, | |
| ]} | |
| className={"facility-popup"} | |
| /> | |
| </> | |
| ); | |
| }; | |
| export default FacilityPopUp; | |
| import React, { useState, useMemo, Fragment, useEffect } from "react"; | |
| import { useTranslation } from "react-i18next"; | |
| import { PopUp, Button } from "@egovernments/digit-ui-components"; | |
| import { InboxSearchComposer } from "@egovernments/digit-ui-react-components"; | |
| import facilityMappingConfig from "../configs/FacilityMappingConfig"; | |
| const FacilityPopUp = ({ details, onClose }) => { | |
| const { t } = useTranslation(); | |
| const config = facilityMappingConfig(); | |
| return ( | |
| <> | |
| <PopUp | |
| onClose={onClose} | |
| heading={`${t(`MICROPLAN_ASSIGNMENT_FACILITY`)} ${details?.additionalDetails?.name}`} | |
| children={[ | |
| <InboxSearchComposer | |
| configs={config} // dummy config | |
| ></InboxSearchComposer>, | |
| ]} | |
| onOverlayClick={onClose} | |
| footerChildren={[ | |
| <Button | |
| className={"campaign-type-alert-button"} | |
| type={"button"} | |
| size={"large"} | |
| variation={"secondary"} | |
| label={t(`MICROPLAN_CLOSE_BUTTON`)} | |
| onClick={onClose} | |
| />, | |
| ]} | |
| className={"facility-popup"} | |
| /> | |
| </> | |
| ); | |
| }; | |
| export default FacilityPopUp; |
🧰 Tools
🪛 Biome
[error] 18-20: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 17-17: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 18-20: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 24-31: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
| FormulaConfigScreen, | ||
| FacilityPopup, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
LGTM: FacilityPopup registered correctly. Minor suggestion for consistency.
The FacilityPopup component is correctly added to the componentsToRegister object. The trailing comma after FormulaConfigScreen is a good practice.
For consistency, consider adding a trailing comma after FacilityPopup as well:
FormulaConfigScreen,
-FacilityPopup
+FacilityPopup,This will maintain consistency and make future additions easier.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| FormulaConfigScreen, | |
| FacilityPopup, | |
| FormulaConfigScreen, | |
| FacilityPopup, |
Summary by CodeRabbit
New Features
FacilityPopupcomponent for enhanced user interactions with facility-related information.FacilityCatchmentMappingcomponent to facilitate the assignment of catchment villages..facility-popupimproves the styling of popup elements.Enhancements
Configuration Updates