Changes made to EditTerms

This commit is contained in:
rockyeverlast
2024-05-27 19:55:54 +05:30
parent 66bcffd11e
commit f7405317a7
8 changed files with 235 additions and 165 deletions

View File

@@ -1,38 +1,47 @@
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 {
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 { 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'
import { motion } from "framer-motion";
import Loader01 from "../../Components/Loaders/Loader01";
import { useCreateWhitepaperMutation } from "../../Services/api.service";
import ToastBox from "../../Components/ToastBox";
const AddTerms = () => {
const toast = useToast();
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [imageData, setImageData] = useState(null);
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 {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(addWhitePapers),
});
const handleImageChange = (e) => {
const file = e.target.files[0];
@@ -66,7 +75,10 @@ const AddWhitepapers = () => {
setIsLoading(false);
toast({
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
<ToastBox
status={"success"}
message={response?.data?.message}
/>
),
});
reset();
@@ -75,7 +87,10 @@ const AddWhitepapers = () => {
setIsLoading(false);
toast({
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
<ToastBox
status={"success"}
message={response?.data?.message}
/>
),
});
}
@@ -93,7 +108,6 @@ const AddWhitepapers = () => {
}
};
return (
<Box
{...OPACITY_ON_LOAD}
@@ -103,7 +117,6 @@ const AddWhitepapers = () => {
display={"flex"}
flexDirection={"column"}
>
<Header title={"WhitePaper"} />
<Box className="d-flex">
@@ -121,7 +134,8 @@ const AddWhitepapers = () => {
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.
Below is the whitepaper banner image that will be whitepaper on the
community page.
</span>
<Box
@@ -165,8 +179,6 @@ const AddWhitepapers = () => {
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
@@ -184,28 +196,24 @@ const AddWhitepapers = () => {
)}
</FormControl>
<FormControl isRequired className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Document
</FormLabel>
<input
type='file'
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}
<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
@@ -289,8 +297,7 @@ const AddWhitepapers = () => {
{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}
<TiWarning className="fw-bold fs-5 " /> {errors.image.message}
</span>
)}
<FormHelperText className="web-text-small">
@@ -298,9 +305,6 @@ const AddWhitepapers = () => {
</FormHelperText>
</FormControl>
<Box className=" d-flex justify-content-end mb-5">
<Button
isLoading={isLoading}
@@ -311,19 +315,16 @@ const AddWhitepapers = () => {
backgroundColor: "purple.800",
}}
type="submit"
rounded={'sm'}
rounded={"sm"}
size="sm"
>
Create
</Button>
</Box>
</form>
</Box>
</Box>
</Box>
)
}
);
};
export default AddWhitepapers
export default AddTerms;

View File

@@ -19,29 +19,32 @@ import fallbackImage from "../../assets/ultp-fallback-img.webp";
import { useNavigate, useParams } from "react-router-dom";
import {
useGetNewsByIdQuery,
useGetTermsByIdQuery,
useGetWhitepaperByIdQuery,
useUpdateTermsMutation,
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 { addTerms, 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";
import ReactQuill from "react-quill";
const EditWhitepaper = () => {
const EditTerms = () => {
const { id } = useParams();
const toast = useToast();
const navigate = useNavigate();
const { data, error, isLoading } = useGetWhitepaperByIdQuery(id);
const { data, error, isLoading } = useGetTermsByIdQuery(id);
const [isLoadingEdit, setIsLoadingEdit] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [largeImageData, setLargeImageData] = useState(null);
const [updateWhitepaper] = useUpdateWhitepaperMutation();
const [updateTerms] = useUpdateTermsMutation();
const {
register,
@@ -50,21 +53,29 @@ const EditWhitepaper = () => {
formState: { errors },
setValue,
} = useForm({
resolver: yupResolver(addWhitePapers),
resolver: yupResolver(addTerms),
defaultValues: {
title: "",
image: null,
content: "",
banner_image: null,
},
});
console.log("----------", data?.data?.banner_image);
const termContent = data?.data;
// console.log(termContent);
const [valueQuill, setValueQuill] = useState(termContent?.content);
useEffect(() => {
if (data?.data?.data) {
if (data?.data) {
setSelectedImage(
`https://rubix.betadelivery.com/${data?.data?.data?.bannerImage}`
`https://rubix.betadelivery.com/${data?.data?.banner_image}`
);
setValue("title", data?.data?.data?.title);
setValue("image", data?.data?.data?.image);
setValue("bannerImage", data?.data?.data?.bannerImage);
setValue("title", data?.data?.title);
setValue("content", data?.data?.content);
setValue("banner_image", data?.data?.banner_image);
setValueQuill(data?.data?.content);
}
}, [data, setValue]);
@@ -85,28 +96,37 @@ const EditWhitepaper = () => {
setIsLoadingEdit(true);
const form = new FormData();
form.append("title", data?.title);
if (data.document[0]) {
form.append("document", data.document[0]);
form.append("content", data?.content);
if (data?.banner_image[0]) {
form.append("banner_image", data?.image[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 })
// Log formData entries
for (let [key, value] of form.entries()) {
console.log(`${key}: ${value}`);
}
await updateTerms({ id: id, data: form })
.then((response) => {
if (response?.data?.statusCode === 201) {
// console.log(response?.error?.data?.error?.message);
if (response?.data?.statusCode === 200) {
setIsLoadingEdit(false);
toast({
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
),
});
navigate("/whitepaper");
reset();
navigate("/terms");
// setDeleteAlert(false);
} else {
setIsLoadingEdit(false);
toast({
render: () => (
<ToastBox status={"error"} message={"Something went wrong"} />
),
});
}
})
.catch((error) => {
@@ -115,9 +135,9 @@ const EditWhitepaper = () => {
// setDeleteIsLoading(false);
// setDeleteAlert(false);
});
reset();
};
console.log(errors);
if (isLoading) {
return <FullscreenLoaders />;
}
@@ -128,26 +148,10 @@ const EditWhitepaper = () => {
paddingBottom={50}
height={"100vh"}
>
<Header title={"Whitepaper"} />
<Header title={"Terms and Conditions"} />
<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"
@@ -213,30 +217,12 @@ const EditWhitepaper = () => {
</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"
<ReactQuill
className="rounded-3"
theme="snow"
value={valueQuill}
onChange={setValueQuill}
/>
{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">
@@ -354,4 +340,4 @@ const EditWhitepaper = () => {
);
};
export default EditWhitepaper;
export default EditTerms;

View File

@@ -14,10 +14,11 @@ import {
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
import {
useDeletePolicyMutation,
useDeleteWhitepaperMutation,
useGetPolicyQuery,
useCreateTermsMutation,
useDeleteTermsMutation,
useGetTermsQuery,
useGetWhitePaperQuery,
useUpdateTermsStatusMutation,
useUpdateWhitepaperStatusMutation,
} from "../../Services/api.service";
import { useState } from "react";
@@ -29,7 +30,7 @@ import { formatDate } from "../../Components/Functions/UTCConvertor";
import ToastBox from "../../Components/ToastBox";
import extractFilename from "../../Components/Functions/FileNameAlter";
const Policy = () => {
const Terms = () => {
const toast = useToast();
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(1);
@@ -41,20 +42,20 @@ const Policy = () => {
const [actionStatus, setActionStatus] = useState(null);
const [deleteIsLoading, setDeleteIsLoading] = useState(false);
const whitePaper = useGetWhitePaperQuery({
const termsPage = useCreateTermsMutation({
page: currentPage,
size: pageSize,
});
const policy = useGetPolicyQuery({
const terms = useGetTermsQuery({
page: currentPage,
size: pageSize,
});
const [deletePolicy] = useDeletePolicyMutation();
const [updateWhitepaperStatus] = useUpdateWhitepaperStatusMutation();
const [deletePolicy] = useDeleteTermsMutation();
const [updateTermsStatus] = useUpdateTermsStatusMutation();
const filteredData = policy?.data?.data?.rows?.filter((item) => {
const filteredData = terms?.data?.data?.rows?.filter((item) => {
// Filter by name (case insensitive)
const name = item.title;
const searchLower = searchTerm.toLowerCase();
@@ -119,10 +120,10 @@ const Policy = () => {
</MenuButton>
<Portal>
<MenuList minWidth="80px">
<Link to={`/policy/edit/${item.id}`}>
<Link to={`/terms/edit/${item.id}`}>
<MenuItem className="web-text-medium">Edit</MenuItem>
</Link>
<Link to={`/policy/view/${item.id}`}>
<Link to={`/terms/view/${item.id}`}>
<MenuItem className="web-text-medium">View</MenuItem>
</Link>
<MenuItem
@@ -191,7 +192,7 @@ const Policy = () => {
const handleUpdateStatus = async (id) => {
try {
await updateWhitepaperStatus({ id })
await updateTermsStatus({ id })
.then((response) => {
console.log(response?.data);
if (response?.data?.statusCode === 201) {
@@ -219,10 +220,10 @@ const Policy = () => {
return (
<>
<TabularView
title={"Policy"}
btnTitle={"Create policy"}
link={"/policy/add-policy"}
apiData={policy}
title={"Terms & Conditions"}
btnTitle={"Create Terms"}
link={"/terms/add-terms"}
apiData={terms}
tableHeadRow={tableHeadRow}
extractedArray={extractedArray}
searchTerm={searchTerm}
@@ -233,8 +234,8 @@ const Policy = () => {
setPageSize={setPageSize}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
totalPages={policy?.data?.data?.totalPages}
noDataTitle={"policy"}
totalPages={terms?.data?.data?.totalPages}
noDataTitle={"terms"}
/>
<CustomAlertDialog
onClose={() => setDeleteAlert(false)}
@@ -247,4 +248,4 @@ const Policy = () => {
);
};
export default Policy;
export default Terms;

View File

@@ -61,8 +61,8 @@ export const nav = [
Icon: LuMonitorPause,
},
{
title: "Privacy policy",
path: "/policy",
title: "Terms & Conditions",
path: "/terms",
Icon: MdOutlinePrivacyTip,
},
];

View File

@@ -53,9 +53,12 @@ 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 Policy from "../Pages/Terms/Terms";
import Whitepapers from "../Pages/Whitepapers/Whitepapers";
import WelcomePage from "../Pages/WelcomePage";
import AddTerms from "../Pages/Terms/AddTerms";
import Terms from "../Pages/Terms/Terms";
import EditTerms from "../Pages/Terms/EditTerms";
export const RouteLink = [
{ path: "/", Component: WelcomePage },
@@ -155,8 +158,8 @@ export const RouteLink = [
// =============[ policy ]================
{ path: "/policy", Component: Policy },
{ path: "/policy/add-policy", Component: UnderConstruction },
{ path: "/policy/view/:id", Component: UnderConstruction },
{ path: "/policy/edit/:id", Component: UnderConstruction },
{ path: "/terms", Component: Terms },
{ path: "/terms/add-terms", Component: AddTerms },
{ path: "/terms/view/:id", Component: UnderConstruction },
{ path: "/terms/edit/:id", Component: EditTerms },
];

View File

@@ -34,7 +34,8 @@ export const rubixApi = createApi({
"getWhitePaper",
"getEcoBanner",
"getUseCaseById",
"getUseCase"
"getUseCase",
"getTerms"
],
endpoints: (builder) => ({
// ===============[ Community cards endpoints ]=======================
@@ -528,8 +529,8 @@ export const rubixApi = createApi({
// ===============[ Usecase endpoints ]=======================
getUsecase: builder.query({
// ===============[ Usecase endpoints ]=======================
getUsecase: builder.query({
query: () => "/admin/tech",
providesTags: ["getUseCase"],
}),
@@ -570,22 +571,47 @@ export const rubixApi = createApi({
}),
// ===============[ Usecase endpoints ]=======================
getPolicy: builder.query({
query: () => "/admin/policy",
providesTags: ["getPolicy"],
// ===============[ Terms endpoints ]=======================
getTerms: builder.query({
query: () => "/admin/term-condition",
providesTags: ["getTerms"],
}),
deletePolicy: builder.mutation({
deleteTerms: builder.mutation({
query: (id) => ({
url: `/admin/policy/${id}`,
url: `/admin/term-condition/${id}`,
method: "DELETE",
}),
invalidatesTags: ["getPolicy"],
invalidatesTags: ["getTerms"],
}),
createTerms: builder.mutation({
query: ({ data }) => ({
url: `/admin/term-condition/${data}`,
method: "POST",
body: data,
}),
invalidatesTags: ["getTerms"],
}),
updateTermsStatus: builder.mutation({
query: ({ id }) => ({
url: `/admin/term-condition/change-visibility/${id}`,
method: "POST",
}),
invalidatesTags: ["getTerms"],
}),
updateTerms: builder.mutation({
query: ({ id, data }) => ({
url: `/admin/term-condition/${id}`,
method: "PUT",
body: data, // Include the data you want to send in the request body
}),
invalidatesTags: ["getTerms"],
}),
getTermsById: builder.query({
query: (id) => `/admin/term-condition/${id}`,
providesTags: ["getTerms"],
}),
}),
});
@@ -683,9 +709,13 @@ export const {
useGetPolicyQuery,
useDeletePolicyMutation,
useGetTermsQuery,
useDeleteTermsMutation,
useCreateTermsMutation,
useUpdateTermsStatusMutation,
useUpdateTermsMutation,
useGetTermsByIdQuery,

View File

@@ -401,7 +401,7 @@ export const addUsecase = Yup.object().shape({
}
}
).optional(),
icon: Yup
icon: Yup
.mixed()
// .required("Icon is required")
.test("required", "You need to provide a file", (files) => {
@@ -454,7 +454,7 @@ export const editUsecase = Yup.object().shape({
}
}
).optional(),
icon: Yup
icon: Yup
.mixed()
// .required("Icon is required")
.test("required", "You need to provide a file", (files) => {
@@ -479,3 +479,52 @@ export const editUsecase = Yup.object().shape({
});
export const addTerms = Yup.object().shape({
title: Yup.string().required("title is required"),
content: Yup.string(),
banner_image: Yup.mixed()
// .test("required", "You need to provide a file", (files) => {
// // return file && file.size <-- u can use this if you don't want to allow empty files to be uploaded;
// if (files) return true;
// return false;
// })
// .test(
// "fileSize",
// " The maximum size of profile picture is 15MB.",
// (files) => {
// //if u want to allow only certain file sizes
// try {
// if (files.length !== 0) {
// return files[0].size <= 15000000;
// }
// return true;
// } catch (error) {
// return false;
// }
// }
// )
.optional(),
// .test("file_formate", "Image file has unsupported format.", (files) => {
// // // console.log(files[0].type)
// const SUPPORTED_FORMATS = [
// "image/jpeg",
// "image/png",
// "image/jpg",
// "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;
// }
// })
});