WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Fixed Api Parameter, Banner Button Style and Slider header

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-06-27 17:11:30 +01:00
parent 5e5d953769
commit 271f5635a0
8 changed files with 186 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AddJob/AddJob.jsx
+10 -8
View File
@@ -8,7 +8,7 @@ import { Field, Form, Formik } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
currency: Yup.string() country: Yup.string()
.min(1, "Minimum 3 characters") .min(1, "Minimum 3 characters")
.max(25, "Maximum 25 characters") .max(25, "Maximum 25 characters")
.required("Country is required"), .required("Country is required"),
@@ -54,7 +54,7 @@ function AddJob({ popUpHandler, categories }) {
let initialValues = { let initialValues = {
// initial values for formik // initial values for formik
currency: "", country: "",
price: "", price: "",
title: "", title: "",
description: "", description: "",
@@ -103,6 +103,9 @@ function AddJob({ popUpHandler, categories }) {
status: false, status: false,
message: "Could not complete your request at the moment", message: "Could not complete your request at the moment",
}); });
setTimeout(() => {
popUpHandler();
}, 1500);
return; return;
} }
setRequestStatus({ setRequestStatus({
@@ -133,7 +136,6 @@ function AddJob({ popUpHandler, categories }) {
getUserCurrency(); getUserCurrency();
}, []); }, []);
console.log("Currency >> ", currency.data);
return ( return (
<div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between"> <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="xl:flex xl:space-x-7 mb-[5px]">
<div className="field w-full mb-6 xl:mb-0"> <div className="field w-full mb-6 xl:mb-0">
<label <label
htmlFor="currency" htmlFor="country"
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block" className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
> >
Currency Currency
</label> </label>
<select <select
id="currency" id="country"
name="currency" name="country"
value={props.values.currency} 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`} 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} onChange={props.handleChange}
onBlur={props.handleBlur} onBlur={props.handleBlur}
@@ -278,7 +280,7 @@ function AddJob({ popUpHandler, categories }) {
role="group" role="group"
aria-labelledby="checked-group" aria-labelledby="checked-group"
> >
{Object.entries(categories).map(([key, value]) => ( {Object?.entries(categories).map(([key, value]) => (
<label <label
key={key} key={key}
className="flex gap-1 w-full items-center" className="flex gap-1 w-full items-center"
src/components/Cards/HomeBannerOffersCard.jsx
+5 -5
View File
@@ -23,20 +23,20 @@ export default function HomeBannerOffersCard(props) {
}} }}
> >
<div className="flex flex-col justify-between h-full"> <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"> <div className="siderCardHeader">
<h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide"> <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
<span className="heroSilderTitle">{props.itemData.title}</span> <span className="heroSilderTitle">{props.itemData.title}</span>
</h1> </h1>
</div> </div>
</div> </div>
<div className="h-[233px]"> <div className="flex flex-col justify-around items-center flex-1">
<div className="siderCardDescription"> <div className="siderCardDescription">
{props.itemData.description} {props.itemData.description}
</div> </div>
<div className="siderCardButton"> <button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
[ {props.itemData.button_text} ] {props.itemData.button_text}
</div> </button>
</div> </div>
</div> </div>
</Link> </Link>
src/components/MarketPlace/PopUp/MarketPopUp.jsx
+6 -2
View File
@@ -1,7 +1,6 @@
import React, { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import ModalCom from "../../Helpers/ModalCom"; import ModalCom from "../../Helpers/ModalCom";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { Form, Formik } from "formik";
import usersService from "../../../services/UsersService"; import usersService from "../../../services/UsersService";
import LoadingSpinner from "../../Spinners/LoadingSpinner"; import LoadingSpinner from "../../Spinners/LoadingSpinner";
import { PriceFormatter } from "../../Helpers/PriceFormatter"; import { PriceFormatter } from "../../Helpers/PriceFormatter";
@@ -106,6 +105,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
// let addedIntDate = marketInt?.added?.split(" ")[0]; // let addedIntDate = marketInt?.added?.split(" ")[0];
let expireIntDate = marketInt?.expire?.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 ( return (
<ModalCom action={onClose} situation={situation} className="edit-popup"> <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"> <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">
src/components/UserHeader/CommonHead.jsx
+31 -29
View File
@@ -2,34 +2,36 @@ import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import RecomendedSliders from "./RecomendedSliders"; import RecomendedSliders from "./RecomendedSliders";
export default function CommonHead({ className,commonHeadData }) { export default function CommonHead({ className, commonHeadData }) {
return ( return (
<div <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={`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 || "" className || ""
}`} }`}
> >
{commonHeadData?.length > 0 && <RecomendedSliders bannerData={commonHeadData} /> } {commonHeadData?.length > 0 && (
{/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/} <RecomendedSliders bannerData={commonHeadData} />
{/* /!*<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*!/*/} {/*<div className="lg:w-8/12 w-full mb-8 lg:mb-0">*/}
{/* /!*</h1>*!/*/} {/* /!*<h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">*!/*/}
{/* /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/} {/* /!* This is common head which will appear as needed , will take many shape*!/*/}
{/* /!* some space for extra texts here*!/*/} {/* /!*</h1>*!/*/}
{/* /!*</p>*!/*/} {/* /!*<p className="text-base text-thin-light-gray tracking-wide">*!/*/}
{/* */} {/* /!* some space for extra texts here*!/*/}
{/*</div>*/} {/* /!*</p>*!/*/}
{/*<div className="flex-1 flex lg:justify-end">*/} {/* */}
{/* <div className="flex items-center space-x-5">*/} {/*</div>*/}
{/* <Link*/} {/*<div className="flex-1 flex lg:justify-end">*/}
{/* to="/mytask"*/} {/* <div className="flex items-center space-x-5">*/}
{/* className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/} {/* <Link*/}
{/* >*/} {/* to="/mytask"*/}
{/* View Task*/} {/* className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"*/}
{/* </Link>*/} {/* >*/}
{/* View Task*/}
{/* </Link>*/}
{/* </div>*/} {/* </div>*/}
{/*</div>*/} {/*</div>*/}
</div> </div>
); );
} }
src/components/UserHeader/RecomendedSliders.jsx
+124 -122
View File
@@ -7,126 +7,128 @@ import Icons from "../Helpers/Icons";
import SliderCom from "../Helpers/SliderCom"; import SliderCom from "../Helpers/SliderCom";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
export default function RecomendedSliders({ className,bannerData }) { export default function RecomendedSliders({ className, bannerData }) {
const settings = { const settings = {
arrows: false, arrows: false,
dots: false, dots: false,
infinite: bannerData.length > 4 ? true : false, infinite: bannerData.length > 4 ? true : false,
autoplay: true, autoplay: true,
slidesToShow: bannerData.length > 4 ? 4 : bannerData.length, slidesToShow: bannerData.length > 4 ? 4 : bannerData.length,
slidesToScroll: 1, slidesToScroll: 1,
responsive: [ responsive: [
{ {
breakpoint: 426, breakpoint: 426,
settings: { settings: {
infinite: bannerData.length > 2 ? true : false, infinite: bannerData.length > 2 ? true : false,
slidesToShow: bannerData.length > 2 ? 2 : bannerData.length, slidesToShow: bannerData.length > 2 ? 2 : bannerData.length,
slidesToScroll: 1, slidesToScroll: 1,
}, },
}, },
], ],
}; };
const sellSlider = useRef(null); const sellSlider = useRef(null);
const buySlider = useRef(null); const buySlider = useRef(null);
const prevHandler = (value) => { const prevHandler = (value) => {
if (value === "sell") { if (value === "sell") {
sellSlider.current.slickPrev(); sellSlider.current.slickPrev();
} }
if (value === "buy") { if (value === "buy") {
buySlider.current.slickPrev(); buySlider.current.slickPrev();
} }
}; };
const nextHandler = (value) => { const nextHandler = (value) => {
if (value === "sell") { if (value === "sell") {
sellSlider.current.slickNext(); sellSlider.current.slickNext();
} }
if (value === "buy") { if (value === "buy") {
buySlider.current.slickNext(); buySlider.current.slickNext();
} }
}; };
return ( return (
<> <>
{/*<div className="heading flex justify-between items-center mb-4">*/} {/*<div className="heading flex justify-between items-center mb-4">*/}
{/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/} {/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
{/* Top Seller*/} {/* Top Seller*/}
{/* </h1>*/} {/* </h1>*/}
{/* <div className="slider-btns flex space-x-4">*/} {/* <div className="slider-btns flex space-x-4">*/}
{/* <button*/} {/* <button*/}
{/* onClick={() => nextHandler("sell")}*/} {/* onClick={() => nextHandler("sell")}*/}
{/* type="button"*/} {/* type="button"*/}
{/* className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/} {/* className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"*/}
{/* >*/} {/* >*/}
{/* <Icons name="arrows" />*/} {/* <Icons name="arrows" />*/}
{/* </button>*/} {/* </button>*/}
{/* <button*/} {/* <button*/}
{/* onClick={() => prevHandler("sell")}*/} {/* onClick={() => prevHandler("sell")}*/}
{/* type="button"*/} {/* type="button"*/}
{/* className="transform rotate-180"*/} {/* className="transform rotate-180"*/}
{/* >*/} {/* >*/}
{/* <div className=" text-dark-gray dark:text-white">*/} {/* <div className=" text-dark-gray dark:text-white">*/}
{/* <svg*/} {/* <svg*/}
{/* width="11"*/} {/* width="11"*/}
{/* height="19"*/} {/* height="19"*/}
{/* viewBox="0 0 11 19"*/} {/* viewBox="0 0 11 19"*/}
{/* fill="none"*/} {/* fill="none"*/}
{/* xmlns="http://www.w3.org/2000/svg"*/} {/* xmlns="http://www.w3.org/2000/svg"*/}
{/* >*/} {/* >*/}
{/* <path*/} {/* <path*/}
{/* d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/} {/* d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"*/}
{/* stroke="url(#paint0_linear_220_23410)"*/} {/* stroke="url(#paint0_linear_220_23410)"*/}
{/* strokeWidth="2"*/} {/* strokeWidth="2"*/}
{/* strokeLinecap="round"*/} {/* strokeLinecap="round"*/}
{/* strokeLinejoin="round"*/} {/* strokeLinejoin="round"*/}
{/* />*/} {/* />*/}
{/* <defs>*/} {/* <defs>*/}
{/* <linearGradient*/} {/* <linearGradient*/}
{/* id="paint0_linear_220_23410"*/} {/* id="paint0_linear_220_23410"*/}
{/* x1="9.09766"*/} {/* x1="9.09766"*/}
{/* y1="1.1499"*/} {/* y1="1.1499"*/}
{/* x2="-4.2474"*/} {/* x2="-4.2474"*/}
{/* y2="7.96749"*/} {/* y2="7.96749"*/}
{/* gradientUnits="userSpaceOnUse"*/} {/* gradientUnits="userSpaceOnUse"*/}
{/* >*/} {/* >*/}
{/* <stop stopColor="#F539F8" />*/} {/* <stop stopColor="#F539F8" />*/}
{/* <stop offset="0.416763" stopColor="#C342F9" />*/} {/* <stop offset="0.416763" stopColor="#C342F9" />*/}
{/* <stop offset="1" stopColor="#5356FB" />*/} {/* <stop offset="1" stopColor="#5356FB" />*/}
{/* </linearGradient>*/} {/* </linearGradient>*/}
{/* </defs>*/} {/* </defs>*/}
{/* </svg>*/} {/* </svg>*/}
{/* </div>*/} {/* </div>*/}
{/* </button>*/} {/* </button>*/}
{/* </div>*/} {/* </div>*/}
{/*</div>*/} {/*</div>*/}
<div className="slider-content"> <div className="slider-content">
<SliderCom settings={settings} selector={sellSlider}> <SliderCom settings={settings} selector={sellSlider}>
{bannerData.map((item, index) => ( {bannerData.map((item, index) => (
<Link key={index} to={`/${item.link_path}`}> <Link key={index} to={`/${item.link_path}`}>
<div className="item"> <div className="item">
<div className={`commonHeaderSliderItem flex flex-col justify-between items-center ${item.short_style}`}> <div
{/* title */} className={`commonHeaderSliderItem flex gap-1 flex-col justify-between items-center ${item.short_style}`}
<div className="flex justify-center"> >
<p className="text-base font-bold text-dark-gray dark:text-white"> {/* title */}
{item.short_title} <div className="flex justify-center items-center text-center">
</p> <p className="text-base font-bold text-dark-gray dark:text-white">
</div> {item.short_title}
{/* username */} </p>
<div className="flex justify-center mb-1"> </div>
<p className="text-xs text-thin-light-gray"> {/* username */}
{item.short_description} <div className="flex justify-center mb-1">
</p> <p className="text-xs text-thin-light-gray text-justify">
</div> {item.short_description}
{/* items */} </p>
<div className="flex justify-center"> </div>
<div className="flex space-x-1 items-center text-purple text-xs"> {/* items */}
<span>{item.short_button_text}</span> <div className="flex justify-center">
</div> <div className="flex space-x-1 items-center text-purple text-xs">
</div> <span>{item.short_button_text}</span>
</div> </div>
</div> </div>
</Link> </div>
))} </div>
</SliderCom> </Link>
</div> ))}
</> </SliderCom>
); </div>
</>
);
} }
src/components/jobPopout/EditJobPopout.jsx
+4 -4
View File
@@ -10,7 +10,7 @@ import { tableReload } from "../../store/TableReloads";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
currency: Yup.string() country: Yup.string()
.min(1, "Minimum 3 characters") .min(1, "Minimum 3 characters")
.max(25, "Maximum 25 characters") .max(25, "Maximum 25 characters")
.required("Country is required"), .required("Country is required"),
@@ -60,7 +60,7 @@ const EditJobPopOut = ({
let initialValues = { let initialValues = {
// initial values for formik // initial values for formik
currency: details.currency, country: details.currency,
price: details?.price, price: details?.price,
title: details?.title, title: details?.title,
description: details?.description, description: details?.description,
@@ -152,8 +152,8 @@ const EditJobPopOut = ({
inputBg="bg-slate-100" inputBg="bg-slate-100"
inputClass="input-curve lg border border-light-purple" inputClass="input-curve lg border border-light-purple"
type="text" type="text"
name="currency" name="country"
value={props.values.currency} value={props.values.country}
inputHandler={props.handleChange} inputHandler={props.handleChange}
blurHandler={props.handleBlur} blurHandler={props.handleBlur}
disable={true} disable={true}
src/index.css
+4 -4
View File
@@ -66,12 +66,12 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.commonHeaderSliderItem{ .commonHeaderSliderItem {
background-color: aliceblue; background-color: aliceblue;
border-radius: 10px; border-radius: 10px;
margin: 0px 5px 0px 5px; height: 100px;
height: 95px; margin: 0 5px;
padding: 5px; padding: 10px;
} }
.short_style{ .short_style{
src/views/MarketPlacePage.jsx
+2 -4
View File
@@ -3,13 +3,11 @@ import MarketPlace from "../components/MarketPlace";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
export default function MarketPlacePage() { export default function MarketPlacePage() {
let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
return ( return (
<> <>
<MarketPlace <MarketPlace commonHeadData={commonHeadBanner?.result_list} />
commonHeadData={commonHeadBanner?.result_list} />
</> </>
); );
} }