Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 3585 Rev 4359
Línea 1... Línea 1...
1 
import { axios } from "../../../utils";
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from "react";
 2 
import React, { useEffect, useState } from "react";
- 
 
 3 
import { axios } from "../../../utils";
3 
import { useForm } from "react-hook-form";
 4 
import { useForm } from "react-hook-form";
4 
import { connect } from "react-redux";
 5 
import { connect } from "react-redux";
5 
import styled from "styled-components";
 - 
 
6 
import { addNotification } from "../../../redux/notification/notification.actions";
 6 
import { addNotification } from "../../../redux/notification/notification.actions";
- 
 
 7 
 
- 
 
 8 
// Components
7 
import Spinner from "../../../shared/loading-spinner/Spinner";
 9 
import Spinner from "../../../shared/loading-spinner/Spinner";
8 
import SwitchInput from "./switch-input/SwitchInput";
 10 
import SwitchInput from "./switch-input/SwitchInput";
Línea 9... Línea -...
9 
 
 - 
 
10 
const StyledSettings = styled.div`
 - 
 
11 
  .notbat {
 - 
 
12 
    display: flex;
 - 
 
13 
    justify-content: space-between;
 - 
 
14 
    align-items: center;
 - 
 
15 
    padding: 1rem;
 - 
 
16 
    border-bottom: 1px solid #f2f2f2;
 - 
 
17 
    position: relative;
 - 
 
18 
  }
 - 
 
19 
`;
 - 
 
20 
 
 - 
 
21 
const StyledSpinnerContainer = styled.div`
 - 
 
22 
  position: absolute;
 - 
 
23 
  left: 0;
 - 
 
24 
  top: 0;
 - 
 
25 
  width: 100%;
 - 
 
26 
  height: 100%;
 - 
 
27 
  background: rgba(255, 255, 255, 0.4);
 - 
 
28 
  display: flex;
 - 
 
29 
  justify-content: center;
 - 
 
30 
  align-items: center;
 - 
 
31 
  z-index: 300;
 - 
 
32 
`;
 - 
 
33 
 
 11 
 
34 
const Notifications = (props) => {
 - 
 
35 
  // redux destructuring
 - 
 
36 
  const { addNotification } = props;
 - 
 
37 
  // states
 - 
 
Línea 38... Línea 12...
38 
  const [loading, setLoading] = useState(false);
 12 
const Notifications = ({ addNotification }) => {
- 
 
 13 
 
Línea 39... Línea 14...
39 
 
 14 
  const { register, handleSubmit, setValue } = useForm();
40 
  const { register, handleSubmit, setValue } = useForm();
 15 
  const [loading, setLoading] = useState(false);
41 
 
 16 
 
42 
  const handleOnSubmit = async (data) => {
 17 
  const handleOnSubmit = async (data) => {
Línea 79... Línea 54...
79 
      }
 54 
      }
80 
    });
 55 
    });
81 
    setLoading(false);
 56 
    setLoading(false);
82 
  }, []);
 57 
  }, []);
Línea -... Línea 58...
- 
 
 58 
 
- 
 
 59 
  const NOTIFICATION_OPTIONS = [
- 
 
 60 
    {
- 
 
 61 
      label: 'Cuando recibo una solicitud de conexión',
- 
 
 62 
      input_name: 'receive_connection_request'
- 
 
 63 
    },
- 
 
 64 
    {
- 
 
 65 
      label: 'Cuando recibo una solicitud para unirme a un grupo',
- 
 
 66 
      name: "receive_invitation_group"
- 
 
 67 
    },
- 
 
 68 
 
- 
 
 69 
    {
- 
 
 70 
      label: 'Cuando aceptan mi solicitud para unirme a un grupo',
- 
 
 71 
      name: "accept_my_request_join_group"
- 
 
 72 
    },
- 
 
 73 
    {
- 
 
 74 
      label: 'Cuando recibo una solicitud para unirme a una empresa',
- 
 
 75 
      name: "receive_invitation_company"
- 
 
 76 
    },
- 
 
 77 
    {
- 
 
 78 
      label: 'Cuando le dan me gusta a una de mis publicaciones',
- 
 
 79 
      name: "like_my_feed"
- 
 
 80 
    },
- 
 
 81 
    {
- 
 
 82 
      label: 'Cuando comentan una de mis publicaciones',
- 
 
 83 
      name: "comment_my_feed"
- 
 
 84 
    },
- 
 
 85 
    {
- 
 
 86 
      label: 'Cuando comparten una de mis publicaciones',
- 
 
 87 
      name: "share_my_feed"
- 
 
 88 
    },
- 
 
 89 
    {
- 
 
 90 
      label: 'Cuando recibo un mensaje',
- 
 
 91 
      name: "receive_inmail"
- 
 
 92 
    },
- 
 
 93 
    {
- 
 
 94 
      label: 'Cuando recibo una solicitud para unirse a mi grupo',
- 
 
 95 
      name: "receive_request_join_my_group"
- 
 
 96 
    }
- 
 
 97 
  ]
83 
 
 98 
 
84 
  return (
 99 
  return (
85 
    <StyledSettings className="acc-setting">
 100 
    <div className="acc-setting">
86 
      <h3>Notificaciones</h3>
 - 
 
87 
      <form onSubmit={handleSubmit(handleOnSubmit)}>
 - 
 
88 
        <div className="notbat">
 - 
 
89 
          <div className="col-9">
 - 
 
90 
            Cuando recibo una solicitud de conexión
 - 
 
91 
          </div>
 - 
 
92 
          <SwitchInput register={register} name="receive_connection_request" />
 101 
      <h3>Notificaciones</h3>
93 
        </div>
 - 
 
94 
        <div className="notbat">
 - 
 
95 
          <div className="col-9">
 - 
 
96 
            Cuando aceptan mi solicitud de conexión
 - 
 
97 
          </div>
 102 
      {loading
98 
          <SwitchInput
 - 
 
99 
            register={register}
 - 
 
100 
            name="accept_my_request_connection"
 103 
        ? <Spinner />
101 
          />
 - 
 
102 
        </div>
 - 
 
103 
        <div className="notbat">
 - 
 
104 
          <div className="col-9">
 104 
        :
105 
            Cuando recibo una solicitud para unirme a un grupo
 - 
 
106 
          </div>
 - 
 
107 
          <SwitchInput register={register} name="receive_invitation_group" />
 - 
 
108 
        </div>
 - 
 
109 
        <div className="notbat">
 - 
 
110 
          <div className="col-9">
 105 
        <form onSubmit={handleSubmit(handleOnSubmit)}>
111 
            Cuando aceptan mi solicitud para unirme a un grupo
 - 
 
112 
          </div>
 106 
          {NOTIFICATION_OPTIONS.map(({ option }, index) => {
113 
          <SwitchInput
 - 
 
114 
            register={register}
 - 
 
115 
            name="accept_my_request_join_group"
 - 
 
116 
          />
 - 
 
117 
        </div>
 - 
 
118 
        <div className="notbat">
 - 
 
119 
          <div className="col-9">
 - 
 
120 
            Cuando recibo una solicitud para unirme a una empresa
 - 
 
121 
          </div>
 - 
 
122 
          <SwitchInput register={register} name="receive_invitation_company" />
 - 
 
123 
        </div>
 - 
 
124 
        <div className="notbat">
 - 
 
125 
          <div className="col-9">
 - 
 
126 
            Cuando le dan me gusta a una de mis publicaciones
 - 
 
127 
          </div>
 - 
 
128 
          <SwitchInput register={register} name="like_my_feed" />
 - 
 
129 
        </div>
 - 
 
130 
        <div className="notbat">
 - 
 
131 
          <div className="col-9">
 - 
 
132 
            Cuando comentan una de mis publicaciones
 - 
 
133 
          </div>
 - 
 
134 
          <SwitchInput register={register} name="comment_my_feed" />
 - 
 
135 
        </div>
 107 
            return (
136 
        <div className="notbat">
 - 
 
137 
          <div className="col-9">
 - 
 
138 
            Cuando comparten una de mis publicaciones
 108 
              <div className="notbat" key={index}>
139 
          </div>
 - 
 
140 
          <SwitchInput register={register} name="share_my_feed" />
 - 
 
141 
        </div>
 - 
 
142 
        <div className="notbat">
 - 
 
143 
          <div className="col-9">
 109 
                <span>
144 
            Cuando recibo un mensaje
 110 
                  {option.label}
145 
          </div>
 111 
                </span>
146 
          <SwitchInput register={register} name="receive_inmail" />
 - 
 
147 
        </div>
 - 
 
148 
        {/* <div className="notbat">
 - 
 
149 
        <div className="col-9">
 - 
 
150 
          Cuando recibo una invitación a una conferencia
 - 
 
151 
          </div>
 - 
 
152 
          <SwitchInput register={register} name="receive_invitation_meeting" />
 - 
 
153 
        </div>
 - 
 
154 
        <div className="notbat">
 - 
 
155 
        <div className="col-9">
 - 
 
156 
          Cuando esta próxima la conferencia
 - 
 
157 
          </div>
 - 
 
158 
          <SwitchInput register={register} name="receive_reminder_meeting" />
 - 
 
159 
        </div>
 - 
 
160 
        <div className="notbat">
 - 
 
161 
        <div className="col-9">
 - 
 
162 
          Cuando esten disponible los archivos de una conferencia
 112 
                <SwitchInput register={register} name={option.input_name} />
163 
          </div>
 - 
 
164 
          <SwitchInput
 - 
 
165 
            register={register}
 - 
 
166 
            name="receive_records_available_meeting"
 113 
              </div>
167 
          />
 - 
 
168 
        </div> */}
 - 
 
169 
        <div className="notbat">
 - 
 
170 
          <div className="col-9">
 - 
 
171 
            Cuando recibo una solicitud para unirse a mi grupo
 - 
 
172 
          </div>
 - 
 
173 
          <SwitchInput
 - 
 
174 
            register={register}
 - 
 
175 
            name="receive_request_join_my_group"
 114 
            )
176 
          />
 - 
 
177 
        </div>
 - 
 
178 
        <div className="save-stngs pd2">
 - 
 
179 
          <ul>
 - 
 
180 
            <li>
 115 
          })}
181 
              <button type="submit" className="btn btn-primary">
 116 
          <button type="submit" className="btn btn-primary">
182 
                Guardar
 117 
            Guardar
183 
              </button>
 - 
 
184 
            </li>
 - 
 
185 
          </ul>
 - 
 
186 
        </div>
 118 
          </button>
187 
      </form>
 - 
 
188 
      {loading && (
 - 
 
189 
        <StyledSpinnerContainer>
 - 
 
190 
          <Spinner />
 - 
 
191 
        </StyledSpinnerContainer>
 119 
        </form>
192 
      )}
 120 
      }
193 
    </StyledSettings>
 121 
    </div>
194 
  );
 122 
  );
Línea 195... Línea -...
195 
};
 - 
 
196 
 
 - 
 
197 
// const mapStateToProps = (state) => ({
 - 
 
198 
 
 - 
 
199 
// })
 123 
};
200 
 
 124 
 
201 
const mapDispatchToProps = {
 125 
const mapDispatchToProps = {
Línea 202... Línea 126...
202 
  addNotification: (notification) => addNotification(notification),
 126 
  addNotification: (notification) => addNotification(notification),