Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3598 Rev 3599
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react';
 1 
import React, { useState } from 'react';
2 
import { Grid, Typography } from '@mui/material';
 2 
import { Grid, Box, Typography } from '@mui/material';
Línea 3... Línea 3...
3 
 
 3 
 
4 
import { useApi, useFetch } from '@shared/hooks';
 - 
 
5 
 
 - 
 
Línea 6... Línea 4...
6 
import { getMessages } from '@inmail/services';
 4 
import { useFetch, usePagination } from '@shared/hooks';
7 
 
 5 
 
- 
 
 6 
import { Spinner } from '@shared/components';
- 
 
 7 
import { ConversationsList, MessagesList } from '@inmail/components';
- 
 
 8 
 
- 
 
 9 
const messagesResponse = {
- 
 
 10 
  success: true,
- 
 
 11 
  data: [
- 
 
 12 
    {
- 
 
 13 
      uuid: 'b18afb55-d40e-4fd9-95a6-324a7f45e57f',
- 
 
 14 
      sender_name: 'Cesa Managment Solution',
- 
 
 15 
      sender_image:
- 
 
 16 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 17 
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 18 
      receiver_name: 'Santiago Olivera',
- 
 
 19 
      receiver_image:
- 
 
 20 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 21 
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 22 
      side: 'right',
- 
 
 23 
      message: '',
- 
 
 24 
      type: 'image',
- 
 
 25 
      filename:
- 
 
 26 
        'https://dev-services.leaderslinked.com/storage/b18afb55-d40e-4fd9-95a6-324a7f45e57f',
- 
 
 27 
      date: 'hace 1 año',
- 
 
 28 
      url_abuse_report:
- 
 
 29 
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/b18afb55-d40e-4fd9-95a6-324a7f45e57f'
- 
 
 30 
    },
- 
 
 31 
    {
- 
 
 32 
      uuid: 'c3b3c887-9f88-4a36-a7c8-c417f5da80ff',
- 
 
 33 
      sender_name: 'Cesa Managment Solution',
- 
 
 34 
      sender_image:
- 
 
 35 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 36 
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 37 
      receiver_name: 'Santiago Olivera',
- 
 
 38 
      receiver_image:
- 
 
 39 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 40 
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 41 
      side: 'right',
- 
 
 42 
      message: 'Buenas tardes',
- 
 
 43 
      type: 'text',
- 
 
 44 
      filename: '',
- 
 
 45 
      date: 'hace 1 año',
- 
 
 46 
      url_abuse_report:
- 
 
 47 
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/c3b3c887-9f88-4a36-a7c8-c417f5da80ff'
- 
 
 48 
    },
- 
 
 49 
    {
- 
 
 50 
      uuid: '59120c84-335f-424c-8990-db51ae7bd673',
- 
 
 51 
      sender_name: 'Santiago Olivera',
- 
 
 52 
      sender_image:
- 
 
 53 
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 54 
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 55 
      receiver_name: 'Cesa Managment Solution',
- 
 
 56 
      receiver_image:
- 
 
 57 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 58 
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 59 
      side: 'left',
- 
 
 60 
      message: '',
- 
 
 61 
      type: 'image',
- 
 
 62 
      filename:
- 
 
 63 
        'https://dev-services.leaderslinked.com/storage/59120c84-335f-424c-8990-db51ae7bd673',
- 
 
 64 
      date: 'hace 1 año',
- 
 
 65 
      url_abuse_report: ''
- 
 
 66 
    },
- 
 
 67 
    {
- 
 
 68 
      uuid: '71c1356d-b5dc-413a-8f8e-ed087f99b6e3',
- 
 
 69 
      sender_name: 'Santiago Olivera',
- 
 
 70 
      sender_image:
- 
 
 71 
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 72 
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 73 
      receiver_name: 'Cesa Managment Solution',
- 
 
 74 
      receiver_image:
- 
 
 75 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 76 
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 77 
      side: 'left',
- 
 
 78 
      message: 'buenas tardes',
- 
 
 79 
      type: 'text',
- 
 
 80 
      filename: '',
- 
 
 81 
      date: 'hace 1 año',
- 
 
 82 
      url_abuse_report: ''
- 
 
 83 
    },
- 
 
 84 
    {
- 
 
 85 
      uuid: 'c484b564-3d69-42bf-b6c4-12dfa6230614',
- 
 
 86 
      sender_name: 'Santiago Olivera',
- 
 
 87 
      sender_image:
- 
 
 88 
        'https://dev-services.leaderslinked.com/storage/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 89 
      sender_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 90 
      receiver_name: 'Cesa Managment Solution',
- 
 
 91 
      receiver_image:
- 
 
 92 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 93 
      receiver_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 94 
      side: 'left',
- 
 
 95 
      message: 'Test',
- 
 
 96 
      type: 'text',
- 
 
 97 
      filename: '',
- 
 
 98 
      date: 'hace 1 año',
- 
 
 99 
      url_abuse_report: ''
- 
 
 100 
    },
- 
 
 101 
    {
- 
 
 102 
      uuid: 'f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1',
- 
 
 103 
      sender_name: 'Cesa Managment Solution',
- 
 
 104 
      sender_image:
- 
 
 105 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 106 
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 107 
      receiver_name: 'Santiago Olivera',
- 
 
 108 
      receiver_image:
- 
 
 109 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 110 
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 111 
      side: 'right',
- 
 
 112 
      message:
- 
 
 113 
        'buenas tardes\r\n\r\nbuenas tardesbuenas tardes\r\n\r\nbuenas tardesbuenas tardes\r\n\r\nbuenas tardesbuenas tardesbuenas tardes',
- 
 
 114 
      type: 'document',
- 
 
 115 
      filename:
- 
 
 116 
        'https://dev-services.leaderslinked.com/storage/f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1',
- 
 
 117 
      date: 'hace 1 año',
- 
 
 118 
      url_abuse_report:
- 
 
 119 
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/f29723fd-dc2a-4b06-8c8e-e0e0cfe36cd1'
- 
 
 120 
    },
- 
 
 121 
    {
- 
 
 122 
      uuid: '86453fcf-ac3b-4228-9007-9dbf100976ef',
- 
 
 123 
      sender_name: 'Cesa Managment Solution',
- 
 
 124 
      sender_image:
- 
 
 125 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 126 
      sender_profile: '/profile/view/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 127 
      receiver_name: 'Santiago Olivera',
- 
 
 128 
      receiver_image:
- 
 
 129 
        'https://dev-services.leaderslinked.com/storage/97e43a0a-5a85-4021-8bff-167d60e2a0f2',
- 
 
 130 
      receiver_profile: '/profile/view/e85129fa-18eb-4149-8640-fea9ae916cdc',
- 
 
 131 
      side: 'right',
- 
 
 132 
      message:
- 
 
 133 
        'hola,hola,hola,hola,hola,hola,hola,\r\nhola,hola,hola,\r\n\r\nhola,hola,\r\nhola,hola,hola,\r\n\r\nhola,hola,hola,',
- 
 
 134 
      type: 'image',
- 
 
 135 
      filename:
- 
 
 136 
        'https://dev-services.leaderslinked.com/storage/86453fcf-ac3b-4228-9007-9dbf100976ef',
- 
 
 137 
      date: 'hace 1 año',
- 
 
 138 
      url_abuse_report:
- 
 
 139 
        'https://dev-services.leaderslinked.com/helpers/abuse-report/message/86453fcf-ac3b-4228-9007-9dbf100976ef'
- 
 
 140 
    }
- 
 
 141 
  ],
- 
 
 142 
  pagination: {
- 
 
 143 
    pageCount: 1,
- 
 
 144 
    itemCountPerPage: 10,
- 
 
 145 
    first: 1,
- 
 
 146 
    current: 1,
- 
 
 147 
    last: 1,
- 
 
 148 
    pagesInRange: {
- 
 
 149 
      1: 1
- 
 
 150 
    },
- 
 
 151 
    firstPageInRange: 1,
- 
 
 152 
    lastPageInRange: 1,
- 
 
 153 
    currentItemCount: 7,
- 
 
 154 
    totalItemCount: 7,
- 
 
 155 
    firstItemNumber: 1,
- 
 
 156 
    lastItemNumber: 7
Línea 8... Línea 157...
8 
import { Spinner } from '@shared/components';
 157 
  }
9 
import { ConversationsList } from '@inmail/components/conversations';
 158 
};
Línea 10... Línea 159...
10 
 
 159 
 
11 
export function InmailPage() {
 - 
 
12 
  const [selectedConversation, setSelectedConversation] = useState(null);
 160 
export function InmailPage() {
13 
 
 161 
  const [selectedConversation, setSelectedConversation] = useState(null);
14 
  const { data: conversations, loading } = useFetch('/email');
 162 
 
- 
 
 163 
  const { data: conversations, loading } = useFetch('/email');
15 
  const { data: messages, loading: loadingMessages, execute: fetchMessages } = useApi(getMessages);
 164 
  const {
- 
 
 165 
    items: messages,
16 
 
 166 
    loading: loadingMessages,
- 
 
 167 
    nextPage
- 
 
 168 
  } = usePagination(selectedConversation?.messages_url, {
- 
 
 169 
    enableInfiniteScroll: true
17 
  useEffect(() => {
 170 
  });
Línea 18... Línea 171...
18 
    if (selectedConversation) {
 171 
 
19 
      fetchMessages(selectedConversation.messages_url);
 172 
  // Para demostración, usar datos de prueba cuando no hay conversación seleccionada
20 
    }
 173 
  const displayMessages = selectedConversation ? messages : messagesResponse.data;
Línea 21... Línea 174...
21 
  }, [selectedConversation]);
 174 
  const displayLoading = selectedConversation ? loadingMessages : false;
22 
 
 175 
 
23 
  if (loading || !conversations) {
 176 
  if (loading || !conversations) {
24 
    return <Spinner />;
 177 
    return <Spinner />;
25 
  }
 178 
  }
26 
 
 179 
 
27 
  return (
 180 
  return (
28 
    <Grid container spacing={2}>
 181 
    <Grid container spacing={2} sx={{ height: 'calc(100vh - 100px)' }}>
29 
      <Grid item xs={12} md={3}>
 182 
      <Grid item xs={12} md={3}>
30 
        <ConversationsList
 183 
        <ConversationsList
31 
          conversations={conversations}
 184 
          conversations={conversations}
- 
 
 185 
          onSelectConversation={setSelectedConversation}
32 
          onSelectConversation={setSelectedConversation}
 186 
        />
- 
 
 187 
      </Grid>
33 
        />
 188 
      <Grid item xs={12} md={9}>
- 
 
 189 
        <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
- 
 
 190 
          {selectedConversation && (
- 
 
 191 
            <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
- 
 
 192 
              <Typography variant='h6'>Conversación con {selectedConversation.name}</Typography>
- 
 
 193 
            </Box>
- 
 
 194 
          )}
- 
 
 195 
          <Box sx={{ flex: 1, overflow: 'hidden' }}>
- 
 
 196 
            <MessagesList
34 
      </Grid>
 197 
              messages={displayMessages}
35 
      <Grid item xs={12} md={9}>
 198 
              onLoadMore={nextPage}
36 
        {loadingMessages && <Spinner />}
 199 
              loading={displayLoading}
37 
        {messages?.map((message) => (
 200 
            />