Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 00914e6b by jaymehta
Options

immage error detail page

1 parent 4488da5d
Inline Side-by-side
Showing 4 changed files with 35 additions and 18 deletions
components/detail/SimilarExperiences.js
......@@ -28,7 +28,7 @@ const SimilarExperiences = ({ allActivitiesData }) => {
allActivitiesData.data.map(item => {
return {
id: item.id,
image: cleanImage(item.attributes.image.data.attributes),
image: cleanImage(item.attributes.image.data?.attributes),
topRated: "Top Rated",
title: item.attributes.name,
discription: `${item.attributes.description.slice(0, 80)}...`,
......
components/vendor/ActivityDetails.js
......@@ -329,6 +329,7 @@ const ActivityDetails = ({ isUpdate }) => {
});
setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate);
setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
}
}, []);
// useEffect(() => {
......@@ -1111,52 +1112,44 @@ const ActivityDetails = ({ isUpdate }) => {
</div>
</div>
<div className="row d-flex ">
{/* <UploadImageComponent setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}/> */}
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
populatedImages={activityById?.data.attributes.imagesComponent[0]}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
populatedImages={activityById?.data.attributes.imagesComponent[1]}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
populatedImages={activityById?.data.attributes.imagesComponent[2]}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
populatedImages={activityById?.data.attributes.imagesComponent[3]}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}
populatedImages={activityById?.data.attributes.imagesComponent[4]}
/>
</div>
</div>
......
components/vendor/ImageUploadPopUp.js
......@@ -5,6 +5,7 @@ import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { toast } from "react-toastify";
import { cleanImage } from "../../services/imageHandling";
const getBase64 = file =>
new Promise((resolve, reject) => {
const reader = new FileReader();
......@@ -20,6 +21,17 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
const [previewImage, setPreviewImage] = useState("");
const [fileList, setFileList] = useState([]);
const [uploading, setUploading] = useState(false);
console.log("populatedImages", populatedImages);
const transformImageData = images => {
return images.map((image, index) => ({
uid: index,
name: `image-${index}.jpg`, // You can adjust the name based on your requirements
status: "done",
url: image.url, // Assuming image.url is the URL of the image
id: image.id,
deleteId: image.deleteId
}));
};
useEffect(() => {
const fetchSession = async () => {
......@@ -28,6 +40,16 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
useEffect(() => {
// console.log("populatedImages.id", populatedImages.id);
if (!populatedImages) {
return;
}
const initialImages = transformImageData([{ url: cleanImage(populatedImages.image.data?.attributes), deleteId: populatedImages.image.data?.id, id: populatedImages.id }]);
if (populatedImages) {
setFileList(initialImages);
}
}, [populatedImages]);
console.log("fileList", fileList);
// let formData = new FormData();
......@@ -99,13 +121,14 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
}, 2000);
};
const handleRemove = async file => {
console.log(file);
const imageId = file.id;
console.log("handle remove", file);
const imageId = file.deleteId;
if (!imageId) {
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}`, {
headers: {
......
redux/actions/activityAction.js
......@@ -151,7 +151,8 @@ export const getActivityById = id => async dispatch => {
};
const query = {
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "category", "imagesComponent"]
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "category", "imagesComponent",
"imagesComponent.image"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!