Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | Rev 1599 | 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 { connect } from "react-redux";
4 
import { useForm } from "react-hook-form";
5 
import styled from "styled-components";
1158 stevensc 6 
import { axios } from "../../../utils";
1 www 7 
import { addNotification } from "../../../redux/notification/notification.actions";
8 
import Spinner from "../../../shared/loading-spinner/Spinner";
9 
import JoinedGroup from "./joined-group/JoinedGroup";
10 
 
11 
const JoinedGroups = (props) => {
12 
  // states
13 
  const [joinedGroups, setJoinedGroups] = useState([]);
14 
  const [loading, setLoading] = useState(true);
15 
 
16 
  // redux destructuring
17 
  const { addNotification } = props;
18 
 
19 
  // React hook form
20 
  const { register, getValues } = useForm();
21 
 
22 
  let axiosThrottle = null;
23 
 
24 
  useEffect(() => {
25 
    fetchJoinedGroups();
26 
    return () => {
27 
      clearTimeout(axiosThrottle);
28 
    };
29 
  }, []);
30 
 
1158 stevensc 31 
  const fetchJoinedGroups = async (searchParam = '') => {
1 www 32 
    setLoading(true);
33 
    await axios
34 
      .get(
1158 stevensc 35 
        "/group/joined-groups?search=" + searchParam,
1 www 36 
      )
37 
      .then((response) => {
38 
        const resData = response.data;
1158 stevensc 39 
        (resData);
1 www 40 
        if (resData.success) {
41 
          setJoinedGroups(resData.data);
42 
        }
43 
      });
44 
    setLoading(false);
45 
  };
46 
 
47 
  const handleLeaveGroup = (link) => {
48 
    setLoading(true);
49 
    axios.post(link).then((response) => {
50 
      const resData = response.data;
51 
      if (resData.success) {
52 
        addNotification({
53 
          style: "success",
54 
          msg: resData.data,
55 
        });
56 
        fetchCompanies();
57 
      } else {
58 
        setLoading(false);
59 
        addNotification({
60 
          style: "danger",
61 
          msg: resData.data ?? "ha ocurrido un error",
62 
        });
63 
      }
64 
    });
65 
  };
66 
 
67 
  const handleSearch = () => {
68 
    //  (getValues());
69 
    clearTimeout(axiosThrottle);
70 
    // setLoading(true);
71 
    const searchValue = getValues("search");
72 
    axiosThrottle = setTimeout(() => {
73 
      fetchJoinedGroups(searchValue);
74 
    }, 500);
75 
  };
76 
 
77 
  return (
78 
    <section className="companies-info" style={{ position: "relative" }}>
79 
      <div className="container">
80 
        <div className="company-title">
81 
          <div className="section_admin_title_buttons">
82 
            <div style={{ float: "left" }}>
83 
              <h1 className="title">Grupos Unidos</h1>
84 
            </div>
85 
          </div>
86 
        </div>
87 
 
88 
        <div className="company-title">
89 
          <div className="section_admin_title_buttons">
90 
            <div className="form-group">
91 
              <input
92 
                type="text"
93 
                name="search"
94 
                id="search"
95 
                className="form-control"
96 
                placeholder="Buscar"
97 
                ref={register}
98 
                onChange={handleSearch}
99 
              />
100 
            </div>
101 
          </div>
102 
        </div>
103 
        <div className="companies-list">
104 
          <div className="row" id="profiles-container">
1158 stevensc 105 
            {
106 
              joinedGroups.length
107 
                ?
108 
                joinedGroups.map(
109 
                  ({ image, name, privacy, link_view, link_leave }, index) => (
110 
                    <JoinedGroup
111 
                      image={image}
112 
                      name={name}
113 
                      privacy={privacy}
114 
                      link_view={link_view}
115 
                      link_leave={link_leave}
116 
                      key={index}
117 
                      onLeave={handleLeaveGroup}
118 
                    />
119 
                  ))
120 
                :
121 
                <div style={{ margin: "auto", textAlign: "center" }}>
122 
                  Ningún registro coincidio con su consulta
123 
                </div>
124 
            }
1 www 125 
          </div>
126 
          {/* <!--product-feed-tab end--> */}
127 
        </div>
128 
      </div>
1158 stevensc 129 
      {
130 
        loading &&
1 www 131 
        <div className="spinner-container">
132 
          <Spinner />
133 
        </div>
1158 stevensc 134 
      }
1 www 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)(JoinedGroups);