Proyectos de Subversion LeadersLinked - SPA

Rev

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

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