Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1158 | 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 styled from "styled-components";
5 
import {axios} from "../../../utils";
6 
import Company from "./company/Company";
7 
import Spinner from "../../../shared/loading-spinner/Spinner";
8 
import { connect } from "react-redux";
9 
import { addNotification } from "../../../redux/notification/notification.actions";
10 
 
11 
const StyledSpinnerContainer = styled.div`
12 
  position: absolute;
13 
  left: 0;
14 
  top: 0;
15 
  width: 100%;
16 
  height: 100%;
17 
  background: rgba(255, 255, 255, 0.4);
18 
  display: flex;
19 
  justify-content: center;
20 
  align-items: center;
21 
  z-index: 300;
22 
`;
23 
 
24 
const FollowingCompanies = (props) => {
25 
  // states
26 
  const [companies, setCompanies] = useState([]);
27 
  const [loading, setLoading] = useState(true);
28 
 
29 
  // redux destructuring
30 
  const { addNotification } = props;
31 
 
32 
  // React hook form
33 
  const { register, getValues } = useForm();
34 
 
35 
  let axiosThrottle = null;
36 
 
37 
  useEffect(() => {
38 
    fetchCompanies();
39 
    return () => {
40 
      clearTimeout(axiosThrottle);
41 
    };
42 
  }, []);
43 
 
44 
  const fetchCompanies = async (searchParam='') => {
45 
    setLoading(true);
46 
    await axios
47 
      .get(
48 
        "/company/following-companies?search="+searchParam)
49 
      .then((response) => {
50 
        const resData = response.data;
51 
        if (resData.success) {
52 
          setCompanies(resData.data);
53 
        }
54 
      });
55 
    setLoading(false);
56 
  };
57 
 
58 
  const handleSearch = () => {
59 
    //  (getValues());
60 
    clearTimeout(axiosThrottle);
61 
    // setLoading(true);
62 
    const searchValue = getValues("search");
63 
    axiosThrottle = setTimeout(() => {
64 
      fetchCompanies(searchValue);
65 
    }, 500);
66 
  };
67 
 
68 
  const handleUnfollow = async (link_unfollow, indexToFilter) => {
69 
    setLoading(true);
70 
    await axios.post(link_unfollow).then((response) => {
71 
      const resData = response.data;
72 
      if (resData.success) {
73 
        const newCompanies = companies.filter(
74 
          (_company, index) => index !== indexToFilter
75 
        );
76 
        setCompanies(newCompanies);
77 
      } else {
78 
        if (resError.constructor.name !== "Object") {
79 
          addNotification({
80 
            style: "danger",
81 
            msg: resData.data,
82 
          });
83 
        }
84 
      }
85 
    });
86 
    setLoading(false);
87 
  };
88 
 
89 
  return (
90 
    <React.Fragment>
91 
      <section className="companies-info">
92 
        <div className="container">
93 
          <div className="company-title">
94 
            <div className="section_admin_title_buttons">
95 
              <div style={{ float: "left" }}>
96 
                <h1 className="title">Empresas que sigo</h1>
97 
              </div>
98 
            </div>
99 
          </div>
100 
          <div className="company-title">
101 
            <div className="section_admin_title_buttons">
102 
              <form
103 
                name="form-connection-search"
104 
                id="form-connection-search"
105 
                onSubmit={(event) => event.preventDefault()}
106 
              >
107 
                <div className="form-group">
108 
                  <input
109 
                    type="text"
110 
                    name="search"
111 
                    id="search"
112 
                    className="form-control"
113 
                    placeholder="Buscar"
114 
                    ref={register}
115 
                    onChange={handleSearch}
116 
                  />
117 
                </div>
118 
              </form>
119 
            </div>
120 
          </div>
121 
 
122 
          <div className="companies-list">
123 
            <div
124 
              className="row"
125 
              id="profiles-container"
126 
              style={{
127 
                position: "relative",
128 
              }}
129 
            >
130 
              {companies.length ? (
131 
                companies.map(
132 
                  ({ image, name, link_view, link_unfollow }, index) => (
133 
                    <Company
134 
                      image={image}
135 
                      name={name}
136 
                      link_view={link_view}
137 
                      link_unfollow={link_unfollow}
138 
                      onUnfollow={handleUnfollow}
139 
                      index={index}
140 
                      key={index}
141 
                    />
142 
                  )
143 
                )
144 
              ) : (
145 
                <div style={{ margin: "auto", textAlign: "center" }}>
146 
                  Ningún registro coincidio con su consulta
147 
                </div>
148 
              )}
149 
              {loading && (
150 
                <StyledSpinnerContainer>
151 
                  <Spinner />
152 
                </StyledSpinnerContainer>
153 
              )}
154 
            </div>
155 
            {/* <!--product-feed-tab end--> */}
156 
          </div>
157 
        </div>
158 
      </section>
159 
    </React.Fragment>
160 
  );
161 
};
162 
 
163 
// const mapStateToProps = (state) => ({
164 
 
165 
// })
166 
 
167 
const mapDispatchToProps = {
168 
  addNotification: (notification) => addNotification(notification),
169 
};
170 
 
171 
export default connect(null, mapDispatchToProps)(FollowingCompanies);