From cba14f426551b31df902493779099118e050ef82 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Wed, 28 Jun 2023 02:01:53 +0100
Subject: [PATCH] Added error borders

---
 src/components/AddJob/AddJob.jsx              | 45 +++++++++++--------
 .../Helpers/Inputs/InputCom/index.jsx         | 33 +++++++-------
 src/components/jobPopout/EditJobPopout.jsx    | 28 +++++++-----
 3 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index 606ab67..33bfc23 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from "react";
+import { Field, Form, Formik } from "formik";
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import usersService from "../../services/UsersService";
-import { useDispatch } from "react-redux";
-import { tableReload } from "../../store/TableReloads";
-import { Field, Form, Formik } from "formik";
-import * as Yup from "yup";
 
 const validationSchema = Yup.object().shape({
   country: Yup.string()
@@ -137,7 +137,6 @@ function AddJob({ popUpHandler, categories }) {
     getUserCurrency();
   }, []);
 
-
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -163,7 +162,11 @@ function AddJob({ popUpHandler, categories }) {
                         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`}
+                        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 ${
+                          props.errors.country && props.touched.country
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        }`}
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
@@ -259,7 +262,11 @@ function AddJob({ popUpHandler, categories }) {
                       <textarea
                         id="Job Delivery Details"
                         rows="5"
-                        className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] border border-[#dce4e9] rounded-[10px]`}
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                          props.errors.job_detail && props.touched.job_detail
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        } rounded-[10px]`}
                         style={{ resize: "none" }}
                         name="job_detail"
                         value={props.values.job_detail}
@@ -294,16 +301,13 @@ function AddJob({ popUpHandler, categories }) {
                             <span className="text-[13.975px]">{value}</span>
                           </label>
                         ))}
+                        <span className="h-5 text-sm italic text-[#cf3917]">
+                          {props.errors.category &&
+                            props.touched.category &&
+                            "please select a category"}
+                        </span>
                       </div>
                     </div>
-
-                    {/* <div className={`${!props.errors && "invisible"} h-5`}>
-                      {props.errors.job_detail && props.touched.job_detail && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.job_detail}
-                        </p>
-                      )}
-                    </div> */}
                   </div>
 
                   <div className="field w-full mb-[5px]">
@@ -322,7 +326,12 @@ function AddJob({ popUpHandler, categories }) {
                     <Field
                       component="select"
                       name="timeline_days"
-                      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 ${
+                        props.errors.timeline_days &&
+                        props.touched.timeline_days
+                          ? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
+                          : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                      }`}
                       value={props.values.timeline_days}
                     >
                       <option value="">Select Duration</option>
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 7a7685c..8723171 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
-import Icons from "../../Icons";
 import { Link } from "react-router-dom";
+import Icons from "../../Icons";
 
 export default function InputCom({
   label,
@@ -22,7 +22,7 @@ export default function InputCom({
   spanTag,
   inputBg,
   direction,
-  errorBorder
+  errorBorder,
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -41,8 +41,8 @@ export default function InputCom({
   // for Patterns
   const inputPatterns = () => {
     const inputConfig = inputConfigs[inputRef?.current?.name]?.pattern;
-    return inputConfig || ""
-  }
+    return inputConfig || "";
+  };
   return (
     <div className={`input-com ${parentClass}`}>
       <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
@@ -52,16 +52,16 @@ export default function InputCom({
             htmlFor={name}
           >
             {label}
-            {spanTag && 
-              spanTag == '*' ?
+            {spanTag && spanTag == "*" ? (
               <span className="text-red-700 text-sm tracking-wide">
-                {' '}{spanTag}
+                {" "}
+                {spanTag}
               </span>
-              :
+            ) : (
               <span className="text-green-700 text-sm tracking-wide">
                 {spanTag}
               </span>
-            }
+            )}
           </label>
         )}
         {forgotPassword && (
@@ -74,7 +74,11 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border ${errorBorder ? "border-red-500 border-[0.5px] animate-shake" : "border border-[#f5f8fa] dark:border-[#5e6278]"} w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+        className={`input-wrapper border ${
+          errorBorder
+            ? "border-[#ff0a0a63] border-[2px] shadow-red-500 animate-shake"
+            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+        } w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
       >
         <input
           placeholder={placeholder}
@@ -96,11 +100,9 @@ export default function InputCom({
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
-            {
-              iconName.split(' ').map((item, index)=>(
-                <Icons key={index} name={item} />
-              ))
-            }
+            {iconName.split(" ").map((item, index) => (
+              <Icons key={index} name={item} />
+            ))}
           </div>
         )}
         {passIcon && (
@@ -126,6 +128,7 @@ const inputConfigs = {
   province: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
   city: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
   amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
+  description: { minLength: 5, maxLength: 250 },
 };
 
 /* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index aedbe76..6d68a53 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/src/components/jobPopout/EditJobPopout.jsx
@@ -61,7 +61,7 @@ const EditJobPopOut = ({
   let initialValues = {
     // initial values for formik
     country: details.currency,
-    price: details?.price,
+    price: details?.price * 0.01,
     title: details?.title,
     description: details?.description,
     job_detail: details?.job_detail,
@@ -228,7 +228,11 @@ const EditJobPopOut = ({
                         <textarea
                           id="Job Delivery Details"
                           rows="5"
-                          className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] border border-[#dce4e9] rounded-[10px]`}
+                          className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                            props.errors.job_detail && props.touched.job_detail
+                              ? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
+                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                          } rounded-[10px]`}
                           style={{ resize: "none" }}
                           name="job_detail"
                           value={props.values.job_detail}
@@ -263,16 +267,13 @@ const EditJobPopOut = ({
                               <span className="text-[13.975px]">{value}</span>
                             </label>
                           ))}
+                          <span className="h-5 text-sm italic text-[#cf3917]">
+                            {props.errors.category &&
+                              props.touched.category &&
+                              "please select a category"}
+                          </span>
                         </div>
                       </div>
-
-                      {/* <div className={`${!props.errors && "invisible"} h-5`}>
-                      {props.errors.job_detail && props.touched.job_detail && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.job_detail}
-                        </p>
-                      )}
-                    </div> */}
                     </div>
 
                     <div className="field w-full mb-6">
@@ -293,7 +294,12 @@ const EditJobPopOut = ({
                       <Field
                         component="select"
                         name="timeline_days"
-                        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 ${
+                          props.errors.timeline_days &&
+                          props.touched.timeline_days
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        }`}
                         value={props.values.timeline_days}
                       >
                         <option value="">Select Duration</option>