Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3432 Rev 3694
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 {
 - 
 
5 
  Grid,
 - 
 
6 
  IconButton,
 - 
 
7 
  List,
 - 
 
8 
  ListItem,
 - 
 
9 
  ListItemButton,
 - 
 
10 
  ListItemText
 - 
 
11 
} from '@mui/material'
 4 
import { Grid, IconButton, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
12 
import { Delete } from '@mui/icons-material'
 5 
import Delete from '@mui/icons-material/Delete';
13 
 
 6 
 
14 
import { axios } from '@utils'
 7 
import { axios } from '@utils';
15 
import { useFetch } from '@hooks'
 8 
import { useFetch } from '@hooks';
16 
import { addNotification } from '@store/notification/notification.actions'
 9 
import { addNotification } from '@store/notification/notification.actions';
17 
 
 10 
 
18 
import Widget from '@components/UI/Widget'
 11 
import Widget from '@components/UI/Widget';
19 
import Options from '@components/UI/Option'
 12 
import Options from '@components/UI/Option';
20 
import Spinner from '@components/UI/Spinner'
 13 
import Spinner from '@components/UI/Spinner';
21 
import EmptySection from '@components/UI/EmptySection'
 14 
import EmptySection from '@components/UI/EmptySection';
22 
import ProfileInfo from '@components/widgets/default/ProfileWidget'
 15 
import ProfileInfo from '@components/widgets/default/ProfileWidget';
23 
import ConfirmModal from '@components/modals/ConfirmModal'
 16 
import ConfirmModal from '@components/modals/ConfirmModal';
Línea 24... Línea 17...
24 
 
 17 
 
25 
const NotificationsPage = () => {
 18 
const NotificationsPage = () => {
26 
  const { data: user } = useFetch('/helpers/menu')
 19 
  const { data: user } = useFetch('/helpers/menu');
27 
  const { data: fetchedNotifications, isLoading } = useFetch(
 - 
 
28 
    '/notifications',
 - 
 
29 
    []
 - 
 
30 
  )
 20 
  const { data: fetchedNotifications, isLoading } = useFetch('/notifications', []);
31 
  const [notifications, setNotifications] = useState([])
 21 
  const [notifications, setNotifications] = useState([]);
32 
  const [deleteModalState, setDeleteModalState] = useState({
 22 
  const [deleteModalState, setDeleteModalState] = useState({
33 
    show: false,
 23 
    show: false,
34 
    type: 'multiple',
 24 
    type: 'multiple',
35 
    url: null
 25 
    url: null
36 
  })
 26 
  });
Línea 37... Línea 27...
37 
  const dispatch = useDispatch()
 27 
  const dispatch = useDispatch();
Línea 38... Línea 28...
38 
 
 28 
 
39 
  // useFetch('/notifications/mark-all-read') POST request needed
 29 
  // useFetch('/notifications/mark-all-read') POST request needed
40 
 
 30 
 
41 
  const deleteAllNotifications = () => {
 31 
  const deleteAllNotifications = () => {
42 
    axios
 - 
 
43 
      .post('/notifications/clear')
 32 
    axios
44 
      .then(({ data: { data, success } }) => {
 33 
      .post('/notifications/clear')
45 
        if (!success)
 34 
      .then(({ data: { data, success } }) => {
46 
          throw new Error('Error al borrar todas las notificaciones')
 35 
        if (!success) throw new Error('Error al borrar todas las notificaciones');
47 
        setNotifications([])
 36 
        setNotifications([]);
48 
        dispatch(addNotification({ style: 'success', msg: data }))
 37 
        dispatch(addNotification({ style: 'success', msg: data }));
49 
      })
 38 
      })
50 
      .catch((err) => {
 39 
      .catch((err) => {
Línea 51... Línea 40...
51 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 40 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
52 
      })
 41 
      });
53 
  }
 42 
  };
54 
 
 43 
 
55 
  const deleteNotification = (url) => {
 44 
  const deleteNotification = (url) => {
56 
    axios
 45 
    axios
57 
      .post(url)
 - 
 
58 
      .then(({ data: { data, success } }) => {
 - 
 
59 
        if (!success) throw new Error('Error al borrar la notificacion')
 46 
      .post(url)
60 
        const newNotifications = notifications.filter(
 47 
      .then(({ data: { data, success } }) => {
61 
          ({ link_delete }) => link_delete !== url
 48 
        if (!success) throw new Error('Error al borrar la notificacion');
62 
        )
 49 
        const newNotifications = notifications.filter(({ link_delete }) => link_delete !== url);
63 
        setNotifications(newNotifications)
 50 
        setNotifications(newNotifications);
64 
        dispatch(addNotification({ style: 'success', msg: data }))
 51 
        dispatch(addNotification({ style: 'success', msg: data }));
65 
      })
 52 
      })
Línea 66... Línea 53...
66 
      .catch((err) => {
 53 
      .catch((err) => {
67 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 54 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
68 
      })
 55 
      });
69 
  }
 56 
  };
70 
 
 57 
 
71 
  const handleDelete = (url) => {
 58 
  const handleDelete = (url) => {
72 
    setDeleteModalState({
 59 
    setDeleteModalState({
Línea 73... Línea 60...
73 
      show: true,
 60 
      show: true,
74 
      type: url ? 'single' : 'multiple',
 61 
      type: url ? 'single' : 'multiple',
75 
      url
 62 
      url
76 
    })
 63 
    });
77 
  }
 64 
  };
78 
 
 65 
 
79 
  const handleDeleteAccept = () => {
 66 
  const handleDeleteAccept = () => {
80 
    if (deleteModalState.type === 'multiple') {
 67 
    if (deleteModalState.type === 'multiple') {
81 
      deleteAllNotifications()
 68 
      deleteAllNotifications();
82 
    } else {
 69 
    } else {
83 
      deleteNotification(deleteModalState.url)
 70 
      deleteNotification(deleteModalState.url);
Línea 84... Línea 71...
84 
    }
 71 
    }
85 
    setDeleteModalState({
 72 
    setDeleteModalState({
86 
      show: false,
 73 
      show: false,
87 
      type: 'multiple'
 74 
      type: 'multiple'
88 
    })
 75 
    });
89 
  }
 76 
  };
Línea 90... Línea 77...
90 
 
 77 
 
91 
  const handleDeleteCancel = () => {
 78 
  const handleDeleteCancel = () => {
92 
    setDeleteModalState({
 79 
    setDeleteModalState({
93 
      show: false,
 80 
      show: false,
94 
      type: 'multiple'
 81 
      type: 'multiple'
Línea 95... Línea 82...
95 
    })
 82 
    });
96 
  }
 83 
  };
97 
 
 84 
 
98 
  useEffect(() => {
 85 
  useEffect(() => {
Línea 111... Línea 98...
111 
          <Widget>
 98 
          <Widget>
112 
            <Widget.Header
 99 
            <Widget.Header
113 
              title='Notificaciones'
 100 
              title='Notificaciones'
114 
              renderAction={() => (
 101 
              renderAction={() => (
115 
                <Options>
 102 
                <Options>
116 
                  <Options.Item onClick={handleDelete}>
 103 
                  <Options.Item onClick={handleDelete}>Borrar notificaciones</Options.Item>
117 
                    Borrar notificaciones
 - 
 
118 
                  </Options.Item>
 - 
 
119 
                </Options>
 104 
                </Options>
120 
              )}
 105 
              )}
121 
            />
 106 
            />
122 
            <Widget.Body>
 107 
            <Widget.Body>
123 
              {isLoading && <Spinner />}
 108 
              {isLoading && <Spinner />}
124 
              {notifications.length === 0 && !isLoading && (
 109 
              {notifications.length === 0 && !isLoading && (
125 
                <EmptySection message='No hay notificaciones' align='center' />
 110 
                <EmptySection message='No hay notificaciones' align='center' />
126 
              )}
 111 
              )}
Línea 127... Línea 112...
127 
 
 112 
 
128 
              <List sx={{ maxHeight: '60vh', overflow: 'auto' }}>
 - 
 
129 
                {notifications.map(
 113 
              <List sx={{ maxHeight: '60vh', overflow: 'auto' }}>
130 
                  ({ link_delete, link, message, time_elapsed }) => (
 114 
                {notifications.map(({ link_delete, link, message, time_elapsed }) => (
131 
                    <ListItem
 115 
                  <ListItem
132 
                      key={link}
 116 
                    key={link}
133 
                      secondaryAction={
 117 
                    secondaryAction={
134 
                        <IconButton onClick={() => handleDelete(link_delete)}>
 118 
                      <IconButton onClick={() => handleDelete(link_delete)}>
135 
                          <Delete />
 119 
                        <Delete />
136 
                        </IconButton>
 120 
                      </IconButton>
137 
                      }
 121 
                    }
138 
                    >
 122 
                  >
139 
                      <ListItemButton LinkComponent={Link} to={link}>
 - 
 
140 
                        <ListItemText
 - 
 
141 
                          primary={message}
 123 
                    <ListItemButton LinkComponent={Link} to={link}>
142 
                          secondary={time_elapsed}
 - 
 
143 
                        />
 124 
                      <ListItemText primary={message} secondary={time_elapsed} />
144 
                      </ListItemButton>
 125 
                    </ListItemButton>
145 
                    </ListItem>
 - 
 
146 
                  )
 126 
                  </ListItem>
147 
                )}
 127 
                ))}
148 
              </List>
 128 
              </List>
149 
            </Widget.Body>
 129 
            </Widget.Body>
150 
          </Widget>
 130 
          </Widget>
151 
        </Grid>
 131 
        </Grid>
Línea 154... Línea 134...
154 
        show={deleteModalState.show}
 134 
        show={deleteModalState.show}
155 
        onClose={handleDeleteCancel}
 135 
        onClose={handleDeleteCancel}
156 
        onAccept={handleDeleteAccept}
 136 
        onAccept={handleDeleteAccept}
157 
      />
 137 
      />
158 
    </>
 138 
    </>
159 
  )
 139 
  );
160 
}
 140 
};
Línea 161... Línea 141...
161 
 
 141