From 34b04eedc8505d42779723b7cba6648bb8740bc8 Mon Sep 17 00:00:00 2001
From: siddheshmorewdi <siddhesh.more@wdimails.com>
Date: Tue, 21 May 2024 17:38:38 +0530
Subject: [PATCH] Blog bug fie

---
 src/Components/ChipSelector/ChipSelector.jsx  |   5 +-
 .../BlogsAndArticles/AddBlogsAndArticles.jsx  |  94 +++---
 .../BlogsAndArticles/EditBlogsAndArticles.jsx | 306 +++++++++---------
 src/Validations/Validations.js                |   2 +-
 4 files changed, 203 insertions(+), 204 deletions(-)

diff --git a/src/Components/ChipSelector/ChipSelector.jsx b/src/Components/ChipSelector/ChipSelector.jsx
index 1363f8b..f249e16 100644
--- a/src/Components/ChipSelector/ChipSelector.jsx
+++ b/src/Components/ChipSelector/ChipSelector.jsx
@@ -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>
diff --git a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
index d6f65d0..014b8c9 100644
--- a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
+++ b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
@@ -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
diff --git a/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx
index 5d4350d..3e5a8e7 100644
--- a/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx
+++ b/src/Pages/BlogsAndArticles/EditBlogsAndArticles.jsx
@@ -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>
diff --git a/src/Validations/Validations.js b/src/Validations/Validations.js
index e0e5dd1..bb0ef5b 100644
--- a/src/Validations/Validations.js
+++ b/src/Validations/Validations.js
@@ -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"),
 });