Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 1 Rev 2650
Línea 1... Línea 1...
1 
import {axios} from "../../../utils";
 1 
import { axios } from "../../../utils";
2 
import React, { useEffect, useState } from "react";
 2 
import React, { useEffect, useState } from "react";
3 
import { connect } from "react-redux";
 3 
import { connect } from "react-redux";
4 
import { addNotification } from "../../../redux/notification/notification.actions";
 4 
import { addNotification } from "../../../redux/notification/notification.actions";
5 
import Spinner from "../../../shared/loading-spinner/Spinner";
 5 
import Spinner from "../../../shared/loading-spinner/Spinner";
Línea -... Línea 6...
- 
 
 6 
 
- 
 
 7 
const StyledSwitch = styled.label`
- 
 
 8 
  position: relative;
- 
 
 9 
  display: inline-block;
- 
 
 10 
  width: 60px;
- 
 
 11 
  height: 34px;
- 
 
 12 
  input {
- 
 
 13 
    opacity: 0;
- 
 
 14 
    width: 0;
- 
 
 15 
    height: 0;
- 
 
 16 
  }
- 
 
 17 
  .slider {
- 
 
 18 
    position: absolute;
- 
 
 19 
    cursor: pointer;
- 
 
 20 
    top: 0;
- 
 
 21 
    left: 0;
- 
 
 22 
    right: 0;
- 
 
 23 
    bottom: 0;
- 
 
 24 
    background-color: #ccc;
- 
 
 25 
    -webkit-transition: 0.4s;
- 
 
 26 
    transition: 0.4s;
- 
 
 27 
  }
- 
 
 28 
  .slider:before {
- 
 
 29 
    position: absolute;
- 
 
 30 
    content: "";
- 
 
 31 
    height: 26px;
- 
 
 32 
    width: 26px;
- 
 
 33 
    left: 4px;
- 
 
 34 
    bottom: 4px;
- 
 
 35 
    background-color: white;
- 
 
 36 
    -webkit-transition: 0.4s;
- 
 
 37 
    transition: 0.4s;
- 
 
 38 
  }
- 
 
 39 
  input:checked + .slider {
- 
 
 40 
    background-color: #2196f3;
- 
 
 41 
  }
- 
 
 42 
  input:focus + .slider {
- 
 
 43 
    box-shadow: 0 0 1px #2196f3;
- 
 
 44 
  }
- 
 
 45 
  input:checked + .slider:before {
- 
 
 46 
    -webkit-transform: translateX(26px);
- 
 
 47 
    -ms-transform: translateX(26px);
- 
 
 48 
    transform: translateX(26px);
- 
 
 49 
  }
- 
 
 50 
  .slider.round {
- 
 
 51 
    border-radius: 34px;
- 
 
 52 
  }
- 
 
 53 
 
- 
 
 54 
  .slider.round:before {
- 
 
 55 
    border-radius: 50%;
- 
 
 56 
  }
- 
 
 57 
`;
6 
 
 58 
 
7 
const SocialNetworks = (props) => {
 59 
const SocialNetworks = (props) => {
8 
  // redux destructuring
 60 
  // redux destructuring
Línea 9... Línea 61...
9 
  const { addNotification } = props;
 61 
  const { addNotification } = props;
Línea 55... Línea 107...
55 
    });
 107 
    });
56 
    setLoading(false);
 108 
    setLoading(false);
57 
  };
 109 
  };
Línea 58... Línea 110...
58 
 
 110 
 
59 
  return (
 111 
  return (
60 
    <div className="acc-setting">
 112 
    <div className="settings-container">
61 
      <h3>Redes Sociales</h3>
 - 
 
62 
      <table className="table nowrap" cellSpacing="0" width="100%">
 - 
 
63 
        <tbody>
 - 
 
64 
          <tr>
 113 
      <h2>Cambiar Configuración de las redes sociales</h2>
65 
            <td className="text-center">
 114 
      <div className="acc-setting_content">
66 
              <i className="fa fa-facebook"></i> Facebook
 115 
        <div className="d-flex align-items-center justify-content-between">
67 
            </td>
 116 
          <span>
68 
            <td className="text-center">
 - 
 
69 
              <i className="fa fa-twitter"></i> Twitter
 117 
            Facebook
70 
            </td>
 118 
          </span>
71 
            <td className="text-center">
 119 
          <div className="input-c p-0">
72 
              <i className="fa fa-google"></i> Google
 - 
 
73 
            </td>
 - 
 
74 
          </tr>
 - 
 
75 
          <tr>
 120 
            <label htmlFor="is_current">{facebookConnected ? 'Desconectar' : 'Conectar'}</label>
76 
            <td className="text-center">
 121 
            <div className="form-group">
77 
              {facebookConnected ? (
 122 
              <StyledSwitch className="switch">
78 
                <button
 - 
 
79 
                  className="btn btn-delete"
 123 
                <input
80 
                  id="btn-facebook"
 124 
                  type="checkbox"
81 
                  data-action="disconnect"
 125 
                  name="is_current"
82 
                  data-network="facebook"
 126 
                  data-network="facebook"
83 
                  onClick={(e) =>
 127 
                  onClick={(e) =>
84 
                    handleRemoveSocialNetwork(
 - 
 
85 
                      e,
 128 
                    facebookConnected
86 
                      socialNetworkRoutes.facebook.remove
 129 
                      ? handleRemoveSocialNetwork(e, socialNetworkRoutes.facebook.remove)
87 
                    )
 130 
                      : handleAddSocialNetwork(e, socialNetworkRoutes.facebook.add)
88 
                  }
 131 
                  }
89 
                >
 132 
                />
90 
                  Desconectar
 133 
                <span className="slider round"></span>
91 
                </button>
 134 
              </StyledSwitch>
92 
              ) : (
 135 
            </div>
93 
                <button
 - 
 
94 
                  className="btn btn-edit"
 - 
 
95 
                  id="btn-facebook"
 - 
 
96 
                  data-action="connect"
 - 
 
97 
                  data-network="facebook"
 136 
          </div>
98 
                  onClick={(e) =>
 137 
        </div>
99 
                    handleAddSocialNetwork(e, socialNetworkRoutes.facebook.add)
 - 
 
100 
                  }
 138 
        <div className="d-flex align-items-center justify-content-between">
101 
                >
 - 
 
102 
                  Conectar
 - 
 
103 
                </button>
 139 
          <span>
104 
              )}
 140 
            Twitter
105 
            </td>
 141 
          </span>
106 
            <td className="text-center">
 142 
          <div className="input-c p-0">
107 
              {twitterConnected ? (
 - 
 
108 
                <button
 143 
            <label htmlFor="is_current">{twitterConnected ? 'Desconectar' : 'Conectar'}</label>
109 
                  className="btn btn-delete"
 - 
 
110 
                  id="btn-twitter"
 - 
 
111 
                  data-action="disconnect"
 144 
            <div className="form-group">
112 
                  data-network="twitter"
 - 
 
113 
                  onClick={(e) =>
 - 
 
114 
                    handleRemoveSocialNetwork(
 - 
 
115 
                      e,
 - 
 
116 
                      socialNetworkRoutes.twitter.remove
 145 
              <StyledSwitch className="switch">
117 
                    )
 - 
 
118 
                  }
 - 
 
119 
                >
 146 
                <input
120 
                  Desconectar
 - 
 
121 
                </button>
 - 
 
122 
              ) : (
 - 
 
123 
                <button
 - 
 
124 
                  className="btn btn-edit"
 - 
 
125 
                  id="btn-twitter"
 147 
                  type="checkbox"
126 
                  data-action="connect"
 148 
                  name="is_current"
127 
                  data-network="twitter"
 149 
                  data-network="twitter"
- 
 
 150 
                  onClick={(e) =>
- 
 
 151 
                    twitterConnected
128 
                  onClick={(e) =>
 152 
                      ? handleRemoveSocialNetwork(e, socialNetworkRoutes.twitter.remove)
129 
                    handleAddSocialNetwork(e, socialNetworkRoutes.twitter.add)
 153 
                      : handleAddSocialNetwork(e, socialNetworkRoutes.twitter.add)
130 
                  }
 154 
                  }
131 
                >
 155 
                />
132 
                  Conectar
 156 
                <span className="slider round"></span>
133 
                </button>
 157 
              </StyledSwitch>
134 
              )}
 158 
            </div>
135 
            </td>
 - 
 
136 
            <td className="text-center">
 - 
 
137 
              {googleConnected ? (
 159 
          </div>
138 
                <button
 160 
        </div>
139 
                  className="btn btn-delete"
 - 
 
140 
                  id="btn-google"
 - 
 
141 
                  data-action="disconnect"
 - 
 
142 
                  data-network="google"
 - 
 
143 
                  onClick={(e) =>
 - 
 
144 
                    handleRemoveSocialNetwork(
 161 
        <div className="d-flex align-items-center justify-content-between">
145 
                      e,
 - 
 
146 
                      socialNetworkRoutes.google.remove
 162 
          <span>
147 
                    )
 163 
            Google
148 
                  }
 164 
          </span>
149 
                >
 165 
          <div className="input-c p-0">
150 
                  Desconectar
 166 
            <label htmlFor="is_current">{googleConnected ? 'Desconectar' : 'Conectar'}</label>
151 
                </button>
 167 
            <div className="form-group">
152 
              ) : (
 168 
              <StyledSwitch className="switch">
153 
                <button
 - 
 
154 
                  className="btn btn-edit"
 169 
                <input
155 
                  id="btn-google"
 170 
                  type="checkbox"
156 
                  data-action="connect"
 171 
                  name="is_current"
157 
                  data-network="google"
 172 
                  data-network="google"
- 
 
 173 
                  onClick={(e) =>
- 
 
 174 
                    googleConnected
158 
                  onClick={(e) =>
 175 
                      ? handleRemoveSocialNetwork(e, socialNetworkRoutes.google.remove)
159 
                    handleAddSocialNetwork(e, socialNetworkRoutes.google.add)
 176 
                      : handleAddSocialNetwork(e, socialNetworkRoutes.google.add)
160 
                  }
 177 
                  }
161 
                >
 178 
                />
162 
                  Conectar
 179 
                <span className="slider round"></span>
163 
                </button>
 180 
              </StyledSwitch>
164 
              )}
 181 
            </div>
165 
            </td>
 182 
          </div>
166 
          </tr>
 183 
        </div>
167 
        </tbody>
 184 
      </div>
168 
      </table>
 185 
      {
169 
      {loading && (
 186 
        loading &&
170 
        <div className="spinner-container">
 187 
        <div className="spinner-container">
171 
          <Spinner />
 188 
          <Spinner />
172 
        </div>
 189 
        </div>
173 
      )}
 190 
      }
174 
    </div>
 191 
    </div >
175 
  );
 192 
  );
Línea 176... Línea 193...
176 
};
 193 
};
177 
 
 194