From 1b2ee1230700f854a996d991e5ec8aa9b91180c8 Mon Sep 17 00:00:00 2001 From: siddheshmorewdi Date: Thu, 23 May 2024 19:17:12 +0530 Subject: [PATCH] usecase file --- src/Pages/Privacy/AddWhitepapers.jsx | 329 ++++++++++++++++++++++++ src/Pages/Privacy/EditWhitepaper.jsx | 357 +++++++++++++++++++++++++++ src/Pages/Privacy/Privacy.jsx | 266 ++++++++++++++++++++ src/Pages/Privacy/ViewWhitePaper.jsx | 110 +++++++++ src/Pages/Usecase/AddUseCase.jsx | 27 +- src/Pages/Usecase/EditUseCase.jsx | 1 + src/Routes/Nav.js | 6 + src/Routes/Routes.js | 10 +- src/Services/api.service.js | 13 + src/Validations/Validations.js | 4 +- 10 files changed, 1113 insertions(+), 10 deletions(-) create mode 100644 src/Pages/Privacy/AddWhitepapers.jsx create mode 100644 src/Pages/Privacy/EditWhitepaper.jsx create mode 100644 src/Pages/Privacy/Privacy.jsx create mode 100644 src/Pages/Privacy/ViewWhitePaper.jsx diff --git a/src/Pages/Privacy/AddWhitepapers.jsx b/src/Pages/Privacy/AddWhitepapers.jsx new file mode 100644 index 0000000..8866da0 --- /dev/null +++ b/src/Pages/Privacy/AddWhitepapers.jsx @@ -0,0 +1,329 @@ +import { Box, Button, Divider, FormControl, FormHelperText, FormLabel, Heading, Image, Input, Stack, useToast } from '@chakra-ui/react' +import React, { useState } from 'react' +import { OPACITY_ON_LOAD } from '../../Layout/animations' +import Header from '../../Components/Header' +import { useNavigate } from 'react-router-dom' +import fallbackImage from "../../assets/ultp-fallback-img.webp"; +import { addWhitePapers } from '../../Validations/Validations' +import { TiWarning } from 'react-icons/ti' +import { yupResolver } from "@hookform/resolvers/yup"; +import { useForm } from "react-hook-form"; +import { motion } from 'framer-motion' +import Loader01 from '../../Components/Loaders/Loader01' +import { useCreateWhitepaperMutation } from '../../Services/api.service' +import ToastBox from '../../Components/ToastBox' + +const AddWhitepapers = () => { + const toast = useToast(); + const navigate = useNavigate(); + const [isLoading, setIsLoading] = useState(false); + const [selectedImage, setSelectedImage] = useState(fallbackImage); + const [ imageData, setImageData ] = useState(null) + + const [createWhitepaper] = useCreateWhitepaperMutation(); + + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: yupResolver(addWhitePapers), + }); + + + + + const handleImageChange = (e) => { + const file = e.target.files[0]; + setImageData(file); + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setSelectedImage(reader.result); + }; + reader.readAsDataURL(file); + } + }; + + const onSubmit = async (data) => { + try { + setIsLoading(true); + const formData = new FormData(); + formData.append("title", data.title); + if (data.image[0]) { + formData.append("image", data.image[0]); + } + if (data.document[0]) { + formData.append("document", data.document[0]); + } + // Trigger the mutation + createWhitepaper(formData) + .then((response) => { + // Handle the response here + + if (response?.data?.statusCode === 201) { + setIsLoading(false); + toast({ + render: () => ( + + ), + }); + reset(); + navigate("/whitepaper"); + } else if (response?.data?.statusCode === 500) { + setIsLoading(false); + toast({ + render: () => ( + + ), + }); + } + }) + .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); + } + }; + + + return ( + + +
+ + + + + Whitepaper Info + + + Select the platform for which you need to create this campaign. + + + + + + Whitepaper banner image + + + Below is the whitepaper banner image that will be whitepaper on the community page. + + + + Selected Image + {selectedImage === fallbackImage || imageData === null ? ( + "" + ) : ( + + {imageData?.name} + + {(imageData?.size / (1024 * 1024)).toFixed(2)} mb + + + )} + + + + +
+ + + + + Title + + + {errors.title && ( + + {errors.title.message} + + )} + + + + + + + + Document + + + {errors.document && ( + + {errors.document.message} + + )} + + + + + + + Banner image + + {/* */} + + + + + + + + Drop images here + + + or click to upload + + + + + + + + + {errors.image && ( + + {" "} + {errors.image.message} + + )} + + Maximum limit of image is 5mb. + + + + + + + + + + +
+ + + + ) +} + +export default AddWhitepapers \ No newline at end of file diff --git a/src/Pages/Privacy/EditWhitepaper.jsx b/src/Pages/Privacy/EditWhitepaper.jsx new file mode 100644 index 0000000..8081e16 --- /dev/null +++ b/src/Pages/Privacy/EditWhitepaper.jsx @@ -0,0 +1,357 @@ +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 = () => { + 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(); + + const { + register, + handleSubmit, + reset, + formState: { errors }, + setValue, + } = useForm({ + resolver: yupResolver(addWhitePapers), + defaultValues: { + title: "", + image: 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) => { + console.log(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[0]) { + form.append("image", data?.image[0]); + } +// Log formData entries +for (let [key, value] of form.entries()) { + console.log(`${key}: ${value}`); +} + + 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/Privacy/Privacy.jsx b/src/Pages/Privacy/Privacy.jsx new file mode 100644 index 0000000..9da405b --- /dev/null +++ b/src/Pages/Privacy/Privacy.jsx @@ -0,0 +1,266 @@ +import { + Box, + Image, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + Switch, + Text, + Tooltip, + useToast, +} from "@chakra-ui/react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { TABLE_PAGINATION } from "../../Constants/Paginations"; +import { + useDeleteWhitepaperMutation, + useGetPolicyQuery, + useGetWhitePaperQuery, + useUpdateWhitepaperStatusMutation, +} from "../../Services/api.service"; +import { useState } from "react"; +import TabularView from "../../Components/TabularView/TabularView"; +import CustomAlertDialog from "../../Components/CustomAlertDialog"; +import { HiDotsVertical } from "react-icons/hi"; +import { Link } from "react-router-dom"; +import { formatDate } from "../../Components/Functions/UTCConvertor"; +import ToastBox from "../../Components/ToastBox"; +import extractFilename from "../../Components/Functions/FileNameAlter"; + +const Policy = () => { + const toast = useToast(); + const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size); + const [currentPage, setCurrentPage] = useState(1); + const [searchTerm, setSearchTerm] = useState(""); + const [statusFilter, setStatusFilter] = useState("all"); + + const [deleteAlert, setDeleteAlert] = useState(false); + const [actionId, setActionId] = useState(null); + const [actionStatus, setActionStatus] = useState(null); + const [deleteIsLoading, setDeleteIsLoading] = useState(false); + + const whitePaper = useGetWhitePaperQuery({ + page: currentPage, + size: pageSize, + }); + + + + const policy = useGetPolicyQuery({ + page: currentPage, + size: pageSize, + }); + + const [deleteWhitepaper] = useDeleteWhitepaperMutation(); + const [updateWhitepaperStatus] = useUpdateWhitepaperStatusMutation(); + + const filteredData = policy?.data?.data?.rows?.filter((item) => { + // Filter by name (case insensitive) + const name = item.title; + const searchLower = searchTerm.toLowerCase(); + const nameMatches = name.toLowerCase().includes(searchLower); + + // Filter by status + const status = item.status; + + const statusMatches = + statusFilter === "all" || + (statusFilter === "active" && status === true) || + (statusFilter === "inactive" && status === false); + + return nameMatches && statusMatches; + }); + + + + + + // ====================================================[Table Setup]================================================================ + const tableHeadRow = [ + "Title", + // "Content", + "Active", + "Created At", + ]; + + const extractedArray = filteredData?.map((item, index) => { + return { + + Title: ( + + + + + {extractFilename(item?.title)} + + + + ), + Active: ( + handleUpdateStatus(item.id, item?.status)} + isChecked={item.status} + // disabled={item.status} + /> + ), + "Created At": ( + + + {formatDate(item?.createdAt)} + + + + + + + + + Edit + + + View + + { + setActionId(item.id); + setDeleteAlert(true); + setActionStatus(item.status); + }} + className="web-text-medium" + > + Delete + + + + + + ), + }; + }); + + // ====================================================[Functions]=================================================================== + const handleDelete = async (communityId, status) => { + if (status) { + return toast({ + render: () => ( + + ), + }); + } + + try { + // Trigger the mutation + setDeleteIsLoading(true); + await deleteWhitepaper(communityId) + .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); + toast({ + render: () => ( + + ), + }); + } + }) + .catch((error) => { + console.error("Error creating community:", error); + setDeleteIsLoading(false); + setDeleteAlert(false); + }); + } catch (error) { + // Handle errors + console.log("Error deleting community:", error); + } + }; + + const handleUpdateStatus = async (id) => { + try { + await updateWhitepaperStatus({ id }) + .then((response) => { + console.log(response?.data); + if (response?.data?.statusCode === 201) { + toast({ + render: () => ( + + ), + }); + + // whitePaper?.refetch() + } + }) + .catch((error) => { + console.log(error); + }); + } catch (error) { + // Handle errors + console.error("Error updating community status:", error); + } + }; + + + return ( + <> + + setDeleteAlert(false)} + isOpen={deleteAlert} + alertHandler={() => handleDelete(actionId)} + message={"Are you sure you want to delete video?"} + isLoading={deleteIsLoading} + /> + + ); +}; + +export default Policy; + + + + + diff --git a/src/Pages/Privacy/ViewWhitePaper.jsx b/src/Pages/Privacy/ViewWhitePaper.jsx new file mode 100644 index 0000000..8d28529 --- /dev/null +++ b/src/Pages/Privacy/ViewWhitePaper.jsx @@ -0,0 +1,110 @@ +import React from "react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { Box, Divider, Image, Tag, Text, useToast } from "@chakra-ui/react"; +import { useNavigate, useParams } from "react-router-dom"; +import Header from "../../Components/Header"; +import { useGetWhitepaperByIdQuery } from "../../Services/api.service"; +import { AttachmentIcon } from "@chakra-ui/icons"; +import extractFilename from "../../Components/Functions/FileNameAlter"; +import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders"; +import pdf from "../../assets/pdfscreen.png" + +const ViewWhitePaper = () => { + const { id } = useParams(); + const toast = useToast(); + const navigate = useNavigate(); + const { data, error, isLoading } = useGetWhitepaperByIdQuery(id); + const whitepaper = data?.data?.data; + console.log(whitepaper?.document); + + if (isLoading) { + return ; + } + + return ( + +
+ + + + + Whitepaper Info + + + Select the platform for which you need to create this campaign. + + + + + + Whitepaper banner image + + + Below is the profile that will be displayed on the community page. + + + + Selected Image + + + + + + + Status + + {whitepaper?.status ? ( + + Active + + ) : ( + + Inactive + + )} + + + + Title + {whitepaper?.title} + + + + + Document + + {extractFilename(whitepaper?.document)} + + + + + + + + + + + + + ); +}; + +export default ViewWhitePaper; diff --git a/src/Pages/Usecase/AddUseCase.jsx b/src/Pages/Usecase/AddUseCase.jsx index 19f678c..2ce1ab0 100644 --- a/src/Pages/Usecase/AddUseCase.jsx +++ b/src/Pages/Usecase/AddUseCase.jsx @@ -73,6 +73,7 @@ const AddUseCase = () => { console.log(errors); const onSubmit = async (data) => { + setIsLoading(true); setUseCaseValue("content", value); console.log(data); console.log(data); @@ -84,22 +85,32 @@ const AddUseCase = () => { formData.append("meta_description", data.meta_description); formData.append("content", data.content); - if (data.banner_image[0]) { + if (data.banner_image && data.banner_image.length > 0) { formData.append("banner_image", data.banner_image[0]); } - - if (data.icon[0]) { + + if (data.icon && data.icon.length > 0) { formData.append("icon", data.icon[0]); } + console.log(data.attachment); + + + + + // Log and append file attachments + if (data.attachment && data.attachment.length > 0) { Array.from(data.attachment).forEach((file, index) => { - formData.append(`attachment`, file); + console.log(`attachment[${index}]: ${file.name}`); + formData.append("attachment", file); }); + } + // Log formData entries - for (let [key, value] of formData.entries()) { - console.log(`${key}: ${value}`); - } + // for (let [key, value] of formData.entries()) { + // console.log(`${key}: ${value}`); + // } try { // Trigger the mutation @@ -120,6 +131,7 @@ const AddUseCase = () => { ), }); reset(); + setIsLoading(false) navigate("/usecase"); } else if (response?.data?.statusCode === 500) { setIsLoading(false); @@ -530,6 +542,7 @@ const AddUseCase = () => { className="web-text-medium form-control rounded-1" size="sm" multiple={true} + onChange={(e)=> console.log(e.target.value)} /> {errors.attachment && ( diff --git a/src/Pages/Usecase/EditUseCase.jsx b/src/Pages/Usecase/EditUseCase.jsx index bd673d8..7ec705c 100644 --- a/src/Pages/Usecase/EditUseCase.jsx +++ b/src/Pages/Usecase/EditUseCase.jsx @@ -549,6 +549,7 @@ const EditUseCase = () => { className="web-text-medium form-control rounded-1" size="sm" multiple={true} + onChange={()=> console.log(e.target.value)} /> {errors.attachment && ( diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js index 785541e..ad7ff37 100644 --- a/src/Routes/Nav.js +++ b/src/Routes/Nav.js @@ -8,6 +8,7 @@ import { MdOutlineEvent } from "react-icons/md"; import { CgCommunity } from "react-icons/cg"; import { AiOutlineIdcard } from "react-icons/ai"; import { LuMonitorPause } from "react-icons/lu"; +import { MdOutlinePrivacyTip } from "react-icons/md"; export const nav = [ { @@ -59,4 +60,9 @@ export const nav = [ path: "/usecase", Icon: LuMonitorPause, }, + { + title: "Privacy policy", + path: "/policy", + Icon: MdOutlinePrivacyTip, + }, ]; diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index d26e324..3eae009 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -6,7 +6,6 @@ import ComunityViewPage from "../Pages/Community/ComunityViewPage"; import Events from "../Pages/Events/Events"; import Banner from "../Pages/Banners/Banner"; 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"; import BannerComunityViewPage from "../Pages/Banners/BannerCommunity/BannerCommunityView"; @@ -54,6 +53,8 @@ import Usecase from "../Pages/Usecase/Usecase"; import AddUseCase from "../Pages/Usecase/AddUseCase"; import ViewUseCase from "../Pages/Usecase/ViewUseCase"; import EditUseCase from "../Pages/Usecase/EditUseCase"; +import Policy from "../Pages/Privacy/Privacy"; +import Whitepapers from "../Pages/Whitepapers/Whitepapers"; export const RouteLink = [ { path: "/", Component: UnderConstruction }, @@ -150,4 +151,11 @@ export const RouteLink = [ { path: "/usecase/add-usecase", Component: AddUseCase }, { path: "/usecase/view/:id", Component: ViewUseCase }, { path: "/usecase/edit/:id", Component: EditUseCase }, + + + // =============[ policy ]================ + { path: "/policy", Component: Policy }, + { path: "/policy/add-policy", Component: UnderConstruction }, + { path: "/policy/view/:id", Component: UnderConstruction }, + { path: "/policy/edit/:id", Component: UnderConstruction }, ]; diff --git a/src/Services/api.service.js b/src/Services/api.service.js index c9cd3e0..8d117f2 100644 --- a/src/Services/api.service.js +++ b/src/Services/api.service.js @@ -570,6 +570,15 @@ export const rubixApi = createApi({ }), + + + // ===============[ Usecase endpoints ]======================= + getPolicy: builder.query({ + query: () => "/admin/policy", + providesTags: ["getPolicy"], + }), + + }), }); @@ -664,6 +673,10 @@ export const { useDeleteUsecaseMutation, useGetUsecaseQuery, useUpdateUsecaseStatusMutation, + + + + useGetPolicyQuery, diff --git a/src/Validations/Validations.js b/src/Validations/Validations.js index 86543e6..f73bf44 100644 --- a/src/Validations/Validations.js +++ b/src/Validations/Validations.js @@ -376,7 +376,7 @@ export const addVideos = Yup.object().shape({ export const addUsecase = Yup.object().shape({ title: Yup.string().required("Name is required"), meta_description: Yup.string().required("Description is required"), - attachment: Yup.string(), + attachment: Yup.mixed(), content: Yup.string(), banner_image: Yup .mixed() @@ -429,7 +429,7 @@ export const addUsecase = Yup.object().shape({ export const editUsecase = Yup.object().shape({ title: Yup.string().required("Name is required"), meta_description: Yup.string().required("Description is required"), - attachment: Yup.string(), + attachment: Yup.mixed(), content: Yup.string(), banner_image: Yup .mixed()