From b49edab60d64525bccbce7c5d996dde68aac7e11 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Thu, 25 Jul 2024 17:40:19 +0530 Subject: [PATCH 1/5] add tanstack library --- package-lock.json | 2 +- package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 33c2e2ca..ae622f95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,11 +14,11 @@ "@mui/material": "^5.16.0", "@project-sunbird/client-services": "^7.0.6", "@project-sunbird/telemetry-sdk": "^1.3.0", - "@tanstack/react-query": "^5.51.11", "@rjsf/core": "^5.19.3", "@rjsf/mui": "^5.19.3", "@rjsf/utils": "^5.19.3", "@rjsf/validator-ajv8": "^5.19.3", + "@tanstack/react-query": "^5.51.11", "axios": "^1.7.2", "feather-icons-react": "^0.7.0", "fingerprintjs2": "^2.1.4", diff --git a/package.json b/package.json index 8bc354ad..994bd786 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@rjsf/mui": "^5.19.3", "@rjsf/utils": "^5.19.3", "@rjsf/validator-ajv8": "^5.19.3", + "@tanstack/react-query": "^5.51.11", "axios": "^1.7.2", "feather-icons-react": "^0.7.0", "fingerprintjs2": "^2.1.4", From bfbcff43eebf2546752fc811d2f7f8afaa6409a3 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Thu, 25 Jul 2024 22:14:10 +0530 Subject: [PATCH 2/5] Issue# feat: optiize code --- src/components/AddLeanerModal.tsx | 65 +++++------------- src/components/AreaSelection.tsx | 102 +++++++++++++++++++++++++++++ src/components/HeaderComponent.tsx | 66 ++++--------------- src/components/SimpleModal.tsx | 12 ++-- 4 files changed, 140 insertions(+), 105 deletions(-) create mode 100644 src/components/AreaSelection.tsx diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx index 73c8477a..4f7479a1 100644 --- a/src/components/AddLeanerModal.tsx +++ b/src/components/AddLeanerModal.tsx @@ -8,7 +8,7 @@ import { createUser, getFormRead } from '@/services/CreateUserService'; import { generateUsernameAndPassword } from '@/utils/Helper'; import { FormData } from '@/utils/Interfaces'; import { FormContext, FormContextType, Role, RoleId } from '@/utils/app.constant'; -import { Box, Button, Typography, useTheme } from '@mui/material'; +import { Box, Button, Typography, useTheme, useMediaQuery } from '@mui/material'; import { IChangeEvent } from '@rjsf/core'; import { RJSFSchema } from '@rjsf/utils'; import React, { useEffect } from 'react'; @@ -20,6 +20,7 @@ import { } from "../services/MasterDataService"; import MultipleSelectCheckmarks from "./FormControl"; import { showToastMessage } from './Toastify'; +import AreaSelection from './AreaSelection'; interface AddLearnerModalProps { open: boolean; @@ -52,6 +53,9 @@ const AddLearnerModal: React.FC = ({ open, onClose }) => { const [dynamicForm, setDynamicForm] = React.useState(false); const { t } = useTranslation(); const theme = useTheme(); + const isMobile = useMediaQuery("(max-width:600px)"); + const isMediumScreen = useMediaQuery("(max-width:986px)"); + const handleStateChangeWrapper = async ( selectedNames: string[], selectedCodes: string[], @@ -372,52 +376,19 @@ const AddLearnerModal: React.FC = ({ open, onClose }) => { {t('LEARNERS.FIRST_SELECT_REQUIRED_FIELDS')} ) } - - state.label?.toLowerCase().charAt(0).toUpperCase() + - state.label?.toLowerCase().slice(1), - )} - codes={allStates.map((state) => state.value)} - tagName={t("FACILITATORS.ALL_STATES")} - selectedCategories={selectedState} - onCategoryChange={handleStateChangeWrapper} - overall={false} - /> - districts.label)} - codes={allDistricts.map((districts) => districts.value)} - tagName={t("FACILITATORS.ALL_DISTRICTS")} - selectedCategories={selectedDistrict} - onCategoryChange={handleDistrictChangeWrapper} - disabled={selectedState.length === 0 || selectedState[0] === ""} - overall={false} - - /> - blocks.label)} - codes={allBlocks.map((blocks) => blocks.value)} - tagName={t("FACILITATORS.ALL_BLOCKS")} - selectedCategories={selectedBlock} - onCategoryChange={handleBlockChangeWrapper} - disabled={ - selectedDistrict.length === 0 || selectedDistrict[0] === "" - } - overall={false} - - /> - centers.label)} - codes={allCenters.map((centers) => centers.value)} - tagName={t("CENTERS.CENTERS")} - selectedCategories={selectedCenter} - onCategoryChange={handleCenterChangeWrapper} - disabled={ - selectedBlock.length === 0 || selectedCenter[0] === "" - } - overall={false} - - /> + diff --git a/src/components/AreaSelection.tsx b/src/components/AreaSelection.tsx new file mode 100644 index 00000000..c3c85cb5 --- /dev/null +++ b/src/components/AreaSelection.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { Box, Grid } from "@mui/material"; +import MultipleSelectCheckmarks from "./FormControl"; +import { useTheme } from "@mui/material/styles"; +import { useTranslation } from "next-i18next"; +interface State { + value: string; + label: string; + } + + interface District { + value: string; + label: string; + } + + interface Block { + value: string; + label: string; + } +interface DropdownBoxProps { + allStates: State[]; + allDistricts: District[]; + allBlocks: Block[]; + selectedState: string[]; + selectedDistrict: string[]; + selectedBlock: string[]; + handleStateChangeWrapper: (selectedNames: string[], selectedCodes: string[]) => Promise; + handleDistrictChangeWrapper: (selected: string[], selectedCodes: string[]) => Promise; + handleBlockChangeWrapper: (selected: string[], selectedCodes: string[]) => void; + isMobile: boolean; + isMediumScreen: boolean; +} + +const AreaSelection: React.FC = ({ + allStates, + allDistricts, + allBlocks, + selectedState, + selectedDistrict, + selectedBlock, + handleStateChangeWrapper, + handleDistrictChangeWrapper, + handleBlockChangeWrapper, + isMobile, + isMediumScreen, +}) => { + const { t } = useTranslation(); + const theme = useTheme(); + + return ( + + + + + state.label?.toLowerCase().charAt(0).toUpperCase() + + state.label?.toLowerCase().slice(1), + )} + codes={allStates.map((state) => state.value)} + tagName={t("FACILITATORS.ALL_STATES")} + selectedCategories={selectedState} + onCategoryChange={handleStateChangeWrapper} + /> + + + districts.label)} + codes={allDistricts.map((districts) => districts.value)} + tagName={t("FACILITATORS.ALL_DISTRICTS")} + selectedCategories={selectedDistrict} + onCategoryChange={handleDistrictChangeWrapper} + disabled={selectedState.length === 0 || selectedState[0] === ""} + /> + + + blocks.label)} + codes={allBlocks.map((blocks) => blocks.value)} + tagName={t("FACILITATORS.ALL_BLOCKS")} + selectedCategories={selectedBlock} + onCategoryChange={handleBlockChangeWrapper} + disabled={ + selectedDistrict.length === 0 || selectedDistrict[0] === "" + } + /> + + + + ); +}; + +export default AreaSelection; diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx index e4ef957b..ce584922 100644 --- a/src/components/HeaderComponent.tsx +++ b/src/components/HeaderComponent.tsx @@ -22,8 +22,7 @@ import { getStateList, getDistrictList, } from "../services/MasterDataService"; - - +import AreaSelection from "./AreaSelection"; interface State { value: string; label: string; @@ -139,54 +138,19 @@ const HeaderComponent = ({ }} > {showStateDropdown && ( - - - - - state.label?.toLowerCase().charAt(0).toUpperCase() + - state.label?.toLowerCase().slice(1), - )} - codes={allStates.map((state) => state.value)} - tagName={t("FACILITATORS.ALL_STATES")} - selectedCategories={selectedState} - onCategoryChange={handleStateChangeWrapper} - /> - - - districts.label)} - codes={allDistricts.map((districts) => districts.value)} - tagName={t("FACILITATORS.ALL_DISTRICTS")} - selectedCategories={selectedDistrict} - onCategoryChange={handleDistrictChangeWrapper} - disabled={selectedState.length === 0 || selectedState[0] === ""} - /> - - - blocks.label)} - codes={allBlocks.map((blocks) => blocks.value)} - tagName={t("FACILITATORS.ALL_BLOCKS")} - selectedCategories={selectedBlock} - onCategoryChange={handleBlockChangeWrapper} - disabled={ - selectedDistrict.length === 0 || selectedDistrict[0] === "" - } - /> - - - + )} {userType} @@ -261,11 +225,9 @@ const HeaderComponent = ({ boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)", }} onClick={handleAddUserClick} - > @@ -362,36 +372,40 @@ const AddLearnerModal: React.FC = ({ open, onClose }) => { open={open} onClose={onClose} showFooter={false} - modalTitle={t('LEARNERS.NEW_LEARNER')} + modalTitle={t("LEARNERS.NEW_LEARNER")} > <> - - - {!dynamicForm && ( - {t('LEARNERS.FIRST_SELECT_REQUIRED_FIELDS')} - ) - } - - - - + + {!dynamicForm && ( + + {t("LEARNERS.FIRST_SELECT_REQUIRED_FIELDS")}{" "} + + )} + + {dynamicForm && schema && uiSchema && ( Promise; - handleDistrictChangeWrapper: (selected: string[], selectedCodes: string[]) => Promise; - handleBlockChangeWrapper: (selected: string[], selectedCodes: string[]) => void; + selectedCenter?: any; + handleStateChangeWrapper: ( + selectedNames: string[], + selectedCodes: string[] + ) => Promise; + handleDistrictChangeWrapper: ( + selected: string[], + selectedCodes: string[] + ) => Promise; + handleBlockChangeWrapper: ( + selected: string[], + selectedCodes: string[] + ) => void; + handleCenterChangeWrapper?: ( + selected: string[], + selectedCodes: string[] + ) => void; + isMobile: boolean; isMediumScreen: boolean; + isBlockSelection?: boolean; } const AreaSelection: React.FC = ({ allStates, allDistricts, allBlocks, + allCenters = [], selectedState, selectedDistrict, selectedBlock, + selectedCenter = [], handleStateChangeWrapper, handleDistrictChangeWrapper, handleBlockChangeWrapper, isMobile, isMediumScreen, + isBlockSelection = false, + handleCenterChangeWrapper = () => {}, }) => { const { t } = useTranslation(); const theme = useTheme(); @@ -64,12 +89,13 @@ const AreaSelection: React.FC = ({ names={allStates.map( (state) => state.label?.toLowerCase().charAt(0).toUpperCase() + - state.label?.toLowerCase().slice(1), + state.label?.toLowerCase().slice(1) )} codes={allStates.map((state) => state.value)} tagName={t("FACILITATORS.ALL_STATES")} selectedCategories={selectedState} onCategoryChange={handleStateChangeWrapper} + overall={isBlockSelection ? false : true} /> @@ -80,6 +106,7 @@ const AreaSelection: React.FC = ({ selectedCategories={selectedDistrict} onCategoryChange={handleDistrictChangeWrapper} disabled={selectedState.length === 0 || selectedState[0] === ""} + overall={isBlockSelection ? false : true} /> @@ -92,8 +119,22 @@ const AreaSelection: React.FC = ({ disabled={ selectedDistrict.length === 0 || selectedDistrict[0] === "" } + overall={isBlockSelection ? false : true} /> + {isBlockSelection && ( + + centers.label)} + codes={allCenters?.map((centers) => centers.value)} + tagName={t("CENTERS.CENTERS")} + selectedCategories={selectedCenter} + onCategoryChange={handleCenterChangeWrapper} + disabled={selectedBlock.length === 0 || selectedCenter[0] === ""} + overall={isBlockSelection ? false : true} + /> + + )} ); diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx index 8b91149a..9f367449 100644 --- a/src/components/HeaderComponent.tsx +++ b/src/components/HeaderComponent.tsx @@ -1,25 +1,21 @@ -import * as React from "react"; -import { useState, useEffect } from "react"; +import SearchBar from "@/components/layouts/header/SearchBar"; +import AddIcon from "@mui/icons-material/Add"; import { - MenuItem, - Typography, Box, - FormControl, - useMediaQuery, - Grid, Button, - InputLabel, + FormControl, + MenuItem, + Typography, + useMediaQuery } from "@mui/material"; -import Select, { SelectChangeEvent } from "@mui/material/Select"; -import AddIcon from "@mui/icons-material/Add"; -import SearchBar from "@/components/layouts/header/SearchBar"; -import { useTranslation } from "next-i18next"; -import MultipleSelectCheckmarks from "./FormControl"; +import Select from "@mui/material/Select"; import { useTheme } from "@mui/material/styles"; +import { useTranslation } from "next-i18next"; +import { useEffect, useState } from "react"; import { getBlockList, - getStateList, getDistrictList, + getStateList, } from "../services/MasterDataService"; import AreaSelection from "./AreaSelection"; @@ -225,6 +221,8 @@ const HeaderComponent = ({ mt: isMobile ? "10px" : "16px", boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)", }} + onClick={handleAddUserClick} + > diff --git a/src/pages/faciliator.tsx b/src/pages/faciliator.tsx index 17b67642..234e87c9 100644 --- a/src/pages/faciliator.tsx +++ b/src/pages/faciliator.tsx @@ -3,15 +3,28 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import UserTable from "@/components/UserTable"; import { useTranslation } from "next-i18next"; import { Role } from "@/utils/app.constant"; - +import AddFacilitatorModal from "@/components/AddFacilitator"; const Faciliator: React.FC = () => { const { t } = useTranslation(); + const [openAddFacilitatorModal, setOpenAddFacilitatorModal] = React.useState(false); + const handleOpenAddFacilitatorModal = () => { + setOpenAddFacilitatorModal(true); +}; + +const handleCloseAddFacilitatorModal = () => { + setOpenAddFacilitatorModal(false); +}; + const handleAddFaciliatorClick = () => { + handleOpenAddFacilitatorModal(); }; return ( <> - + ); }; From bc390472603d493d820b801255037e6513617060 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Fri, 26 Jul 2024 13:03:16 +0530 Subject: [PATCH 5/5] update PR --- src/components/AddFacilitator.tsx | 28 ++++++++++------------ src/components/AddLeanerModal.tsx | 27 +++++++++++---------- src/components/AreaSelection.tsx | 38 +++++++++++++++--------------- src/components/HeaderComponent.tsx | 27 +++++++++++---------- src/components/UserTable.tsx | 14 +++++++++++ src/utils/Helper.ts | 20 ++++++++++++++++ 6 files changed, 94 insertions(+), 60 deletions(-) diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx index 8169304a..4045553f 100644 --- a/src/components/AddFacilitator.tsx +++ b/src/components/AddFacilitator.tsx @@ -17,6 +17,7 @@ import { RJSFSchema } from "@rjsf/utils"; import { useTranslation } from "next-i18next"; import AreaSelection from "./AreaSelection"; import { showToastMessage } from "./Toastify"; +import {transformArray} from "../utils/Helper" import { Typography, @@ -43,9 +44,9 @@ const AddFacilitatorModal: React.FC = ({ const [openModal, setOpenModal] = React.useState(false); const [uiSchema, setUiSchema] = React.useState(); const { t } = useTranslation(); - const [allStates, setAllStates] = React.useState([]); - const [allDistricts, setAllDistricts] = React.useState([]); - const [allBlocks, setAllBlocks] = React.useState([]); + const [states, setStates] = React.useState([]); + const [districts, setDistricts] = React.useState([]); + const [blocks, setBlocks] = React.useState([]); const [allCenters, setAllCenters] = React.useState([]); const isMobile = useMediaQuery("(max-width:600px)"); const isMediumScreen = useMediaQuery("(max-width:986px)"); @@ -64,7 +65,7 @@ const AddFacilitatorModal: React.FC = ({ try { const response = await getDistrictList(selectedCodes); const result = response?.result; - setAllDistricts(result); + setDistricts(result); } catch (error) { console.log(error); } @@ -90,7 +91,7 @@ const AddFacilitatorModal: React.FC = ({ try { const response = await getBlockList(selectedCodes); const result = response?.result; - setAllBlocks(result); + setBlocks(result); } catch (error) { console.log(error); } @@ -148,8 +149,8 @@ const AddFacilitatorModal: React.FC = ({ try { const response = await getStateList(); const result = response?.result; - setAllStates(result); - console.log(typeof allStates); + setStates(result); + console.log(typeof states); } catch (error) { console.log(error); } @@ -276,10 +277,7 @@ const AddFacilitatorModal: React.FC = ({ try{ const response = await createUser(apiBody); onClose(); - setAllStates([]); - setAllCenters([]); - setAllBlocks([]); - setAllCenters([]); + showToastMessage(t('FACILITATORS.FACILITATOR_CREATED_SUCCESSFULLY'), 'success'); } @@ -317,9 +315,9 @@ catch(error) )} = ({ open, onClose }) => { const [schema, setSchema] = React.useState(); const [uiSchema, setUiSchema] = React.useState(); - const [allStates, setAllStates] = React.useState([]); - const [allDistricts, setAllDistricts] = React.useState([]); - const [allBlocks, setAllBlocks] = React.useState([]); - const [allCenters, setAllCenters] = React.useState([]); + const [states, SetStates] = React.useState([]); + const [districts, SetDistricts] = React.useState([]); + const [blocks, setBlocks] = React.useState([]); + const [centers, setCenters] = React.useState([]); const [selectedState, setSelectedState] = React.useState([]); const [selectedStateCode, setSelectedStateCode] = React.useState(""); @@ -74,7 +75,7 @@ const AddLearnerModal: React.FC = ({ open, onClose }) => { try { const response = await getDistrictList(selectedCodes); const result = response?.result; - setAllDistricts(result); + SetDistricts(result); } catch (error) { console.log(error); } @@ -91,7 +92,7 @@ const AddLearnerModal: React.FC = ({ open, onClose }) => { try { const response = await getBlockList(selectedCodes); const result = response?.result; - setAllBlocks(result); + setBlocks(result); } catch (error) { console.log(error); } @@ -149,8 +150,8 @@ const AddLearnerModal: React.FC = ({ open, onClose }) => { try { const response = await getStateList(); const result = response?.result; - setAllStates(result); - console.log(typeof allStates); + SetStates(result); + console.log(typeof states); } catch (error) { console.log(error); } @@ -389,9 +390,9 @@ const AddLearnerModal: React.FC = ({ open, onClose }) => { )} = ({ open, onClose }) => { handleBlockChangeWrapper={handleBlockChangeWrapper} isMobile={isMobile} isMediumScreen={isMediumScreen} - isBlockSelection={true} - allCenters={allCenters} + isCenterSelection={true} + allCenters={centers} selectedCenter={selectedCenter} handleCenterChangeWrapper={handleCenterChangeWrapper} /> diff --git a/src/components/AreaSelection.tsx b/src/components/AreaSelection.tsx index 2e195104..f2380e7c 100644 --- a/src/components/AreaSelection.tsx +++ b/src/components/AreaSelection.tsx @@ -22,9 +22,9 @@ interface Centers { label: string; } interface DropdownBoxProps { - allStates: State[]; - allDistricts: District[]; - allBlocks: Block[]; + states: State[]; + districts: District[]; + blocks: Block[]; allCenters?: Centers[]; selectedState: string[]; selectedDistrict: string[]; @@ -49,13 +49,13 @@ interface DropdownBoxProps { isMobile: boolean; isMediumScreen: boolean; - isBlockSelection?: boolean; + isCenterSelection?: boolean; } const AreaSelection: React.FC = ({ - allStates, - allDistricts, - allBlocks, + states, + districts, + blocks, allCenters = [], selectedState, selectedDistrict, @@ -66,7 +66,7 @@ const AreaSelection: React.FC = ({ handleBlockChangeWrapper, isMobile, isMediumScreen, - isBlockSelection = false, + isCenterSelection = false, handleCenterChangeWrapper = () => {}, }) => { const { t } = useTranslation(); @@ -86,43 +86,43 @@ const AreaSelection: React.FC = ({ state.label?.toLowerCase().charAt(0).toUpperCase() + state.label?.toLowerCase().slice(1) )} - codes={allStates.map((state) => state.value)} + codes={states.map((state) => state.value)} tagName={t("FACILITATORS.ALL_STATES")} selectedCategories={selectedState} onCategoryChange={handleStateChangeWrapper} - overall={isBlockSelection ? false : true} + overall={isCenterSelection ? false : true} /> districts.label)} - codes={allDistricts.map((districts) => districts.value)} + names={districts.map((districts) => districts.label)} + codes={districts.map((districts) => districts.value)} tagName={t("FACILITATORS.ALL_DISTRICTS")} selectedCategories={selectedDistrict} onCategoryChange={handleDistrictChangeWrapper} disabled={selectedState.length === 0 || selectedState[0] === ""} - overall={isBlockSelection ? false : true} + overall={isCenterSelection ? false : true} /> blocks.label)} - codes={allBlocks.map((blocks) => blocks.value)} + names={blocks.map((blocks) => blocks.label)} + codes={blocks.map((blocks) => blocks.value)} tagName={t("FACILITATORS.ALL_BLOCKS")} selectedCategories={selectedBlock} onCategoryChange={handleBlockChangeWrapper} disabled={ selectedDistrict.length === 0 || selectedDistrict[0] === "" } - overall={isBlockSelection ? false : true} + overall={isCenterSelection ? false : true} /> - {isBlockSelection && ( + {isCenterSelection && ( centers.label)} @@ -131,7 +131,7 @@ const AreaSelection: React.FC = ({ selectedCategories={selectedCenter} onCategoryChange={handleCenterChangeWrapper} disabled={selectedBlock.length === 0 || selectedCenter[0] === ""} - overall={isBlockSelection ? false : true} + overall={isCenterSelection ? false : true} /> )} diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx index 9f367449..8fd7c42a 100644 --- a/src/components/HeaderComponent.tsx +++ b/src/components/HeaderComponent.tsx @@ -18,7 +18,7 @@ import { getStateList, } from "../services/MasterDataService"; import AreaSelection from "./AreaSelection"; - +import {transformArray} from "../utils/Helper" interface State { value: string; label: string; @@ -50,7 +50,7 @@ const HeaderComponent = ({ handleBlockChange, handleSortChange, handleFilterChange, - showSort, + showSort=true, showAddNew=true, showStateDropdown = true, handleSearch, @@ -60,16 +60,16 @@ const HeaderComponent = ({ const theme = useTheme(); const isMobile = useMediaQuery("(max-width:600px)"); const isMediumScreen = useMediaQuery("(max-width:986px)"); - const [allStates, setAllStates] = useState([]); - const [allDistricts, setAllDistricts] = useState([]); - const [allBlocks, setAllBlocks] = useState([]); + const [states, setStates] = useState([]); + const [districts, setDistricts] = useState([]); + const [blocks, setBlocks] = useState([]); const handleStateChangeWrapper = async ( selectedNames: string[], selectedCodes: string[] ) => { if (selectedNames[0] === "") { - // if(allDistricts.length!==0) + // if(districts.length!==0) // { // handleDistrictChange([], []); // handleBlockChange([], []); @@ -78,7 +78,7 @@ const HeaderComponent = ({ try { const response = await getDistrictList(selectedCodes); const result = response?.result; - setAllDistricts(result); + setDistricts(result); } catch (error) { console.log(error); } @@ -95,7 +95,7 @@ const HeaderComponent = ({ try { const response = await getBlockList(selectedCodes); const result = response?.result; - setAllBlocks(result); + setBlocks(result); } catch (error) { console.log(error); } @@ -114,8 +114,8 @@ const HeaderComponent = ({ try { const response = await getStateList(); const result = response?.result; - setAllStates(result); - console.log(typeof allStates); + setStates(result); + console.log(typeof states); } catch (error) { console.log(error); } @@ -137,9 +137,10 @@ const HeaderComponent = ({ > {showStateDropdown && ( = ({ role , userType, searchPlaceholde const stateField = user.customFields.find( (field: any) => field.name === "states", ); + return { userId: user.userId, username: user.username, name: user.name, role: user.role, + gender:user.gender, mobile: user.mobile, age: ageField ? ageField.value : null, district: districtField ? districtField.value : null, diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts index 6fcb6bd8..586976e2 100644 --- a/src/utils/Helper.ts +++ b/src/utils/Helper.ts @@ -46,3 +46,23 @@ export const generateUUID = () => { return { username, password }; } + interface State { + value: string; + label: string; + } + + const transformLabel = (label: string): string => { + return label + .toLowerCase() // Convert to lowercase to standardize + .replace(/_/g, ' ') // Replace underscores with spaces + .replace(/\b\w/g, char => char.toUpperCase()); // Capitalize the first letter of each word + }; + + export const transformArray = (arr: State[]): State[] => { + return arr.map(item => ({ + ...item, + label: transformLabel(item.label) + })); + }; + +