From 271f5635a0a9bfbd59f4c8f23d2a640b5b545d63 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 27 Jun 2023 17:11:30 +0100
Subject: [PATCH] Fixed Api Parameter, Banner Button Style and Slider header

---
 src/components/AddJob/AddJob.jsx              |  18 +-
 src/components/Cards/HomeBannerOffersCard.jsx |  10 +-
 .../MarketPlace/PopUp/MarketPopUp.jsx         |   8 +-
 src/components/UserHeader/CommonHead.jsx      |  60 ++---
 .../UserHeader/RecomendedSliders.jsx          | 246 +++++++++---------
 src/components/jobPopout/EditJobPopout.jsx    |   8 +-
 src/index.css                                 |   8 +-
 src/views/MarketPlacePage.jsx                 |   6 +-
 8 files changed, 186 insertions(+), 178 deletions(-)

diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index ce4ab72..111cd86 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -8,7 +8,7 @@ import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object().shape({
-  currency: Yup.string()
+  country: Yup.string()
     .min(1, "Minimum 3 characters")
     .max(25, "Maximum 25 characters")
     .required("Country is required"),
@@ -54,7 +54,7 @@ function AddJob({ popUpHandler, categories }) {
 
   let initialValues = {
     // initial values for formik
-    currency: "",
+    country: "",
     price: "",
     title: "",
     description: "",
@@ -103,6 +103,9 @@ function AddJob({ popUpHandler, categories }) {
             status: false,
             message: "Could not complete your request at the moment",
           });
+          setTimeout(() => {
+            popUpHandler();
+          }, 1500);
           return;
         }
         setRequestStatus({
@@ -133,7 +136,6 @@ function AddJob({ popUpHandler, categories }) {
     getUserCurrency();
   }, []);
 
-  console.log("Currency >> ", currency.data);
 
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
@@ -151,15 +153,15 @@ function AddJob({ popUpHandler, categories }) {
                   <div className="xl:flex xl:space-x-7 mb-[5px]">
                     <div className="field w-full mb-6 xl:mb-0">
                       <label
-                        htmlFor="currency"
+                        htmlFor="country"
                         className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
                       >
                         Currency
                       </label>
                       <select
-                        id="currency"
-                        name="currency"
-                        value={props.values.currency}
+                        id="country"
+                        name="country"
+                        value={props.values.country}
                         className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
@@ -278,7 +280,7 @@ function AddJob({ popUpHandler, categories }) {
                         role="group"
                         aria-labelledby="checked-group"
                       >
-                        {Object.entries(categories).map(([key, value]) => (
+                        {Object?.entries(categories).map(([key, value]) => (
                           <label
                             key={key}
                             className="flex gap-1 w-full items-center"
diff --git a/src/components/Cards/HomeBannerOffersCard.jsx b/src/components/Cards/HomeBannerOffersCard.jsx
index 15c16de..4ba0dad 100644
--- a/src/components/Cards/HomeBannerOffersCard.jsx
+++ b/src/components/Cards/HomeBannerOffersCard.jsx
@@ -23,20 +23,20 @@ export default function HomeBannerOffersCard(props) {
       }}
     >
       <div className="flex flex-col justify-between h-full">
-        <div className="content flex justify-between items-center mb-5">
+        <div className="content flex justify-between items-center">
           <div className="siderCardHeader">
             <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
               <span className="heroSilderTitle">{props.itemData.title}</span>
             </h1>
           </div>
         </div>
-        <div className="h-[233px]">
+        <div className="flex flex-col justify-around items-center flex-1">
           <div className="siderCardDescription">
             {props.itemData.description}
           </div>
-          <div className="siderCardButton">
-            [ {props.itemData.button_text} ]
-          </div>
+          <button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+             {props.itemData.button_text}
+          </button>
         </div>
       </div>
     </Link>
diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
index 4c08188..c4eb18d 100644
--- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx
+++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import ModalCom from "../../Helpers/ModalCom";
 import { toast } from "react-toastify";
-import { Form, Formik } from "formik";
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
@@ -106,6 +105,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
   // let addedIntDate = marketInt?.added?.split(" ")[0];
   let expireIntDate = marketInt?.expire?.split(" ")[0];
 
+  // let cleanedText = details?.job_description.replace(/&lt;/g, '<')
+  // .replace(/&gt;/g, '>')
+  // .replace(/&quot;/g, '"')
+  // .replace(/&amp;/g, '&')
+
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
diff --git a/src/components/UserHeader/CommonHead.jsx b/src/components/UserHeader/CommonHead.jsx
index 5cc775e..61c0ac1 100644
--- a/src/components/UserHeader/CommonHead.jsx
+++ b/src/components/UserHeader/CommonHead.jsx
@@ -2,34 +2,36 @@ import React from "react";
 import { Link } from "react-router-dom";
 import RecomendedSliders from "./RecomendedSliders";
 
-export default function CommonHead({ className,commonHeadData }) {
-    return (
-        <div
-            className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-2 p-2 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
-                className || ""
-            }`}
-        >
-            {commonHeadData?.length > 0 && <RecomendedSliders bannerData={commonHeadData}  /> }
-            {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
-            {/*    /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
-            {/*    /!*    This is common head which will appear as needed , will take many shape*!/*/}
-            {/*    /!*</h1>*!/*/}
-            {/*    /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
-            {/*    /!*    some space for extra texts here*!/*/}
-            {/*    /!*</p>*!/*/}
-            {/*   */}
-            {/*</div>*/}
-            {/*<div className="flex-1 flex lg:justify-end">*/}
-            {/*    <div className="flex items-center space-x-5">*/}
-            {/*        <Link*/}
-            {/*            to="/mytask"*/}
-            {/*            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
-            {/*        >*/}
-            {/*           View Task*/}
-            {/*        </Link>*/}
+export default function CommonHead({ className, commonHeadData }) {
+  return (
+    <div
+      className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-2 p-2 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
+        className || ""
+      }`}
+    >
+      {commonHeadData?.length > 0 && (
+        <RecomendedSliders bannerData={commonHeadData} />
+      )}
+      {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
+      {/*    /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
+      {/*    /!*    This is common head which will appear as needed , will take many shape*!/*/}
+      {/*    /!*</h1>*!/*/}
+      {/*    /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
+      {/*    /!*    some space for extra texts here*!/*/}
+      {/*    /!*</p>*!/*/}
+      {/*   */}
+      {/*</div>*/}
+      {/*<div className="flex-1 flex lg:justify-end">*/}
+      {/*    <div className="flex items-center space-x-5">*/}
+      {/*        <Link*/}
+      {/*            to="/mytask"*/}
+      {/*            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
+      {/*        >*/}
+      {/*           View Task*/}
+      {/*        </Link>*/}
 
-            {/*    </div>*/}
-            {/*</div>*/}
-        </div>
-    );
+      {/*    </div>*/}
+      {/*</div>*/}
+    </div>
+  );
 }
diff --git a/src/components/UserHeader/RecomendedSliders.jsx b/src/components/UserHeader/RecomendedSliders.jsx
index dd999ae..cec4982 100644
--- a/src/components/UserHeader/RecomendedSliders.jsx
+++ b/src/components/UserHeader/RecomendedSliders.jsx
@@ -7,126 +7,128 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 import { Link } from "react-router-dom";
 
-export default function RecomendedSliders({ className,bannerData }) {
-    const settings = {
-        arrows: false,
-        dots: false,
-        infinite: bannerData.length > 4 ? true : false,
-        autoplay: true,
-        slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
-        slidesToScroll: 1,
-        responsive: [
-            {
-                breakpoint: 426,
-                settings: {
-                    infinite: bannerData.length > 2 ? true : false,
-                    slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
-                    slidesToScroll: 1,
-                },
-            },
-        ],
-    };
-    const sellSlider = useRef(null);
-    const buySlider = useRef(null);
-    const prevHandler = (value) => {
-        if (value === "sell") {
-            sellSlider.current.slickPrev();
-        }
-        if (value === "buy") {
-            buySlider.current.slickPrev();
-        }
-    };
-    const nextHandler = (value) => {
-        if (value === "sell") {
-            sellSlider.current.slickNext();
-        }
-        if (value === "buy") {
-            buySlider.current.slickNext();
-        }
-    };
-    return (
-        <>
-            {/*<div className="heading flex justify-between items-center mb-4">*/}
-            {/*    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
-            {/*        Top Seller*/}
-            {/*    </h1>*/}
-            {/*    <div className="slider-btns flex space-x-4">*/}
-            {/*        <button*/}
-            {/*            onClick={() => nextHandler("sell")}*/}
-            {/*            type="button"*/}
-            {/*            className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
-            {/*        >*/}
-            {/*            <Icons name="arrows" />*/}
-            {/*        </button>*/}
-            {/*        <button*/}
-            {/*            onClick={() => prevHandler("sell")}*/}
-            {/*            type="button"*/}
-            {/*            className="transform rotate-180"*/}
-            {/*        >*/}
-            {/*            <div className="  text-dark-gray dark:text-white">*/}
-            {/*                <svg*/}
-            {/*                    width="11"*/}
-            {/*                    height="19"*/}
-            {/*                    viewBox="0 0 11 19"*/}
-            {/*                    fill="none"*/}
-            {/*                    xmlns="http://www.w3.org/2000/svg"*/}
-            {/*                >*/}
-            {/*                    <path*/}
-            {/*                        d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
-            {/*                        stroke="url(#paint0_linear_220_23410)"*/}
-            {/*                        strokeWidth="2"*/}
-            {/*                        strokeLinecap="round"*/}
-            {/*                        strokeLinejoin="round"*/}
-            {/*                    />*/}
-            {/*                    <defs>*/}
-            {/*                        <linearGradient*/}
-            {/*                            id="paint0_linear_220_23410"*/}
-            {/*                            x1="9.09766"*/}
-            {/*                            y1="1.1499"*/}
-            {/*                            x2="-4.2474"*/}
-            {/*                            y2="7.96749"*/}
-            {/*                            gradientUnits="userSpaceOnUse"*/}
-            {/*                        >*/}
-            {/*                            <stop stopColor="#F539F8" />*/}
-            {/*                            <stop offset="0.416763" stopColor="#C342F9" />*/}
-            {/*                            <stop offset="1" stopColor="#5356FB" />*/}
-            {/*                        </linearGradient>*/}
-            {/*                    </defs>*/}
-            {/*                </svg>*/}
-            {/*            </div>*/}
-            {/*        </button>*/}
-            {/*    </div>*/}
-            {/*</div>*/}
-            <div className="slider-content">
-                <SliderCom settings={settings} selector={sellSlider}>
-                    {bannerData.map((item, index) => (
-                        <Link key={index} to={`/${item.link_path}`}>
-                            <div className="item">
-                                <div className={`commonHeaderSliderItem flex flex-col justify-between items-center ${item.short_style}`}>
-                                    {/* title */}
-                                    <div className="flex justify-center">
-                                        <p className="text-base font-bold   text-dark-gray dark:text-white">
-                                            {item.short_title}
-                                        </p>
-                                    </div>
-                                    {/* username */}
-                                    <div className="flex justify-center mb-1">
-                                        <p className="text-xs text-thin-light-gray">
-                                            {item.short_description}
-                                        </p>
-                                    </div>
-                                    {/* items */}
-                                    <div className="flex justify-center">
-                                        <div className="flex space-x-1 items-center text-purple text-xs">
-                                            <span>{item.short_button_text}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </Link>
-                    ))}
-                </SliderCom>
-            </div>
-        </>
-    );
+export default function RecomendedSliders({ className, bannerData }) {
+  const settings = {
+    arrows: false,
+    dots: false,
+    infinite: bannerData.length > 4 ? true : false,
+    autoplay: true,
+    slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 426,
+        settings: {
+          infinite: bannerData.length > 2 ? true : false,
+          slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+  const sellSlider = useRef(null);
+  const buySlider = useRef(null);
+  const prevHandler = (value) => {
+    if (value === "sell") {
+      sellSlider.current.slickPrev();
+    }
+    if (value === "buy") {
+      buySlider.current.slickPrev();
+    }
+  };
+  const nextHandler = (value) => {
+    if (value === "sell") {
+      sellSlider.current.slickNext();
+    }
+    if (value === "buy") {
+      buySlider.current.slickNext();
+    }
+  };
+  return (
+    <>
+      {/*<div className="heading flex justify-between items-center mb-4">*/}
+      {/*    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
+      {/*        Top Seller*/}
+      {/*    </h1>*/}
+      {/*    <div className="slider-btns flex space-x-4">*/}
+      {/*        <button*/}
+      {/*            onClick={() => nextHandler("sell")}*/}
+      {/*            type="button"*/}
+      {/*            className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
+      {/*        >*/}
+      {/*            <Icons name="arrows" />*/}
+      {/*        </button>*/}
+      {/*        <button*/}
+      {/*            onClick={() => prevHandler("sell")}*/}
+      {/*            type="button"*/}
+      {/*            className="transform rotate-180"*/}
+      {/*        >*/}
+      {/*            <div className="  text-dark-gray dark:text-white">*/}
+      {/*                <svg*/}
+      {/*                    width="11"*/}
+      {/*                    height="19"*/}
+      {/*                    viewBox="0 0 11 19"*/}
+      {/*                    fill="none"*/}
+      {/*                    xmlns="http://www.w3.org/2000/svg"*/}
+      {/*                >*/}
+      {/*                    <path*/}
+      {/*                        d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
+      {/*                        stroke="url(#paint0_linear_220_23410)"*/}
+      {/*                        strokeWidth="2"*/}
+      {/*                        strokeLinecap="round"*/}
+      {/*                        strokeLinejoin="round"*/}
+      {/*                    />*/}
+      {/*                    <defs>*/}
+      {/*                        <linearGradient*/}
+      {/*                            id="paint0_linear_220_23410"*/}
+      {/*                            x1="9.09766"*/}
+      {/*                            y1="1.1499"*/}
+      {/*                            x2="-4.2474"*/}
+      {/*                            y2="7.96749"*/}
+      {/*                            gradientUnits="userSpaceOnUse"*/}
+      {/*                        >*/}
+      {/*                            <stop stopColor="#F539F8" />*/}
+      {/*                            <stop offset="0.416763" stopColor="#C342F9" />*/}
+      {/*                            <stop offset="1" stopColor="#5356FB" />*/}
+      {/*                        </linearGradient>*/}
+      {/*                    </defs>*/}
+      {/*                </svg>*/}
+      {/*            </div>*/}
+      {/*        </button>*/}
+      {/*    </div>*/}
+      {/*</div>*/}
+      <div className="slider-content">
+        <SliderCom settings={settings} selector={sellSlider}>
+          {bannerData.map((item, index) => (
+            <Link key={index} to={`/${item.link_path}`}>
+              <div className="item">
+                <div
+                  className={`commonHeaderSliderItem flex gap-1 flex-col justify-between items-center ${item.short_style}`}
+                >
+                  {/* title */}
+                  <div className="flex justify-center items-center text-center">
+                    <p className="text-base font-bold   text-dark-gray dark:text-white">
+                      {item.short_title}
+                    </p>
+                  </div>
+                  {/* username */}
+                  <div className="flex justify-center mb-1">
+                    <p className="text-xs text-thin-light-gray text-justify">
+                      {item.short_description}
+                    </p>
+                  </div>
+                  {/* items */}
+                  <div className="flex justify-center">
+                    <div className="flex space-x-1 items-center text-purple text-xs">
+                      <span>{item.short_button_text}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </SliderCom>
+      </div>
+    </>
+  );
 }
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index 67e66ce..42ef727 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/src/components/jobPopout/EditJobPopout.jsx
@@ -10,7 +10,7 @@ import { tableReload } from "../../store/TableReloads";
 import { useDispatch } from "react-redux";
 
 const validationSchema = Yup.object().shape({
-  currency: Yup.string()
+  country: Yup.string()
     .min(1, "Minimum 3 characters")
     .max(25, "Maximum 25 characters")
     .required("Country is required"),
@@ -60,7 +60,7 @@ const EditJobPopOut = ({
 
   let initialValues = {
     // initial values for formik
-    currency: details.currency,
+    country: details.currency,
     price: details?.price,
     title: details?.title,
     description: details?.description,
@@ -152,8 +152,8 @@ const EditJobPopOut = ({
                           inputBg="bg-slate-100"
                           inputClass="input-curve lg border border-light-purple"
                           type="text"
-                          name="currency"
-                          value={props.values.currency}
+                          name="country"
+                          value={props.values.country}
                           inputHandler={props.handleChange}
                           blurHandler={props.handleBlur}
                           disable={true}
diff --git a/src/index.css b/src/index.css
index 2f8c5ea..9fa87c5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,12 +66,12 @@
   width: 100%;
   text-align: center;
 }
-.commonHeaderSliderItem{
+.commonHeaderSliderItem {
   background-color: aliceblue;
   border-radius: 10px;
-  margin: 0px 5px 0px 5px;
-  height: 95px;
-  padding: 5px;
+  height: 100px;
+  margin: 0 5px;
+  padding: 10px;
 }
 
 .short_style{
diff --git a/src/views/MarketPlacePage.jsx b/src/views/MarketPlacePage.jsx
index d82c5a6..ee6ebbe 100644
--- a/src/views/MarketPlacePage.jsx
+++ b/src/views/MarketPlacePage.jsx
@@ -3,13 +3,11 @@ import MarketPlace from "../components/MarketPlace";
 import { useSelector } from "react-redux";
 
 export default function MarketPlacePage() {
-
-  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
   return (
     <>
-      <MarketPlace
-          commonHeadData={commonHeadBanner?.result_list} />
+      <MarketPlace commonHeadData={commonHeadBanner?.result_list} />
     </>
   );
 }