Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1158 | Rev 1591 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1158 Rev 1590
Línea 1... Línea 1...
1 
import React from "react";
 1 
import React from "react";
2 
import { useEffect, useState } from "react";
 2 
import { useEffect, useState } from "react";
3 
import { useForm } from "react-hook-form";
 - 
 
4 
import styled from "styled-components";
 3 
import styled from "styled-components";
5 
import { axios } from "../../../utils";
 4 
import { axios } from "../../../utils";
6 
import Company from "./company/Company";
 - 
 
7 
import Spinner from "../../../shared/loading-spinner/Spinner";
 5 
import Spinner from "../../../shared/loading-spinner/Spinner";
8 
import { connect } from "react-redux";
 6 
import { connect } from "react-redux";
9 
import { addNotification } from "../../../redux/notification/notification.actions";
 7 
import { addNotification } from "../../../redux/notification/notification.actions";
- 
 
 8 
import SearchList from "../../../components/SearchList";
- 
 
 9 
import Profile from "../../../components/Profile";
Línea 10... Línea 10...
10 
 
 10 
 
11 
const StyledSpinnerContainer = styled.div`
 11 
const StyledSpinnerContainer = styled.div`
12 
  position: absolute;
 12 
  position: absolute;
13 
  left: 0;
 13 
  left: 0;
Línea 23... Línea 23...
23 
 
 23 
 
24 
const FollowingCompanies = (props) => {
 24 
const FollowingCompanies = (props) => {
25 
  // states
 25 
  // states
26 
  const [companies, setCompanies] = useState([]);
 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 
 
 27 
  const [loading, setLoading] = useState(true);
37 
  useEffect(() => {
 28 
  useEffect(() => {
38 
    fetchCompanies();
 - 
 
39 
    return () => {
 - 
 
40 
      clearTimeout(axiosThrottle);
 - 
 
41 
    };
 29 
    fetchCompanies();
Línea 42... Línea 30...
42 
  }, []);
 30 
  }, []);
43 
 
 31 
 
44 
  const fetchCompanies = async (searchParam = '') => {
 32 
  const fetchCompanies = async (searchParam = '') => {
Línea 53... Línea 41...
53 
        }
 41 
        }
54 
      });
 42 
      });
55 
    setLoading(false);
 43 
    setLoading(false);
56 
  };
 44 
  };
Línea 57... Línea -...
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 
  };
 45 
 
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);
 - 
 
Línea 87... Línea 46...
87 
  };
 46
88 
 
 47 
 
89 
  return (
 48 
  return (
90 
    <React.Fragment>
 49 
    <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>
 50 
      <section className="companies-info">
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
 51 
        <div className="container">
109 
                    type="text"
 - 
 
110 
                    name="search"
 52 
          <SearchList
111 
                    id="search"
 - 
 
112 
                    className="form-control"
 - 
 
113 
                    placeholder="Buscar"
 - 
 
114 
                    ref={register}
 - 
 
115 
                    onChange={handleSearch}
 - 
 
116 
                  />
 - 
 
117 
                </div>
 - 
 
118 
              </form>
 53 
            title="Empresas que sigo"
Línea 119... Línea 54...
119 
            </div>
 54 
            fetchCallback={fetchCompanies}
120 
          </div>
 55 
          />
121 
 
 56 
 
122 
          <div className="companies-list">
 57 
          <div className="companies-list">
Línea 129... Línea 64...
129 
            >
 64 
            >
130 
              {
 65 
              {
131 
                companies.length
 66 
                companies.length
132 
                  ?
 67 
                  ?
133 
                  companies.map(({ image, name, link_view, link_unfollow }, index) => (
 68 
                  companies.map(({ image, name, link_view, link_unfollow }, index) => (
134 
                    <Company
 69 
                    <Profile
135 
                      image={image}
 70 
                      image={image}
136 
                      name={name}
 71 
                      name={name}
137 
                      link_view={link_view}
 72 
                      link_view={link_view}
138 
                      link_unfollow={link_unfollow}
 - 
 
139 
                      onUnfollow={handleUnfollow}
 - 
 
140 
                      index={index}
 - 
 
141 
                      key={index}
 73 
                      key={index}
- 
 
 74 
                      link_unfollow={link_unfollow}
142 
                    />
 75 
                    />
143 
                  ))
 76 
                  ))
144 
                  :
 77 
                  :
145 
                  <div style={{ margin: "auto", textAlign: "center" }}>
 78 
                  <div style={{ margin: "auto", textAlign: "center" }}>
146 
                    Ningún registro coincidio con su consulta
 79 
                    Ningún registro coincidio con su consulta