diff --git a/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx index 1a1283b..d7f35db 100644 --- a/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx +++ b/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx @@ -51,7 +51,6 @@ const EditBlogsAndArticles = () => { console.log(blog?.tags?.map((tagObject) => tagObject.tag)); const [valueQuill, setValueQuill] = useState(blog?.content); - console.log(blog); const { register, diff --git a/src/Pages/Community/CommunityBannerCard.jsx b/src/Pages/Community/CommunityBannerCard.jsx index 485ccb0..d1dbd0f 100644 --- a/src/Pages/Community/CommunityBannerCard.jsx +++ b/src/Pages/Community/CommunityBannerCard.jsx @@ -49,7 +49,7 @@ const CommunityBannerCard = ({ // border={"1px solid #9B4651"} borderRadius={8} overflow={"hidden"} - backgroundColor={"#101015"} + backgroundColor={"#2d3436"} // backgroundColor={status ? "#ffe5ea": '#ffffff'} backdropFilter="blur(1px)" > diff --git a/src/Pages/Usecase/AddUseCase.jsx b/src/Pages/Usecase/AddUseCase.jsx index fde0c11..0c45967 100644 --- a/src/Pages/Usecase/AddUseCase.jsx +++ b/src/Pages/Usecase/AddUseCase.jsx @@ -410,7 +410,7 @@ const AddUseCase = () => { - + diff --git a/src/Pages/Usecase/EditUseCase.jsx b/src/Pages/Usecase/EditUseCase.jsx new file mode 100644 index 0000000..bd673d8 --- /dev/null +++ b/src/Pages/Usecase/EditUseCase.jsx @@ -0,0 +1,583 @@ +import React, { useEffect, useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import { + Box, + Button, + Divider, + FormControl, + Textarea, + FormHelperText, + FormLabel, + Heading, + Image, + Input, + Stack, + useToast, +} from "@chakra-ui/react"; +import { + useGetBlogByIdQuery, + useGetUsecaseByIdQuery, + useUpdateBlogMutation, + useUpdateUsecaseMutation, +} from "../../Services/api.service"; +import { useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders"; +import { addBlogSchema, addUsecase, editUsecase } from "../../Validations/Validations"; +import fallbackImage from "../../assets/fallBackImage.png"; +import fallbackImageLarge from "../../assets/ultp-fallback-img.webp"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { TiWarning } from "react-icons/ti"; +import ReactQuill from "react-quill"; +import ChipSelector from "../../Components/ChipSelector/ChipSelector"; +import { motion } from "framer-motion"; +import Loader01 from "../../Components/Loaders/Loader01"; +import Header from "../../Components/Header"; +import ToastBox from "../../Components/ToastBox"; + +const EditUseCase = () => { + const { id } = useParams(); + const toast = useToast(); + const navigate = useNavigate(); + const [updateBlog] = useUpdateUsecaseMutation(); + const { data, error, isLoading } = useGetUsecaseByIdQuery(id); + const blog = data?.data; + const [isLoading01, setIsLoading01] = useState(false); + const [selectedImage, setSelectedImage] = useState(fallbackImageLarge); + const [selectedImageLarge, setSelectedImageLarge] = + useState(fallbackImageLarge); + const [largeImageData, setLargeImageData] = useState(null); + const [smallImageData, setSmallImageData] = useState(null); + const [chips, setChips] = useState(); + const [metaDescription, setMetaDescription] = useState(""); + + const handleDescriptionChange = (e) => { + setMetaDescription(e.target.value); + }; + + const [valueQuill, setValueQuill] = useState(blog?.content); + + const { + register, + handleSubmit, + reset, + formState: { errors }, + setValue, + } = useForm({ + resolver: yupResolver(editUsecase), + defaultValues: { + title: blog?.title, + meta_description: blog?.meta_description, + content: blog?.content, + // banner_image: null, + // icon: null, + // attachment: null, + }, + }); + + useEffect(() => { + if (data?.data) { + setSelectedImage(`https://rubix.betadelivery.com/${blog?.icon}`); + setSelectedImageLarge( + `https://rubix.betadelivery.com/${blog?.bannerImage}` + ); + setValue("meta_description", blog?.meta_description); + setValue("title", blog?.title); + setValue("content", blog?.content); + setValue("attachment", blog?.attachment); + setValueQuill(blog?.content); + } + }, [data, blog, setValue]); + + const onSubmit = async (data) => { + console.log(data); + const formData = new FormData(); + formData.append("meta_description", data.meta_description); + formData.append("title", data.title); + formData.append("category", data.category); + formData.append("summary", data.summary); + formData.append("content", valueQuill); // Add the content to formData + if (data?.banner_image[0] || selectedImageLarge !== fallbackImageLarge) { + formData.append("banner_image", data.banner_image[0]); + } + if (data?.icon[0]) { + formData.append("icon", data.icon[0]); + } + if(data?.attachment !== blog?.attachment){ + Array.from(data?.attachment).forEach((file, index) => { + formData.append(`attachment`, file); + })} + + + try { + setIsLoading01(true); + updateBlog({ id: id, data: formData }) + .then((response) => { + // Handle the response here + console.log("Mutation response:", response?.data?.statusCode); + console.log("Mutation response:", response?.data?.message); + console.log(response); + + if (response?.data?.statusCode === 200) { + setIsLoading01(false); + toast({ + render: () => ( + + ), + }); + reset(); + navigate("/usecase"); + }else if(response?.error?.status === 500){ + setIsLoading01(false); + toast({ + render: () => ( + + ), + }); + + } + }) + .catch((error) => { + // Handle errors + console.error("Error creating community:", error); + setIsLoading01(false); + // Handle error notification if needed + }); + } catch (error) { + // Handle errors + console.error("Error creating community:", error); + } + }; + + const handleImageChange = (e) => { + const file = e.target.files[0]; + setSmallImageData(file); + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setSelectedImage(reader.result); + }; + reader.readAsDataURL(file); + } + }; + + const handleImageChangeLarge = (e) => { + const file = e.target.files[0]; + setLargeImageData(file); + console.log(largeImageData); + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setSelectedImageLarge(reader.result); + }; + reader.readAsDataURL(file); + } + }; + + if (isLoading) { + return ; + } + return ( + +
+ + + + Usecase Image + + + Below is the profile that will be displayed on the community page. + + + + Selected Image + {selectedImageLarge === fallbackImage || largeImageData === null ? ( + "" + ) : ( + + {largeImageData?.name} + + {(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb + + + )} + + + + + + + + Icon Image + + + Below is the profile that will be displayed on the community page. + + + Selected Image + {selectedImage === fallbackImage || smallImageData === null ? ( + "" + ) : ( + + {smallImageData?.name} + + {(smallImageData?.size / (1024 * 1024)).toFixed(2)} mb + + + )} + + + + +
+ + + Title + + + {errors.title && ( + + {errors.title.message} + + )} + + + + + Description + +