Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6954 Rev 6956
Línea 5... Línea 5...
5 
import InboxIcon from '@mui/icons-material/Inbox'
 5 
import InboxIcon from '@mui/icons-material/Inbox'
Línea 6... Línea 6...
6 
 
 6 
 
7 
import Chat from './Chat'
 7 
import Chat from './Chat'
8 
import EmptySection from '../UI/EmptySection'
 8 
import EmptySection from '../UI/EmptySection'
- 
 
 9 
import ConferenceModal from '../modals/ConferenceModal'
Línea 9... Línea 10...
9 
import ConferenceModal from '../modals/ConferenceModal'
 10 
import useMessages from '../../hooks/useMessages'
10 
 
 11 
 
11 
const CHAT_TABS = {
 12 
const CHAT_TABS = {
12 
  CHAT: 'CHAT',
 13 
  CHAT: 'CHAT',
Línea 23... Línea 24...
23 
    not_seen_messages,
 24 
    not_seen_messages,
24 
    url_zoom,
 25 
    url_zoom,
25 
    url_send,
 26 
    url_send,
26 
    url_upload,
 27 
    url_upload,
27 
    url_mark_seen,
 28 
    url_mark_seen,
28 
    url_close,
 29 
    // url_close,
29 
    url_add_user_to_group, // Group url
 30 
    url_add_user_to_group, // Group url
30 
    url_delete, // Group url
 31 
    url_delete, // Group url
31 
    url_get_contact_group_list, // Group url
 32 
    url_get_contact_group_list, // Group url
32 
    url_leave, // Group url
 33 
    url_leave, // Group url
33 
    name,
 34 
    name,
34 
    profile,
 35 
    profile,
35 
    type,
 36 
    type,
36 
  } = entity
 37 
  } = entity
Línea 37... Línea -...
37 
 
 - 
 
38 
  const [oldMessages, setOldMessages] = useState([])
 38 
 
39 
  const [newMessages, setNewMessages] = useState([])
 - 
 
40 
  const [currentPage, setCurrentPage] = useState(1)
 39 
  const { messages, loadMore, loading, reset } =
41 
  const [pages, setPages] = useState(1)
 - 
 
42 
 
 40 
    useMessages(url_get_all_messages)
43 
  const [isShowConferenceModal, setisShowConferenceModal] = useState(false)
 - 
 
44 
  const [loading, setLoading] = useState(false)
 - 
 
45 
 
 - 
 
46 
  const [isGetting, setIsGetting] = useState(false)
 41 
  const [isShowConferenceModal, setisShowConferenceModal] = useState(false)
47 
  const dispatch = useDispatch()
 42 
  const dispatch = useDispatch()
Línea 48... Línea -...
48 
  const scrollRef = useRef(null)
 - 
 
49 
 
 - 
 
50 
  // Messages getters
 - 
 
51 
  const getMessages = async () => {
 - 
 
52 
    setLoading(true)
 - 
 
53 
    axios
 - 
 
54 
      .get(url_get_all_messages)
 - 
 
55 
      .then(({ data: response }) => {
 - 
 
56 
        const { data, success } = response
 - 
 
57 
 
 - 
 
58 
        if (!success) {
 - 
 
59 
          return
 - 
 
60 
        }
 - 
 
61 
 
 - 
 
62 
        const messageResponse = [...data.items]
 - 
 
63 
        const updatedMessages = messageResponse.reduce(
 - 
 
64 
          (acum, updatedMessage) => {
 - 
 
65 
            if (
 - 
 
66 
              newMessages.findIndex(
 - 
 
67 
                (message) => message.id === updatedMessage.id
 - 
 
68 
              ) === -1
 - 
 
69 
            ) {
 - 
 
70 
              acum = [...acum, updatedMessage]
 - 
 
71 
            }
 - 
 
72 
            return acum
 - 
 
73 
          },
 - 
 
74 
          []
 - 
 
75 
        )
 - 
 
76 
 
 - 
 
77 
        if (updatedMessages.length > 0) {
 - 
 
78 
          setNewMessages((prevMessages) => [
 - 
 
79 
            ...updatedMessages,
 - 
 
80 
            ...prevMessages,
 - 
 
81 
          ])
 - 
 
82 
          setPages(data.pages)
 - 
 
83 
          scrollRef.current.scrollBy(0, 200)
 - 
 
84 
        }
 - 
 
85 
      })
 - 
 
86 
      .finally(() => setLoading(false))
 - 
 
87 
  }
 - 
 
88 
 
 - 
 
89 
  const loadOldMessages = () => {
 - 
 
90 
    setIsGetting(true)
 - 
 
91 
    axios
 - 
 
92 
      .get(`${url_get_all_messages}?page=${currentPage}`)
 - 
 
93 
      .then(({ data: response }) => {
 - 
 
94 
        const { data, success } = response
 - 
 
95 
        if (success && data.page > 1) {
 - 
 
96 
          setOldMessages([...oldMessages, ...data.items.slice()])
 - 
 
97 
          scrollRef.current.scrollBy(0, 200)
 - 
 
98 
        }
 - 
 
99 
      })
 - 
 
100 
      .finally(() => setIsGetting(false))
 - 
 
101 
  }
 - 
 
102 
 
 - 
 
103 
  // Modals handlers
 43 
  const scrollRef = useRef(null)
104 
 
 44 
 
105 
  const toggleConferenceModal = () => {
 45 
  const toggleConferenceModal = () => {
Línea 106... Línea -...
106 
    setisShowConferenceModal(!isShowConferenceModal)
 - 
 
107 
  }
 - 
 
108 
 
 - 
 
109 
  // On interception handler
 - 
 
110 
  const onIntersection = (entities) => {
 - 
 
111 
    const target = entities[0]
 - 
 
112 
    if (target.isIntersecting && currentPage < pages) {
 - 
 
113 
      setIsGetting(true)
 - 
 
114 
      setCurrentPage((prevState) => prevState + 1)
 - 
 
115 
    }
 46 
    setisShowConferenceModal(!isShowConferenceModal)
116 
  }
 - 
 
117 
 
 - 
 
118 
  const deleteGroup = async (url) => {
 - 
 
119 
    setLoading(true)
 47 
  }
120 
    axios
 48 
 
121 
      .post(url)
 49 
  const deleteGroup = async (url) => {
122 
      .then(({ data: response }) => {
 50 
    axios.post(url).then(({ data: response }) => {
123 
        const { data, success } = response
 51 
      const { data, success } = response
124 
        if (!success) {
 52 
      if (!success) {
125 
          const errorMessage =
 53 
        const errorMessage =
126 
            typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
 54 
          typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
127 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 55 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
128 
          return
 56 
        return
129 
        }
 57 
      }
130 
 
 - 
 
131 
        changeTab(CHAT_TABS.DEFAULT)
 58 
 
Línea 132... Línea 59...
132 
      })
 59 
      changeTab(CHAT_TABS.DEFAULT)
133 
      .finally(() => setLoading(false))
 60 
    })
134 
  }
 61 
  }
Línea 168... Línea 95...
168 
      action: () => deleteGroup(url_leave),
 95 
      action: () => deleteGroup(url_leave),
169 
    },
 96 
    },
170 
  ]
 97 
  ]
Línea 171... Línea 98...
171 
 
 98 
 
172 
  useEffect(() => {
 - 
 
173 
    let getInterval = null
 - 
 
174 
    if (loading) return
 - 
 
175 
    getInterval = setTimeout(() => getMessages(), 2000)
 - 
 
176 
 
 - 
 
177 
    return () => {
 - 
 
178 
      clearTimeout(getInterval)
 - 
 
179 
    }
 - 
 
180 
  }, [loading])
 - 
 
181 
 
 - 
 
182 
  useEffect(() => {
 - 
 
183 
    loadOldMessages()
 - 
 
184 
  }, [currentPage])
 - 
 
185 
 
 - 
 
186 
  useEffect(() => {
 99 
  useEffect(() => {
187 
    if (not_seen_messages) axios.post(url_mark_seen)
 100 
    if (not_seen_messages) axios.post(url_mark_seen)
188 
    if (not_received_messages) axios.post(url_mark_received)
 - 
 
189 
 
 - 
 
190 
    return () => {
 - 
 
191 
      axios.post(url_close)
 - 
 
192 
    }
 - 
 
193 
  }, [entity])
 - 
 
194 
 
 - 
 
195 
  useEffect(() => {
 - 
 
196 
    setNewMessages([])
 - 
 
197 
    setOldMessages([])
 101 
    if (not_received_messages) axios.post(url_mark_received)
198 
    setPages(1)
 - 
 
199 
    setCurrentPage(1)
 102 
    reset()
Línea 200... Línea 103...
200 
  }, [entity])
 103 
  }, [entity])
201 
 
 104 
 
202 
  return (
 105 
  return (
Línea 207... Línea 110...
207 
          options={type === 'group' ? groupOptions : options}
 110 
          options={type === 'group' ? groupOptions : options}
208 
        >
 111 
        >
209 
          <Chat.Title url={profile}>{name}</Chat.Title>
 112 
          <Chat.Title url={profile}>{name}</Chat.Title>
210 
        </Chat.Header>
 113 
        </Chat.Header>
Línea 211... Línea 114...
211 
 
 114 
 
212 
        {![...newMessages, ...oldMessages].length ? (
 115 
        {!messages.length ? (
213 
          <EmptySection
 116 
          <EmptySection
214 
            Icon={<InboxIcon />}
 117 
            Icon={<InboxIcon />}
215 
            message="No hay mensajes en esta conversación"
 118 
            message="No hay mensajes en esta conversación"
216 
            align="center"
 119 
            align="center"
217 
          />
 120 
          />
218 
        ) : (
 121 
        ) : (
219 
          <Chat.List
 122 
          <Chat.List
220 
            messages={[...newMessages, ...oldMessages]}
 123 
            messages={messages}
221 
            onPagination={onIntersection}
 - 
 
222 
            currentPage={currentPage}
 124 
            onPagination={loadMore}
223 
            loading={isGetting}
 - 
 
224 
            pages={pages}
 125 
            loading={loading}
225 
            scrollRef={scrollRef}
 126 
            scrollRef={scrollRef}
226 
          />
 127 
          />
Línea 227... Línea 128...
227 
        )}
 128 
        )}