Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | Rev 1593 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import { useEffect, useState } from "react";
3 
import { useForm } from "react-hook-form";
4 
import {axios} from "../../../utils";
5 
import Spinner from "../../../shared/loading-spinner/Spinner";
6 
import CompanyTemplate from "./companyTemplate/CompanyTemplate";
7 
import { connect } from "react-redux";
8 
import { addNotification } from "../../../redux/notification/notification.actions";
1592 steven 9 
import SearchList from "../../../components/SearchList";
1 www 10 
 
11 
const IWorkWith = (props) => {
12 
  // redux destructuring
13 
  const { addNotification } = props;
14 
 
15 
  // states
16 
  const [companies, setCompanies] = useState([]);
17 
  const [loading, setLoading] = useState(true);
18 
 
19 
  // React hook form
20 
  const { register, getValues } = useForm();
21 
 
22 
  let axiosThrottle = null;
23 
 
24 
  useEffect(() => {
25 
    fetchCompanies();
26 
    return () => {
27 
      clearTimeout(axiosThrottle);
28 
    };
29 
  }, []);
30 
 
31 
  const fetchCompanies = async (searchParam='') => {
32 
    setLoading(true);
33 
    await axios
34 
      .get(
35 
        "/company/i-work-with?search="+searchParam)
36 
      .then((response) => {
37 
        const resData = response.data;
38 
        if (resData.success) {
39 
          setCompanies(resData.data);
40 
        }
41 
      });
42 
    setLoading(false);
43 
  };
44 
 
45 
  const handleSearch = () => {
46 
    //  (getValues());
47 
    clearTimeout(axiosThrottle);
48 
    // setLoading(true);
49 
    const searchValue = getValues("search");
50 
    axiosThrottle = setTimeout(() => {
51 
      fetchCompanies(searchValue);
52 
    }, 500);
53 
  };
54 
 
55 
  const handleLeaveCompany = (link) => {
56 
    setLoading(true);
57 
    axios.post(link).then((response) => {
58 
      const resData = response.data;
59 
      if (resData.success) {
60 
        addNotification({
61 
          style: "success",
62 
          msg: resData.data,
63 
        });
64 
        fetchCompanies();
65 
      } else {
66 
        setLoading(false);
67 
        addNotification({
68 
          style: "danger",
69 
          msg: resData.data ?? "ha ocurrido un error",
70 
        });
71 
      }
72 
    });
73 
  };
74 
 
75 
  return (
76 
    <section className="companies-info">
77 
      <div className="container">
1592 steven 78 
        <SearchList
79 
          title="Empresas donde trabajo"
80 
          fetchCallback={fetchCompanies}
81 
        />
1 www 82 
        <div className="companies-list">
83 
          <div
84 
            className="row"
85 
            id="profiles-container"
86 
            style={{
87 
              position: "relative",
88 
            }}
89 
          >
90 
            {companies.length > 0 ? (
91 
              companies.map((company, id) => (
92 
                <CompanyTemplate
93 
                  company={company}
94 
                  key={id}
95 
                  onLeave={handleLeaveCompany}
96 
                />
97 
              ))
98 
            ) : (
99 
              <div style={{ margin: "auto", textAlign: "center" }}>
100 
                Ningún registro coincidio con su consulta
101 
              </div>
102 
            )}
103 
            {loading && (
104 
              <div className="spinner-container">
105 
                <Spinner />
106 
              </div>
107 
            )}
108 
          </div>
109 
          {/* <!--product-feed-tab end--> */}
110 
        </div>
111 
      </div>
112 
    </section>
113 
  );
114 
};
115 
 
116 
// const mapStateToProps = (state) => ({});
117 
 
118 
const mapDispatchToProps = {
119 
  addNotification: (notification) => addNotification(notification),
120 
};
121 
 
122 
export default connect(null, mapDispatchToProps)(IWorkWith);