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 }) => { ...@@ -28,7 +28,7 @@ const SimilarExperiences = ({ allActivitiesData }) => {
allActivitiesData.data.map(item => { allActivitiesData.data.map(item => {
return { return {
id: item.id, id: item.id,
image: cleanImage(item.attributes.image.data.attributes), image: cleanImage(item.attributes.image.data?.attributes),
topRated: "Top Rated", topRated: "Top Rated",
title: item.attributes.name, title: item.attributes.name,
discription: `${item.attributes.description.slice(0, 80)}...`, discription: `${item.attributes.description.slice(0, 80)}...`,
......
components/vendor/ActivityDetails.js
...@@ -329,6 +329,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -329,6 +329,7 @@ const ActivityDetails = ({ isUpdate }) => {
}); });
setStartDate(activityById?.data.attributes.fromDate); setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate); setEndDate(activityById?.data.attributes.toDate);
setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
} }
}, []); }, []);
// useEffect(() => { // useEffect(() => {
...@@ -1111,52 +1112,44 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1111,52 +1112,44 @@ const ActivityDetails = ({ isUpdate }) => {
</div> </div>
</div> </div>
<div className="row d-flex "> <div className="row d-flex ">
{/* <UploadImageComponent setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent}/> */}
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent} populatedImages={activityById?.data.attributes.imagesComponent[0]}
/> />
</div> </div>
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent} populatedImages={activityById?.data.attributes.imagesComponent[1]}
/> />
</div> </div>
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent} populatedImages={activityById?.data.attributes.imagesComponent[2]}
/> />
</div> </div>
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent} populatedImages={activityById?.data.attributes.imagesComponent[3]}
/> />
</div> </div>
<div className="col-2"> <div className="col-2">
<ImageUploadPopUp <ImageUploadPopUp
// className="col-2"
isUpdate={isUpdate} isUpdate={isUpdate}
setimagesArrayComponent={setimagesArrayComponent} setimagesArrayComponent={setimagesArrayComponent}
imagesArrayComponent={imagesArrayComponent} imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent} populatedImages={activityById?.data.attributes.imagesComponent[4]}
/> />
</div> </div>
</div> </div>
......
components/vendor/ImageUploadPopUp.js
...@@ -5,6 +5,7 @@ import { getSession } from "next-auth/react"; ...@@ -5,6 +5,7 @@ import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { cleanImage } from "../../services/imageHandling";
const getBase64 = file => const getBase64 = file =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
...@@ -20,6 +21,17 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -20,6 +21,17 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
const [previewImage, setPreviewImage] = useState(""); const [previewImage, setPreviewImage] = useState("");
const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
const [uploading, setUploading] = useState(false); 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(() => { useEffect(() => {
const fetchSession = async () => { const fetchSession = async () => {
...@@ -28,6 +40,16 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -28,6 +40,16 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
fetchSession(); fetchSession();
// dispatch(getLoggedInVendor()); // 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); console.log("fileList", fileList);
// let formData = new FormData(); // let formData = new FormData();
...@@ -99,13 +121,14 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, ...@@ -99,13 +121,14 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages,
}, 2000); }, 2000);
}; };
const handleRemove = async file => { const handleRemove = async file => {
console.log(file); console.log("handle remove", file);
const imageId = file.id; const imageId = file.deleteId;
if (!imageId) { if (!imageId) {
message.error(`Failed to remove ${file.name}. Image ID not found.`); message.error(`Failed to remove ${file.name}. Image ID not found.`);
return; return;
} }
setimagesArrayComponent(imagesArrayComponent.filter(item => item != imageId));
setFileList([]);
try { try {
await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, { await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload/files/${imageId}`, {
headers: { headers: {
......
redux/actions/activityAction.js
...@@ -151,7 +151,8 @@ export const getActivityById = id => async dispatch => { ...@@ -151,7 +151,8 @@ export const getActivityById = id => async dispatch => {
}; };
const query = { 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, { const queryString = qs.stringify(query, {
encodeValuesOnly: true 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!