From a0ae62e2cbbaf5a93e21ea3cc96934a7d23d9629 Mon Sep 17 00:00:00 2001 From: Yasiu1376 Date: Sat, 2 Dec 2023 11:26:38 +0330 Subject: [PATCH] LFFE-31 review and clean code --- .../Form/ConfirmForm/ConfirmContent.jsx | 44 +++++++------------ .../Form/ConfirmForm/ImageContent.jsx | 21 ++++----- .../Form/ConfirmForm/index.jsx | 10 +---- src/core/components/CustomAccordion.jsx | 23 +++------- 4 files changed, 34 insertions(+), 64 deletions(-) diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx index fa9f438..aac9839 100644 --- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx @@ -28,58 +28,44 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl const [accordionStates, setAccordionStates] = useState([]); const [hasAccordionOpened, setHasAccordionOpened] = useState([]); const {update_notification} = useNotification(); - const [hasImageShown, sethasImageShown] = useState(false); - const [imageLink, setimageLink] = useState(null); + const [hasImageShown, setHasImageShown] = useState(false); + const [imageLink, setImageLink] = useState(null); const [detailsList, setDetailsData] = useState(null); const [loading, setLoading] = useState(true); const [isSkeleton, setIsSkeleton] = useState(false); - const [isButtonDisabled, setIsButtonDisabled] = useState(true); useEffect(() => { requestServer(`${GET_TRANSPORTATION_ASSISTANCE_DETAILS}/${rowId}`, 'get') .then((response) => { - const booleanArray = Array.from({ length: response.data.data.attachment_files.length }, () => false); - setAccordionStates(booleanArray); - setHasAccordionOpened(booleanArray); + const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false); + setAccordionStates(booleanData); + setHasAccordionOpened(booleanData); setDetailsData(response.data) }) - .catch((error) => { - + .catch(() => { }).finally(() => { setLoading(false); }); }, []); - useEffect(() => { - if (detailsList && detailsList.data && detailsList.data.attachment_files && detailsList.data.attachment_files.length !== 0) { - setIsButtonDisabled(true); - } else { - setIsButtonDisabled(false); - } - }, [detailsList]); - const handleAccordionChange = (index) => { const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false); setAccordionStates(newAccordionStates); - if (newAccordionStates[index]===false) + if (!newAccordionStates[index]) { - handleSizeChangeClick(index , false); - sethasImageShown(false); + handleSizeChangeClick('sm'); + setHasImageShown(false); setIsSkeleton(false) } else { - handleSizeChangeClick(index , true); - sethasImageShown(true); - setimageLink(detailsList.data.attachment_files[index]) + handleSizeChangeClick('xl'); + setHasImageShown(true); + setImageLink(detailsList.data.attachment_files[index]) setIsSkeleton(true) const newHasAccordionOpened = [...hasAccordionOpened]; newHasAccordionOpened[index] = true; setHasAccordionOpened(newHasAccordionOpened); - - if (newHasAccordionOpened.every(opened => opened === true)) { - setIsButtonDisabled(false) - } } }; @@ -92,7 +78,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl }) .test('fileType', `${t("TransportationAssistance.upload_file_format")}`, (value) => { if (!value) return true - const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types + const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; return allowedTypes.includes(value.type); }) }) @@ -149,7 +135,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl hasAccordionOpened={hasAccordionOpened[index]} handleAccordionChange={() => handleAccordionChange(index)} accordionIndex={index} - handleSizeChange={() => handleSizeChange(index)} + downloadFile={file.attachment} /> )); } @@ -237,7 +223,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx index 9d3afa9..444e6d5 100644 --- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx +++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx @@ -1,29 +1,30 @@ import {Box, Skeleton, Stack} from "@mui/material"; import {useEffect} from "react"; -const ImageContent = (link) => { +const ImageContent = (prop) => { + useEffect(() => { const timer = setTimeout(() => { - link.setIsSkeleton(false); - }, 1000); + prop.setIsSkeleton(false); + }, 1500); return () => clearTimeout(timer); - }, [link.isSkeleton]); + }, [prop.isSkeleton]); - const isPDF = link && link.imageLink && link.imageLink.attachment && link.imageLink.attachment.endsWith('.pdf'); + const isPDF = prop.imageLink && prop.imageLink.attachment && prop.imageLink.attachment.endsWith('.pdf'); return ( <> - {link.isSkeleton && ( + {prop.isSkeleton && ( )} {isPDF ? ( - + ) : ( - link && link.imageLink && link.imageLink.attachment && ( - - + prop.imageLink && prop.imageLink.attachment && ( + + ) )} diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx index b33f30d..e257c41 100644 --- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx +++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx @@ -14,14 +14,8 @@ const Confirm = ({rowId, mutate}) => { } }, [openConfirmDialog]); - const handleSizeChangeClick = (num , state) => { - if (state===true){ - setDialogSize('xl'); - - } - else { - setDialogSize('sm'); - } + const handleSizeChangeClick = (size) => { + setDialogSize(size); }; return ( diff --git a/src/core/components/CustomAccordion.jsx b/src/core/components/CustomAccordion.jsx index eb2efcc..20ba932 100644 --- a/src/core/components/CustomAccordion.jsx +++ b/src/core/components/CustomAccordion.jsx @@ -10,29 +10,18 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import VerifiedIcon from '@mui/icons-material/Verified'; import Check from "@mui/icons-material/Check"; import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined"; -import VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded"; -import {useTranslations} from "next-intl"; import {useState} from "react"; - -const CustomAccordion = ({ title, - hasOpened, - hasAccordionOpened, - handleAccordionChange, - accordionIndex, - handleSizeChange }) => { - const t = useTranslations(); +const CustomAccordion = ({ title, hasOpened, hasAccordionOpened, handleAccordionChange, accordionIndex , downloadFile}) => { const [downloadStatus, setDownloadStatus] = useState('initial'); - const handleDownloadClick = (setStatus) => { - - console.log(setStatus) + const handleDownloadClick = (setStatus , url) => { setStatus('downloading'); + window.open(url, '_blank'); setTimeout(() => { setStatus('completed'); setTimeout(() => { setStatus('initial'); - }, 2500); - }, 2000); - // Perform the actual download logic here + }, 1200); + }, 1000); }; return( handleAccordionChange(accordionIndex)} sx={{ @@ -52,7 +41,7 @@ const CustomAccordion = ({ title, -