mirror of
https://github.com/WDI-Ideas/rubix-admin-panel.git
synced 2026-04-27 21:05:51 +00:00
Blog bug fie
This commit is contained in:
@@ -8,10 +8,11 @@ const ChipSelector = ({chips, setChips}) => {
|
||||
console.log(chips);
|
||||
|
||||
function removeChip(chipToRemove) {
|
||||
const updatedChips = chips.filter((chip) => chip !== chipToRemove);
|
||||
const updatedChips = chips.filter((chip, index) => index !== chipToRemove);
|
||||
setChips(updatedChips);
|
||||
}
|
||||
|
||||
|
||||
function handlePressEnter(e) {
|
||||
if (e.key === "Enter") e.preventDefault();
|
||||
if (e.key !== "Enter" || !text) return;
|
||||
@@ -50,7 +51,7 @@ const ChipSelector = ({chips, setChips}) => {
|
||||
{chips?.map((chip, i) => (
|
||||
<Tag key={i} size="sm" rounded="sm" variant='solid' colorScheme='teal'>
|
||||
<TagLabel className="text-uppercase">{chip}</TagLabel>
|
||||
<TagCloseButton onClick={() => removeChip(chip)} />
|
||||
<TagCloseButton onClick={() => removeChip(i)} />
|
||||
</Tag>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
@@ -64,7 +64,7 @@ const AddBlogsAndArticles = () => {
|
||||
const formData = new FormData();
|
||||
formData.append("author_name", data.author_name);
|
||||
formData.append("author_designation", data.author_designation);
|
||||
formData.append("meta_description", data.meta_description);
|
||||
// formData.append("meta_description", data.meta_description);
|
||||
formData.append("title", data.title);
|
||||
formData.append("category", data.category);
|
||||
formData.append("summary", data.summary);
|
||||
@@ -337,51 +337,7 @@ const AddBlogsAndArticles = () => {
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog description
|
||||
</FormLabel>
|
||||
|
||||
<Textarea
|
||||
rows={4}
|
||||
{...register("meta_description")}
|
||||
placeholder="Blog description"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
<FormHelperText className="web-text-small">
|
||||
Please share proper linked in link here.
|
||||
</FormHelperText>
|
||||
{errors.meta_description && (
|
||||
<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.meta_description.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog content
|
||||
</FormLabel>
|
||||
{/* <Textarea
|
||||
rows={4}
|
||||
{...register("content")}
|
||||
placeholder="content link"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/> */}
|
||||
<ReactQuill
|
||||
className="rounded-3"
|
||||
theme="snow"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
<FormHelperText className="web-text-small">
|
||||
Please share proper linked in link here.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
@@ -405,6 +361,52 @@ const AddBlogsAndArticles = () => {
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
|
||||
{/* <FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog description
|
||||
</FormLabel>
|
||||
|
||||
<Textarea
|
||||
rows={4}
|
||||
{...register("meta_description")}
|
||||
placeholder="Blog description"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
<FormHelperText className="web-text-small">
|
||||
Please share proper linked in link here.
|
||||
</FormHelperText>
|
||||
{errors.meta_description && (
|
||||
<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.meta_description.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl> */}
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog content
|
||||
</FormLabel>
|
||||
{/* <Textarea
|
||||
rows={4}
|
||||
{...register("content")}
|
||||
placeholder="content link"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/> */}
|
||||
<ReactQuill
|
||||
className="rounded-3"
|
||||
theme="snow"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
<FormHelperText className="web-text-small">
|
||||
Please share proper linked in link here.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<FormControl className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Tags
|
||||
|
||||
@@ -46,9 +46,7 @@ const EditBlogsAndArticles = () => {
|
||||
useState(fallbackImageLarge);
|
||||
const [largeImageData, setLargeImageData] = useState({});
|
||||
const [smallImageData, setSmallImageData] = useState({});
|
||||
const [chips, setChips] = useState(
|
||||
blog?.tags?.map((tagObject) => tagObject.tag)
|
||||
);
|
||||
const [chips, setChips] = useState();
|
||||
|
||||
console.log(blog?.tags?.map((tagObject) => tagObject.tag));
|
||||
|
||||
@@ -77,6 +75,8 @@ const EditBlogsAndArticles = () => {
|
||||
},
|
||||
});
|
||||
|
||||
console.log(blog?.tags);
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.data) {
|
||||
setSelectedImage(`https://rubix.betadelivery.com/${blog?.profile_image}`);
|
||||
@@ -85,12 +85,14 @@ const EditBlogsAndArticles = () => {
|
||||
);
|
||||
setValue("author_name", blog?.author_name);
|
||||
setValue("author_designation", blog?.author_designation);
|
||||
setValue("meta_description", blog?.meta_description);
|
||||
// setValue("meta_description", blog?.meta_description);
|
||||
setValue("title", blog?.title);
|
||||
setValue("category", blog?.category?.blog_category);
|
||||
setValue("summary", blog?.summary);
|
||||
setValue("content", blog?.content);
|
||||
setValue("tags", blog?.tags);
|
||||
setValueQuill(blog?.content);
|
||||
setChips(blog?.tags?.map((tagObject) => tagObject.tag));
|
||||
}
|
||||
}, [data, blog, setValue]);
|
||||
|
||||
@@ -99,7 +101,7 @@ const EditBlogsAndArticles = () => {
|
||||
const formData = new FormData();
|
||||
formData.append("author_name", data.author_name);
|
||||
formData.append("author_designation", data.author_designation);
|
||||
formData.append("meta_description", data.meta_description);
|
||||
// formData.append("meta_description", data.meta_description);
|
||||
formData.append("title", data.title);
|
||||
formData.append("category", data.category);
|
||||
formData.append("summary", data.summary);
|
||||
@@ -136,7 +138,10 @@ const EditBlogsAndArticles = () => {
|
||||
setIsLoading01(false);
|
||||
toast({
|
||||
render: () => (
|
||||
<ToastBox status={"success"} message={response?.data?.message} />
|
||||
<ToastBox
|
||||
status={"success"}
|
||||
message={response?.data?.message}
|
||||
/>
|
||||
),
|
||||
});
|
||||
reset();
|
||||
@@ -180,6 +185,8 @@ const EditBlogsAndArticles = () => {
|
||||
}
|
||||
};
|
||||
|
||||
console.log(chips);
|
||||
|
||||
if (isLoading) {
|
||||
return <FullscreenLoaders />;
|
||||
}
|
||||
@@ -197,173 +204,162 @@ const EditBlogsAndArticles = () => {
|
||||
<form className="w-100" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column justify-content-between gap-2 pt-4">
|
||||
<Box
|
||||
flexDirection={'column'}
|
||||
display={'flex'}>
|
||||
<span
|
||||
className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog Info
|
||||
</span>
|
||||
|
||||
<span className="web-text-medium text-secondary">
|
||||
Select the platform for which you need to create this campaign.
|
||||
</span>
|
||||
<Box flexDirection={"column"} display={"flex"}>
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog Info
|
||||
</span>
|
||||
|
||||
<span className="web-text-medium text-secondary">
|
||||
Select the platform for which you need to create this campaign.
|
||||
</span>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
flexDirection={'column'}
|
||||
display={'flex'}>
|
||||
<Box flexDirection={"column"} display={"flex"}>
|
||||
<Divider />
|
||||
|
||||
<Divider />
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog's 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>
|
||||
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog's 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 w-100 p-2 justify-content-center flex-column align-items-center gap-3"
|
||||
>
|
||||
{false ? (
|
||||
<FormControl isRequired className="mb-3">
|
||||
{/* <FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
<Box
|
||||
boxSize="sm"
|
||||
className="d-flex w-100 p-2 justify-content-center flex-column align-items-center gap-3"
|
||||
>
|
||||
{false ? (
|
||||
<FormControl isRequired className="mb-3">
|
||||
{/* <FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Display profile
|
||||
</FormLabel> */}
|
||||
{/* <ImageDropBox /> */}
|
||||
{/* <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"
|
||||
h={220}
|
||||
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
|
||||
<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"
|
||||
h={220}
|
||||
className="pointer"
|
||||
>
|
||||
<Box position="relative" height="100%" width="100%">
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
flexDirection="column"
|
||||
>
|
||||
<span
|
||||
className="d-flex flex-column align-items-center pointer"
|
||||
spacing="1"
|
||||
<Stack
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
>
|
||||
<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"
|
||||
className="d-flex flex-column align-items-center pointer"
|
||||
spacing="1"
|
||||
>
|
||||
or click to upload
|
||||
<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>
|
||||
</span>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Input
|
||||
{...register("content_image_large")}
|
||||
type="file"
|
||||
height="100%"
|
||||
width="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
opacity="0"
|
||||
aria-hidden="true"
|
||||
accept="image/*"
|
||||
onChange={handleImageChangeLarge}
|
||||
onDrop={handleImageChangeLarge}
|
||||
// onDragEnter={startAnimation}
|
||||
// onDragLeave={stopAnimation}
|
||||
/>
|
||||
</Box>
|
||||
<Input
|
||||
{...register("content_image_large")}
|
||||
type="file"
|
||||
height="100%"
|
||||
width="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
opacity="0"
|
||||
aria-hidden="true"
|
||||
accept="image/*"
|
||||
onChange={handleImageChangeLarge}
|
||||
onDrop={handleImageChangeLarge}
|
||||
// onDragEnter={startAnimation}
|
||||
// onDragLeave={stopAnimation}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{errors.content_image_large && (
|
||||
<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.content_image_large.message}
|
||||
</span>
|
||||
)}
|
||||
<FormHelperText className="web-text-small">
|
||||
Maximum limit of image is 5mb.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
) : (
|
||||
<>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
w={500}
|
||||
h={240}
|
||||
src={selectedImageLarge}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
{selectedImageLarge === fallbackImageLarge ? (
|
||||
""
|
||||
) : (
|
||||
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
|
||||
<span className="web-text-small">
|
||||
{largeImageData?.name}
|
||||
{errors.content_image_large && (
|
||||
<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.content_image_large.message}
|
||||
</span>
|
||||
<span className="web-text-small text-secondary fst-italic">
|
||||
{(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
<FormHelperText className="web-text-small">
|
||||
Maximum limit of image is 5mb.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
) : (
|
||||
<>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
w={500}
|
||||
h={240}
|
||||
src={selectedImageLarge}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
{selectedImageLarge === fallbackImageLarge ? (
|
||||
""
|
||||
) : (
|
||||
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
|
||||
<span className="web-text-small">
|
||||
{largeImageData?.name}
|
||||
</span>
|
||||
<span className="web-text-small text-secondary fst-italic">
|
||||
{(largeImageData?.size / (1024 * 1024)).toFixed(2)} mb
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={() => setSelectedImageLarge(fallbackImageLarge)}
|
||||
backgroundColor="red.400"
|
||||
color={"whitesmoke"}
|
||||
transition={"0.5s"}
|
||||
_hover={{
|
||||
backgroundColor: "red.500",
|
||||
}}
|
||||
size="xs"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setSelectedImageLarge(fallbackImageLarge)}
|
||||
backgroundColor="red.400"
|
||||
color={"whitesmoke"}
|
||||
transition={"0.5s"}
|
||||
_hover={{
|
||||
backgroundColor: "red.500",
|
||||
}}
|
||||
size="xs"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
|
||||
<Box className="col-7 pt-4 p-4">
|
||||
@@ -389,7 +385,7 @@ const EditBlogsAndArticles = () => {
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
{/* <FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Blog description
|
||||
</FormLabel>
|
||||
@@ -410,7 +406,7 @@ const EditBlogsAndArticles = () => {
|
||||
{errors.meta_description.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
</FormControl> */}
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
@@ -777,7 +773,7 @@ const EditBlogsAndArticles = () => {
|
||||
size="sm"
|
||||
rounded={"sm"}
|
||||
>
|
||||
Save edit
|
||||
Save edit
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -85,7 +85,7 @@ export const addBlogSchema = Yup.object().shape({
|
||||
author_name: Yup.string().required("Author is required"),
|
||||
author_designation: Yup.string().required("Author designation is required"),
|
||||
title: Yup.string().required("Title is required"),
|
||||
meta_description: Yup.string().required("Description is required"),
|
||||
// meta_description: Yup.string().required("Description is required"),
|
||||
content: Yup.string(),
|
||||
summary: Yup.string().required("Summary is required"),
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user