Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3416 Rev 3432
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from 'react'
2 
import { Link } from "react-router-dom";
 2 
import { Link } from 'react-router-dom'
3 
import { useDispatch } from "react-redux";
 3 
import { useDispatch } from 'react-redux'
4 
import {
 4 
import {
5 
  Grid,
 5 
  Grid,
6 
  IconButton,
 6 
  IconButton,
7 
  List,
 7 
  List,
8 
  ListItem,
 8 
  ListItem,
9 
  ListItemButton,
 9 
  ListItemButton,
10 
  ListItemText,
 10 
  ListItemText
11 
} from "@mui/material";
 11 
} from '@mui/material'
12 
import { Delete } from "@mui/icons-material";
 12 
import { Delete } from '@mui/icons-material'
13 
 
 13 
 
14 
import { axios } from "@utils";
 14 
import { axios } from '@utils'
15 
import { useFetch } from "@hooks";
 15 
import { useFetch } from '@hooks'
16 
import { addNotification } from "@store/notification/notification.actions";
 16 
import { addNotification } from '@store/notification/notification.actions'
17 
 
 17 
 
18 
import Widget from "@components/UI/Widget";
 18 
import Widget from '@components/UI/Widget'
19 
import Options from "@components/UI/Option";
 19 
import Options from '@components/UI/Option'
20 
import Spinner from "@components/UI/Spinner";
 20 
import Spinner from '@components/UI/Spinner'
21 
import EmptySection from "@components/UI/EmptySection";
 21 
import EmptySection from '@components/UI/EmptySection'
22 
import ProfileInfo from "@components/widgets/default/ProfileWidget";
 22 
import ProfileInfo from '@components/widgets/default/ProfileWidget'
23 
import ConfirmModal from "@components/modals/ConfirmModal";
 23 
import ConfirmModal from '@components/modals/ConfirmModal'
Línea 24... Línea 24...
24 
 
 24 
 
25 
const NotificationsPage = () => {
 25 
const NotificationsPage = () => {
26 
  const { data: user } = useFetch("/helpers/menu");
 26 
  const { data: user } = useFetch('/helpers/menu')
27 
  const { data: fetchedNotifications, loading } = useFetch(
 27 
  const { data: fetchedNotifications, isLoading } = useFetch(
28 
    "/notifications",
 28 
    '/notifications',
29 
    []
 29 
    []
30 
  );
 30 
  )
31 
  const [notifications, setNotifications] = useState([]);
 31 
  const [notifications, setNotifications] = useState([])
32 
  const [deleteModalState, setDeleteModalState] = useState({
 32 
  const [deleteModalState, setDeleteModalState] = useState({
33 
    show: false,
 33 
    show: false,
34 
    type: "multiple",
 34 
    type: 'multiple',
35 
    url: null,
 35 
    url: null
36 
  });
 36 
  })
Línea 37... Línea 37...
37 
  const dispatch = useDispatch();
 37 
  const dispatch = useDispatch()
Línea 38... Línea 38...
38 
 
 38 
 
39 
  // useFetch('/notifications/mark-all-read') POST request needed
 39 
  // useFetch('/notifications/mark-all-read') POST request needed
40 
 
 40 
 
41 
  const deleteAllNotifications = () => {
 41 
  const deleteAllNotifications = () => {
42 
    axios
 42 
    axios
43 
      .post("/notifications/clear")
 43 
      .post('/notifications/clear')
44 
      .then(({ data: { data, success } }) => {
 44 
      .then(({ data: { data, success } }) => {
45 
        if (!success)
 45 
        if (!success)
46 
          throw new Error("Error al borrar todas las notificaciones");
 46 
          throw new Error('Error al borrar todas las notificaciones')
47 
        setNotifications([]);
 47 
        setNotifications([])
48 
        dispatch(addNotification({ style: "success", msg: data }));
 48 
        dispatch(addNotification({ style: 'success', msg: data }))
49 
      })
 49 
      })
50 
      .catch((err) => {
 50 
      .catch((err) => {
Línea 51... Línea 51...
51 
        dispatch(addNotification({ style: "danger", msg: err.message }));
 51 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
52 
      });
 52 
      })
53 
  };
 53 
  }
54 
 
 54 
 
55 
  const deleteNotification = (url) => {
 55 
  const deleteNotification = (url) => {
56 
    axios
 56 
    axios
57 
      .post(url)
 57 
      .post(url)
58 
      .then(({ data: { data, success } }) => {
 58 
      .then(({ data: { data, success } }) => {
59 
        if (!success) throw new Error("Error al borrar la notificacion");
 59 
        if (!success) throw new Error('Error al borrar la notificacion')
60 
        const newNotifications = notifications.filter(
 60 
        const newNotifications = notifications.filter(
61 
          ({ link_delete }) => link_delete !== url
 61 
          ({ link_delete }) => link_delete !== url
62 
        );
 62 
        )
63 
        setNotifications(newNotifications);
 63 
        setNotifications(newNotifications)
64 
        dispatch(addNotification({ style: "success", msg: data }));
 64 
        dispatch(addNotification({ style: 'success', msg: data }))
65 
      })
 65 
      })
Línea 66... Línea 66...
66 
      .catch((err) => {
 66 
      .catch((err) => {
67 
        dispatch(addNotification({ style: "danger", msg: err.message }));
 67 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
68 
      });
 68 
      })
69 
  };
 69 
  }
70 
 
 70 
 
71 
  const handleDelete = (url) => {
 71 
  const handleDelete = (url) => {
72 
    setDeleteModalState({
 72 
    setDeleteModalState({
Línea 73... Línea 73...
73 
      show: true,
 73 
      show: true,
74 
      type: url ? "single" : "multiple",
 74 
      type: url ? 'single' : 'multiple',
75 
      url,
 75 
      url
76 
    });
 76 
    })
77 
  };
 77 
  }
78 
 
 78 
 
79 
  const handleDeleteAccept = () => {
 79 
  const handleDeleteAccept = () => {
80 
    if (deleteModalState.type === "multiple") {
 80 
    if (deleteModalState.type === 'multiple') {
81 
      deleteAllNotifications();
 81 
      deleteAllNotifications()
82 
    } else {
 82 
    } else {
83 
      deleteNotification(deleteModalState.url);
 83 
      deleteNotification(deleteModalState.url)
Línea 84... Línea 84...
84 
    }
 84 
    }
85 
    setDeleteModalState({
 85 
    setDeleteModalState({
86 
      show: false,
 86 
      show: false,
87 
      type: "multiple",
 87 
      type: 'multiple'
88 
    });
 88 
    })
89 
  };
 89 
  }
Línea 90... Línea 90...
90 
 
 90 
 
91 
  const handleDeleteCancel = () => {
 91 
  const handleDeleteCancel = () => {
92 
    setDeleteModalState({
 92 
    setDeleteModalState({
93 
      show: false,
 93 
      show: false,
94 
      type: "multiple",
 94 
      type: 'multiple'
Línea 95... Línea 95...
95 
    });
 95 
    })
96 
  };
 96 
  }
97 
 
 97 
 
98 
  useEffect(() => {
 98 
  useEffect(() => {
99 
    if (fetchedNotifications) {
 99 
    if (fetchedNotifications) {
100 
      setNotifications(fetchedNotifications);
 100 
      setNotifications(fetchedNotifications)
101 
    }
 101 
    }
102 
  }, [fetchedNotifications]);
 102 
  }, [fetchedNotifications])
103 
 
 103 
 
104 
  return (
 104 
  return (
105 
    <>
 105 
    <>
106 
      <Grid container spacing={1}>
 106 
      <Grid container spacing={1}>
107 
        <Grid item xs md={4}>
 107 
        <Grid item xs md={4}>
108 
          <ProfileInfo {...user} />
 108 
          <ProfileInfo {...user} />
109 
        </Grid>
 109 
        </Grid>
110 
        <Grid item xs md={8}>
 110 
        <Grid item xs md={8}>
111 
          <Widget>
 111 
          <Widget>
112 
            <Widget.Header
 112 
            <Widget.Header
113 
              title="Notificaciones"
 113 
              title='Notificaciones'
114 
              renderAction={() => (
 114 
              renderAction={() => (
115 
                <Options>
 115 
                <Options>
116 
                  <Options.Item onClick={handleDelete}>
 116 
                  <Options.Item onClick={handleDelete}>
117 
                    Borrar notificaciones
 117 
                    Borrar notificaciones
Línea 118... Línea 118...
118 
                  </Options.Item>
 118 
                  </Options.Item>
119 
                </Options>
 119 
                </Options>
120 
              )}
 120 
              )}
121 
            />
 121 
            />
122 
            <Widget.Body>
 122 
            <Widget.Body>
123 
              {loading && <Spinner />}
 123 
              {isLoading && <Spinner />}
Línea 154... Línea 154...
154 
        show={deleteModalState.show}
 154 
        show={deleteModalState.show}
155 
        onClose={handleDeleteCancel}
 155 
        onClose={handleDeleteCancel}
156 
        onAccept={handleDeleteAccept}
 156 
        onAccept={handleDeleteAccept}
157 
      />
 157 
      />
158 
    </>
 158 
    </>
159 
  );
 159 
  )
160 
};
 160 
}
Línea 161... Línea 161...
161 
 
 161