diff --git a/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx index 9326a44..52b5935 100644 --- a/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx +++ b/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx @@ -776,7 +776,7 @@ const EditBlogsAndArticles = () => { size="sm" rounded={"sm"} > - Create blog + Save edit diff --git a/src/Pages/Events/EditEvents.jsx b/src/Pages/Events/EditEvents.jsx new file mode 100644 index 0000000..a61b7b1 --- /dev/null +++ b/src/Pages/Events/EditEvents.jsx @@ -0,0 +1,572 @@ +import React, { useEffect, useState } from "react"; +import { + useGetEventsByIdQuery, + useUpdateEventsMutation, +} from "../../Services/api.service"; +import fallbackImage from "../../assets/ultp-fallback-img.webp"; +import { useNavigate, useParams } from "react-router-dom"; +import { + Box, + Button, + Divider, + FormControl, + FormHelperText, + FormLabel, + Heading, + Image, + Input, + Stack, + Tag, + useToast, +} from "@chakra-ui/react"; +import { addEvents } from "../../Validations/Validations"; +import { useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import Header from "../../Components/Header"; +import { TiWarning } from "react-icons/ti"; +import { motion } from "framer-motion"; +import Loader01 from "../../Components/Loaders/Loader01"; +import ToastBox from "../../Components/ToastBox"; + +const EditEvents = () => { + const { id } = useParams(); + const toast = useToast(); + const navigate = useNavigate(); + const { data, error, isLoading } = useGetEventsByIdQuery(id); + const [isLoadingEdit, setIsLoadingEdit] = useState(false); + const [selectedImage, setSelectedImage] = useState(fallbackImage); + const [largeImageData, setLargeImageData] = useState(null); + const [updateEvents] = useUpdateEventsMutation(); + + const { + register, + handleSubmit, + reset, + formState: { errors }, + setValue, + } = useForm({ + resolver: yupResolver(addEvents), + defaultValues: { + title: "", + content: "", + location: "", + organizer_name: "", + organizer_mobile_number: "", + eventDates:[], + organizer_email: "", + banner_image: null, + }, + }); + + useEffect(() => { + if (data?.data) { + setSelectedImage( + `https://rubix.betadelivery.com/${data?.data?.banner_image}` + ); + setValue("title", data?.data?.title); + setValue("content", data?.data?.content); + setValue("location", data?.data?.location); + setValue("organizer_name", data?.data?.organizer_name); + setValue("organizer_mobile_number", data?.data?.organizer_mobile_number); + setValue("organizer_email", data?.data?.organizer_email); + setValue("content", data?.data?.content); + setValue("eventDates", data?.data?.eventDates); + setValue("banner_image", data?.data?.banner_image); + + setValue("eventDates", data?.data?.eventDates); + } + }, [data, setValue]); + + console.log(selectedImage); + + + + 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) => { + console.log(data); + setIsLoadingEdit(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); + formData.append("dates[0]", "2024-05-08T08:19:27.264Z"); + 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 = updateEvents({id: id, data: 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) { + setIsLoadingEdit(false); + toast({ + render: () => ( + + ), + }); + reset(); + navigate("/events"); + } else if (response?.data?.statusCode === 500) { + setIsLoadingEdit(false); + toast({ + render: () => ( + + ), + }); + } + }) + .catch((error) => { + // Handle errors + console.error("Error creating community:", error?.message); + setIsLoadingEdit(false); + // Handle error notification if needed + }); + + console.log(res); + }; + + + + + console.log(errors); + + return isLoading ? ( + + ) : ( + +
+ + + + +
+ + + + Events Info + + + Select the platform for which you need to create this campaign. + + + + + + Display image + + + Below is the profile that will be displayed on the events page. + + + + Selected Image + {selectedImage === fallbackImage || largeImageData === null ? ( + "" + ) : ( + + + {largeImageData && largeImageData?.name} + + + {largeImageData && + (largeImageData?.size / (1024 * 1024)).toFixed(2)}{" "} + mb + + + )} + + + + + + + Status + + {data?.data?.status ? ( + + Active + + ) : ( + + Inactive + + )} + + + + Title + + + {errors.title && ( + + {errors.title.message} + + )} + + + + + Content + + + {errors.content && ( + + {errors.content.message} + + )} + + + + + Location + + + {errors.location && ( + + {" "} + {errors.location.message} + + )} + + + + + + Event dates + + + {errors.eventDates && ( + + {" "} + {errors.eventDates.message} + + )} + + + + + + + + + + + + Banner image + + {/* */} + + + + + + + + Drop images here + + + or click to upload + + + + + + + + + {errors.banner_image && ( + + {" "} + {errors.banner_image.message} + + )} + + Maximum limit of image should be 1mb to protect website from slow loading. + + + + + + + + + + + + + + + + + + + + + Orgainsation info + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dicta exercitationem laboriosam fugit vel ipsam hic, consectetur eum nesciunt adipisci? + + + + + + + + + + + + + Organisation name + + + {errors.organizer_name && ( + + {" "} + {errors.organizer_name.message} + + )} + + + + + Organisation number + + + {errors.organizer_mobile_number && ( + + {" "} + {errors.organizer_mobile_number.message} + + )} + + + + + Organisation email + + + {errors.organizer_email && ( + + {" "} + {errors.organizer_email.message} + + )} + + + + + + + + + + + + + + + +
+ + ); +}; + +export default EditEvents; diff --git a/src/Pages/Events/ViewEvents.jsx b/src/Pages/Events/ViewEvents.jsx new file mode 100644 index 0000000..f49795b --- /dev/null +++ b/src/Pages/Events/ViewEvents.jsx @@ -0,0 +1,179 @@ +import React from 'react' +import { useGetEventsByIdQuery } from '../../Services/api.service'; +import { useNavigate, useParams } from 'react-router-dom'; +import { Box, Divider, Image, Tag, useToast } from '@chakra-ui/react'; +import FullscreenLoaders from '../../Components/Loaders/FullscreenLoaders'; +import { OPACITY_ON_LOAD } from '../../Layout/animations'; +import Header from '../../Components/Header'; +import { formatDate } from '../../Components/Functions/UTCConvertor'; + +const ViewEvents = () => { + const { id } = useParams(); + const toast = useToast(); + const navigate = useNavigate(); + const { data, error, isLoading } = useGetEventsByIdQuery(id); + const events = data?.data; + console.log(events); + if (isLoading) { + return ; + } + return( + +
+ + + + + + + Events Info + + + Select the platform for which you need to create this campaign. + + + + + + Events banner image + + + Below is the profile that will be displayed on the community page. + + + + Selected Image + + + + + + + + + Status + + {events?.status ? ( + + Active + + ) : ( + + Inactive + + )} + + + + Title + {events?.title} + + + + + + Content + + + {events?.content} + + + + + + + + Location + + + {events?.location} + + + + + + + + + Organisation name + + + {events?.organizer_name} + + + + + + + Organisation number + + + {events?.organizer_mobile_number} + + + + + + + Organisation email + + + {events?.organizer_email} + + + + + + + + Created at + + + {formatDate(events?.createdAt)} + + + + + + Updated at + + + {formatDate(events?.updatedAt)} + + + + + + + + + + + + + ) +} + +export default ViewEvents \ No newline at end of file diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 57371cb..fed2f22 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -41,6 +41,8 @@ import BannerLearnEdit from "../Pages/Banners/BannerLearn/BannerLearnEdit"; import BannerBuildEdit from "../Pages/Banners/BannerBuild/BannerBuildEdit"; import BannerNewsEdit from "../Pages/Banners/BannerNews/BannerNewsEdit"; import BannerHomeEdit from "../Pages/Banners/HomeBanner/HomeBannerEdit"; +import ViewEvents from "../Pages/Events/ViewEvents"; +import EditEvents from "../Pages/Events/EditEvents"; export const RouteLink = [ { path: "/", Component: Home }, @@ -110,6 +112,6 @@ export const RouteLink = [ // =============[ events ]================ { path: "/events", Component: Events }, { path: "/events/add-events", Component: AddEvents }, - { path: "/events/view/:id", Component: UnderConstruction }, // TODO EVENT VIEW - { path: "/events/edit/:id", Component: UnderConstruction }, // TODO EVENT EDIT + { path: "/events/view/:id", Component: ViewEvents }, + { path: "/events/edit/:id", Component: EditEvents }, ]; diff --git a/src/Services/api.service.js b/src/Services/api.service.js index 3fe8da4..cb842f8 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -340,8 +340,20 @@ export const rubixApi = createApi({ }), invalidatesTags: ["getEvents"], }), + getEventsById: builder.query({ + query: (id) => `/admin/events/${id}`, + providesTags: ["getEvents"], + }), + updateEvents: builder.mutation({ + query: ({ id, data }) => ({ + url: `/admin/events/${id}`, + method: "PUT", + body: data, // Include the data you want to send in the request body + }), + invalidatesTags: ["getEvents"], + }), - + // ===============[ Home Banners endpoints ]======================= @@ -522,6 +534,8 @@ export const { useCreateEventsMutation, useUpdateEventsStatusMutation, useDeleteEventsMutation, + useUpdateEventsMutation, + useGetEventsByIdQuery, useGetVideosQuery, diff --git a/src/Validations/Validations.js b/src/Validations/Validations.js index 8be5172..c4a324c 100644 --- a/src/Validations/Validations.js +++ b/src/Validations/Validations.js @@ -189,6 +189,7 @@ export const addEvents = Yup.object().shape({ content: Yup.string().required("content is required"), location: Yup.string().required("location is required"), organizer_name: Yup.string().required("Org name date is required"), + eventDates:Yup.string(), organizer_mobile_number: Yup.string().required("Org contact is required") .matches(/^[0-9]{10}$/, "Mobile number must be 10 digits"), organizer_email: Yup.string().required("Org email is required").email("Please enter valid email"), @@ -198,21 +199,21 @@ export const addEvents = Yup.object().shape({ if (files) return true; return false; }) - .test( - "fileSize", - " The maximum size of profile picture is 15MB.", - (files) => { - //if u want to allow only certain file sizes - try { - if (files.length !== 0) { - return files[0].size <= 15000000; - } - return true; - } catch (error) { - return false; - } - } - ) + // .test( + // "fileSize", + // " The maximum size of profile picture is 15MB.", + // (files) => { + // //if u want to allow only certain file sizes + // try { + // if (files.length !== 0) { + // return files[0].size <= 15000000; + // } + // return true; + // } catch (error) { + // return false; + // } + // } + // ) // .test("file_formate", "Image file has unsupported format.", (files) => { // // // console.log(files[0].type)