import {
Box,
FormControl,
FormHelperText,
FormLabel,
Input,
Text,
Stack,
Textarea,
Heading,
Button,
useToast,
Divider,
Image,
} from "@chakra-ui/react";
import React, { useState } from "react";
import fallbackImage from "../../assets/ultp-fallback-img.webp";
import { TiWarning } from "react-icons/ti";
import { motion } from "framer-motion";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import {
addCommunityBannerSchema,
addCommunitySchema,
addNews,
addUsecase,
} from "../../Validations/Validations";
import {
useCreateCommunityBannerMutation,
useCreateCommunityMutation,
useCreateNewsMutation,
useCreateUsecaseMutation,
useGetCommunityQuery,
} from "../../Services/api.service";
import { useNavigate } from "react-router-dom";
import Loader01 from "../../Components/Loaders/Loader01";
import Header from "../../Components/Header";
import ReactQuill from "react-quill";
import ToastBox from "../../Components/ToastBox";
const AddUseCase = () => {
const toast = useToast();
const navigate = useNavigate();
const [createUsecase] = useCreateUsecaseMutation();
const [isLoading, setIsLoading] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [selectedIcon, setSelectedIcon] = useState(fallbackImage);
const [imageData, setImageData] = useState(null);
const [chips, setChips] = useState([]);
const [value, setValue] = useState("");
const [icon, setIcon] = useState(null);
const [iconData, setIconData] = useState(null);
const [metaDescription, setMetaDescription] = useState("");
const handleDescriptionChange = (e) => {
setMetaDescription(e.target.value);
};
const {
register,
handleSubmit,
reset,
setValue: setUseCaseValue,
formState: { errors },
} = useForm({
resolver: yupResolver(addUsecase),
});
console.log(errors);
const onSubmit = async (data) => {
setIsLoading(true);
setUseCaseValue("content", value);
console.log(data);
console.log(data);
const formData = new FormData();
// Append simple fields
formData.append("title", data.title);
formData.append("meta_description", data.meta_description);
formData.append("content", data.content);
if (data.banner_image && data.banner_image.length > 0) {
formData.append("banner_image", data.banner_image[0]);
}
if (data.icon && data.icon.length > 0) {
formData.append("icon", data.icon[0]);
}
console.log(data.attachment);
// Log and append file attachments
if (data.attachment && data.attachment.length > 0) {
Array.from(data.attachment).forEach((file, index) => {
console.log(`attachment[${index}]: ${file.name}`);
formData.append("attachment", file);
});
}
// Log formData entries
// for (let [key, value] of formData.entries()) {
// console.log(`${key}: ${value}`);
// }
try {
// Trigger the mutation
createUsecase(formData)
.then((response) => {
// Handle the response here
console.log("Mutation response:", response?.data?.statusCode);
console.log("Mutation response:", response?.data?.message);
if (response?.data?.statusCode === 200) {
setIsLoading(false);
toast({
render: () => (
),
});
reset();
setIsLoading(false)
navigate("/usecase");
} else if (response?.data?.statusCode === 500) {
setIsLoading(false);
toast({
render: () => (
),
});
}
})
.catch((error) => {
// Handle errors
console.error("Error creating community:", error);
setIsLoading(false);
// Handle error notification if needed
});
} catch (error) {
// Handle errors
console.error("Error creating community:", error);
setIsLoading(false);
}
};
const handleImageChange = (e) => {
const file = e.target.files[0];
setImageData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedImage(reader.result);
};
reader.readAsDataURL(file);
}
};
const handleIconChange = (e) => {
const file = e.target.files[0];
setIconData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedIcon(reader.result);
};
reader.readAsDataURL(file);
}
};
return (
Usecase Image
Below is the profile that will be displayed on the community page.
{selectedImage === fallbackImage || imageData === null ? (
""
) : (
{imageData?.name}
{(imageData?.size / (1024 * 1024)).toFixed(2)} mb
)}
{selectedIcon === fallbackImage || iconData === null ? (
""
) : (
{iconData?.name}
{(iconData?.size / (1024 * 1024)).toFixed(2)} mb
)}