diff --git a/src/Pages/Banners/BannerCommunity/AddBanner.jsx b/src/Components/Banner/AddBanner.jsx similarity index 63% rename from src/Pages/Banners/BannerCommunity/AddBanner.jsx rename to src/Components/Banner/AddBanner.jsx index e21f13c..9c015bc 100644 --- a/src/Pages/Banners/BannerCommunity/AddBanner.jsx +++ b/src/Components/Banner/AddBanner.jsx @@ -1,123 +1,124 @@ 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 } from "../../../Validations/Validations"; - import { - useCreateCommunityBannerMutation, - useCreateCommunityMutation, - useGetCommunityQuery, - } from "../../../Services/api.service"; - import { useNavigate } from "react-router-dom"; - import Loader01 from "../../../Components/Loaders/Loader01"; - - const AddBanner = () => { - const toast = useToast(); - const navigate = useNavigate(); - const getCommunityQuery = useGetCommunityQuery(); - const [createCommunityBannerData] = useCreateCommunityBannerMutation(); // Invoke the hook to get the mutation function - const [isLoading, setIsLoading] = useState(false); - const [selectedImage, setSelectedImage] = useState(fallbackImage); - - const { - register, - handleSubmit, - reset, - formState: { errors }, - } = useForm({ - resolver: yupResolver(addCommunityBannerSchema), - }); - - const onSubmit = async (data) => { - console.log(data); - try { - setIsLoading(true); - const formData = new FormData(); - formData.append("heading", data.heading); - formData.append("sub_heading", data.sub_heading); - formData.append("CTO_button_link", data.CTO_button_link); - formData.append("CTO_button_title", data.CTO_button_title); - if (data.banner_image[0]) { - formData.append("banner_image", data.banner_image[0]); - } - // Trigger the mutation - createCommunityBannerData(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({ - title: response?.data?.message, - status: "success", - isClosable: true, - }); - reset(); - navigate("/banner/banner-community"); - }else if(response?.data?.statusCode === 500){ - setIsLoading(false); - toast({ - title: response?.data?.message, - status: "success", - isClosable: true, - }); + Box, + FormControl, + FormHelperText, + FormLabel, + Input, + 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"; - } - }) - .catch((error) => { - // Handle errors - console.error("Error creating community:", error); +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, +} from "../../Validations/Validations"; +import { useNavigate } from "react-router-dom"; +import Loader01 from "../../Components/Loaders/Loader01"; +import Header from "../Header"; + +const AddBanner = ({ createApi, navigateLink, title }) => { + const toast = useToast(); + const navigate = useNavigate(); + const [isLoading, setIsLoading] = useState(false); + const [selectedImage, setSelectedImage] = useState(fallbackImage); + const [largeImageData, setLargeImageData] = useState(null); + + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: yupResolver(addCommunityBannerSchema), + }); + + const onSubmit = async (data) => { + console.log(data); + try { + setIsLoading(true); + const formData = new FormData(); + formData.append("heading", data.heading); + formData.append("sub_heading", data.sub_heading); + formData.append("CTO_button_link", data.CTO_button_link); + formData.append("CTO_button_title", data.CTO_button_title); + if (data.banner_image[0]) { + formData.append("banner_image", data.banner_image[0]); + } + // Trigger the mutation + createApi(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); - // 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]; - if (file) { - const reader = new FileReader(); - reader.onloadend = () => { - setSelectedImage(reader.result); - }; - reader.readAsDataURL(file); - } - }; - - return ( - + toast({ + title: response?.data?.message, + status: "success", + isClosable: true, + }); + reset(); + navigate(navigateLink); + } else if (response?.data?.statusCode === 500) { + setIsLoading(false); + toast({ + title: response?.data?.message, + status: "success", + isClosable: true, + }); + } + }) + .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]; + setLargeImageData(file); + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setSelectedImage(reader.result); + }; + reader.readAsDataURL(file); + } + }; + + return ( + +
+ + Banner Info @@ -125,26 +126,40 @@ import { Select the platform for which you need to create this campaign. - + - + Banner Image Below is the profile that will be displayed on the community page. - - - Selected Image + + + <> + Selected Image + {selectedImage === fallbackImage || largeImageData === null ? ( + "" + ) : ( + + {largeImageData?.name} + + {(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb + + + )} + - +
{errors.name && ( - {" "} - {errors.heading.message} + {errors.heading.message} )} - + Sub Heading @@ -199,7 +213,7 @@ import { )} - + Button title @@ -214,7 +228,7 @@ import { Maximum characters must be 100 characters. - + {errors.CTO_button_title && ( {" "} @@ -222,10 +236,10 @@ import { )} - + - Button link + Button link {errors.CTO_button_link && ( - {errors.CTO_button_link.message} + {" "} + {errors.CTO_button_link.message} )} - + Banner image {/* */} - + - + {errors.banner_image && ( {" "} @@ -334,17 +349,18 @@ import { Maximum limit of image is 5mb. - + -
- - -
- - - Heading - - - {errors.name && ( - - {" "} - {errors.heading.message} - - )} - - - - - Sub Heading - - - {errors.sub_heading && ( - - {" "} - {errors.sub_heading.message} - - )} - - - - - Button title - - - - Maximum characters must be 100 characters. - - - {errors.CTO_button_title && ( - - {" "} - {errors.CTO_button_title.message} - - )} - - - - - Button link - - - - Please share proper linked in link here. - - {errors.CTO_button_link && ( - - {errors.CTO_button_link.message} - - )} - - - - - Banner image - - {/* */} - - - - - - - - Drop images here - - - or click to upload - - - - - - - - - {errors.banner_image && ( - - {" "} - {errors.banner_image.message} - - )} - - Maximum limit of image is 5mb. - - - - - - -
- - ); -}; - -export default AddLearnBanner; diff --git a/src/Pages/Banners/BannerLearn/BannerLearn.jsx b/src/Pages/Banners/BannerLearn/BannerLearn.jsx index d1c1fee..0343e47 100644 --- a/src/Pages/Banners/BannerLearn/BannerLearn.jsx +++ b/src/Pages/Banners/BannerLearn/BannerLearn.jsx @@ -1,66 +1,10 @@ -import React, { useRef, useState } from "react"; +import React from "react"; import { - Avatar, - Box, - Link, - Tag, - Text, - WrapItem, - Tooltip, - Divider, - Stack, - HStack, - Input, - Button, - Select, - Image, - Menu, - MenuButton, - MenuList, - MenuItem, - Switch, - Portal, - useDisclosure, - AlertDialog, - AlertDialogOverlay, - AlertDialogContent, - AlertDialogHeader, - AlertDialogCloseButton, - AlertDialogBody, - AlertDialogFooter, - useToast, - Skeleton, - VStack, -} from "@chakra-ui/react"; -import { GrAdd } from "react-icons/gr"; -import { AddIcon, ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons"; -import DataTable from "../../../Components/DataTable/DataTable"; -import CommunityBanner from "../../../Components/CommunityBanner"; -import { OPACITY_ON_LOAD } from "../../../Layout/animations"; -import { v4 as uuidv4 } from "uuid"; -import { Link as RouterLink } from "react-router-dom"; -import { - useDeleteCommunityBannerMutation, - useDeleteCommunityMutation, useDeleteLearnBannerMutation, - useGetCommunityBannerQuery, - useGetCommunityByIdQuery, - useGetCommunityQuery, - useGetLearnBannerByIdQuery, useGetLearnBannerQuery, - useUpdateCommunityBannerStatusMutation, - useUpdateCommunityStatusMutation, useUpdateLearnBannerStatusMutation, } from "../../../Services/api.service"; -import BannerTable from "../../../Components/Banner/BannerTable" -import { HiDotsVertical } from "react-icons/hi"; -import TimeCalculator from "../../../Components/Functions/TimeCalculator"; -import { formatDate } from "../../../Components/Functions/UTCConvertor"; -import CustomAlertDialog from "../../../Components/CustomAlertDialog"; -import WebButton from "../../../Components/WebButton"; -import CommunityCardDisplay from "../../Community/CommunityCardDisplay"; -import CommunityBannerCard from "../../Community/CommunityBannerCard"; -import Header from "../../../Components/Header"; +import BannerTable from "../../../Components/Banner/BannerTable"; const BannerLearn = () => { const learnBanner = useGetLearnBannerQuery(); diff --git a/src/Pages/Banners/BannerLearn/LearnBannerAdd.jsx b/src/Pages/Banners/BannerLearn/LearnBannerAdd.jsx new file mode 100644 index 0000000..84ff331 --- /dev/null +++ b/src/Pages/Banners/BannerLearn/LearnBannerAdd.jsx @@ -0,0 +1,15 @@ +import AddBanner from "../../../Components/Banner/AddBanner"; +import { useCreateLearnBannerMutation } from "../../../Services/api.service"; + +const LearnBannerAdd = () => { + const [createLearnBannerData] = useCreateLearnBannerMutation(); + return ( + + ); +}; + +export default LearnBannerAdd; diff --git a/src/Pages/Banners/BannerNews/BannerNews.jsx b/src/Pages/Banners/BannerNews/BannerNews.jsx new file mode 100644 index 0000000..5768538 --- /dev/null +++ b/src/Pages/Banners/BannerNews/BannerNews.jsx @@ -0,0 +1,31 @@ +import React from "react"; +import { + useDeleteBuildBannerMutation, + useDeleteLearnBannerMutation, + useDeleteNewsBannerMutation, + useGetBuildBannerQuery, + useGetLearnBannerQuery, + useGetNewsBannerQuery, + useUpdateBuildBannerStatusMutation, + useUpdateLearnBannerStatusMutation, + useUpdateNewsBannerStatusMutation, +} from "../../../Services/api.service"; +import BannerTable from "../../../Components/Banner/BannerTable"; + +const BannerNews = () => { + const newsBanner = useGetNewsBannerQuery(); + const [deleteNewsBanner] = useDeleteNewsBannerMutation(); + const [updateNewsBuildStatus] = useUpdateNewsBannerStatusMutation(); + + return ( + + ); +}; + +export default BannerNews; diff --git a/src/Pages/Banners/BannersNew/NewsBannerAdd.jsx b/src/Pages/Banners/BannersNew/NewsBannerAdd.jsx new file mode 100644 index 0000000..fee4f25 --- /dev/null +++ b/src/Pages/Banners/BannersNew/NewsBannerAdd.jsx @@ -0,0 +1,15 @@ +import AddBanner from "../../../Components/Banner/AddBanner"; +import { useCreateNewsBannerMutation } from "../../../Services/api.service"; + +const NewsBannerAdd = () => { + const [createNewsBannerData] = useCreateNewsBannerMutation(); + return ( + + ); +}; + +export default NewsBannerAdd; diff --git a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx index 4ec8ad0..324c4f2 100644 --- a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx +++ b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx @@ -144,182 +144,170 @@ const AddBlogsAndArticles = () => { {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} - display={'flex'} - flexDirection={'column'} + display={"flex"} + flexDirection={"column"} > -
- - - - - Blog Info - - - - Select the platform for which you need to create this campaign. - + + + + Blog Info + + + + Select the platform for which you need to create this campaign. + - + + - + + Blog's banner image + + + Below is the profile that will be displayed on the community + page. + - - Blog's banner image - - - Below is the profile that will be displayed on the community page. - - - - {false ? ( - - {/* + + {false ? ( + + {/* Display profile */} - {/* */} + {/* */} - - - - + + - - - Drop images here - - or click to upload + + Drop images here + + + or click to upload + - - + + + - - - {errors.content_image_large && ( - - {" "} - {errors.content_image_large.message} - - )} - - Maximum limit of image is 5mb. - - - ) : ( - <> - Selected Image - {selectedImageLarge === fallbackImageLarge || largeImageData === null ? ( - "" - ) : ( - - - {largeImageData?.name} + {errors.content_image_large && ( + + {" "} + {errors.content_image_large.message} - - {(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb - - - )} - - )} + )} + + Maximum limit of image is 5mb. + + + ) : ( + <> + Selected Image + {selectedImageLarge === fallbackImageLarge || + largeImageData === null ? ( + "" + ) : ( + + + {largeImageData?.name} + + + {(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb + + + )} + + )} - + + - - - - - - - @@ -731,7 +719,7 @@ const AddBlogsAndArticles = () => { }} type="submit" size="sm" - rounded={'sm'} + rounded={"sm"} > Create blog diff --git a/src/Pages/Community/AddComunity.jsx b/src/Pages/Community/AddComunity.jsx index b397eba..1653546 100644 --- a/src/Pages/Community/AddComunity.jsx +++ b/src/Pages/Community/AddComunity.jsx @@ -329,7 +329,7 @@ const AddComunity = () => { }} type="submit" size="sm" - rounded={'sm'} + rounded={"sm"} > Create member diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 0d7637d..6318229 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -19,14 +19,17 @@ import ViewNews from "../Pages/News/ViewNews"; import ViewBlogsAndArticles from "../Pages/BlogsAndArticles/ViewBlogsAndArticles"; import EditBlogsAndArticles from "../Pages/BlogsAndArticles/EditBlogsAndArticles"; import BannerLearn from "../Pages/Banners/BannerLearn/BannerLearn"; -import AddBanner from "../Pages/Banners/BannerCommunity/AddBanner"; -import AddLearnBanner from "../Pages/Banners/BannerLearn/AddLearnBanner"; +import AddLearnBanner from "../Pages/Banners/BannerLearn/LearnBannerAdd"; import HelpAndSupport from "../Pages/News/HelpAndSupport"; import AddEvents from "../Pages/Events/AddEvents"; import ViewLearnBanner from "../Pages/Events/ViewLearnBanner"; import BannerBuildView from "../Pages/Banners/BannerBuild/BannerBuildView"; -import BannersNew from "../Pages/Banners/BannersNew/BannersNews"; import BannersNews from "../Pages/Banners/BannersNew/BannersNews"; +import BannerBuild from "../Pages/Banners/BannerBuild/BannerBuild"; +import BannerNews from "../Pages/Banners/BannerNews/BannerNews"; +import BannerCommunityAdd from "../Pages/Banners/BannerCommunity/BannerCommunityAdd"; +import BuildBannerAdd from "../Pages/Banners/BannerBuild/BuildBannerAdd"; +import NewsBannerAdd from "../Pages/Banners/BannersNew/NewsBannerAdd"; export const RouteLink = [ { path: "/", Component: Home }, @@ -42,9 +45,15 @@ export const RouteLink = [ // =============[ community banner ]================ { path: "banner/banner-community", Component: BannerCommunity }, - { path: "banner/banner-community/add-banner", Component: AddBanner }, - { path: "banner/banner-community/edit/:id", Component: BannerComunityEditPage }, - { path: "banner/banner-community/view/:id", Component: BannerComunityViewPage }, + { path: "banner/banner-community/add-banner", Component: BannerCommunityAdd }, + { + path: "banner/banner-community/edit/:id", + Component: BannerComunityEditPage, + }, + { + path: "banner/banner-community/view/:id", + Component: BannerComunityViewPage, + }, // =============[ learn banner ]================ { path: "banner/learn", Component: BannerLearn }, @@ -53,23 +62,17 @@ export const RouteLink = [ { path: "banner/learn/edit/:id", Component: ViewLearnBanner }, // =============[ build banner ]================ + { path: "banner/build", Component: BannerBuild }, + { path: "banner/build/add-banner", Component: BuildBannerAdd }, { path: "banner/build/view/:id", Component: BannerBuildView }, { path: "banner/build/edit/:id", Component: BannerBuildView }, - - // =============[ news banner ]================ + { path: "banner/news", Component: BannerNews }, + { path: "banner/news/add-banner", Component: NewsBannerAdd }, { path: "banner/news/view/:id", Component: BannersNews }, { path: "banner/news/edit/:id", Component: BannersNews }, - - - - - - - - // =============[ blog ]================ { path: "/blogs-articles", Component: BlogsAndArticles }, { path: "blogs-articles/add-blog", Component: AddBlogsAndArticles }, diff --git a/src/Services/api.service.js b/src/Services/api.service.js index b5c03c1..eaa06e0 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -22,8 +22,12 @@ export const rubixApi = createApi({ "getNewsById", "getBlog", "getBlogById", - "getEvents" - + "getEvents", + "getEventsById", + "getEventsBanner", + "getEventsBannerById", + "getEventsBanner", + "getEventsBannerById", ], endpoints: (builder) => ({ // ===============[ Community cards endpoints ]======================= @@ -146,9 +150,6 @@ export const rubixApi = createApi({ invalidatesTags: ["getLearnBanner"], }), - - - // ===============[ Build Banners endpoints ]======================= getBuildBanner: builder.query({ query: () => "/admin/build", @@ -158,10 +159,30 @@ export const rubixApi = createApi({ query: (id) => `/admin/build/${id}`, providesTags: ["getBuildBannerById"], }), + deleteBuildBanner: builder.mutation({ + query: (id) => ({ + url: `/admin/build/${id}`, + method: "DELETE", + }), + invalidatesTags: ["getBuildBanner"], + }), + updateBuildBannerStatus: builder.mutation({ + query: ({ id }) => ({ + url: `/admin/build/change-visibility/${id}`, + method: "POST", + }), + invalidatesTags: ["getBuildBanner"], + }), + createBuildBanner: builder.mutation({ + query: (newBanner) => ({ + url: "/admin/build", + method: "POST", + body: newBanner, + }), + invalidatesTags: ["getBuildBanner"], + }), - - - // ===============[ news Banners endpoints ]======================= + // ===============[ News Banners endpoints ]======================= getNewsBanner: builder.query({ query: () => "/admin/main-news", providesTags: ["getNewsBanner"], @@ -170,10 +191,30 @@ export const rubixApi = createApi({ query: (id) => `/admin/main-news/${id}`, providesTags: ["getNewsBannerById"], }), + deleteNewsBanner: builder.mutation({ + query: (id) => ({ + url: `/admin/news/${id}`, + method: "DELETE", + }), + invalidatesTags: ["getNewsBanner"], + }), + updateNewsBannerStatus: builder.mutation({ + query: ({ id }) => ({ + url: `/admin/news/change-visibility/${id}`, + method: "POST", + }), + invalidatesTags: ["getNewsBanner"], + }), + createNewsBanner: builder.mutation({ + query: (newBanner) => ({ + url: "/admin/news", + method: "POST", + body: newBanner, + }), + invalidatesTags: ["getNewsBanner"], + }), - - // ================[ blog endpoints ]==================== - + // ================[ Blog endpoints ]==================== getBlog: builder.query({ query: () => "/admin/blog", providesTags: ["getBlog"], @@ -213,8 +254,7 @@ export const rubixApi = createApi({ invalidatesTags: ["getBlog"], }), - // ================[ news ]==================== - + // ================[ News ]==================== getNews: builder.query({ query: ({ page, size }) => `/admin/news?page=${page}&size=${size}`, providesTags: ["getNews"], @@ -254,12 +294,7 @@ export const rubixApi = createApi({ invalidatesTags: ["getNews"], }), - - - // ================[ events ]==================== - - getEvents: builder.query({ query: ({ page, size }) => `/admin/events?page=${page}&size=${size}`, providesTags: ["getEvents"], @@ -287,10 +322,29 @@ export const rubixApi = createApi({ invalidatesTags: ["getEvents"], }), - - - - + // ===============[ Home Banners endpoints ]======================= + getHomeBanner: builder.query({ + query: () => "/admin/home", + providesTags: ["getHomeBanner"], + }), + getHomeBannerById: builder.query({ + query: (id) => `/admin/home/${id}`, + providesTags: ["getHomeBannerById"], + }), + deleteHomeBanner: builder.mutation({ + query: (id) => ({ + url: `/admin/home/${id}`, + method: "DELETE", + }), + invalidatesTags: ["getHomeBanner"], + }), + updateHomeBannerStatus: builder.mutation({ + query: ({ id }) => ({ + url: `/admin/home/change-visibility/${id}`, + method: "POST", + }), + invalidatesTags: ["getHomeBanner"], + }), }), }); @@ -317,9 +371,15 @@ export const { useGetBuildBannerQuery, useGetBuildBannerByIdQuery, + useDeleteBuildBannerMutation, + useUpdateBuildBannerStatusMutation, + useCreateBuildBannerMutation, useGetNewsBannerQuery, useGetNewsBannerByIdQuery, + useDeleteNewsBannerMutation, + useUpdateNewsBannerStatusMutation, + useCreateNewsBannerMutation, useGetBlogQuery, useGetBlogByIdQuery, @@ -336,8 +396,6 @@ export const { useGetNewsByIdQuery, useUpdateNewsMutation, - - useGetEventsQuery, useCreateEventsMutation, useUpdateEventsStatusMutation,