const Survey: React.FC = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const [currentStep, setCurrentStep] = useState(0);
const [stepsArray, setStepsArray] = useState<JSX.Element[]>([]);
const [capturedPicture, setCapturePicture] = useState<string>('');
const [showPopup, setShowPopup] = useState(false);
const [popup, setPopup] = useState(false)
const [loading, setLoading] = useState(false)
const [enableGeolocation, setEnableGeolocation] = useState(false)
const [locationFetched, setLocationFetched] = useState(false)
const [isOnline, setIsOnline] = useState(navigator.onLine);
const currentDate = getCurrentTimeStampOfEndMarket()
const [selectDate, setselectDate] = useState(currentDate)
const employeeDetails = useSelector((state: RootState) => state.jwtToken.jwtTokenData?.UserData);
const imageCaptureLimit = 8;
const newOutlet = useSelector((state: RootState) => state.newOutletSurvey.data);
const surveyJson: SurveyDetail[] = newOutlet ? JSON.parse(newOutlet?.content!) : [];
const memoizedSurveyJson = useMemo(() => surveyJson, [surveyJson]);
const capturedImages = useSelector((state: RootState) =>
state?.photo.data.filter(image => image.source !== 'Survey') ?? []
);
const [surveyResponses, setSurveyResponses] = useState<LocalSurveyResponse[]>([]);
const [validationErrors, setValidationErrors] = useState<{ key: string; errorMessage: string; type: string; }[]>([]);
useEffect(() => {
return () => {
dispatch(clearImage())
setCapturePicture('');
}
}, []);
useEffect(() => {
if (capturedImages.length > 0) {
setCapturePicture(capturedImages[capturedImages.length - 1].images);
}
}, [capturedImages]);
useEffect(() => {
if (memoizedSurveyJson) {
setSteps(memoizedSurveyJson);
}
}, [memoizedSurveyJson]);
const handleCapture = (imgSrc: string) => {
const base64Image = imgSrc.replace(/^data:image/(png|jpeg);base64,/, '');
setCapturePicture(base64Image);
const data: PhotoModel = {
source: "newOutletSurvey",
images: base64Image
};
dispatch(addPhoto(data));
setShowPopup(false); // Close the popup after capturing
};
const handleClick = () => {
setShowPopup(true);
};
const closePopup = () => {
setShowPopup(false);
};
const onRemoveClick = (index: number) => {
dispatch(deleteImage(index));
};
const updateSurveyResponse = (questionId: string, response: LocalSurveyResponse) => {
setSurveyResponses(prevState => {
const existingIndex = prevState.findIndex(item => item.questionId === questionId);
if (existingIndex !== -1) {
return prevState.map((item, i) => (i === existingIndex ? response : item));
} else {
return [...prevState, response];
}
});
};
const handleSelectedDate = (date: { day: string; month: string; year: string }) => {
const formattedDate = `${date.year}-${date.month}-${date.day}`;
setselectDate(formattedDate);
}
const setSteps = (surveyData: SurveyDetail[]) => {
const updatedSteps = surveyData.map((data, index) => {
const questionId = `${data.type}_${index}`;
switch (data.type) {
case 'text':
return (
<div key={questionId}>
<TextBox
label={data.Label}
placeholder={data.Placeholder}
onPageChange={(text) => {
const newResponse: LocalSurveyResponse = {
questionId,
question: data.Label,
response: [text],
type: data.type,
};
updateSurveyResponse(questionId, newResponse);
}}
/>
</div>
);
case 'checkbox':
return (
<div key={questionId}>
<Label Label={data.Label}>
<div className="flex flex-wrap gap-2 overflow-y-scroll no-scrollbar">
{data.options && data.options.map((option, optionIndex) => (
<div key={optionIndex}>
<ButtonWithText
isEnabled={surveyResponses.find(r => r.questionId === questionId)?.response.includes(option)}
// isSelected={surveyResponses.find(r => r.questionId === questionId)?.response.includes(option)}
label={option}
onClick={() => {
const currentResponse = surveyResponses.find(r => r.questionId === questionId)?.response || [];
const newResponse: LocalSurveyResponse = {
questionId,
question: data.Label,
response: currentResponse.includes(option)
? currentResponse.filter(item => item !== option)
: [...currentResponse, option],
type: data.type,
};
updateSurveyResponse(questionId, newResponse);
}}
type={'mini'}
/>
</div>
))}
</div>
</Label>
</div>
);
case 'capture':
return (
<div className="w-full " key={questionId}>
<Label Label={t("Upload")}>
{capturedImages.length === 0 && (
<div
className="font-poppins-bold rounded-lg flex items-center justify-center w-full h-24"
onClick={() => handleClick()}
style={{ backgroundImage: "url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='black' stroke-width='2' stroke-dasharray='10' stroke-dashoffset='10' stroke-linecap='butt'/%3e%3c/svg%3e")" }}
>
<Icons.CAMERA_PLUS size={32} />
</div>
)}
<div className="w-full flex flex-wrap justify-space gap-3">
{capturedImages.length > 0 && capturedImages.length < imageCaptureLimit && (
<div
className="font-poppins-bold rounded-lg flex items-center justify-center bg-white w-24 h-24"
onClick={() => handleClick()}
>
<Icons.CAMERA_PLUS size={32} />
</div>
)}
{capturedImages.map((img: PhotoModel, i: number) => {
const newResponse: LocalSurveyResponse = {
questionId,
question: data.Label,
response: capturedImages.map(img => img.images),
type: data.type,
};
updateSurveyResponse(questionId, newResponse);
return (
<ButtonWithImage
onRemoveClick={() => onRemoveClick(i)}
imageUrl={`data:image//(png|jpeg|jpg);base64,${img.images}`}
alt={`Image ${i}`}
enableCloseButton={true}
key={i}
/>
)
})}
</div>
</Label>
</div>
)
case 'date':
return (
<div key={questionId}>
<Label Label={data.Label}>
<CalendarPicker
dateFormat="dd-mm-yyyy"
initialValue={currentDate}
onDateChange={(date) => {
handleSelectedDate(date);
const formattedDate = `${date.year}-${date.month}-${date.day}`;
const newResponse: LocalSurveyResponse = {
questionId,
question: data.Label,
response: [formattedDate],
type: data.type,
};
updateSurveyResponse(questionId, newResponse);
}}
/>
</Label>
</div>
);
); default:
return null;
}
});
setStepsArray(updatedSteps.filter((step) => step !== null) as JSX.Element[]);
};
const handleNextClick = async () => {
if (!newOutlet) {
navigate('/home');
} else {
const currentSurveyItem = surveyJson[currentStep];
const questionId = `${currentSurveyItem.type}_${currentStep}`;
const currentResponse = surveyResponses.find(r => r.questionId === questionId);
let isValid = true;
let errorMessage = '';
switch (currentSurveyItem.type) {
case 'text':
if (!currentResponse?.response[0]?.trim()) {
isValid = false;
errorMessage = 'The field should not be empty.';
}
break;
case 'checkbox':
if (!currentResponse?.response.length) {
isValid = false;
errorMessage = 'Please select at least one option.';
}
break;
case 'capture':
if (!capturedImages.length) {
isValid = false;
errorMessage = 'Please capture/upload a picture.';
}
break;
case 'date':
if (!currentResponse?.response[0]) {
isValid = false;
errorMessage = 'Please select a date.';
}
break;
}
if (!isValid) {
setValidationErrors(prevErrors => [
...prevErrors.filter(e => e.key !== questionId),
{ key: questionId, errorMessage, type: currentSurveyItem.type }
]);
return;
}
setValidationErrors(prevErrors => prevErrors.filter(e => e.key !== questionId));
if (currentStep < stepsArray.length - 1) {
setCurrentStep(currentStep + 1);
dispatch(clearImage())
setCapturePicture('');
} else {
const submissionResponses: GeneratedSurveyResponse[] = surveyResponses.map(({ question, response, type }) => ({
question,
response,
type
}));
const requestData: NewOutletSurveyResponseCreateRequest = {
surveyId: newOutlet?.id,
surveyData: submissionResponses,
employeeEmail: employeeDetails?.Email,
timeStamp: getCurrentTimeStampOfEndMarket(),
noOfQuestions: memoizedSurveyJson.length,
noOfAnswered: surveyResponses.length,
};
isOnline ? dispatch(createNewOutlet(requestData)) : dispatch(setNewOutLetSurvey(requestData))
dispatch(clearImage());
setCapturePicture('');
dispatch(addRoute(RouterName.SucessfullPage));
navigate(RouterName.SucessfullPage);
}
}
};
const handlePreviousClick = () => {
if (currentStep > 0) {
const currentQuestionId = `${surveyJson[currentStep].type}_${currentStep}`;
setValidationErrors(prevErrors => prevErrors.filter(e => e.key !== currentQuestionId));
setCurrentStep(currentStep - 1);
}
};
return (
<div className="relative h-screen">
{!showPopup && <NavigateHeader />}
{showPopup ? (
<CameraPopup onCapture={handleCapture} onClose={closePopup} />
) : (
<>
<Body>
{!newOutlet ? (
<div className="flex flex-col items-center justify-center h-full">
<Icons.WARNING size={100} />
<h1 className="text-2xl font-bold text-heading items-center mx-5">No survey data available.!</h1>
</div>
) : (
<>
<div>{stepsArray[currentStep]}</div>
{validationErrors.length > 0 && (
<div className="validation-errors">
{validationErrors.map((error, index) => (
<span key={index} className={`${GetStatusColor('pending')}`}>
{error.errorMessage}
</span>
))}
</div>
)}
</>
)}
</Body>
<div className="absolute bottom-4 right-4">
<div className="flex justify-between items-center gap-3">
{newOutlet && currentStep > 0 && (
<ButtonWithIcon
alt="Previous"
color={currentStep === 0 ? 'bg-grey' : 'bg-Ash'}
height_and_width="h-20 w-20"
icon={icons.LEFT_ARROW}
size={36}
onClick={handlePreviousClick}
/>
)}
<ButtonWithIcon
alt="Next"
color="bg-Ash"
height_and_width="h-20 w-20"
icon={icons.RIGHT_ARROW}
size={36}
onClick={handleNextClick}
/>
</div>
</div>
</>
)}
{enableGeolocation && (
<WarningPopUp
message={"Enable Geolocation"}
showPopup={popup}
onClose={() => {
setPopup(false)
setEnableGeolocation(false)
}}
/>
)}
</div>
);
};
export default Survey;
setStepsArray(updatedSteps.filter((step) => step !== null) as JSX.Element[]); in setSteps
is causing the component to rerender Infinitely.
how can i solve this issue
const setSteps = (surveyData: SurveyDetail[]) => {}
function is updating the setStepsArray(updatedSteps.filter((step) => step !== null) as JSX.Element[]);
infinitely
iam not able to figure out how to solve this issue