583 lines
20 KiB
JavaScript
583 lines
20 KiB
JavaScript
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
|
import Header from "../../Components/Header";
|
|
import {
|
|
AspectRatio,
|
|
Box,
|
|
Button,
|
|
Divider,
|
|
FormControl,
|
|
FormHelperText,
|
|
FormLabel,
|
|
Heading,
|
|
Image,
|
|
Input,
|
|
Stack,
|
|
Textarea,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import fallbackImage from "../../assets/ultp-fallback-img.webp";
|
|
import { useState } from "react";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { useForm } from "react-hook-form";
|
|
import { addEvents } from "../../Validations/Validations";
|
|
import { TiWarning } from "react-icons/ti";
|
|
import Loader01 from "../../Components/Loaders/Loader01";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { motion } from "framer-motion";
|
|
import { useCreateEventsMutation } from "../../Services/api.service";
|
|
import ToastBox from "../../Components/ToastBox";
|
|
|
|
const AddEvents = () => {
|
|
const toast = useToast();
|
|
const navigate = useNavigate();
|
|
const [createEvents] = useCreateEventsMutation(); // Invoke the hook to get the mutation function
|
|
const [selectedImage, setSelectedImage] = useState(fallbackImage);
|
|
const [largeImageData, setLargeImageData] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const [eventDatesInput, setEventsDatesInputs] = useState([]);
|
|
|
|
|
|
// Function to handle adding new date inputs
|
|
const addDateInput = () => {
|
|
setEventsDatesInputs([...eventDatesInput, ""]);
|
|
};
|
|
|
|
// Function to handle the change in date inputs
|
|
const handleDateChange = (index, event) => {
|
|
const newDates = [...eventDatesInput];
|
|
newDates[index] = event.target.value;
|
|
setEventsDatesInputs(newDates);
|
|
};
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(addEvents),
|
|
});
|
|
|
|
|
|
const handleImageChange = (e) => {
|
|
const file = e.target.files[0];
|
|
setLargeImageData(file);
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setSelectedImage(reader.result);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const onSubmit = (data) => {
|
|
setIsLoading(true);
|
|
const formData = new FormData();
|
|
formData.append("title", data.title);
|
|
formData.append("content", data.content);
|
|
formData.append("location", data.location);
|
|
formData.append("organizer_name", data.organizer_name);
|
|
formData.append("organizer_mobile_number", data.organizer_mobile_number);
|
|
formData.append("organizer_email", data.organizer_email);
|
|
|
|
if (eventDatesInput.length === 0 || eventDatesInput[0]==="") {
|
|
setIsLoading(false);
|
|
return toast({
|
|
render: () => (
|
|
<ToastBox status={"warn"} message={"Please add events date"} />
|
|
),
|
|
});
|
|
} else {
|
|
eventDatesInput.forEach((date, index) => {
|
|
formData.append(`dates[${index}]`, date);
|
|
});
|
|
}
|
|
|
|
if (data.banner_image[0]) {
|
|
formData.append("banner_image", data.banner_image[0]);
|
|
}
|
|
|
|
// for (const [key, value] of formData.entries()) {
|
|
// // console.log(`${key}: ${value}`);
|
|
// }
|
|
|
|
// Trigger the mutationconst
|
|
const res = createEvents(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 === 201) {
|
|
setIsLoading(false);
|
|
toast({
|
|
title: response?.data?.message,
|
|
status: "success",
|
|
isClosable: true,
|
|
});
|
|
reset();
|
|
navigate("/events");
|
|
} else if (response?.data?.statusCode === 500) {
|
|
setIsLoading(false);
|
|
toast({
|
|
title: response?.data?.message,
|
|
status: "error", // Change status to error
|
|
isClosable: true,
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// Handle errors
|
|
// // console.error("Error creating community:", error?.message);
|
|
setIsLoading(false);
|
|
// Handle error notification if needed
|
|
});
|
|
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
{...OPACITY_ON_LOAD}
|
|
w={"100%"}
|
|
h={"100vh"}
|
|
|
|
className="overflow-auto "
|
|
display={"flex"}
|
|
flexDirection={"column"}
|
|
>
|
|
<Header title={"Events"} />
|
|
|
|
|
|
{/* <Box width="100%" maxWidth="1200px" mx="auto" my={4}>
|
|
<AspectRatio ratio={16 / 6}>
|
|
<iframe
|
|
title="naruto"
|
|
src="https://rubix.betadelivery.com/events"
|
|
width="100%"
|
|
height="100%"
|
|
style={{ border: 'none' }}
|
|
allowFullScreen
|
|
/>
|
|
</AspectRatio>
|
|
</Box> */}
|
|
|
|
<Box className="d-flex">
|
|
<form className="w-100" onSubmit={handleSubmit(onSubmit)}>
|
|
<Box display={"flex"}>
|
|
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
|
<Box h={340} gap={4} display={'flex'} flexDirection={'column'}>
|
|
<span className="web-text-large fw-bold rubix-text-dark">
|
|
Banner info
|
|
</span>
|
|
<span className="web-text-medium text-secondary">
|
|
Select the platform for which you need to create this campaign.
|
|
</span>
|
|
|
|
|
|
</Box>
|
|
|
|
|
|
<Divider />
|
|
|
|
<span className="web-text-large fw-bold rubix-text-dark">
|
|
Banner image
|
|
</span>
|
|
<span className="web-text-medium text-secondary mb-4">
|
|
Below is the profile that will be displayed on the community
|
|
page.
|
|
</span>
|
|
|
|
<Box
|
|
boxSize="sm"
|
|
className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
|
|
>
|
|
<Image
|
|
shadow={"md"}
|
|
rounded={8}
|
|
w={500}
|
|
h={240}
|
|
src={selectedImage}
|
|
alt="Selected Image"
|
|
/>
|
|
{selectedImage === fallbackImage || largeImageData === null ? (
|
|
""
|
|
) : (
|
|
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
|
|
<span className="web-text-small">
|
|
{largeImageData?.name}
|
|
</span>
|
|
<span className="web-text-small text-secondary fst-italic">
|
|
{(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb
|
|
</span>
|
|
</Box>
|
|
)}
|
|
<Button
|
|
onClick={() => setSelectedImage(fallbackImage)}
|
|
backgroundColor="red.400"
|
|
color={"whitesmoke"}
|
|
transition={"0.5s"}
|
|
_hover={{
|
|
backgroundColor: "red.500",
|
|
}}
|
|
size="xs"
|
|
>
|
|
Remove
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box className="col-7 pt-4 mb-3 overflow-auto p-4">
|
|
<FormControl isRequired className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Title
|
|
</FormLabel>
|
|
<Input
|
|
{...register("title")}
|
|
placeholder="Title"
|
|
className="web-text-medium"
|
|
size="sm"
|
|
errorBorderColor="crimson"
|
|
isInvalid={watch()?.title?.length > 50}
|
|
// maxLength={51}
|
|
/>
|
|
<FormHelperText
|
|
color={watch()?.title?.length > 50 ? "red" : "gray.500"}
|
|
className="web-text-small"
|
|
>
|
|
If title crosses 50 characters it will cause problem in
|
|
alignment on website.you have entered {watch()?.title?.length}{" "}
|
|
characters
|
|
</FormHelperText>
|
|
{errors.name && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.title.message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
|
|
<FormControl isRequired className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Location
|
|
</FormLabel>
|
|
<Input
|
|
{...register("location")}
|
|
placeholder="Location"
|
|
className="web-text-medium"
|
|
size="sm"
|
|
/>
|
|
{errors.location && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.location.message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
|
|
<FormControl isRequired className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Content
|
|
</FormLabel>
|
|
<Textarea
|
|
{...register("content")}
|
|
placeholder="Name"
|
|
className="web-text-medium"
|
|
size="sm"
|
|
name="content"
|
|
type="text"
|
|
id="content"
|
|
errorBorderColor="crimson"
|
|
isInvalid={watch()?.content?.length > 230}
|
|
// maxLength={51}
|
|
/>
|
|
<FormHelperText
|
|
color={watch()?.content?.length > 230 ? "red" : "gray.500"}
|
|
className="web-text-small"
|
|
>
|
|
If content crosses 230 characters it will cause problem in
|
|
alignment on website.you have entered{" "}
|
|
{watch()?.content?.length} characters
|
|
</FormHelperText>
|
|
{errors.content && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.content.message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
|
|
<FormControl isRequired className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Organisation email
|
|
</FormLabel>
|
|
<Input
|
|
type="email"
|
|
{...register("organizer_email")}
|
|
placeholder="Organisation email"
|
|
className="web-text-medium"
|
|
size="sm"
|
|
/>
|
|
{errors.organizer_email && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.organizer_email.message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
|
|
<FormControl className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Event dates
|
|
</FormLabel>
|
|
{eventDatesInput.map((date, index) => (
|
|
<Input
|
|
key={index}
|
|
type="date"
|
|
value={date}
|
|
onChange={(event) => handleDateChange(index, event)}
|
|
className="web-text-medium"
|
|
size="sm"
|
|
/>
|
|
))}
|
|
<Box display={"flex"} justifyContent={"flex-end"} mt={2}>
|
|
<Button
|
|
size={"xs"}
|
|
rounded={"sm"}
|
|
type="button"
|
|
onClick={addDateInput}
|
|
>
|
|
Add Date
|
|
</Button>
|
|
</Box>
|
|
{/* <FormHelperText className="web-text-small">
|
|
{data?.data?.eventDates?.map(({ date }, index) => (
|
|
<span className="web-text-small me-2">
|
|
{formatDate(date)}
|
|
</span>
|
|
))}
|
|
</FormHelperText> */}
|
|
{errors.eventDates && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.eventDates.message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
|
|
<FormControl isRequired className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Banner image
|
|
</FormLabel>
|
|
{/* <ImageDropBox /> */}
|
|
|
|
<Box
|
|
borderColor="gray.300"
|
|
borderStyle="dashed"
|
|
borderWidth="2px"
|
|
rounded="md"
|
|
shadow="sm"
|
|
role="group"
|
|
transition="all 150ms ease-in-out"
|
|
_hover={{
|
|
shadow: "md",
|
|
}}
|
|
as={motion.div}
|
|
initial="rest"
|
|
animate="rest"
|
|
whileHover="hover"
|
|
height={"105px"}
|
|
className="pointer"
|
|
>
|
|
<Box position="relative" height="100%" width="100%">
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
left="0"
|
|
height="100%"
|
|
width="100%"
|
|
display="flex"
|
|
flexDirection="column"
|
|
>
|
|
<Stack
|
|
height="100%"
|
|
width="100%"
|
|
display="flex"
|
|
alignItems="center"
|
|
justify="center"
|
|
>
|
|
<span
|
|
className="d-flex flex-column align-items-center pointer"
|
|
spacing="1"
|
|
>
|
|
<Heading
|
|
fontSize="lg"
|
|
color="gray.700"
|
|
fontWeight="bold"
|
|
cursor={"pointer"}
|
|
>
|
|
Drop images here
|
|
</Heading>
|
|
<span
|
|
fontWeight="light"
|
|
className="web-text-large text-secondary text-center pointer"
|
|
>
|
|
or click to upload
|
|
</span>
|
|
</span>
|
|
</Stack>
|
|
</Box>
|
|
<Input
|
|
{...register("banner_image")}
|
|
type="file"
|
|
height="100%"
|
|
width="100%"
|
|
position="absolute"
|
|
top="0"
|
|
left="0"
|
|
opacity="0"
|
|
aria-hidden="true"
|
|
accept="image/*"
|
|
onChange={handleImageChange}
|
|
onDrop={handleImageChange}
|
|
// onDragEnter={startAnimation}
|
|
// onDragLeave={stopAnimation}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
|
|
{errors.banner_image && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.banner_image.message}
|
|
</span>
|
|
)}
|
|
<FormHelperText className="web-text-small">
|
|
Maximum limit of image is 10MB.
|
|
</FormHelperText>
|
|
</FormControl>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Divider />
|
|
|
|
<Box display={"flex"}>
|
|
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
|
<span className="web-text-large fw-bold rubix-text-dark">
|
|
Orgainsation info
|
|
</span>
|
|
<span className="web-text-medium text-secondary mb-0">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur
|
|
dicta exercitationem laboriosam fugit vel ipsam hic, consectetur
|
|
eum nesciunt adipisci?
|
|
</span>
|
|
</Box>
|
|
|
|
<Box className="col-7 pt-4 p-4">
|
|
<FormControl isRequired className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Organisation name
|
|
</FormLabel>
|
|
<Input
|
|
{...register("organizer_name")}
|
|
placeholder="Name"
|
|
className="web-text-medium"
|
|
size="sm"
|
|
name="organizer_name"
|
|
type="text"
|
|
id="organizer_name"
|
|
errorBorderColor="crimson"
|
|
isInvalid={watch()?.organizer_name?.length > 50}
|
|
// maxLength={51}
|
|
/>
|
|
<FormHelperText
|
|
color={
|
|
watch()?.organizer_name?.length > 50 ? "red" : "gray.500"
|
|
}
|
|
className="web-text-small"
|
|
>
|
|
If Organisation name crosses 50 characters it will cause
|
|
problem in alignment on website.you have entered{" "}
|
|
{watch()?.organizer_name?.length} characters
|
|
</FormHelperText>
|
|
{errors.organizer_name && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.organizer_name.message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
|
|
<FormControl isRequired className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Organisation number
|
|
</FormLabel>
|
|
<Input
|
|
{...register("organizer_mobile_number")}
|
|
placeholder="Name"
|
|
className="web-text-medium"
|
|
size="sm"
|
|
name="organizer_mobile_number"
|
|
type="text"
|
|
id="organizer_mobile_number"
|
|
/>
|
|
{errors.organizer_mobile_number && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.organizer_mobile_number.message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
|
|
<FormControl isRequired className="mb-3">
|
|
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
|
Organisation email
|
|
</FormLabel>
|
|
<Input
|
|
{...register("organizer_email")}
|
|
placeholder="Name"
|
|
className="web-text-medium"
|
|
size="sm"
|
|
name="organizer_email"
|
|
type="text"
|
|
id="organizer_email"
|
|
/>
|
|
<FormHelperText className="web-text-small">
|
|
Please enter valid email
|
|
</FormHelperText>
|
|
{errors.organizer_email && (
|
|
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
|
<TiWarning className="fw-bold fs-5 " />{" "}
|
|
{errors.organizer_email.message}
|
|
</span>
|
|
)}
|
|
</FormControl>
|
|
|
|
<Box className=" d-flex justify-content-end mb-5">
|
|
<Button
|
|
isLoading={isLoading}
|
|
spinner={<Loader01 />}
|
|
color={"whitesmoke"}
|
|
backgroundColor={"purple.700"}
|
|
_hover={{
|
|
backgroundColor: "purple.800",
|
|
}}
|
|
rounded={"sm"}
|
|
type="submit"
|
|
size="sm"
|
|
>
|
|
Create event
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</form>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default AddEvents;
|