diff --git a/src/Components/Banner/BannerView.jsx b/src/Components/Banner/BannerView.jsx new file mode 100644 index 0000000..77cde81 --- /dev/null +++ b/src/Components/Banner/BannerView.jsx @@ -0,0 +1,160 @@ +import React from "react"; +import { useParams } from "react-router-dom"; +import { useGetBuildBannerByIdQuery } from "../../Services/api.service"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders"; +import { formatDate } from "../../Components/Functions/UTCConvertor"; +import Header from "../../Components/Header"; +import { + Box, + Button, + Divider, + Image, + StackDivider, + Tag, + VStack, +} from "@chakra-ui/react"; + +const BannerView = ({data, isLoading}) => { + const banner = data?.data; + + return isLoading ? ( + + ) : ( + +
+ + + + Banners Info + + + Select the platform for which you need to create this campaign. + + + + + + Display banner + + + Below is the profile that will be displayed on the community page. + + + + Selected Image + {/* */} + + + + + + + Status + + {data?.data?.status ? ( + + Active + + ) : ( + + Inactive + + )} + + + + + Heading + + + {banner?.Heading} + + + + + + Sub heading + + + {banner?.sub_heading} + + + + + + Button title + + + {banner?.CTO_button_title} + + + + + + Button link + + + {banner?.CTO_button_link} + + + + + + Created At + + + {formatDate(banner?.createdAt)} + + + + + + Updated At + + + {formatDate(banner?.updatedAt)} + + + + + + + + ); +}; + +export default BannerView; diff --git a/src/Components/BannerStack.jsx b/src/Components/BannerStack.jsx index 73d2cef..6f9bd1f 100644 --- a/src/Components/BannerStack.jsx +++ b/src/Components/BannerStack.jsx @@ -49,7 +49,7 @@ const BannerStack = ({ ps={1} > {bannerIsLoading - ? Array.from({ length: 4 }).map((_, index) => ( + ? Array.from({ length: 3 }).map((_, index) => ( diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx index 1f889b6..cc7ea0d 100644 --- a/src/Components/Header.jsx +++ b/src/Components/Header.jsx @@ -14,7 +14,7 @@ const Header = ({ link, btnTitle, title }) => { zIndex={999} className={`${ link && btnTitle ? "" : " pt-3 pb-3" - } p-2 pe-2 fw-400 border-bottom d-flex justify-content-between align-items-center`} + } p-2 pe-2 fw-400 border-bottom d-flex justify-content-between align-items-center`} > {/* Community */} diff --git a/src/Pages/Banners/Banner.jsx b/src/Pages/Banners/Banner.jsx index 5e43227..002584b 100644 --- a/src/Pages/Banners/Banner.jsx +++ b/src/Pages/Banners/Banner.jsx @@ -18,7 +18,6 @@ const Banner = () => {
@@ -52,7 +51,7 @@ const Banner = () => { viewAllLink={"/banner/build"} bannerIsLoading={newsBanner?.isLoading} bannerArray={newsBanner?.data?.data?.rows?.slice(0, 3)} - viewBannerLink={'/banner/build/view'} + viewBannerLink={'/banner/news/view'} /> ); diff --git a/src/Pages/Banners/BannerBuild/BannerBuildView.jsx b/src/Pages/Banners/BannerBuild/BannerBuildView.jsx new file mode 100644 index 0000000..9fe72de --- /dev/null +++ b/src/Pages/Banners/BannerBuild/BannerBuildView.jsx @@ -0,0 +1,28 @@ +import React from "react"; +import { useParams } from "react-router-dom"; +import { useGetBuildBannerByIdQuery } from "../../../Services/api.service"; +import { OPACITY_ON_LOAD } from "../../../Layout/animations"; +import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders"; +import { formatDate } from "../../../Components/Functions/UTCConvertor"; +import Header from "../../../Components/Header"; +import { + Box, + Button, + Divider, + Image, + StackDivider, + Tag, + VStack, +} from "@chakra-ui/react"; +import BannerView from "../../../Components/Banner/BannerView"; + +const BannerBuildView = () => { + const { id } = useParams(); + const { data, error, isLoading } = useGetBuildBannerByIdQuery(id); + + return ( + + ); +}; + +export default BannerBuildView; diff --git a/src/Pages/Banners/BannerCommunity/BannerCommunityView.jsx b/src/Pages/Banners/BannerCommunity/BannerCommunityView.jsx index 084077e..c8a130e 100644 --- a/src/Pages/Banners/BannerCommunity/BannerCommunityView.jsx +++ b/src/Pages/Banners/BannerCommunity/BannerCommunityView.jsx @@ -1,10 +1,6 @@ -import React, { useEffect, useState } from "react"; -import { Link, useParams } from "react-router-dom"; -import { - useGetCommunityBannerByIdQuery, - useGetCommunityByIdQuery, - useGetCommunityQuery, -} from "../../../Services/api.service"; +import React, { useEffect } from "react"; +import { useParams } from "react-router-dom"; +import { useGetCommunityBannerByIdQuery } from "../../../Services/api.service"; import { Box, Button, @@ -23,9 +19,8 @@ const BannerComunityViewPage = () => { const { id } = useParams(); const { data, error, isLoading } = useGetCommunityBannerByIdQuery(id); const banner = data?.data; - useEffect(() => { - }, [data]) - + useEffect(() => {}, [data]); + return isLoading ? ( ) : ( @@ -36,36 +31,35 @@ const BannerComunityViewPage = () => { h={"100vh"} className="overflow-auto " display={"flex"} - flexDirection={'column'} + flexDirection={"column"} > - - -
- - - - Banners Info - - - Select the platform for which you need to create this campaign. - + + + + Banners Info + + + Select the platform for which you need to create this campaign. + - + - - Display banner - - - Below is the profile that will be displayed on the community page. - + + Display banner + + + Below is the profile that will be displayed on the community page. + - - + { Remove */} - - - - {data?.data?.status ? - Active - : - Inactive - } - - Heading - - {banner?.Heading} - - - - Sub heading + + + + Status + + {data?.data?.status ? ( + + Active + + ) : ( + + Inactive + + )} - - {banner?.sub_heading} - - - - - Button title + + + Heading + + + {banner?.Heading} + - - {banner?.CTO_button_title} - - - - Button link - - {banner?.CTO_button_link} + + + Sub heading + + + {banner?.sub_heading} + - - - - Created At + + + Button title + + + {banner?.CTO_button_title} + - - {formatDate(banner?.createdAt)} - - - - - Updated At + + + Button link + + + {banner?.CTO_button_link} + - - {formatDate(banner?.updatedAt)} - - - - + + + Created At + + + {formatDate(banner?.createdAt)} + + + + + + Updated At + + + {formatDate(banner?.updatedAt)} + + + + + ); diff --git a/src/Pages/Banners/BannersNew/BannersNews.jsx b/src/Pages/Banners/BannersNew/BannersNews.jsx new file mode 100644 index 0000000..87ff5fe --- /dev/null +++ b/src/Pages/Banners/BannersNew/BannersNews.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import { useParams } from 'react-router-dom'; +import { useGetNewsBannerByIdQuery } from '../../../Services/api.service'; +import BannerView from '../../../Components/Banner/BannerView'; + +const BannersNews = () => { + const { id } = useParams(); + const { data, error, isLoading } = useGetNewsBannerByIdQuery(id); + + return ; +} + +export default BannersNews \ No newline at end of file diff --git a/src/Pages/Community/ComunityViewPage.jsx b/src/Pages/Community/ComunityViewPage.jsx index 50df44a..e86b550 100644 --- a/src/Pages/Community/ComunityViewPage.jsx +++ b/src/Pages/Community/ComunityViewPage.jsx @@ -2,169 +2,14 @@ import React, { useEffect, useState } from "react"; import { Link, useParams } from "react-router-dom"; import { useGetCommunityByIdQuery, - useGetCommunityQuery, } from "../../Services/api.service"; -import { - Box, - Button, - Divider, - Image, - StackDivider, - Tag, - VStack, -} from "@chakra-ui/react"; -import { OPACITY_ON_LOAD } from "../../Layout/animations"; -import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders"; -import { formatDate } from "../../Components/Functions/UTCConvertor"; -import Header from "../../Components/Header"; +import BannerView from "../../Components/Banner/BannerView"; const ComunityViewPage = () => { const { id } = useParams(); const { data, error, isLoading } = useGetCommunityByIdQuery(id); - const member = data?.data; - return isLoading ? ( - - ) : ( - - -
- - - - - - 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. - - - - Selected Image - {/* */} - - - - - {data?.data?.status ? ( - - Active - - ) : ( - - Inactive - - )} - - Name - - {member?.member_name} - - - - - - Designation - - - {member?.designation} - - - - - - Description - - - {member?.description} - - - - - Linkedin - - {member?.linkedin} - - - - - - Created At - - - {formatDate(member?.createdAt)} - - - - - - Updated At - - - {formatDate(member?.updatedAt)} - - - - - - - - - ); + return ; }; export default ComunityViewPage; diff --git a/src/Pages/Events/Events.jsx b/src/Pages/Events/Events.jsx index 93606ef..ee00f6a 100644 --- a/src/Pages/Events/Events.jsx +++ b/src/Pages/Events/Events.jsx @@ -1,6 +1,6 @@ import { Box, HStack, Input, Menu, MenuButton, MenuItem, MenuList, Portal, Select, Switch, Text, useToast } from '@chakra-ui/react' import { OPACITY_ON_LOAD } from '../../Layout/animations' -import { useGetEventsQuery, useUpdateEventsStatusMutation } from '../../Services/api.service' +import { useDeleteEventsMutation, useGetEventsQuery, useUpdateEventsStatusMutation } from '../../Services/api.service' import { useState } from 'react'; import { TABLE_PAGINATION } from '../../Constants/Paginations'; import Header from '../../Components/Header'; @@ -9,6 +9,7 @@ import DataTable from '../../Components/DataTable/DataTable'; import { HiDotsVertical } from 'react-icons/hi'; import { Link as RouterLink } from "react-router-dom"; import { formatDate } from '../../Components/Functions/UTCConvertor'; +import CustomAlertDialog from '../../Components/CustomAlertDialog'; const Events = () => { // ====================================================[Hooks]=================================================================== @@ -25,12 +26,36 @@ const Events = () => { // ====================================================[RTK Hooks]=================================================================== const events = useGetEventsQuery({ page: currentPage, size: pageSize }); const [updateEventsStatus] = useUpdateEventsStatusMutation(); + const [deleteEvents] = useDeleteEventsMutation(); // ====================================================[Functions]=================================================================== - const handleDelete = async (communityId) => { - console.log(communityId); + const handleDelete = async (id) => { + console.log(id); + try { + // Trigger the mutation + setDeleteIsLoading(true); + await deleteEvents(id) + .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) { + setDeleteIsLoading(false); + setDeleteAlert(false); + } + }) + .catch((error) => { + console.error("Error creating community:", error); + setDeleteIsLoading(false); + setDeleteAlert(false); + }); + } catch (error) { + // Handle errors + console.error("Error deleting community:", error); + } }; const handleUpdateStatus = async (id) => { @@ -254,6 +279,16 @@ const Events = () => { data={extractedArray} isLoading={events?.isLoading} /> + + + {/* ====================================================[ Alert ]================================================================ */} + setDeleteAlert(false)} + isOpen={deleteAlert} + alertHandler={() => handleDelete(actionId)} + message={"Are you sure you want to delete member?"} + isLoading={deleteIsLoading} + /> ) } diff --git a/src/Pages/Events/ViewLearnBanner.jsx b/src/Pages/Events/ViewLearnBanner.jsx new file mode 100644 index 0000000..d769c00 --- /dev/null +++ b/src/Pages/Events/ViewLearnBanner.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import { useParams } from "react-router-dom"; +import { useGetLearnBannerByIdQuery } from "../../Services/api.service"; +import BannerView from "../../Components/Banner/BannerView"; + +const ViewLearnBanner = () => { + const { id } = useParams(); + console.log(id); + const { data, error, isLoading } = useGetLearnBannerByIdQuery(id); + + + return ; +}; + +export default ViewLearnBanner; diff --git a/src/Pages/News/News.jsx b/src/Pages/News/News.jsx index 9902718..f48a53d 100644 --- a/src/Pages/News/News.jsx +++ b/src/Pages/News/News.jsx @@ -46,11 +46,11 @@ const News = () => { const [deleteNews] = useDeleteNewsMutation(); const [updateNewsStatus] = useUpdateNewsStatusMutation(); // ====================================================[Functions]=================================================================== - const handleDelete = async (communityId) => { + const handleDelete = async (id) => { try { // Trigger the mutation setDeleteIsLoading(true); - await deleteNews(communityId) + await deleteNews(id) .then((response) => { // Handle the response here console.log("Mutation response:", response?.data?.statusCode); diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 48980b7..1bf94f3 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -23,6 +23,10 @@ import AddBanner from "../Pages/Banners/BannerCommunity/AddBanner"; import AddLearnBanner from "../Pages/Banners/BannerLearn/AddLearnBanner"; 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"; export const RouteLink = [ { path: "/", Component: Home }, @@ -38,18 +42,25 @@ export const RouteLink = [ { path: "community/add-comunity", Component: AddComunity }, { path: "community-table-view", Component: CommunityCardsTableView }, - - { 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/edit/:id", + Component: BannerComunityEditPage, + }, + { + path: "banner/banner-community/view/:id", + Component: BannerComunityViewPage, + }, - - + // =============[ learn ]================ { path: "banner/learn/add-banner", Component: AddLearnBanner }, - { path: "banner/learn", Component: BannerLearn }, + { path: "banner/learn/view/:id", Component: ViewLearnBanner }, + // =============[ build ]================ + { path: "banner/build/view/:id", Component: BannerBuildView }, + + { path: "banner/news/view/:id", Component: BannersNews }, // =============[ blog ]================ { path: "/blogs-articles", Component: BlogsAndArticles }, @@ -57,15 +68,11 @@ export const RouteLink = [ { path: "blogs-articles/view/:id", Component: ViewBlogsAndArticles }, { path: "blogs-articles/edit/:id", Component: EditBlogsAndArticles }, - // =============[ news ]================ { path: "/news/view/:id", Component: ViewNews }, { path: "/news/add-news", Component: AddNews }, { path: "/news/edit/:id", Component: EditNews }, - - - - // =============[ news ]================ + // =============[ events ]================ { path: "/events/add-events", Component: AddEvents }, ]; diff --git a/src/Services/api.service.js b/src/Services/api.service.js index 9df2f8a..b5c03c1 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -149,11 +149,15 @@ export const rubixApi = createApi({ - // ===============[ Learn Banners endpoints ]======================= + // ===============[ Build Banners endpoints ]======================= getBuildBanner: builder.query({ query: () => "/admin/build", providesTags: ["getBuildBanner"], }), + getBuildBannerById: builder.query({ + query: (id) => `/admin/build/${id}`, + providesTags: ["getBuildBannerById"], + }), @@ -162,6 +166,10 @@ export const rubixApi = createApi({ query: () => "/admin/main-news", providesTags: ["getNewsBanner"], }), + getNewsBannerById: builder.query({ + query: (id) => `/admin/main-news/${id}`, + providesTags: ["getNewsBannerById"], + }), // ================[ blog endpoints ]==================== @@ -271,6 +279,13 @@ export const rubixApi = createApi({ }), invalidatesTags: ["getEvents"], }), + deleteEvents: builder.mutation({ + query: (blogId) => ({ + url: `/admin/events/${blogId}`, + method: "DELETE", + }), + invalidatesTags: ["getEvents"], + }), @@ -301,8 +316,10 @@ export const { useUpdateLearnBannerStatusMutation, useGetBuildBannerQuery, + useGetBuildBannerByIdQuery, useGetNewsBannerQuery, + useGetNewsBannerByIdQuery, useGetBlogQuery, useGetBlogByIdQuery, @@ -324,4 +341,5 @@ export const { useGetEventsQuery, useCreateEventsMutation, useUpdateEventsStatusMutation, + useDeleteEventsMutation, } = rubixApi; diff --git a/src/Validations/Validations.js b/src/Validations/Validations.js index 8e10825..22bd520 100644 --- a/src/Validations/Validations.js +++ b/src/Validations/Validations.js @@ -68,7 +68,8 @@ 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"), - organizer_mobile_number: Yup.string().required("Org contact is required"), + 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"), banner_image: Yup.mixed().required("Banner image is required"),