mirror of
https://github.com/WDI-Ideas/rubix-admin-panel.git
synced 2026-04-27 21:15:50 +00:00
usecase file
This commit is contained in:
329
src/Pages/Privacy/AddWhitepapers.jsx
Normal file
329
src/Pages/Privacy/AddWhitepapers.jsx
Normal file
@@ -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: () => (
|
||||
<ToastBox status={"success"} message={response?.data?.message} />
|
||||
),
|
||||
});
|
||||
reset();
|
||||
navigate("/whitepaper");
|
||||
} else if (response?.data?.statusCode === 500) {
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox status={"success"} message={response?.data?.message} />
|
||||
),
|
||||
});
|
||||
}
|
||||
})
|
||||
.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 (
|
||||
<Box
|
||||
{...OPACITY_ON_LOAD}
|
||||
w={"100%"}
|
||||
h={"100vh"}
|
||||
className="overflow-auto "
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
>
|
||||
|
||||
<Header title={"WhitePaper"} />
|
||||
|
||||
<Box className="d-flex">
|
||||
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Whitepaper Info
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary">
|
||||
Select the platform for which you need to create this campaign.
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Whitepaper banner image
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary mb-4">
|
||||
Below is the whitepaper banner image that will be whitepaper on the community page.
|
||||
</span>
|
||||
|
||||
<Box
|
||||
boxSize="sm"
|
||||
className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
|
||||
>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
w={500}
|
||||
h={240}
|
||||
src={selectedImage}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
{selectedImage === fallbackImage || imageData === null ? (
|
||||
""
|
||||
) : (
|
||||
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
|
||||
<span className="web-text-small">{imageData?.name}</span>
|
||||
<span className="web-text-small text-secondary fst-italic">
|
||||
{(imageData?.size / (1024 * 1024)).toFixed(2)} mb
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => setSelectedImage(fallbackImage)}
|
||||
backgroundColor="red.400"
|
||||
color={"whitesmoke"}
|
||||
transition={"0.5s"}
|
||||
_hover={{
|
||||
backgroundColor: "red.500",
|
||||
}}
|
||||
size="xs"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="col-7 pt-4 mb-3 overflow-auto p-4"
|
||||
>
|
||||
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Title
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("title")}
|
||||
placeholder="Title"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.title && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " /> {errors.title.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Document
|
||||
</FormLabel>
|
||||
<input
|
||||
type='file'
|
||||
{...register("document")}
|
||||
className="web-text-medium form-control rounded-1"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.document && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " /> {errors.document.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Banner image
|
||||
</FormLabel>
|
||||
{/* <ImageDropBox /> */}
|
||||
|
||||
<Box
|
||||
borderColor="gray.300"
|
||||
borderStyle="dashed"
|
||||
borderWidth="2px"
|
||||
rounded="md"
|
||||
shadow="sm"
|
||||
role="group"
|
||||
transition="all 150ms ease-in-out"
|
||||
_hover={{
|
||||
shadow: "md",
|
||||
}}
|
||||
as={motion.div}
|
||||
initial="rest"
|
||||
animate="rest"
|
||||
whileHover="hover"
|
||||
height={"105px"}
|
||||
className="pointer"
|
||||
>
|
||||
<Box position="relative" height="100%" width="100%">
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
>
|
||||
<Stack
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
>
|
||||
<span
|
||||
className="d-flex flex-column align-items-center pointer"
|
||||
spacing="1"
|
||||
>
|
||||
<Heading
|
||||
fontSize="lg"
|
||||
color="gray.700"
|
||||
fontWeight="bold"
|
||||
cursor={"pointer"}
|
||||
>
|
||||
Drop images here
|
||||
</Heading>
|
||||
<span
|
||||
fontWeight="light"
|
||||
className="web-text-large text-secondary text-center pointer"
|
||||
>
|
||||
or click to upload
|
||||
</span>
|
||||
</span>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Input
|
||||
{...register("image")}
|
||||
type="file"
|
||||
height="100%"
|
||||
width="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
opacity="0"
|
||||
aria-hidden="true"
|
||||
accept="image/*"
|
||||
onChange={handleImageChange}
|
||||
onDrop={handleImageChange}
|
||||
// onDragEnter={startAnimation}
|
||||
// onDragLeave={stopAnimation}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{errors.image && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " />{" "}
|
||||
{errors.image.message}
|
||||
</span>
|
||||
)}
|
||||
<FormHelperText className="web-text-small">
|
||||
Maximum limit of image is 5mb.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
|
||||
<Box className=" d-flex justify-content-end mb-5">
|
||||
<Button
|
||||
isLoading={isLoading}
|
||||
spinner={<Loader01 />}
|
||||
color={"whitesmoke"}
|
||||
backgroundColor={"purple.900"}
|
||||
_hover={{
|
||||
backgroundColor: "purple.800",
|
||||
}}
|
||||
type="submit"
|
||||
rounded={'sm'}
|
||||
|
||||
size="sm"
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
</form>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddWhitepapers
|
||||
357
src/Pages/Privacy/EditWhitepaper.jsx
Normal file
357
src/Pages/Privacy/EditWhitepaper.jsx
Normal file
@@ -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: () => (
|
||||
<ToastBox status={"success"} message={response?.data?.message} />
|
||||
),
|
||||
});
|
||||
navigate("/whitepaper");
|
||||
// setDeleteAlert(false);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error creating community:", error);
|
||||
setIsLoadingEdit(false);
|
||||
// setDeleteIsLoading(false);
|
||||
// setDeleteAlert(false);
|
||||
});
|
||||
reset();
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <FullscreenLoaders />;
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
{...OPACITY_ON_LOAD}
|
||||
overflowY={"scroll"}
|
||||
paddingBottom={50}
|
||||
height={"100vh"}
|
||||
>
|
||||
<Header title={"Whitepaper"} />
|
||||
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Members Info
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary">
|
||||
Select the platform for which you need to create this campaign.
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Display profile
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary ">
|
||||
Below is the profile that will be displayed on the community page.
|
||||
</span>
|
||||
|
||||
<Box
|
||||
boxSize="sm"
|
||||
className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
|
||||
>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
w={"100%"}
|
||||
h={240}
|
||||
src={selectedImage}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
{selectedImage === fallbackImage || largeImageData === null ? (
|
||||
""
|
||||
) : (
|
||||
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
|
||||
<span className="web-text-small">
|
||||
{largeImageData && largeImageData?.name}
|
||||
</span>
|
||||
<span className="web-text-small text-secondary fst-italic">
|
||||
{largeImageData &&
|
||||
(largeImageData?.size / (1024 * 1024)).toFixed(2)}{" "}
|
||||
mb
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => setSelectedImage(fallbackImage)}
|
||||
backgroundColor="red.400"
|
||||
color={"whitesmoke"}
|
||||
transition={"0.5s"}
|
||||
_hover={{
|
||||
backgroundColor: "red.500",
|
||||
}}
|
||||
size="xs"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
</Box>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="col-7 pt-4 mb-3 overflow-auto p-4"
|
||||
>
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Title
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("title")}
|
||||
placeholder="Title"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.title && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " /> {errors.title.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Document
|
||||
</FormLabel>
|
||||
<input
|
||||
type="file"
|
||||
{...register("document")}
|
||||
className="web-text-medium form-control rounded-1"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.document && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " />{" "}
|
||||
{errors.document.message}
|
||||
</span>
|
||||
)}
|
||||
<Text
|
||||
color="teal"
|
||||
className="web-text-medium d-flex mt-2 align-items-center gap-2"
|
||||
>
|
||||
{extractFilename(data?.data?.data?.document)}
|
||||
<Box className="link pointer" as="span" rounded={"md"} p={1}>
|
||||
<AttachmentIcon />
|
||||
</Box>
|
||||
</Text>
|
||||
</FormControl>
|
||||
|
||||
<FormControl className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Display profile
|
||||
</FormLabel>
|
||||
{/* <ImageDropBox /> */}
|
||||
|
||||
<Box
|
||||
borderColor="gray.300"
|
||||
borderStyle="dashed"
|
||||
borderWidth="2px"
|
||||
rounded="md"
|
||||
shadow="sm"
|
||||
role="group"
|
||||
transition="all 150ms ease-in-out"
|
||||
_hover={{
|
||||
shadow: "md",
|
||||
}}
|
||||
as={motion.div}
|
||||
initial="rest"
|
||||
animate="rest"
|
||||
whileHover="hover"
|
||||
height={"105px"}
|
||||
className="pointer"
|
||||
>
|
||||
<Box position="relative" height="100%" width="100%">
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
>
|
||||
<Stack
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
>
|
||||
<span
|
||||
className="d-flex flex-column align-items-center pointer"
|
||||
spacing="1"
|
||||
>
|
||||
<Heading
|
||||
fontSize="lg"
|
||||
color="gray.700"
|
||||
fontWeight="bold"
|
||||
cursor={"pointer"}
|
||||
>
|
||||
Drop images here
|
||||
</Heading>
|
||||
<span
|
||||
fontWeight="light"
|
||||
className="web-text-large text-secondary text-center pointer"
|
||||
>
|
||||
or click to upload
|
||||
</span>
|
||||
</span>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Input
|
||||
{...register("image")}
|
||||
type="file"
|
||||
height="100%"
|
||||
width="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
opacity="0"
|
||||
aria-hidden="true"
|
||||
accept="image/*"
|
||||
onChange={handleImageChange}
|
||||
onDrop={handleImageChange}
|
||||
// onDragEnter={startAnimation}
|
||||
// onDragLeave={stopAnimation}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{errors.image && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " /> {errors.image.message}
|
||||
</span>
|
||||
)}
|
||||
<FormHelperText className="web-text-small">
|
||||
Maximum limit of image should be 1mb to protect website from slow
|
||||
loading.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<Box className=" d-flex justify-content-end ">
|
||||
<Button
|
||||
isLoading={isLoadingEdit}
|
||||
spinner={<Loader01 />}
|
||||
color={"whitesmoke"}
|
||||
backgroundColor={"purple.900"}
|
||||
_hover={{
|
||||
backgroundColor: "purple.800",
|
||||
}}
|
||||
type="submit"
|
||||
size="sm"
|
||||
rounded={"sm"}
|
||||
>
|
||||
Save edit
|
||||
</Button>
|
||||
</Box>
|
||||
<Divider />
|
||||
</form>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditWhitepaper;
|
||||
266
src/Pages/Privacy/Privacy.jsx
Normal file
266
src/Pages/Privacy/Privacy.jsx
Normal file
@@ -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: (
|
||||
<Link to={`/whitepaper/view/${item.id}`}>
|
||||
<Tooltip
|
||||
className="rounded-2 web-text-xsmall"
|
||||
width={"fit-content"}
|
||||
placement="top"
|
||||
hasArrow
|
||||
label={item?.title}
|
||||
bg="blue.200"
|
||||
>
|
||||
<Box display={"flex"} alignItems={"center"} w={200}>
|
||||
<Text as={"span"} isTruncated={true}>
|
||||
{extractFilename(item?.title)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Tooltip></Link>
|
||||
),
|
||||
Active: (
|
||||
<Switch
|
||||
size={"sm"}
|
||||
colorScheme="teal"
|
||||
onChange={() => handleUpdateStatus(item.id, item?.status)}
|
||||
isChecked={item.status}
|
||||
// disabled={item.status}
|
||||
/>
|
||||
),
|
||||
"Created At": (
|
||||
<span className="d-flex justify-content-between align-items-center">
|
||||
<Text as={"span"} color={"gray.600"} className=" fw-bold">
|
||||
{formatDate(item?.createdAt)}
|
||||
</Text>
|
||||
<Menu>
|
||||
<MenuButton className="link p-1 rounded-1">
|
||||
<HiDotsVertical className="rubix-text-dark fs-6" />
|
||||
</MenuButton>
|
||||
<Portal>
|
||||
<MenuList minWidth="80px">
|
||||
<Link to={`/policy/edit/${item.id}`}>
|
||||
<MenuItem className="web-text-medium">Edit</MenuItem>
|
||||
</Link>
|
||||
<Link to={`/policy/view/${item.id}`}>
|
||||
<MenuItem className="web-text-medium">View</MenuItem>
|
||||
</Link>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setActionId(item.id);
|
||||
setDeleteAlert(true);
|
||||
setActionStatus(item.status);
|
||||
}}
|
||||
className="web-text-medium"
|
||||
>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Portal>
|
||||
</Menu>
|
||||
</span>
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
// ====================================================[Functions]===================================================================
|
||||
const handleDelete = async (communityId, status) => {
|
||||
if (status) {
|
||||
return toast({
|
||||
render: () => (
|
||||
<ToastBox
|
||||
status={"warn"}
|
||||
message={"Can't delete whitepaper. Status is true."}
|
||||
/>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
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: () => (
|
||||
<ToastBox
|
||||
status={"success"}
|
||||
message={response?.data?.message}
|
||||
/>
|
||||
),
|
||||
});
|
||||
}
|
||||
})
|
||||
.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: () => (
|
||||
<ToastBox
|
||||
status={"success"}
|
||||
message={"Please toggle another banner."}
|
||||
/>
|
||||
),
|
||||
});
|
||||
|
||||
// whitePaper?.refetch()
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
} catch (error) {
|
||||
// Handle errors
|
||||
console.error("Error updating community status:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<TabularView
|
||||
title={"policy"}
|
||||
btnTitle={"Create policy"}
|
||||
link={"/policy/add-policy"}
|
||||
|
||||
|
||||
|
||||
apiData={policy}
|
||||
tableHeadRow={tableHeadRow}
|
||||
extractedArray={extractedArray}
|
||||
searchTerm={searchTerm}
|
||||
setSearchTerm={setSearchTerm}
|
||||
statusFilter={statusFilter}
|
||||
setStatusFilter={setStatusFilter}
|
||||
pageSize={pageSize}
|
||||
setPageSize={setPageSize}
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
totalPages={policy?.data?.data?.totalPages}
|
||||
|
||||
|
||||
|
||||
/>
|
||||
<CustomAlertDialog
|
||||
onClose={() => setDeleteAlert(false)}
|
||||
isOpen={deleteAlert}
|
||||
alertHandler={() => handleDelete(actionId)}
|
||||
message={"Are you sure you want to delete video?"}
|
||||
isLoading={deleteIsLoading}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Policy;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
110
src/Pages/Privacy/ViewWhitePaper.jsx
Normal file
110
src/Pages/Privacy/ViewWhitePaper.jsx
Normal file
@@ -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 <FullscreenLoaders />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
{...OPACITY_ON_LOAD}
|
||||
w={"100%"}
|
||||
h={"100vh"}
|
||||
className="overflow-auto "
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
>
|
||||
<Header title={"Whitepaper"} btnTitle={"Edit whitepaper"} link={`/whitepaper/edit/${id}`} />
|
||||
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Whitepaper Info
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary">
|
||||
Select the platform for which you need to create this campaign.
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Whitepaper banner image
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary mb-4">
|
||||
Below is the profile that will be displayed on the community page.
|
||||
</span>
|
||||
|
||||
<Box
|
||||
boxSize="sm"
|
||||
className="d-flex h-auto w-100 justify-content-start flex-column align-items-center gap-3"
|
||||
>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
objectFit="cover"
|
||||
w={500}
|
||||
h={240}
|
||||
src={`https://rubix.betadelivery.com/${whitepaper?.bannerImage}`}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="col-7 pt-4 p-4">
|
||||
<Box>
|
||||
<Box className="web-text-large fw-bold mb-1 rubix-text-dark">
|
||||
Status
|
||||
</Box>
|
||||
{whitepaper?.status ? (
|
||||
<Tag size={"sm"} borderRadius="full" colorScheme="teal">
|
||||
Active
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag size={"sm"} borderRadius="full" colorScheme="red">
|
||||
Inactive
|
||||
</Tag>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box className="mb-3">
|
||||
<Box className="web-text-large fw-bold rubix-text-dark">Title</Box>
|
||||
<Box className="web-text-medium text-secondary">{whitepaper?.title}</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
<Box className="mb-3">
|
||||
<Box className="web-text-large fw-bold rubix-text-dark">Document</Box>
|
||||
<Image mt={2} w={"80px"} src={pdf} />
|
||||
<Text color="teal" className="web-text-medium d-flex align-items-center mt-2 gap-2">{extractFilename(whitepaper?.document)}
|
||||
<Box className="link pointer" as="span" rounded={"md"} p={1}><AttachmentIcon/></Box></Text>
|
||||
</Box>
|
||||
|
||||
<Divider/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewWhitePaper;
|
||||
@@ -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 && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
|
||||
@@ -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 && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -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 },
|
||||
];
|
||||
|
||||
@@ -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,
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user