Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1592 | Ir a la última revisión | | 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";
9 
 
10 
const IWorkWith = (props) => {
11 
  // redux destructuring
12 
  const { addNotification } = props;
13 
 
14 
  // states
15 
  const [companies, setCompanies] = useState([]);
16 
  const [loading, setLoading] = useState(true);
17 
 
18 
  // React hook form
19 
  const { register, getValues } = useForm();
20 
 
21 
  let axiosThrottle = null;
22 
 
23 
  useEffect(() => {
24 
    fetchCompanies();
25 
    return () => {
26 
      clearTimeout(axiosThrottle);
27 
    };
28 
  }, []);
29 
 
30 
  const fetchCompanies = async (searchParam='') => {
31 
    setLoading(true);
32 
    await axios
33 
      .get(
34 
        "/company/i-work-with?search="+searchParam)
35 
      .then((response) => {
36 
        const resData = response.data;
37 
        if (resData.success) {
38 
          setCompanies(resData.data);
39 
        }
40 
      });
41 
    setLoading(false);
42 
  };
43 
 
44 
  const handleSearch = () => {
45 
    //  (getValues());
46 
    clearTimeout(axiosThrottle);
47 
    // setLoading(true);
48 
    const searchValue = getValues("search");
49 
    axiosThrottle = setTimeout(() => {
50 
      fetchCompanies(searchValue);
51 
    }, 500);
52 
  };
53 
 
54 
  const handleLeaveCompany = (link) => {
55 
    setLoading(true);
56 
    axios.post(link).then((response) => {
57 
      const resData = response.data;
58 
      if (resData.success) {
59 
        addNotification({
60 
          style: "success",
61 
          msg: resData.data,
62 
        });
63 
        fetchCompanies();
64 
      } else {
65 
        setLoading(false);
66 
        addNotification({
67 
          style: "danger",
68 
          msg: resData.data ?? "ha ocurrido un error",
69 
        });
70 
      }
71 
    });
72 
  };
73 
 
74 
  return (
75 
    <section className="companies-info">
76 
      <div className="container">
77 
        <div className="company-title">
78 
          <div className="section_admin_title_buttons">
79 
            <div>
80 
              <h1 className="title">Empresas donde trabajo</h1>
81 
            </div>
82 
          </div>
83 
        </div>
84 
        <div className="company-title">
85 
          <div className="section_admin_title_buttons">
86 
            <form
87 
              name="form-connection-search"
88 
              id="form-connection-search"
89 
              onSubmit={(event) => event.preventDefault()}
90 
            >
91 
              <div className="form-group">
92 
                <input
93 
                  type="text"
94 
                  name="search"
95 
                  id="search"
96 
                  className="form-control"
97 
                  placeholder="Buscar"
98 
                  ref={register}
99 
                  onChange={handleSearch}
100 
                />
101 
              </div>
102 
            </form>
103 
          </div>
104 
        </div>
105 
        <div className="companies-list">
106 
          <div
107 
            className="row"
108 
            id="profiles-container"
109 
            style={{
110 
              position: "relative",
111 
            }}
112 
          >
113 
            {companies.length > 0 ? (
114 
              companies.map((company, id) => (
115 
                <CompanyTemplate
116 
                  company={company}
117 
                  key={id}
118 
                  onLeave={handleLeaveCompany}
119 
                />
120 
              ))
121 
            ) : (
122 
              <div style={{ margin: "auto", textAlign: "center" }}>
123 
                Ningún registro coincidio con su consulta
124 
              </div>
125 
            )}
126 
            {loading && (
127 
              <div className="spinner-container">
128 
                <Spinner />
129 
              </div>
130 
            )}
131 
          </div>
132 
          {/* <!--product-feed-tab end--> */}
133 
        </div>
134 
      </div>
135 
    </section>
136 
  );
137 
};
138 
 
139 
// const mapStateToProps = (state) => ({});
140 
 
141 
const mapDispatchToProps = {
142 
  addNotification: (notification) => addNotification(notification),
143 
};
144 
 
145 
export default connect(null, mapDispatchToProps)(IWorkWith);