Skip to content

Commit ae7ab93

Browse files
AishDaniAishDani
committed
refactor:added optional chaining and comments in code of language-mapper
1 parent 294be79 commit ae7ab93

File tree

2 files changed

+63
-61
lines changed

2 files changed

+63
-61
lines changed

‎ui/src/components/DestinationStack/Actions/LoadLanguageMapper.tsx‎

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// Import library
12
import {
23
Button,
34
CircularLoader,
@@ -14,24 +15,35 @@ import { RootState } from '../../../store';
1415
import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
1516
import { INewMigration } from '../../../context/app/app.interface';
1617

18+
export type ExistingFieldType = {
19+
[key: string]: { label: string ; value: string };
20+
};
21+
22+
/**
23+
* A functional component that displays selection for language mapping.
24+
*
25+
* @param {Array<{ label: string; value: string }>} cmsLocaleOptions - An array to dispaly number of locales select.
26+
* @param {Function} handleLangugeDelete - a function to delete the mapping.
27+
* @param {Array<{ label: string; value: string }>} options - option array of contentstack locales.
28+
* @param {Array<{ label: string; value: string }>} sourceOptions - option array of source locales.
29+
* @returns {JSX.Element | null} - Returns a JSX element if empty, otherwise null.
30+
*/
1731
const Mapper = ({
1832
cmsLocaleOptions,
1933
handleLangugeDelete,
2034
options,
21-
masterLocale,
2235
sourceOptions
2336
}: {
24-
cmsLocaleOptions: Array<any>;
25-
handleLangugeDelete: any;
26-
options: any;
27-
masterLocale: string;
28-
sourceOptions: any;
37+
cmsLocaleOptions: Array<{ label: string; value: string }>;
38+
handleLangugeDelete: (index: number, locale: { label: string; value: string }) => void;
39+
options: Array<{ label: string; value: string }>;
40+
sourceOptions: Array<{ label: string; value: string }>;
2941
}) => {
3042
const [selectedMappings, setSelectedMappings] = useState<{ [key: string]: string }>({});
31-
const [existingField, setExistingField] = useState<any>({});
32-
const [existingLocale, setexistingLocale] = useState<any>({});
33-
const [selectedCsOptions, setselectedCsOption] = useState([]);
34-
const [selectedSourceOption, setselectedSourceOption] = useState([]);
43+
const [existingField, setExistingField] = useState<ExistingFieldType>({});
44+
const [existingLocale, setexistingLocale] = useState<ExistingFieldType>({});
45+
const [selectedCsOptions, setselectedCsOption] = useState<string[]>([]);
46+
const [selectedSourceOption, setselectedSourceOption] = useState<string[]>([]);
3547
const [csOptions, setcsOptions] = useState(options);
3648
const [sourceoptions, setsourceoptions] = useState(sourceOptions);
3749
const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
@@ -42,7 +54,7 @@ const Mapper = ({
4254
const newMigrationDataObj: INewMigration = {
4355
...newMigrationData,
4456
destination_stack: {
45-
...newMigrationData.destination_stack,
57+
...newMigrationData?.destination_stack,
4658
localeMapping: selectedMappings
4759
}
4860
};
@@ -64,42 +76,43 @@ const Mapper = ({
6476

6577
useEffect(() => {
6678
const formattedoptions = options?.filter(
67-
(item: any) => !selectedCsOptions?.some((selected: any) => selected?.value === item.value)
79+
(item: { label: string; value: string }) => !selectedCsOptions?.some((selected: string) => selected === item?.value)
6880
);
6981
const adjustedOptions = sourceOptions?.filter(
70-
(item: any) => !selectedSourceOption?.some((selected: any) => selected === item?.label)
82+
(item: { label: string; value: string }) => !selectedSourceOption?.some((selected: string) => selected === item?.label)
7183
);
7284
setcsOptions(formattedoptions);
7385
setsourceoptions(adjustedOptions);
7486
}, [selectedCsOptions, selectedSourceOption]);
7587

7688
useEffect(() => {
77-
setExistingField((prevExisting: any) => {
89+
setExistingField((prevExisting: ExistingFieldType) => {
7890
const updatedExisting = { ...prevExisting };
7991

80-
cmsLocaleOptions.forEach((locale: any, index: number) => {
81-
if (locale.value === 'master_locale' && !updatedExisting[index]) {
92+
cmsLocaleOptions?.forEach((locale: { label: string; value: string }, index: number) => {
93+
if (locale?.value === 'master_locale' && !updatedExisting?.[index]) {
8294
setSelectedMappings((prev) => ({
8395
...prev,
8496
[`${locale?.label}-master_locale`]: ''
8597
}));
86-
updatedExisting[index] = { label: locale.label, value: `${locale?.label}-master_locale` };
98+
updatedExisting[index] = { label: locale?.label, value: `${locale?.label}-master_locale` };
8799
}
88100
});
89101

90102
return updatedExisting;
91103
});
92104
}, [cmsLocaleOptions]);
93105

106+
// function for change select value
94107
const handleSelectedCsLocale = (
95-
selectedValue: any,
108+
selectedValue: { label: string; value: string },
96109
index: number,
97110
type: 'csLocale' | 'sourceLocale'
98111
) => {
99112
const selectedLocaleKey = selectedValue?.value;
100113
if (!selectedLocaleKey) return;
101114

102-
setExistingField((prevOptions: any) => {
115+
setExistingField((prevOptions: ExistingFieldType) => {
103116
const updatedOptions = {
104117
...prevOptions,
105118
[index]: { label: selectedValue?.label || null, value: selectedValue?.label }
@@ -113,8 +126,8 @@ const Mapper = ({
113126
return updatedOptions;
114127
});
115128
setselectedCsOption((prevSelected) => {
116-
const newSelectedOptions: any = prevSelected?.filter((item) => item !== selectedValue?.label);
117-
const newValue: any = selectedValue?.label;
129+
const newSelectedOptions: string[] = prevSelected?.filter((item) => item !== selectedValue?.label);
130+
const newValue: string = selectedValue?.label;
118131
if (!newSelectedOptions?.includes(newValue)) {
119132
newSelectedOptions.push(newValue);
120133
}
@@ -134,41 +147,41 @@ const Mapper = ({
134147
});
135148
};
136149
const handleSelectedSourceLocale = (
137-
selectedValue: any,
150+
selectedValue: { label: string; value: string },
138151
index: number,
139152
type: 'csLocale' | 'sourceLocale',
140153
label: any
141154
) => {
142-
const csLocaleKey = existingField[index]?.value;
155+
const csLocaleKey = existingField?.[index]?.value;
143156

144157
//const selectedLocaleKey = selectedMappings[index];
145158

146159
if (!selectedValue?.label) {
147160
setselectedSourceOption((prevSelected) =>
148-
prevSelected.filter((item) => item !== existingField[index]?.label)
161+
prevSelected?.filter((item) => item !== existingField?.[index]?.label)
149162
);
150163
}
151-
setexistingLocale((prevOptions: any) => {
152-
const updatedOptions = {
164+
setexistingLocale((prevOptions: ExistingFieldType) => {
165+
const updatedOptions: ExistingFieldType = {
153166
...prevOptions,
154167
[index]: { label: selectedValue?.label || null, value: selectedValue?.label }
155168
};
156169

157170
// Ensure selectedOption only contains values that exist in updatedOptions
158171
setselectedSourceOption((prevSelected) =>
159-
prevSelected.filter((item) =>
160-
Object.values(updatedOptions).some((opt: any) => opt.label === item)
172+
prevSelected?.filter((item) =>
173+
Object.values(updatedOptions)?.some((opt: {label: string, value: string}) => opt?.label === item)
161174
)
162175
);
163176

164177
return updatedOptions;
165178
});
166179

167180
setselectedSourceOption((prevSelected) => {
168-
const newSelectedOptions: any = prevSelected?.filter((item) => item !== selectedValue?.label);
169-
const newValue: any = selectedValue?.label;
181+
const newSelectedOptions = prevSelected?.filter((item) => item !== selectedValue?.label);
182+
const newValue: string = selectedValue?.label;
170183
if (!newSelectedOptions?.includes(newValue)) {
171-
newSelectedOptions.push(newValue);
184+
newSelectedOptions?.push(newValue);
172185
}
173186
return newSelectedOptions;
174187
});
@@ -179,7 +192,8 @@ const Mapper = ({
179192
[csLocaleKey]: selectedValue?.label || ''
180193
}));
181194
};
182-
const handleLanguageDeletaion = (index: number, locale: any) => {
195+
const handleLanguageDeletaion = (index: number, locale: {label: string, value: string}) => {
196+
183197
// Remove item at index from existingField
184198
let csLocale = '';
185199

@@ -196,7 +210,7 @@ const Mapper = ({
196210
);
197211

198212
// Remove item at index from existingLocale
199-
setexistingLocale((prevLocales: any) => {
213+
setexistingLocale((prevLocales: ExistingFieldType) => {
200214
if (!prevLocales) return {};
201215
const updatedOptions = { ...prevLocales }; // Create a shallow copy
202216
delete updatedOptions[index]; // Remove the key
@@ -213,18 +227,11 @@ const Mapper = ({
213227

214228
handleLangugeDelete(index, locale);
215229
};
216-
console.log(
217-
'Updated Mappings:',
218-
existingField,
219-
existingLocale,
220-
selectedMappings,
221-
selectedCsOptions
222-
);
223230

224231
return (
225232
<>
226233
{cmsLocaleOptions?.length > 0 ? (
227-
cmsLocaleOptions?.map((locale: any, index: any) => (
234+
cmsLocaleOptions?.map((locale: any, index: number) => (
228235
<div key={index} className="lang-container">
229236
{locale?.value === 'master_locale' ? (
230237
<Tooltip
@@ -233,7 +240,7 @@ const Mapper = ({
233240
<div>
234241
<Select
235242
value={locale?.value === 'master_locale' ? locale : existingField[locale]}
236-
onChange={(key: any) => handleSelectedCsLocale(key, index, 'csLocale')}
243+
onChange={(key: { label: string; value: string }) => handleSelectedCsLocale(key, index, 'csLocale')}
237244
options={csOptions}
238245
placeholder={placeholder}
239246
isSearchable
@@ -253,7 +260,7 @@ const Mapper = ({
253260
) : (
254261
<Select
255262
value={existingField[locale]}
256-
onChange={(key: any) => {
263+
onChange={(key: { label: string; value: string }) => {
257264
handleSelectedCsLocale(key, index, 'csLocale');
258265
}}
259266
options={csOptions}
@@ -293,7 +300,7 @@ const Mapper = ({
293300
/> */
294301
<Select
295302
value={existingLocale[locale]}
296-
onChange={(data: any) =>
303+
onChange={(data: { label: string; value: string }) =>
297304
handleSelectedSourceLocale(data, index, 'sourceLocale', locale)
298305
}
299306
options={sourceoptions}
@@ -344,23 +351,18 @@ const Mapper = ({
344351

345352
const LanguageMapper = () => {
346353
const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
347-
const [newEntry, setnewEntry] = useState<boolean>(false);
348-
const [options, setoptions] = useState([]);
354+
const [options, setoptions] = useState<{ label: string; value: string }[]>([]);
349355
const [cmsLocaleOptions, setcmsLocaleOptions] = useState<{ label: string; value: string }[]>([]);
350-
const [sourceLocales, setsourceLocales] = useState<any>([]);
351-
352-
const selectedOrganisation = useSelector(
353-
(state: RootState) => state?.authentication?.selectedOrganisation
354-
);
356+
const [sourceLocales, setsourceLocales] = useState<{ label: string; value: string }[]>([]);
355357
const [isLoading, setisLoading] = useState<boolean>(false);
356358

357359
useEffect(() => {
358360
const fetchData = async () => {
359361
try {
360362
setisLoading(true);
361-
const allLocales: any = Object.keys(
362-
newMigrationData?.destination_stack?.csLocale || {}
363-
).map((key) => ({
363+
const allLocales: { label: string; value: string }[] = Object.entries(
364+
newMigrationData?.destination_stack?.csLocale ?? {}
365+
).map(([key]) => ({
364366
label: key,
365367
value: key
366368
}));
@@ -371,10 +373,10 @@ const LanguageMapper = () => {
371373
setsourceLocales(sourceLocale);
372374

373375
setoptions(allLocales);
374-
setcmsLocaleOptions((prevList: any) => {
376+
setcmsLocaleOptions((prevList: { label: string; value: string }[]) => {
375377
const newLabel = newMigrationData?.destination_stack?.selectedStack?.master_locale;
376378

377-
const isPresent = prevList.some((item: any) => item.value === 'master_locale');
379+
const isPresent = prevList.some((item: { label: string; value: string }) => item?.value === 'master_locale');
378380

379381
if (!isPresent) {
380382
return [
@@ -401,8 +403,7 @@ const LanguageMapper = () => {
401403
// return await getStackLocales(newMigrationData?.destination_stack?.selectedOrg?.value);
402404
// };
403405
const addRowComp = () => {
404-
setnewEntry(true);
405-
setcmsLocaleOptions((prevList: any) => [
406+
setcmsLocaleOptions((prevList: { label: string; value: string }[]) => [
406407
...prevList, // Keep existing elements
407408
{
408409
label: `${prevList.length + 1}`, // Generate new label
@@ -411,9 +412,9 @@ const LanguageMapper = () => {
411412
]);
412413
};
413414

414-
const handleDeleteLocale = (id: number, locale: any) => {
415+
const handleDeleteLocale = (id: number, locale: { label: string; value: string }) => {
415416
setcmsLocaleOptions((prevList) => {
416-
return prevList.filter((item: any) => item.label !== locale.label);
417+
return prevList?.filter((item: { label: string; value: string }) => item?.label !== locale?.label);
417418
});
418419
};
419420

@@ -430,7 +431,6 @@ const LanguageMapper = () => {
430431
}
431432
rowComponent={
432433
<Mapper
433-
masterLocale={newMigrationData?.destination_stack?.selectedStack?.master_locale}
434434
options={options}
435435
cmsLocaleOptions={cmsLocaleOptions}
436436
handleLangugeDelete={handleDeleteLocale}

‎ui/src/components/DestinationStack/Actions/tableHeader.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
// Importing Library
12
import { FieldLabel } from "@contentstack/venus-components";
23

4+
// TableHeader component of language-mapper tabel
35
const TableHeader = ({cms}:{cms:string}) => {
46
return (
57
<div className="flex-v-center">

0 commit comments

Comments
 (0)