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/fallBackImage.png";
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 { addCommunitySchema } from "../../Validations/Validations";
import {
useCreateCommunityMutation,
useGetCommunityQuery,
} from "../../Services/api.service";
import { useNavigate } from "react-router-dom";
import Loader01 from "../../Components/Loaders/Loader01";
import Header from "../../Components/Header";
import { CloseIcon } from "@chakra-ui/icons";
const AddComunity = () => {
const toast = useToast();
const navigate = useNavigate();
const getCommunityQuery = useGetCommunityQuery();
const [createCommunityData] = useCreateCommunityMutation(); // Invoke the hook to get the mutation function
const [isLoading, setIsLoading] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [imageData, setImageData] = useState(null);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(addCommunitySchema),
});
const onSubmit = async (data) => {
try {
setIsLoading(true);
const formData = new FormData();
formData.append("member_name", data.member_name);
formData.append("designation", data.designation);
formData.append("description", data.description);
formData.append("linkedin", data.linkedin);
if (data.profile_image[0]) {
formData.append("profile_image", data.profile_image[0]);
}
// Trigger the mutation
createCommunityData(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();
navigate("/community");
}
})
.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);
}
};
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);
}
};
return (
Members Info
Select the platform for which you need to create this campaign.
Display profile
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
setSelectedImage(fallbackImage)} className=" web-text-large link rounded-2 pointer p-1" as="span" >
)}
);
};
export default AddComunity;