From 5c415f9b71bed313fddec00846d492bfccdb7198 Mon Sep 17 00:00:00 2001
From: siddheshmorewdi <siddhesh.more@wdimails.com>
Date: Wed, 22 May 2024 15:40:19 +0530
Subject: [PATCH] usecase updated

---
 .../BlogsAndArticles/AddBlogsAndArticles.jsx  |  28 +-
 src/Pages/News/AddNews.jsx                    |   1 +
 src/Pages/Usecase/AddUseCase.jsx              | 562 ++++++++++++++++++
 src/Pages/Usecase/Usecase.jsx                 |   6 +-
 src/Pages/Videos/AddVideos.jsx                |   2 +-
 src/Pages/Whitepapers/AddWhitepapers.jsx      |   1 -
 src/Routes/Routes.js                          |   3 +-
 src/Validations/Validations.js                |  54 ++
 8 files changed, 649 insertions(+), 8 deletions(-)
 create mode 100644 src/Pages/Usecase/AddUseCase.jsx

diff --git a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
index 947880d..3a09c8c 100644
--- a/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
+++ b/src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
@@ -45,6 +45,11 @@ const AddBlogsAndArticles = () => {
   const [smallImageData, setSmallImageData] = useState(null);
   const [chips, setChips] = useState([]);
   const [value, setValue] = useState("");
+  const [metaDescription, setMetaDescription] = useState("");
+
+  const handleDescriptionChange = (e) => {
+    setMetaDescription(e.target.value);
+  };
 
   const {
     register,
@@ -370,13 +375,32 @@ const AddBlogsAndArticles = () => {
               <Textarea
                 rows={4}
                 {...register("meta_description")}
+                onChange={handleDescriptionChange}
                 placeholder="Blog description"
                 className="web-text-medium"
+                errorBorderColor="crimson"
+                isInvalid={metaDescription.length > 160}
                 size="sm"
               />
-              <FormHelperText className="web-text-small">
-                Please share proper linked in link here.
+  
+              <FormHelperText
+                color={
+                  metaDescription.length > 160
+                    ? "red"
+                    : metaDescription.length > 100
+                    ? "crimson"
+                    : ""
+                }
+  
+                
+                fontWeight={""
+                }
+                className="web-text-small"
+              >
+                If discription crosses 160 characters it will cause problem in SEO
+                optimisation.you have entered {metaDescription.length} characters
               </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 " />{" "}
diff --git a/src/Pages/News/AddNews.jsx b/src/Pages/News/AddNews.jsx
index 2a87649..511afe4 100644
--- a/src/Pages/News/AddNews.jsx
+++ b/src/Pages/News/AddNews.jsx
@@ -372,6 +372,7 @@ const AddNews = () => {
               }}
               type="submit"
               size="sm"
+              rounded={'sm'}
             >
               Create
             </Button>
diff --git a/src/Pages/Usecase/AddUseCase.jsx b/src/Pages/Usecase/AddUseCase.jsx
new file mode 100644
index 0000000..fde0c11
--- /dev/null
+++ b/src/Pages/Usecase/AddUseCase.jsx
@@ -0,0 +1,562 @@
+import {
+  Box,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Text,
+  Stack,
+  Textarea,
+  Heading,
+  Button,
+  useToast,
+  Divider,
+  Image,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import fallbackImage from "../../assets/ultp-fallback-img.webp";
+import { TiWarning } from "react-icons/ti";
+
+import { motion } from "framer-motion";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import {
+  addCommunityBannerSchema,
+  addCommunitySchema,
+  addNews,
+  addUsecase,
+} from "../../Validations/Validations";
+import {
+  useCreateCommunityBannerMutation,
+  useCreateCommunityMutation,
+  useCreateNewsMutation,
+  useCreateUsecaseMutation,
+  useGetCommunityQuery,
+} from "../../Services/api.service";
+import { useNavigate } from "react-router-dom";
+import Loader01 from "../../Components/Loaders/Loader01";
+import Header from "../../Components/Header";
+import ReactQuill from "react-quill";
+import ToastBox from "../../Components/ToastBox";
+
+const AddUseCase = () => {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const [createUsecase] = useCreateUsecaseMutation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedImage, setSelectedImage] = useState(fallbackImage);
+  const [selectedIcon, setSelectedIcon] = useState(fallbackImage);
+  const [imageData, setImageData] = useState(null);
+  const [chips, setChips] = useState([]);
+  const [value, setValue] = useState("");
+  const [icon, setIcon] = useState(null);
+  const [iconData, setIconData] = useState(null);
+  const [metaDescription, setMetaDescription] = useState("");
+
+  const handleDescriptionChange = (e) => {
+    setMetaDescription(e.target.value);
+  };
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue: setUseCaseValue,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(addUsecase),
+  });
+
+  const onSubmit = async (data) => {
+    setUseCaseValue("content", value);
+    console.log(data);
+
+    const formData = new FormData();
+
+    // Append simple fields
+    formData.append("title", data.title);
+    formData.append("meta_description", data.meta_description);
+    formData.append("content", data.content);
+
+    if (data.banner_image[0]) {
+      formData.append("banner_image", data.banner_image[0]);
+    }
+
+    if (data.icon[0]) {
+      formData.append("icon", data.icon[0]);
+    }
+
+    Array.from(data.attachment).forEach((file, index) => {
+      formData.append(`attachment`, file);
+    });
+
+    // Log formData entries
+    for (let [key, value] of formData.entries()) {
+      console.log(`${key}: ${value}`);
+    }
+
+    try {
+      // Trigger the mutation
+      createUsecase(formData)
+        .then((response) => {
+          // Handle the response here
+          console.log("Mutation response:", response?.data?.statusCode);
+          console.log("Mutation response:", response?.data?.message);
+
+          if (response?.data?.statusCode === 200) {
+            setIsLoading(false);
+            toast({
+              render: () => (
+                <ToastBox
+                  status={"success"}
+                  message={response?.data?.message}
+                />
+              ),
+            });
+            reset();
+            navigate("/usecase");
+          } 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);
+    }
+  };
+
+  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 handleIconChange = (e) => {
+    const file = e.target.files[0];
+    setIconData(file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedIcon(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <Box
+      {...OPACITY_ON_LOAD}
+      w={"100%"}
+      h={"100vh"}
+      className="overflow-auto "
+      display={"flex"}
+      flexDirection={"column"}
+    >
+      <Header title={"Usecase"} />
+
+      <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">
+            Usecase Image
+          </span>
+          <span className="web-text-medium text-secondary mb-">
+            Below is the profile that will be displayed on the community page.
+          </span>
+
+          <Box className="d-flex w-100 justify-content-center flex-column align-items-center gap-3 pt-4 pb-4">
+            <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>
+
+          <Divider mt={-2} />
+
+          <Box className="d-flex w-100 justify-content-start flex-column align-items-center gap-3 ">
+            <Image
+              shadow={"md"}
+              rounded={"full"}
+              objectFit={"cover"}
+              w={40}
+              h={40}
+              src={selectedIcon}
+              alt="Selected Image"
+            />
+            {selectedIcon === fallbackImage || iconData === null ? (
+              ""
+            ) : (
+              <Box display={"flex"} flexDirection={"column"} w={"100%"}>
+                <span className="web-text-small">{iconData?.name}</span>
+                <span className="web-text-small text-secondary fst-italic">
+                  {(iconData?.size / (1024 * 1024)).toFixed(2)} mb
+                </span>
+              </Box>
+            )}
+            <Button
+              onClick={() => setSelectedIcon(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"
+              maxLength={24}
+            />
+            {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">
+              Description
+            </FormLabel>
+            <Textarea
+              {...register("meta_description")}
+              onChange={handleDescriptionChange}
+              placeholder="Description"
+              className="web-text-medium"
+              errorBorderColor="crimson"
+              isInvalid={metaDescription.length > 160}
+              size="sm"
+            />
+
+            <FormHelperText
+              color={
+                metaDescription.length > 160
+                  ? "red"
+                  : metaDescription.length > 100
+                  ? "crimson"
+                  : ""
+              }
+
+              
+              fontWeight={""
+              }
+              className="web-text-small"
+            >
+              If discription crosses 160 characters it will cause problem in SEO
+              optimisation.you have entered {metaDescription.length} characters
+            </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-5">
+            <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("banner_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.banner_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.banner_image.message}
+              </span>
+            )}
+            <FormHelperText className="web-text-small">
+              Maximum limit of image is 5mb.
+            </FormHelperText>
+          </FormControl>
+
+          <Divider mt={28} />
+
+          <FormControl isRequired className="mb-3">
+            <FormLabel className="web-text-large fw-bold rubix-text-dark">
+              Icon 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("icon")}
+                  type="file"
+                  height="100%"
+                  width="100%"
+                  position="absolute"
+                  top="0"
+                  left="0"
+                  opacity="0"
+                  aria-hidden="true"
+                  accept="image/*"
+                  onChange={handleIconChange}
+                  onDrop={handleIconChange}
+                  //   onDragEnter={startAnimation}
+                  //   onDragLeave={stopAnimation}
+                />
+              </Box>
+            </Box>
+
+            {errors.icon && (
+              <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.icon.message}
+              </span>
+            )}
+            <FormHelperText className="web-text-small">
+              Maximum limit of image is 5mb.
+            </FormHelperText>
+          </FormControl>
+
+          <FormControl isRequired className="mb-3 mt-5">
+            <FormLabel className="web-text-large fw-bold rubix-text-dark">
+              Content
+            </FormLabel>
+            <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">
+              Document
+            </FormLabel>
+            <input
+              type="file"
+              {...register("attachment")}
+              className="web-text-medium form-control rounded-1"
+              size="sm"
+              multiple={true}
+            />
+            {errors.attachment && (
+              <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.attachment.message}
+              </span>
+            )}
+          </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"
+              size="sm"
+              rounded={"sm"}
+            >
+              Create
+            </Button>
+          </Box>
+        </form>
+      </Box>
+    </Box>
+  );
+};
+
+export default AddUseCase;
diff --git a/src/Pages/Usecase/Usecase.jsx b/src/Pages/Usecase/Usecase.jsx
index 34e15dc..a297513 100644
--- a/src/Pages/Usecase/Usecase.jsx
+++ b/src/Pages/Usecase/Usecase.jsx
@@ -67,7 +67,7 @@ const Usecase = () => {
           console.log("Mutation response:", response?.data?.statusCode);
           console.log("Mutation response:", response?.data?.message);
 
-          if (response?.data?.statusCode === 200) {
+          if (response?.data?.statusCode === 201) {
             setDeleteIsLoading(false);
             setDeleteAlert(false);
           }
@@ -237,8 +237,8 @@ const Usecase = () => {
     <>
       <TabularView
         title={"Usecase"}
-        btnTitle={"Create videos"}
-        link={"/usecase/add-news"}
+        btnTitle={"Create usecase"}
+        link={"/usecase/add-usecase"}
         apiData={useCase}
         tableHeadRow={tableHeadRow}
         extractedArray={extractedArray}
diff --git a/src/Pages/Videos/AddVideos.jsx b/src/Pages/Videos/AddVideos.jsx
index bd2f4d8..7ac703c 100644
--- a/src/Pages/Videos/AddVideos.jsx
+++ b/src/Pages/Videos/AddVideos.jsx
@@ -213,7 +213,7 @@ const AddVideos = () => {
               placeholder="Duration"
               className="web-text-medium"
               size="sm"
-              type="number"
+              type="range"
             />
             {errors.duration && (
               <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
diff --git a/src/Pages/Whitepapers/AddWhitepapers.jsx b/src/Pages/Whitepapers/AddWhitepapers.jsx
index 825a901..8866da0 100644
--- a/src/Pages/Whitepapers/AddWhitepapers.jsx
+++ b/src/Pages/Whitepapers/AddWhitepapers.jsx
@@ -106,7 +106,6 @@ const AddWhitepapers = () => {
         
       <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">
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 46d01e2..6a48e45 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -51,6 +51,7 @@ import EcoBannerAdd from "../Pages/Banners/EcoBanner/EcoBannerAdd";
 import EcoBannerView from "../Pages/Banners/EcoBanner/EcoBannerView";
 import EcoBannerEdit from "../Pages/Banners/EcoBanner/EcoBannerEdit";
 import Usecase from "../Pages/Usecase/Usecase";
+import AddUseCase from "../Pages/Usecase/AddUseCase";
 
 export const RouteLink = [
   { path: "/", Component: UnderConstruction },
@@ -144,7 +145,7 @@ export const RouteLink = [
 
   // =============[ useCase ]================
   { path: "/usecase", Component: Usecase },
-  { path: "/usecase/add-events", Component: UnderConstruction },
+  { path: "/usecase/add-usecase", Component: AddUseCase },
   { path: "/usecase/view/:id", Component: UnderConstruction },
   { path: "/usecase/edit/:id", Component: UnderConstruction },
 ];
diff --git a/src/Validations/Validations.js b/src/Validations/Validations.js
index e0e5dd1..f91184d 100644
--- a/src/Validations/Validations.js
+++ b/src/Validations/Validations.js
@@ -370,3 +370,57 @@ export const addVideos = Yup.object().shape({
   duration: Yup.string().required("LinkedIn is required"),
   embeddedCode: Yup.string().required("LinkedIn is required"),
 });
+
+
+
+export const addUsecase = Yup.object().shape({
+  title: Yup.string().required("Name is required"),
+  meta_description: Yup.string().required("Description is required"),
+  content: Yup.string(),
+  banner_image: Yup
+    .mixed()
+    .required("Thumbnail is required")
+    .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;
+        }
+      }
+    ),
+    icon: Yup
+    .mixed()
+    .required("Icon is required")
+    .test("required", "You need to provide a file", (files) => {
+      if (files) return true;
+      return false;
+    })
+    .test(
+      "fileSize",
+      " The maximum size of profile picture is 15MB.",
+      (files) => {
+        try {
+          if (files.length !== 0) {
+            return files[0].size <= 15000000;
+          }
+          return true;
+        } catch (error) {
+          return false;
+        }
+      }
+    ),
+
+});
+