import React, { useCallback, useEffect, useState } from "react"; import { Card, Col, Container, Modal, Row, Dropdown, Form, } from "react-bootstrap"; import BreadCrumb from "../../../Components/Common/BreadCrumb"; import { createSelector } from "reselect"; import { useDispatch, useSelector } from "react-redux"; import { useFormik } from "formik"; import * as Yup from "yup"; import { Head, Link } from "@inertiajs/react"; import { onAddCategoryList, onGetCategoryList } from "../../../slices/jobs/thunk"; import Layout from "../../../Layouts"; const JobCategories = () => { const dispatch: any = useDispatch(); const profiledropdownData = createSelector( (state: any) => state.Jobs, (user: any) => ({ categoryList: user.categoryList }) ); // Inside your component const { categoryList }: any = useSelector(profiledropdownData); useEffect(() => { dispatch(onGetCategoryList()); }, [dispatch]); // validation const [addvalue, setAddValue] = useState(null); const [cateData, setCateData] = useState(false); const modalToggle = useCallback(() => { if (cateData) { setCateData(false); setAddValue(null); } else { setCateData(true); } }, [cateData]); const handleButtonClicks = () => { validation.resetForm(); setAddValue(""); setCateData(!cateData) modalToggle(); }; const validation: any = useFormik({ // enableReinitialize : use this flag when initial values needs to be changed enableReinitialize: true, initialValues: { lable: (addvalue && addvalue.lable) || '', position: (addvalue && addvalue.position) || '', iconName: (addvalue && addvalue.iconName) || '', }, validationSchema: Yup.object({ lable: Yup.string().required("Please Enter Category Label."), position: Yup.string().required("Please Enter Positions"), iconName: Yup.string().required("Please Enter Icon") }), onSubmit: (values) => { const categorisedList = { id: (Math.floor(Math.random() * (30 - 20)) + 20).toString(), lable: values["lable"], position: values["position"], iconName: values["iconName"] }; // save new Folder dispatch(onAddCategoryList(categorisedList)); validation.resetForm(); modalToggle() }, }); // search const [categoryData, setCategoryData] = useState([]) const handleSearch = (ele: any) => { let item = ele.value; if (item === "All Tasks") { setCategoryData([...categoryList]); } else { handleSearchData({ data: categoryList, item: item, setState: setCategoryData }) } } const handleSearchData = ({ data, item, setState }: any) => { setState( data.filter((search: any) => Object.values(search).some( (field) => typeof field === 'string' && field.toLowerCase().includes(item?.toLowerCase()), ) ) ) } return (
handleSearch(e.target)} />
  • All
  • Last Week
  • Last Month
  • Last Year
    • {(categoryList || []).map((item: any, key: any) => (
    {item.lable}

    {item.position} Position

         ))}     {categoryList.length < 0 &&
    } setCateData(!cateData)} id="createFolderModal" dialogClassName="zoomIn" centered tabIndex={-1} >
    Add Category
    { e.preventDefault(); validation.handleSubmit(); return false; }} >
    {validation.touched.iconName && validation.errors.iconName ? ( {validation.errors.iconName} ) : null}
    {validation.touched.lable && validation.errors.lable ? ( {validation.errors.lable} ) : null}
    {validation.touched.position && validation.errors.position ? ( {validation.errors.position} ) : null}
    ); }; JobCategories.layout = (page: any) => export default JobCategories;