Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4374 Rev 5185
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable camelcase */
1 
/* eslint-disable react/prop-types */
 2 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from 'react'
 3 
import React, { useEffect, useState } from 'react'
3 
import { axios } from '../utils'
 4 
import { axios } from '../utils'
4 
import ChatMail from "./inmail/inmail"
 5 
import ChatMail from './inmail/inmail'
5 
import Sidebar from './inmail/sidebar'
 6 
import Sidebar from './inmail/sidebar'
Línea 6... Línea 7...
6 
 
 7 
 
Línea 7... Línea 8...
7 
const defaultPages = { current: 1, last: 1 }
 8 
const defaultPages = { current: 1, last: 1 }
- 
 
 9 
 
- 
 
 10 
const Inmail = props => {
- 
 
 11 
  const [messages, setMessages] = useState([])
- 
 
 12 
  const [page, setPage] = useState(defaultPages)
- 
 
 13 
  const [selectedConversation, setSelectedConversation] = useState(null)
- 
 
 14 
  const [isGettingMessages, setIsGettingMessages] = useState(false)
- 
 
 15 
 
- 
 
 16 
  const getMessages = async ({ messages_link = selectedConversation.messages_link, _page = defaultPages.current }) => {
- 
 
 17 
    try {
- 
 
 18 
      setIsGettingMessages(true)
- 
 
 19 
      const { data } = await axios.get(messages_link + '?page=' + _page)
- 
 
 20 
 
- 
 
 21 
      if (data.success) {
- 
 
 22 
        setIsGettingMessages(false)
- 
 
 23 
        return { pages: data.pagination, msgs: data.data }
- 
 
 24 
      }
- 
 
 25 
 
- 
 
 26 
      setIsGettingMessages(false)
- 
 
 27 
      return { pages: defaultPages.current, msgs: data.data }
- 
 
 28 
    } catch (error) {
- 
 
 29 
      console.log('>>: error > ', error)
- 
 
 30 
    }
- 
 
 31 
  }
- 
 
 32 
 
- 
 
 33 
  const changeConversation = (conversation) => {
- 
 
 34 
    setPage(defaultPages)
- 
 
 35 
    setSelectedConversation(conversation)
- 
 
 36 
  }
- 
 
 37 
 
- 
 
 38 
  const handleSend = async (message = '') => {
- 
 
 39 
    if (selectedConversation) {
- 
 
 40 
      try {
- 
 
 41 
        const formData = new FormData()
- 
 
 42 
        formData.append('message', message)
- 
 
 43 
 
- 
 
 44 
        const res = await axios.post(selectedConversation.send_link, formData)
- 
 
 45 
        setMessages(prev => [res.data.data, ...prev])
- 
 
 46 
      } catch (error) {
- 
 
 47 
        console.log('>>: err0r > ', error)
- 
 
 48 
      }
- 
 
 49 
    }
- 
 
 50 
  }
- 
 
 51 
 
- 
 
 52 
  const getMoreMessages = () => {
- 
 
 53 
    if (page.last > page.current) {
- 
 
 54 
      setPage({ ...page, current: page.current += 1 })
- 
 
 55 
    }
- 
 
 56 
  }
- 
 
 57 
 
- 
 
 58 
  useEffect(() => {
- 
 
 59 
    if (selectedConversation) {
- 
 
 60 
      getMessages(selectedConversation.messages_link)
- 
 
 61 
        .then(({ pages, msgs }) => {
- 
 
 62 
          setPage({ ...page, last: pages.last })
- 
 
 63 
          setMessages(msgs)
- 
 
 64 
        })
Línea 8... Línea -...
8 
 
 - 
 
9 
const Inmail = props => {
 - 
 
10 
 
 - 
 
11 
    const [messages, setMessages] = useState([])
 - 
 
12 
    const [page, setPage] = useState(defaultPages)
 - 
 
13 
    const [selectedConversation, setSelectedConversation] = useState(null)
 - 
 
14 
    const [isGettingMessages, setIsGettingMessages] = useState(false)
 - 
 
15 
 
 - 
 
16 
    const getMessages = async ({ messages_link = selectedConversation.messages_link, _page = defaultPages.current }) => {
 - 
 
17 
        try {
 - 
 
18 
            setIsGettingMessages(true)
 - 
 
19 
            const { data } = await axios.get(messages_link + '?page=' + _page)
 - 
 
20 
 
 - 
 
21 
            if (data.success) {
 - 
 
22 
                setIsGettingMessages(false)
 - 
 
23 
                return { pages: data.pagination, msgs: data.data }
 - 
 
24 
            }
 - 
 
25 
 
 - 
 
26 
            setIsGettingMessages(false)
 - 
 
27 
            return { pages: defaultPages.current, msgs: data.data }
 - 
 
28 
        }
 - 
 
29 
        catch (error) {
 - 
 
30 
            console.log('>>: error > ', error)
 - 
 
31 
        }
 - 
 
32 
    }
 - 
 
33 
 
 - 
 
34 
    const changeConversation = (conversation) => {
 - 
 
35 
        setPage(defaultPages)
 - 
 
36 
        setSelectedConversation(conversation)
 - 
 
37 
    }
 - 
 
38 
 
 - 
 
39 
    const handleSend = async (message = '') => {
 - 
 
40 
        if (selectedConversation) {
 - 
 
41 
            try {
 - 
 
42 
                const params = {
 - 
 
43 
                    message: message
 - 
 
44 
                }
 - 
 
45 
                const formData = new FormData();
 - 
 
46 
                Object.entries(params).map(([key, value]) => {
 - 
 
47 
                    formData.append(key, value);
 - 
 
48 
                });
 - 
 
49 
                const res = await axios.post(selectedConversation.send_link, formData)
 - 
 
50 
                setMessages(prev => [res.data.data, ...prev])
 - 
 
51 
            } catch (error) {
 - 
 
52 
                console.log('>>: err0r > ', error)
 - 
 
53 
            }
 - 
 
54 
        }
 - 
 
55 
    }
 - 
 
56 
 
 - 
 
57 
    const getMoreMessages = () => {
 - 
 
58 
        if (page.last > page.current) {
 - 
 
59 
            setPage({ ...page, current: page.current += 1 })
 - 
 
60 
        }
 - 
 
61 
    }
 - 
 
62 
 
 - 
 
63 
    useEffect(() => {
 - 
 
64 
        if (selectedConversation) {
 - 
 
65 
            getMessages(selectedConversation.messages_link)
 - 
 
66 
                .then(({ pages, msgs }) => {
 - 
 
67 
                    setPage({ ...page, last: pages.last })
 - 
 
68 
                    setMessages(msgs)
 - 
 
69 
                })
 - 
 
70 
        }
 65 
    }
71 
    }, [selectedConversation]);
 66 
  }, [selectedConversation])
72 
 
 67 
 
73 
    useEffect(() => {
 68 
  useEffect(() => {
74 
        let timer;
 69 
    let timer
75 
        if (!isGettingMessages && selectedConversation) {
 70 
    if (!isGettingMessages && selectedConversation) {
76 
            timer = setTimeout(() => {
 71 
      timer = setTimeout(() => {
77 
                getMessages(selectedConversation.messages_link)
 72 
        getMessages(selectedConversation.messages_link)
78 
                    .then(({ pages, msgs }) => {
 73 
          .then(({ pages, msgs }) => {
79 
                        setPage({ ...page, last: pages.last })
 74 
            setPage({ ...page, last: pages.last })
80 
                        setMessages(msgs)
 75 
            setMessages(msgs)
81 
                    })
 76 
          })
82 
            }, 2000);
 77 
      }, 2000)
83 
        }
 78 
    }
84 
        return () => {
 79 
    return () => {
85 
            clearTimeout(timer);
 80 
      clearTimeout(timer)
86 
        };
 81 
    }
87 
    }, [isGettingMessages, selectedConversation]);
 82 
  }, [isGettingMessages, selectedConversation])
88 
 
 83 
 
89 
    useEffect(() => {
 84 
  useEffect(() => {
90 
        if (page.current > 1) {
 85 
    if (page.current > 1) {
91 
            setIsGettingMessages(true)
 86 
      setIsGettingMessages(true)
92 
 
 - 
 
93 
            getMessages({ _page: page.current })
 87 
 
94 
                .then(({ pages, msgs }) => {
 88 
      getMessages({ _page: page.current })
95 
 
 89 
        .then(({ pages, msgs }) => {
96 
                    setPage({ ...page, last: pages.last })
 90 
          setPage({ ...page, last: pages.last })
97 
                    setMessages(prev => [...prev, ...msgs])
 91 
          setMessages(prev => [...prev, ...msgs])
98 
                })
 92 
        })
99 
        }
 93 
    }
100 
    }, [page.current]);
 94 
  }, [page.current])
101 
 
 95 
 
102 
    return (
 96 
  return (
103 
        <div className="messages-sec container">
 97 
    <div className="messages-sec container">
104 
            <div className="row">
 98 
      <div className="row">
105 
                <div className={`col-12 col-md-4 ${selectedConversation && 'msgs-hide'}`}>
 99 
        <div className={`col-12 col-md-4 ${selectedConversation && 'msgs-hide'}`}>
106 
                    <Sidebar
 100 
          <Sidebar
107 
                        setConversation={changeConversation}
 101 
            setConversation={changeConversation}
108 
                        selectedConversation={selectedConversation}
 102 
            selectedConversation={selectedConversation}
109 
                    />
 - 
 
110 
                </div>
 - 
 
111 
                <div className={`col-12 col-md-8 ${!selectedConversation && 'msgs-hide'}`}>
 103 
          />
112 
                    {selectedConversation
 104 
        </div>
113 
                        ?
 - 
 
114 
                        <ChatMail
 - 
 
115 
                            setConversation={changeConversation}
 - 
 
116 
                            getMoreMessages={() => getMoreMessages()}
 105 
        <div className={`col-12 col-md-8 ${!selectedConversation && 'msgs-hide'}`}>
117 
                            backendVars={props.backendVars}
 - 
 
118 
                            onSend={handleSend}
 106 
          <ChatMail
119 
                            messages={messages}
 107 
            selectedConversation={selectedConversation}
120 
                            setMsgs={setMessages}
 - 
 
121 
                            selectedConversation={selectedConversation}
 - 
 
122 
                            loading={isGettingMessages}
 - 
 
123 
                        />
 - 
 
124 
                        :
 - 
 
125 
                        <div className='message-select-conversation'>
 - 
 
126 
                            <div className='msgs-select-container'>
 - 
 
127 
                                <i className='fas fa-comments icon' />
 - 
 
128 
                                <h3>
 108 
            messages={messages}
129 
                                    No hay mensajes
 109 
            setConversation={changeConversation}
130 
                                </h3>
 - 
 
131 
                            </div>
 - 
 
132 
                        </div>
 110 
            getMoreMessages={() => getMoreMessages()}
133 
                    }
 111 
            onSend={handleSend}
- 
 
 112 
            setMsgs={setMessages}
- 
 
 113 
          />
134 
                </div>
 114 
        </div>
135 
            </div>
 115 
      </div>
Línea 136... Línea -...
136 
        </div>
 - 
 
137 
    )
 116 
    </div>
- 
 
 117 
  )