Skip to content

Commit f462868

Browse files
AishDaniAishDani
committed
fix:refactored the flow for storing config values in redux
1 parent 63ece4f commit f462868

File tree

5 files changed

+105
-124
lines changed

5 files changed

+105
-124
lines changed

‎ui/src/components/LegacyCms/Actions/LoadFileFormat.tsx‎

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
3737
const [isCheckedBoxChecked] = useState<boolean>(
3838
newMigrationData?.legacy_cms?.isFileFormatCheckboxChecked || true
3939
);
40-
const [fileIcon, setFileIcon] = useState(newMigrationData?.legacy_cms?.selectedFileFormat?.title);
40+
const [fileIcon, setFileIcon] = useState(newMigrationDataRef?.current?.legacy_cms?.selectedFileFormat?.title);
4141
const [isError, setIsError] = useState<boolean>(false);
4242
const [error, setError] = useState<string>('');
4343

@@ -60,26 +60,12 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
6060
}
6161
};
6262

63-
const getFileExtension = (filePath: string): string => {
64-
const normalizedPath = filePath?.replace(/\\/g, "/")?.replace(/\/$/, "");
65-
66-
// Use regex to extract the file extension
67-
const match = normalizedPath?.match(/\.([a-zA-Z0-9]+)$/);
68-
const ext = match ? match[1]?.toLowerCase() : "";
69-
70-
const fileName = filePath?.split('/')?.pop();
71-
//const ext = fileName?.split('.')?.pop();
72-
const validExtensionRegex = /\.(pdf|zip|xml|json)$/i;
73-
return ext && validExtensionRegex?.test(`.${ext}`) ? `${ext}` : '';
74-
};
75-
7663
const handleFileFormat = async() =>{
7764
try {
78-
const {data} = await getConfig();
7965

80-
const cmsType = !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent) ? newMigrationData?.legacy_cms?.selectedCms?.parent : data?.cmsType?.toLowerCase();
81-
const filePath = data?.localPath?.toLowerCase();
82-
const fileFormat = getFileExtension(filePath);
66+
const cmsType = !isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent) ? newMigrationData?.legacy_cms?.selectedCms?.parent : newMigrationData?.legacy_cms?.uploadedFile?.cmsType;
67+
const filePath = newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath?.toLowerCase();
68+
const fileFormat: string = newMigrationData?.legacy_cms?.selectedFileFormat?.title?.toLowerCase();
8369
if(! isEmptyString(selectedCard?.fileformat_id) && selectedCard?.fileformat_id !== fileFormat && newMigrationData?.project_current_step > 1){
8470
setFileIcon(selectedCard?.title);
8571
}
@@ -108,17 +94,9 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
10894
title: fileFormat === 'zip' ? fileFormat?.charAt(0)?.toUpperCase() + fileFormat?.slice(1) : fileFormat?.toUpperCase()
10995
}
11096

111-
const newMigrationDataObj = {
112-
...newMigrationDataRef?.current,
113-
legacy_cms: {
114-
...newMigrationDataRef?.current?.legacy_cms,
115-
selectedFileFormat: selectedFileFormatObj,
116-
}
117-
};
11897

11998
setFileIcon(fileFormat === 'zip' ? fileFormat?.charAt(0).toUpperCase() + fileFormat.slice(1) : fileFormat?.toUpperCase());
120-
dispatch(updateNewMigrationData(newMigrationDataObj));
121-
99+
122100
}
123101

124102
} catch (error) {
@@ -131,7 +109,6 @@ const LoadFileFormat = (props: LoadFileFormatProps) => {
131109
/**** ALL USEEffects HERE ****/
132110
useEffect(()=>{
133111
handleFileFormat();
134-
//handleBtnClick();
135112
},[]);
136113

137114
useEffect(() => {

‎ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx‎

Lines changed: 30 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useRef, useState } from 'react';
22
import { useDispatch, useSelector } from 'react-redux';
33
import { FileDetails, ICMSType, INewMigration } from '../../../context/app/app.interface';
4-
import { fileValidation, getConfig } from '../../../services/api/upload.service';
4+
import { fileValidation } from '../../../services/api/upload.service';
55
import { RootState } from '../../../store';
66
import { updateNewMigrationData } from '../../../store/slice/migrationDataSlice';
77
import { Button, CircularLoader, Paragraph } from '@contentstack/venus-components';
@@ -73,14 +73,14 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
7373
const newMigrationDataRef = useRef(newMigrationData);
7474
const dispatch = useDispatch();
7575
const [isLoading, setIsLoading] = useState<boolean>(false);
76-
const [isValidated, setIsValidated] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.isValidated);
77-
const [showMessage, setShowMessage] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.isValidated);
76+
const [isValidated, setIsValidated] = useState<boolean>(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.isValidated);
77+
const [showMessage, setShowMessage] = useState<boolean>(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.isValidated);
7878
const [validationMessgae, setValidationMessage] = useState<string>('');
7979
const [isValidationAttempted, setIsValidationAttempted] = useState<boolean>(false);
8080
const [isDisabled, setIsDisabled] = useState<boolean>(newMigrationData?.legacy_cms?.uploadedFile?.isValidated || isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix));
8181
const [isConfigLoading, setIsConfigLoading] = useState<boolean>(false);
8282
const [cmsType, setCmsType]= useState('');
83-
const [fileDetails, setFileDetails] = useState(newMigrationData?.legacy_cms?.uploadedFile?.file_details);
83+
const [fileDetails, setFileDetails] = useState(newMigrationDataRef?.current?.legacy_cms?.uploadedFile?.file_details);
8484
const [fileExtension, setFileExtension] = useState<string>('');
8585
const [progressPercentage, setProgressPercentage] = useState<number>(0);
8686
const [showProgress, setShowProgress]= useState<boolean>(false);
@@ -135,7 +135,8 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
135135
bucketName: data?.file_details?.awsData?.bucketName,
136136
buketKey: data?.file_details?.awsData?.buketKey
137137
}
138-
}
138+
},
139+
cmsType: data?.cmsType
139140

140141
}
141142
}
@@ -222,63 +223,34 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
222223
//function to get config details
223224
const getConfigDetails = async () =>{
224225
try {
225-
setIsConfigLoading(true);
226-
const {data, status} = await getConfig();
226+
//setIsConfigLoading(true);
227227

228-
if (!isEmptyString(fileDetails?.localPath) && data?.localPath !== fileDetails?.localPath && !isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)) {
228+
if (!isEmptyString(fileDetails?.localPath) && newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath !== fileDetails?.localPath && !isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix)) {
229229
setIsDisabled(false);
230230
setShowMessage(true);
231231
setValidationMessage('');
232232

233233
}
234234

235-
if(status === 200){
236-
const extension = getFileExtension(data?.localPath);
237-
setCmsType(data?.cmsType);
238-
setFileDetails(data);
235+
const extension = getFileExtension(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath || '');
236+
setCmsType(newMigrationData?.legacy_cms?.uploadedFile?.cmsType);
237+
//setFileDetails(data);
239238
setFileExtension(extension);
240239

241-
const newMigrationDataObj: INewMigration = {
242-
...newMigrationDataRef?.current,
243-
legacy_cms: {
244-
...newMigrationDataRef?.current?.legacy_cms,
245-
uploadedFile: {
246-
name: data?.localPath,
247-
url: data?.localPath,
248-
isValidated: newMigrationData?.legacy_cms?.uploadedFile?.isValidated,
249-
reValidate: false,
250-
file_details: {
251-
isLocalPath: data?.isLocalPath,
252-
cmsType: data?.cmsType,
253-
localPath: data?.localPath,
254-
awsData: {
255-
awsRegion: data?.awsData?.awsRegion,
256-
bucketName: data?.awsData?.bucketName,
257-
buketKey: data?.awsData?.buketKey
258-
}
259-
}
260-
}
261-
}
262-
};
263-
264-
if(isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath) ){
265-
dispatch(updateNewMigrationData(newMigrationDataObj));
266-
267-
}
268240

269241
const { all_cms = [] } = migrationData?.legacyCMSData || {};
270242
let filteredCmsData:ICMSType[] = all_cms;
271-
if (data?.cmsType) {
272-
filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.parent?.toLowerCase() === data?.cmsType?.toLowerCase());
243+
if (newMigrationData?.legacy_cms?.uploadedFile?.cmsType) {
244+
filteredCmsData = all_cms?.filter((cms: ICMSType) => cms?.parent?.toLowerCase() === newMigrationData?.legacy_cms?.uploadedFile?.cmsType?.toLowerCase());
273245
}
274246

275247
const isFormatValid = filteredCmsData[0]?.allowed_file_formats?.some((format: ICardType) => {
276248
const isValid = format?.fileformat_id?.toLowerCase() === extension;
277249
return isValid;
278250
});
279251

280-
//setIsFormatValid(isFormatValid);
281-
252+
253+
//setIsFormatValid(isFormatValid);
282254
setIsDisabled(!isFormatValid || isEmptyString(newMigrationDataRef?.current?.legacy_cms?.affix));
283255
if(!isFormatValid){
284256
setValidationMessage('');
@@ -296,17 +268,17 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
296268
}
297269

298270

299-
}
300-
if((! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) &&
301-
newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !== data?.cmsType.toLowerCase()))
302-
{
303-
setIsValidated(false);
304-
setValidationMessage('file format is not appropriate');
305-
setIsValidationAttempted(true);
306-
setShowMessage(true);
307-
setIsLoading(false);
308-
setIsDisabled(true);
309-
}
271+
//}
272+
// if((! isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.parent?.toLowerCase()) &&
273+
// newMigrationData?.legacy_cms?.selectedCms?.parent.toLowerCase() !== data?.cmsType.toLowerCase()))
274+
// {
275+
// setIsValidated(false);
276+
// setValidationMessage('file format is not appropriate');
277+
// setIsValidationAttempted(true);
278+
// setShowMessage(true);
279+
// setIsLoading(false);
280+
// setIsDisabled(true);
281+
// }
310282
setIsConfigLoading(false);
311283

312284
} catch (error) {
@@ -319,10 +291,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
319291
}
320292

321293
useEffect(() => {
322-
if(isEmptyString(newMigrationData?.legacy_cms?.uploadedFile?.file_details?.localPath)){
323-
getConfigDetails();
324-
}
325-
294+
getConfigDetails();
326295
}, []);
327296

328297
useEffect(() => {
@@ -332,7 +301,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
332301
setIsConfigLoading(savedState.isConfigLoading);
333302
setIsValidated(savedState?.isValidated);
334303
setValidationMessage(savedState?.validationMessage);
335-
setIsDisabled(savedState?.isDisabled);
304+
//setIsDisabled(savedState?.isDisabled);
336305
setCmsType(savedState.cmsType);
337306
//setFileDetails(savedState.fileDetails);
338307
setFileExtension(savedState.fileExtension);
@@ -392,7 +361,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
392361
if(newMigrationData?.legacy_cms?.uploadedFile?.reValidate){
393362
setValidationMessage('');
394363
}
395-
if(!isEmptyString(newMigrationData?.legacy_cms?.affix) && !newMigrationData?.legacy_cms?.uploadedFile?.isValidated ){
364+
if(!isEmptyString(newMigrationData?.legacy_cms?.affix) && !newMigrationData?.legacy_cms?.uploadedFile?.isValidated && !newMigrationData?.legacy_cms?.uploadedFile?.reValidate){
396365
setIsDisabled(false);
397366
}
398367
setReValidate(newMigrationData?.legacy_cms?.uploadedFile?.reValidate || false);
@@ -418,8 +387,6 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
418387
const sanitizedCmsType = cmsType?.toLowerCase().replace(/[^\w\s-]/g, '');
419388

420389
const documentationUrl = VALIDATION_DOCUMENTATION_URL?.[sanitizedCmsType];
421-
422-
423390

424391
const validationClassName = isValidated ? 'success' : 'error';
425392

@@ -468,7 +435,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
468435
isLoading={isLoading}
469436
loadingColor="#6c5ce7"
470437
version="v2"
471-
disabled={isDisabled || isEmptyString(affix) || reValidate}
438+
disabled={!(reValidate || (!isDisabled && !isEmptyString(newMigrationData?.legacy_cms?.affix)))}
472439
>
473440
Validate File
474441
</Button>

‎ui/src/components/LegacyCms/index.tsx‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,12 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, isCompleted, handleOnAll
5656

5757
/** ALL HOOKS HERE */
5858
const [isMigrationLocked, setIsMigrationLocked] = useState<boolean>(false);
59-
const [isLoading, setIsLoading] = useState<boolean>(newMigrationData?.isprojectMapped);
59+
const [isLoading, setIsLoading] = useState<boolean>(true);
6060
const [internalActiveStepIndex, setInternalActiveStepIndex] = useState<number>(-1);
6161
const [stepperKey] = useState<string>('legacy-Vertical-stepper');
6262

6363
const [isAllStepsCompleted, setIsAllStepsCompleted] = useState(false);
64+
const [isProjectMapped, setisProjectMapped] = useState<boolean>(newMigrationData?.isprojectMapped);
6465
const autoVerticalStepper = useRef<AutoVerticalStepperRef>(null);
6566

6667

@@ -152,26 +153,6 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, isCompleted, handleOnAll
152153
) {
153154
setInternalActiveStepIndex(2);
154155
}
155-
dispatch(updateNewMigrationData({
156-
...newMigrationData,
157-
legacy_cms: {
158-
currentStep: internalActiveStepIndex,
159-
selectedCms: selectedCmsData,
160-
selectedFileFormat: selectedFileFormatData,
161-
uploadedFile: {
162-
file_details:{
163-
localPath: legacyCMSData?.file_path,
164-
awsData: legacyCMSData?.awsDetails,
165-
isLocalPath: legacyCMSData?.is_localPath
166-
},
167-
isValidated: legacyCMSData?.is_fileValid,
168-
reValidate: newMigrationData?.legacy_cms?.uploadedFile?.reValidate
169-
}, //need to add backend data once endpoint exposed.
170-
affix: legacyCMSData?.affix ?? '',
171-
isFileFormatCheckboxChecked: true, //need to add backend data once endpoint exposed.
172-
isRestictedKeywordCheckboxChecked: true //need to add backend data once endpoint exposed.
173-
}
174-
}))
175156
setIsLoading(false);
176157

177158
//Check for migration Status and lock.
@@ -224,6 +205,7 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, isCompleted, handleOnAll
224205
if(!isEmptyString(newMigrationData?.legacy_cms?.selectedCms?.cms_id) && !isEmptyString(newMigrationData?.legacy_cms?.affix) && newMigrationData?.legacy_cms?.uploadedFile?.isValidated){
225206
setInternalActiveStepIndex(3);
226207
}
208+
setisProjectMapped(newMigrationData?.isprojectMapped)
227209

228210
},[newMigrationData]);
229211

@@ -244,7 +226,7 @@ const LegacyCMSComponent = forwardRef(({ legacyCMSData, isCompleted, handleOnAll
244226

245227
return (
246228
<>
247-
{isLoading || newMigrationData?.isprojectMapped ? (
229+
{isLoading || isProjectMapped ? (
248230
<div className="loader-container">
249231
<CircularLoader />
250232
</div>

‎ui/src/context/app/app.interface.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@ export interface IFile {
6666
validation?: string;
6767
file_details?: FileDetails;
6868
isValidated: boolean;
69-
reValidate: boolean
69+
reValidate: boolean;
70+
cmsType: string
7071
}
7172

7273
export interface ICMSType extends ICardType {
@@ -308,6 +309,7 @@ export const DEFAULT_FILE: IFile = {
308309
},
309310
isValidated: false,
310311
reValidate: false,
312+
cmsType: '',
311313
};
312314

313315
export const DEFAULT_CMS_TYPE: ICMSType = {

0 commit comments

Comments
 (0)