Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 33652f17 by jaymehta
Options

image issue

1 parent bef86b4c
Inline Side-by-side
Showing 2 changed files with 40 additions and 12 deletions
components/vendor/ActivityDetails.js
......@@ -140,6 +140,11 @@ const ActivityDetails = ({ isUpdate }) => {
// const [uploading, setUploading] = useState(false);
const [showImageUploadModal, setshowImageUploadModal] = useState(false);
const [imagesArrayComponent, setimagesArrayComponent] = useState([]);
const [image1, setimage1] = useState();
const [image2, setimage2] = useState();
const [image3, setimage3] = useState();
const [image4, setimage4] = useState();
const [image5, setimage5] = useState();
const [displayImage, setdisplayImage] = useState();
const [termsConditions, settermsConditions] = useState();
const [cancellationPolicy, setCancellationPolicy] = useState();
......@@ -337,6 +342,11 @@ const ActivityDetails = ({ isUpdate }) => {
setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate);
setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
setimage1(activityById?.data.attributes.imagesComponent[0].image.data?.id);
setimage2(activityById?.data.attributes.imagesComponent[1].image.data?.id);
setimage3(activityById?.data.attributes.imagesComponent[2].image.data?.id);
setimage4(activityById?.data.attributes.imagesComponent[3].image.data?.id);
setimage5(activityById?.data.attributes.imagesComponent[4].image.data?.id);
setdisplayImage(activityById?.data.attributes.image?.data?.id);
setCancellationPolicy(activityById?.data.attributes.cancellationPolicy?.data?.id);
settermsConditions(activityById?.data.attributes.termsConditions?.data?.id);
......@@ -428,7 +438,7 @@ const ActivityDetails = ({ isUpdate }) => {
toDate = endDate;
}
if (imagesArrayComponent.length < 5) {
if (!image1 || !image2 || !image3 || !image4 || !image5) {
toast.error("You need to upload 5 images!");
return;
}
......@@ -458,7 +468,7 @@ const ActivityDetails = ({ isUpdate }) => {
daysBoolean,
contactPersonForActivity: values.contactPersonForActivity,
duration: values.durationUnit.toString(),
imagesComponent: imagesArrayComponent,
imagesComponent: [image1, image2, image3, image4, image5],
image: displayImage,
approved: "pending",
termsConditions: termsConditions,
......@@ -1113,7 +1123,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
setimagesArrayComponent={setimage1}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[0]}
/>
......@@ -1121,7 +1131,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
setimagesArrayComponent={setimage2}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[1]}
/>
......@@ -1129,7 +1139,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
setimagesArrayComponent={setimage3}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[2]}
/>
......@@ -1137,7 +1147,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
setimagesArrayComponent={setimage4}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[3]}
/>
......@@ -1145,13 +1155,24 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
setimagesArrayComponent={setimage5}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[4]}
/>
</div>
</div>
{console.log("setimagesArrayComponent", imagesArrayComponent)}
{console.log("setimagesArrayComponent", [image1, image2, image3, image4, image5])}
<button
onClick={e => {
e.preventDefault();
console.log("ids", [image1, image2, image3, image4, image5]);
}}
>
asd
</button>
<br />
<br />
<br />
<br />
<>
{/* <button
......
components/vendor/ImageUploadPopUp.js
......@@ -101,7 +101,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
});
setFileList(updatedFileList);
setimagesArrayComponent([...imagesArrayComponent, newFileId]);
setimagesArrayComponent(newFileId);
message.success(`${info.file.name} uploaded successfully.`);
}
} catch (error) {
......@@ -122,21 +122,28 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
};
const handleRemove = async file => {
console.log("handle remove", file);
const imageId = file.deleteId;
let imageId;
if (file.deleteId) {
imageId = file.deleteId;
} else {
imageId = file.id;
}
if (!imageId) {
console.log("delete here");
message.error(`Failed to remove ${file.name}. Image ID not found.`);
return;
}
setimagesArrayComponent(imagesArrayComponent.filter(item => item != imageId));
setFileList([]);
try {
await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {
const res = await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${session.jwt}`
}
}); // Replace with your Strapi delete endpoint
console.log("delete res", res);
message.success(`${file.name} file removed successfully.`);
setimagesArrayComponent(null);
setFileList(prevFileList => prevFileList.filter(item => item.uid !== file.uid));
} catch (error) {
message.error(`Failed to remove ${file.name}`);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!