From b87e02497ddff619668bb2d349b1f6ebad85b6d2 Mon Sep 17 00:00:00 2001 From: siddheshmorewdi Date: Fri, 17 May 2024 17:25:57 +0530 Subject: [PATCH] updated --- src/Components/Functions/FileNameAlter.jsx | 1 - .../Banners/HomeBanner/HomeBannerEdit.jsx | 19 +- .../BlogsAndArticles/AddBlogsAndArticles.jsx | 2 + src/Pages/Community/ComunityEditPage.jsx | 9 +- src/Pages/News/AddNews.jsx | 4 +- src/Pages/News/EditNews.jsx | 10 +- src/Pages/{ => Videos}/Videos.jsx | 16 +- src/Pages/Whitepapers/EditWhitepaper.jsx | 357 +++++++++++++++++- src/Pages/Whitepapers/Whitepapers.jsx | 2 + src/Routes/Routes.js | 8 +- src/Services/api.service.js | 13 + src/Validations/Validations.js | 114 +++--- 12 files changed, 462 insertions(+), 93 deletions(-) rename src/Pages/{ => Videos}/Videos.jsx (93%) diff --git a/src/Components/Functions/FileNameAlter.jsx b/src/Components/Functions/FileNameAlter.jsx index 1ab4128..c65feea 100644 --- a/src/Components/Functions/FileNameAlter.jsx +++ b/src/Components/Functions/FileNameAlter.jsx @@ -1,5 +1,4 @@ const extractFilename = (filePath) => { - console.log(filePath); // Use the split method to break the path into parts based on '/' const parts = filePath.split('/'); // Return the last part, which is the filename diff --git a/src/Pages/Banners/HomeBanner/HomeBannerEdit.jsx b/src/Pages/Banners/HomeBanner/HomeBannerEdit.jsx index 6c59682..5d7bda8 100644 --- a/src/Pages/Banners/HomeBanner/HomeBannerEdit.jsx +++ b/src/Pages/Banners/HomeBanner/HomeBannerEdit.jsx @@ -1,9 +1,22 @@ -import React from 'react' -import BannerEdit from '../../../Components/Banner/BannerEdit' +import { Box, Image, Text } from '@chakra-ui/react' +import { OPACITY_ON_LOAD } from '../../../Layout/animations' +import noInternet from "../assets/../../../assets/Error.svg" const HomeBannerEdit = () => { return ( - + + + Under Construction + ) } diff --git a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx index 22e87ac..26462ce 100644 --- a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx +++ b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx @@ -55,6 +55,8 @@ const AddBlogsAndArticles = () => { resolver: yupResolver(addBlogSchema), }); + console.log(errors); + const onSubmit = async (data) => { console.log(data); const formData = new FormData(); diff --git a/src/Pages/Community/ComunityEditPage.jsx b/src/Pages/Community/ComunityEditPage.jsx index ed1c083..24a8d17 100644 --- a/src/Pages/Community/ComunityEditPage.jsx +++ b/src/Pages/Community/ComunityEditPage.jsx @@ -31,6 +31,7 @@ import Loader01 from "../../Components/Loaders/Loader01"; import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders"; import fallbackImage from "../../assets/fallBackImage.png"; import Header from "../../Components/Header"; +import ToastBox from "../../Components/ToastBox"; const ComunityEditPage = () => { const { id } = useParams(); @@ -93,11 +94,11 @@ const ComunityEditPage = () => { if (response?.data?.statusCode === 200) { setIsLoadingEdit(false); + toast({ - title: response?.data?.message, - status: "success", - duration: 1000, - isClosable: true, + render: () => ( + + ), }); navigate("/community"); // setDeleteAlert(false); diff --git a/src/Pages/News/AddNews.jsx b/src/Pages/News/AddNews.jsx index 4d62a3d..2a87649 100644 --- a/src/Pages/News/AddNews.jsx +++ b/src/Pages/News/AddNews.jsx @@ -200,7 +200,7 @@ const AddNews = () => { className="web-text-medium" size="sm" /> - {errors.name && ( + {errors.title && ( {errors.title.message} @@ -379,7 +379,7 @@ const AddNews = () => { - + ); }; diff --git a/src/Pages/News/EditNews.jsx b/src/Pages/News/EditNews.jsx index b5a4ac4..ae3d236 100644 --- a/src/Pages/News/EditNews.jsx +++ b/src/Pages/News/EditNews.jsx @@ -30,6 +30,7 @@ import Loader01 from "../../Components/Loaders/Loader01"; import { formatDate } from "../../Components/Functions/UTCConvertor"; import { TiWarning } from "react-icons/ti"; import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders"; +import ToastBox from "../../Components/ToastBox"; const EditNews = () => { const { id } = useParams(); @@ -71,7 +72,6 @@ const EditNews = () => { } }, [data, setValue]); - console.log(errors); const onSubmit = async (data) => { setIsLoadingEdit(true); @@ -93,11 +93,11 @@ const EditNews = () => { if (response?.data?.statusCode === 200) { setIsLoadingEdit(false); + toast({ - title: response?.data?.message, - status: "success", - duration: 1000, - isClosable: true, + render: () => ( + + ), }); navigate("/news"); // setDeleteAlert(false); diff --git a/src/Pages/Videos.jsx b/src/Pages/Videos/Videos.jsx similarity index 93% rename from src/Pages/Videos.jsx rename to src/Pages/Videos/Videos.jsx index 930ae90..9e9fd02 100644 --- a/src/Pages/Videos.jsx +++ b/src/Pages/Videos/Videos.jsx @@ -14,22 +14,22 @@ import { Tooltip, useToast, } from "@chakra-ui/react"; -import { TABLE_PAGINATION } from "../Constants/Paginations"; +import { TABLE_PAGINATION } from "../../Constants/Paginations"; import { useDeleteVideosMutation, useGetVideosQuery, useUpdateVideosStatusMutation, -} from "../Services/api.service"; +} from "../../Services/api.service"; import { useState } from "react"; -import Header from "../Components/Header"; +import Header from "../../Components/Header"; import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons"; -import DataTable from "../Components/DataTable/DataTable"; -import TabularView from "../Components/TabularView/TabularView"; +import DataTable from "../../Components/DataTable/DataTable"; +import TabularView from "../../Components/TabularView/TabularView"; import { HiDotsVertical } from "react-icons/hi"; import { Link } from "react-router-dom"; -import { formatDate } from "../Components/Functions/UTCConvertor"; -import CustomAlertDialog from "../Components/CustomAlertDialog"; -import ToastBox from "../Components/ToastBox"; +import { formatDate } from "../../Components/Functions/UTCConvertor"; +import CustomAlertDialog from "../../Components/CustomAlertDialog"; +import ToastBox from "../../Components/ToastBox"; const Videos = () => { const toast = useToast(); diff --git a/src/Pages/Whitepapers/EditWhitepaper.jsx b/src/Pages/Whitepapers/EditWhitepaper.jsx index 63b0bcf..55fa953 100644 --- a/src/Pages/Whitepapers/EditWhitepaper.jsx +++ b/src/Pages/Whitepapers/EditWhitepaper.jsx @@ -1,9 +1,354 @@ -import React from 'react' +import React, { useEffect, useState } from "react"; +import Header from "../../Components/Header"; +import { + Box, + Button, + Divider, + FormControl, + FormHelperText, + FormLabel, + Heading, + Image, + Input, + Stack, + Text, + useToast, +} from "@chakra-ui/react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import fallbackImage from "../../assets/ultp-fallback-img.webp"; +import { useNavigate, useParams } from "react-router-dom"; +import { + useGetNewsByIdQuery, + useGetWhitepaperByIdQuery, + useUpdateWhitepaperMutation, +} from "../../Services/api.service"; +import { useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import { TiWarning } from "react-icons/ti"; +import { addWhitePapers } from "../../Validations/Validations"; +import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders"; +import { AttachmentIcon } from "@chakra-ui/icons"; +import extractFilename from "../../Components/Functions/FileNameAlter"; +import Loader01 from "../../Components/Loaders/Loader01"; +import { motion } from "framer-motion"; +import ToastBox from "../../Components/ToastBox"; const EditWhitepaper = () => { - return ( -
EditWhitepaper
- ) -} + const { id } = useParams(); + const toast = useToast(); + const navigate = useNavigate(); + const { data, error, isLoading } = useGetWhitepaperByIdQuery(id); + const [isLoadingEdit, setIsLoadingEdit] = useState(false); + const [selectedImage, setSelectedImage] = useState(fallbackImage); + const [largeImageData, setLargeImageData] = useState(null); + const [updateWhitepaper] = useUpdateWhitepaperMutation(); -export default EditWhitepaper \ No newline at end of file + const { + register, + handleSubmit, + reset, + formState: { errors }, + setValue, + } = useForm({ + resolver: yupResolver(addWhitePapers), + defaultValues: { + title: "", + image: null, + document: null, + }, + }); + + useEffect(() => { + if (data?.data?.data) { + setSelectedImage( + `https://rubix.betadelivery.com/${data?.data?.data?.bannerImage}` + ); + setValue("title", data?.data?.data?.title); + setValue("image", data?.data?.data?.image); + setValue("bannerImage", data?.data?.data?.bannerImage); + } + }, [data, setValue]); + + 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 = async (data) => { + setIsLoadingEdit(true); + const form = new FormData(); + form.append("title", data?.title); + if (data.document[0]) { + form.append("document", data.document[0]); + } + if (data?.image === data?.data?.image) { + form.append("image"); + } + + + await updateWhitepaper({ id: id, data: form }) + .then((response) => { + if (response?.data?.statusCode === 201) { + setIsLoadingEdit(false); + toast({ + render: () => ( + + ), + }); + navigate("/whitepaper"); + // setDeleteAlert(false); + } + }) + .catch((error) => { + console.error("Error creating community:", error); + setIsLoadingEdit(false); + // setDeleteIsLoading(false); + // setDeleteAlert(false); + }); + reset(); + }; + + if (isLoading) { + return ; + } + 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. + + + + Selected Image + {selectedImage === fallbackImage || largeImageData === null ? ( + "" + ) : ( + + + {largeImageData && largeImageData?.name} + + + {largeImageData && + (largeImageData?.size / (1024 * 1024)).toFixed(2)}{" "} + mb + + + )} + + + + + + +
+ + + Title + + + {errors.title && ( + + {errors.title.message} + + )} + + + + + Document + + + {errors.document && ( + + {" "} + {errors.document.message} + + )} + + {extractFilename(data?.data?.data?.document)} + + + + + + + + + Display profile + + {/* */} + + + + + + + + Drop images here + + + or click to upload + + + + + + + + + {errors.image && ( + + {errors.image.message} + + )} + + Maximum limit of image should be 1mb to protect website from slow + loading. + + + + + + + + +
+ + ); +}; + +export default EditWhitepaper; diff --git a/src/Pages/Whitepapers/Whitepapers.jsx b/src/Pages/Whitepapers/Whitepapers.jsx index 1e0d48f..daad6c1 100644 --- a/src/Pages/Whitepapers/Whitepapers.jsx +++ b/src/Pages/Whitepapers/Whitepapers.jsx @@ -63,6 +63,8 @@ const Whitepapers = () => { return nameMatches && statusMatches; }); + + // ====================================================[Table Setup]================================================================ const tableHeadRow = [ "Banner image", diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index 516d33d..55782aa 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -6,7 +6,7 @@ import ComunityEditPage from "../Pages/Community/ComunityEditPage"; import ComunityViewPage from "../Pages/Community/ComunityViewPage"; import Events from "../Pages/Events/Events"; import Home from "../Pages/Banners/Banner"; -import Videos from "../Pages/Videos"; +import Videos from "../Pages/Videos/Videos"; import Whitepapers from "../Pages/Whitepapers/Whitepapers"; import BannerCommunity from "../Pages/Banners/BannerCommunity/BannerCommunity"; import BannerComunityEditPage from "../Pages/Banners/BannerCommunity/BannerCommunityEdit"; @@ -47,16 +47,11 @@ export const RouteLink = [ { path: "/videos", Component: Videos }, { path: "/help-and-support", Component: HelpAndSupport }, - { path: "/whitepaper", Component: Whitepapers }, { path: "whitepaper/add-whitepaper", Component: AddWhitepapers }, { path: "whitepaper/view/:id", Component: ViewWhitePaper }, { path: "whitepaper/edit/:id", Component: EditWhitepaper }, - - - - { path: "/community", Component: Community }, { path: "community/view/:id", Component: ComunityViewPage }, { path: "community/edit/:id", Component: ComunityEditPage }, @@ -93,7 +88,6 @@ export const RouteLink = [ { path: "banner/news/view/:id", Component: BannerNewsView }, { path: "banner/news/edit/:id", Component: BannerNewsEdit }, - // =============[ home banner ]================ { path: "banner/home", Component: HomeBanner }, { path: "banner/home/add-banner", Component: HomeBannerAdd }, diff --git a/src/Services/api.service.js b/src/Services/api.service.js index 318206a..a1340aa 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -327,6 +327,9 @@ export const rubixApi = createApi({ invalidatesTags: ["getEvents"], }), + + + // ===============[ Home Banners endpoints ]======================= getHomeBanner: builder.query({ query: () => "/admin/home", @@ -416,6 +419,15 @@ export const rubixApi = createApi({ query: (id) => `/admin/whitepaper/${id}`, providesTags: ["getWhitePaper"], }), + updateWhitepaper: builder.mutation({ + query: ({ id, data }) => ({ + url: `/admin/whitepaper/${id}`, + method: "PUT", + body: data, // Include the data you want to send in the request body + }), + invalidatesTags: ["getWhitePaper"], + }), + @@ -498,4 +510,5 @@ export const { useDeleteWhitepaperMutation, useCreateWhitepaperMutation, useGetWhitepaperByIdQuery, + useUpdateWhitepaperMutation, } = rubixApi; diff --git a/src/Validations/Validations.js b/src/Validations/Validations.js index 8b3b3a9..fef938d 100644 --- a/src/Validations/Validations.js +++ b/src/Validations/Validations.js @@ -112,26 +112,26 @@ export const addNews = Yup.object().shape({ } } ) - .test("file_formate", "Image file has unsupported format.", (files) => { - // // console.log(files[0].type) + // .test("file_formate", "Image file has unsupported format.", (files) => { + // // // console.log(files[0].type) - const SUPPORTED_FORMATS = [ - "image/jpeg", - "image/png", - "image/gif", - "image/tiff", - "image/svg+xml", - ]; - try { - if (files.length !== 0) { - setPreviewImage(URL.createObjectURL(files[0])); - return files && SUPPORTED_FORMATS.includes(files[0].type); - } - return true; - } catch (error) { - return false; - } - }) + // const SUPPORTED_FORMATS = [ + // "image/jpeg", + // "image/png", + // "image/gif", + // "image/tiff", + // "image/svg+xml", + // ]; + // try { + // if (files.length !== 0) { + // setPreviewImage(URL.createObjectURL(files[0])); + // return files && SUPPORTED_FORMATS.includes(files[0].type); + // } + // return true; + // } catch (error) { + // return false; + // } + // }) .optional(), }); @@ -161,26 +161,26 @@ export const editNews = Yup.object().shape({ } } ) - .test("file_formate", "Image file has unsupported format.", (files) => { - // // console.log(files[0].type) + // .test("file_formate", "Image file has unsupported format.", (files) => { + // // // console.log(files[0].type) - const SUPPORTED_FORMATS = [ - "image/jpeg", - "image/png", - "image/gif", - "image/tiff", - "image/svg+xml", - ]; - try { - if (files.length !== 0) { - setPreviewImage(URL.createObjectURL(files[0])); - return files && SUPPORTED_FORMATS.includes(files[0].type); - } - return true; - } catch (error) { - return false; - } - }) + // const SUPPORTED_FORMATS = [ + // "image/jpeg", + // "image/png", + // "image/gif", + // "image/tiff", + // "image/svg+xml", + // ]; + // try { + // if (files.length !== 0) { + // setPreviewImage(URL.createObjectURL(files[0])); + // return files && SUPPORTED_FORMATS.includes(files[0].type); + // } + // return true; + // } catch (error) { + // return false; + // } + // }) .optional(), }); @@ -213,26 +213,26 @@ export const addEvents = Yup.object().shape({ } } ) - .test("file_formate", "Image file has unsupported format.", (files) => { - // // console.log(files[0].type) + // .test("file_formate", "Image file has unsupported format.", (files) => { + // // // console.log(files[0].type) - const SUPPORTED_FORMATS = [ - "image/jpeg", - "image/png", - "image/gif", - "image/tiff", - "image/svg+xml", - ]; - try { - if (files.length !== 0) { - setPreviewImage(URL.createObjectURL(files[0])); - return files && SUPPORTED_FORMATS.includes(files[0].type); - } - return true; - } catch (error) { - return false; - } - }) + // const SUPPORTED_FORMATS = [ + // "image/jpeg", + // "image/png", + // "image/gif", + // "image/tiff", + // "image/svg+xml", + // ]; + // try { + // if (files.length !== 0) { + // setPreviewImage(URL.createObjectURL(files[0])); + // return files && SUPPORTED_FORMATS.includes(files[0].type); + // } + // return true; + // } catch (error) { + // return false; + // } + // }) .optional(), });