Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 1158 Rev 1597
Línea 6... Línea 6...
6 
import { axios } from "../../../../utils";
 6 
import { axios } from "../../../../utils";
7 
import Group from "./group/Group";
 7 
import Group from "./group/Group";
8 
import AddGroupModal from "./add-group-modal/AddGroupModal";
 8 
import AddGroupModal from "./add-group-modal/AddGroupModal";
9 
import { addNotification } from "../../../../redux/notification/notification.actions";
 9 
import { addNotification } from "../../../../redux/notification/notification.actions";
10 
import Spinner from "../../../../shared/loading-spinner/Spinner";
 10 
import Spinner from "../../../../shared/loading-spinner/Spinner";
- 
 
 11 
import SearchList from "../../../../components/SearchList";
- 
 
 12 
import Profile from "../../../../components/Profile";
Línea 11... Línea 13...
11 
 
 13 
 
12 
const StyledSpinnerContainer = styled.div`
 14 
const StyledSpinnerContainer = styled.div`
13 
  position: absolute;
 15 
  position: absolute;
14 
  left: 0;
 16 
  left: 0;
Línea 29... Línea 31...
29 
  // states
 31 
  // states
30 
  const [Groups, setGroups] = useState([]);
 32 
  const [Groups, setGroups] = useState([]);
31 
  const [loading, setLoading] = useState(true);
 33 
  const [loading, setLoading] = useState(true);
32 
  const [showAddGroupModal, setShowAddGroupModal] = useState(false);
 34 
  const [showAddGroupModal, setShowAddGroupModal] = useState(false);
Línea 33... Línea -...
33 
 
 - 
 
34 
  // redux destructuring
 - 
 
35 
  const { addNotification } = props;
 - 
 
36 
 
 - 
 
37 
  // React hook form
 - 
 
38 
  const { register, getValues } = useForm();
 - 
 
39 
 
 - 
 
40 
  let axiosThrottle = null;
 - 
 
41 
 
 35 
 
42 
  useEffect(() => {
 36 
  useEffect(() => {
43 
    fetchGroups();
 - 
 
44 
    return () => {
 - 
 
45 
      clearTimeout(axiosThrottle);
 - 
 
46 
    };
 37 
    fetchGroups();
Línea 47... Línea -...
47 
  }, []);
 - 
 
48 
 
 - 
 
49 
  const handleDelete = (link) => {
 - 
 
50 
    setLoading(true);
 - 
 
51 
    axios
 - 
 
52 
      .post(link)
 - 
 
53 
      .then((response) => {
 - 
 
54 
        const resData = response.data;
 - 
 
55 
        (resData);
 - 
 
56 
        if (resData.success) {
 - 
 
57 
          const msg = resData.data;
 - 
 
58 
          addNotification({
 - 
 
59 
            style: "success",
 - 
 
60 
            msg: msg,
 - 
 
61 
          });
 - 
 
62 
          fetchGroups();
 - 
 
63 
        } else {
 - 
 
64 
          setLoading(false);
 - 
 
65 
        }
 - 
 
66 
      })
 - 
 
67 
      .catch((error) => {
 - 
 
68 
        setLoading(false);
 - 
 
69 
      });
 - 
 
70 
  };
 38 
  }, []);
71 
 
 39 
 
72 
  const fetchGroups = async (searchParam = '') => {
 40 
  const fetchGroups = async (searchParam = '') => {
73 
    setLoading(true);
 41 
    setLoading(true);
74 
    await axios
 42 
    await axios
Línea 82... Línea 50...
82 
        }
 50 
        }
83 
      });
 51 
      });
84 
    setLoading(false);
 52 
    setLoading(false);
85 
  };
 53 
  };
Línea 86... Línea -...
86 
 
 - 
 
87 
  const handleSearch = () => {
 - 
 
88 
    //  (getValues());
 - 
 
89 
    clearTimeout(axiosThrottle);
 - 
 
90 
    // setLoading(true);
 - 
 
91 
    const searchValue = getValues("search");
 - 
 
92 
    axiosThrottle = setTimeout(() => {
 - 
 
93 
      fetchGroups(searchValue);
 - 
 
94 
    }, 500);
 - 
 
95 
  };
 - 
 
96 
 
 54 
 
97 
  const handleShowAddGroupModal = () => {
 55 
  const handleShowAddGroupModal = () => {
98 
    setShowAddGroupModal(!showAddGroupModal);
 56 
    setShowAddGroupModal(!showAddGroupModal);
Línea 99... Línea 57...
99 
  };
 57 
  };
100 
 
 58 
 
101 
  return (
 59 
  return (
102 
    <React.Fragment>
 60 
    <React.Fragment>
103 
      <section className="companies-info">
 - 
 
104 
        <div className="container">
 - 
 
105 
          <div className="company-title">
 - 
 
106 
            <div className="section_admin_title_buttons">
 - 
 
107 
              <div style={{ float: "left" }}>
 61 
      <section className="companies-info">
108 
                <h1 className="title">Mis grupos</h1>
 62 
        <div className="container">
109 
              </div>
 63 
          <SearchList
110 
              <div style={{ float: "right" }}>
 64 
            title="Mis grupos"
111 
                <button
 - 
 
112 
                  type="button"
 65 
            fetchCallback={fetchGroups}
113 
                  className="btn btn-primary btn-add"
 - 
 
114 
                  onClick={handleShowAddGroupModal}
 - 
 
115 
                >
 - 
 
116 
                  Agregar
 - 
 
117 
                </button>
 - 
 
118 
              </div>
 - 
 
119 
            </div>
 - 
 
120 
          </div>
 - 
 
121 
 
 - 
 
122 
          <div className="company-title">
 - 
 
123 
            <div className="section_admin_title_buttons">
 - 
 
124 
              <form
 - 
 
125 
                name="form-connection-search"
 - 
 
126 
                id="form-connection-search"
 - 
 
127 
                onSubmit={(event) => event.preventDefault()}
 - 
 
128 
              >
 - 
 
129 
                <div className="form-group">
 - 
 
130 
                  <input
 - 
 
131 
                    type="text"
 - 
 
132 
                    name="search"
 - 
 
133 
                    id="search"
 - 
 
134 
                    className="form-control"
 - 
 
135 
                    placeholder="Buscar"
 - 
 
136 
                    ref={register}
 - 
 
137 
                    onChange={handleSearch}
 - 
 
138 
                  />
 - 
 
139 
                </div>
 - 
 
140 
              </form>
 66 
            addTitle="Agregar"
Línea 141... Línea 67...
141 
            </div>
 67 
            addCallback={handleShowAddGroupModal}
142 
          </div>
 68 
          />
143 
 
 69 
 
144 
          <div className="companies-list">
 70 
          <div className="companies-list">
Línea 152... Línea 78...
152 
              {
 78 
              {
153 
                Groups.length
 79 
                Groups.length
154 
                  ?
 80 
                  ?
155 
                  Groups.map(
 81 
                  Groups.map(
156 
                    ({ image, link_delete, link_edit, link_view, name, privacy }, id) => (
 82 
                    ({ image, link_delete, link_edit, link_view, name, privacy }, id) => (
157 
                      <Group
 83 
                      <Profile
158 
                        image={image}
 84 
                        image={image}
159 
                        name={name}
 85 
                        name={name}
- 
 
 86 
                        status={privacy}
160 
                        link_view={link_view}
 87 
                        link_view={link_view}
161 
                        link_edit={link_edit}
 88 
                        link_edit={link_edit}
162 
                        link_delete={link_delete}
 89 
                        link_delete={link_delete}
163 
                        privacy={privacy}
 - 
 
164 
                        key={id}
 90 
                        key={id}
165 
                        handleDelete={handleDelete}
 - 
 
166 
                      />
 91 
                      />
167 
                    ))
 92 
                    ))
168 
                  :
 93 
                  :
169 
                  <div style={{ margin: "auto", textAlign: "center" }}>
 94 
                  <div style={{ margin: "auto", textAlign: "center" }}>
170 
                    Ningún registro coincidio con su consulta
 95 
                    Ningún registro coincidio con su consulta