Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2781 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3432 stevensc 1 
import React, { useEffect, useState } from "react";
2 
import { useForm } from "react-hook-form";
3 
import { connect } from "react-redux";
2781 stevensc 4 
 
3432 stevensc 5 
import { axios } from "utils";
6 
import { addNotification } from "@app/redux/notification/notification.actions";
2781 stevensc 7 
 
3432 stevensc 8 
import Widget from "@components/UI/Widget";
9 
import Spinner from "@components/UI/Spinner";
10 
import SwitchInput from "@components/UI/SwitchInput";
2781 stevensc 11 
 
12 
const PRIVACY_OPTIONS = [
13 
  {
3432 stevensc 14 
    label: "Mostrar en la búsqueda",
15 
    input_name: "show_in_search",
16 
    value: false,
17 
  },
18 
];
2781 stevensc 19 
 
20 
const Privacy = ({ addNotification }) => {
3432 stevensc 21 
  const [loading, setLoading] = useState(false);
22 
  const [options, setOptions] = useState(PRIVACY_OPTIONS);
23 
  const { handleSubmit } = useForm();
2781 stevensc 24 
 
25 
  const handleOnSubmit = () => {
3432 stevensc 26 
    setLoading(true);
27 
    const formData = new FormData();
2781 stevensc 28 
 
29 
    options.forEach(({ input_name, value }) =>
3432 stevensc 30 
      formData.append(input_name, value ? "y" : "n")
31 
    );
2781 stevensc 32 
 
33 
    axios
3432 stevensc 34 
      .post("/account-settings/privacy", formData)
35 
      .then((response) => {
36 
        const { success, data } = response.data;
37 
        if (!success) {
38 
          typeof data === "string"
39 
            ? addNotification({ style: "danger", msg: data })
40 
            : Object.entries(data).map(([key, value]) =>
2781 stevensc 41 
                addNotification({
3432 stevensc 42 
                  style: "success",
43 
                  msg: `${key} error: ${value} `,
2781 stevensc 44 
                })
3432 stevensc 45 
              );
2781 stevensc 46 
        }
3432 stevensc 47 
        addNotification({ style: "success", msg: data });
2781 stevensc 48 
      })
3432 stevensc 49 
      .finally(() => setLoading(false));
50 
  };
2781 stevensc 51 
 
52 
  const handleChecked = (value, element) => {
53 
    setOptions((prevNotifications) =>
54 
      prevNotifications.map((notification) =>
55 
        notification.input_name === element
56 
          ? { ...notification, value: Boolean(value) }
57 
          : notification
58 
      )
3432 stevensc 59 
    );
60 
  };
2781 stevensc 61 
 
62 
  useEffect(() => {
3432 stevensc 63 
    setLoading(true);
2781 stevensc 64 
    axios
3432 stevensc 65 
      .get("/account-settings/privacy")
66 
      .then((response) => {
67 
        const { success, data } = response.data;
68 
        if (success) {
69 
          Object.entries(data).map(([key, value]) =>
2781 stevensc 70 
            setOptions((prevOption) =>
71 
              prevOption.map((option) =>
72 
                option.input_name === key
73 
                  ? { ...option, value: Boolean(value) }
74 
                  : option
75 
              )
76 
            )
3432 stevensc 77 
          );
2781 stevensc 78 
        }
79 
      })
3432 stevensc 80 
      .finally(() => setLoading(false));
81 
  }, []);
2781 stevensc 82 
 
83 
  if (loading) {
3432 stevensc 84 
    return <Spinner />;
2781 stevensc 85 
  }
86 
 
87 
  return (
88 
    <Widget>
3432 stevensc 89 
      <Widget.Header title="Privacidad" />
2781 stevensc 90 
 
91 
      <Widget.Body>
92 
        <form onSubmit={handleSubmit(handleOnSubmit)}>
93 
          {options.map((option, index) => {
94 
            return (
3432 stevensc 95 
              <div className="notbat" key={index}>
2781 stevensc 96 
                <span>{option.label}</span>
97 
                <SwitchInput
98 
                  isChecked={option.value}
99 
                  setValue={(value) => handleChecked(value, option.input_name)}
100 
                />
101 
              </div>
3432 stevensc 102 
            );
2781 stevensc 103 
          })}
104 
 
3432 stevensc 105 
          <button type="submit" className="btn btn-primary mt-3">
2781 stevensc 106 
            Guardar
107 
          </button>
108 
        </form>
109 
      </Widget.Body>
110 
    </Widget>
3432 stevensc 111 
  );
112 
};
2781 stevensc 113 
 
114 
const mapDispatchToProps = {
3432 stevensc 115 
  addNotification: (notification) => addNotification(notification),
116 
};
2781 stevensc 117 
 
3432 stevensc 118 
export default connect(null, mapDispatchToProps)(Privacy);