Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3604 Rev 3605
Línea 1... Línea 1...
1 
import React, { useEffect, useRef } from 'react';
 1 
import React, { useEffect, useRef } from 'react';
2 
import { Box } from '@mui/material';
 2 
import { Box } from '@mui/material';
3 
import { Inbox } from '@mui/icons-material';
 3 
import { Inbox } from '@mui/icons-material';
Línea 4... Línea 4...
4 
 
 4 
 
5 
import { Spinner } from '@shared/components';
 5 
import { Card, CardContent, CardHeader, Spinner } from '@shared/components';
6 
import EmptySection from '@components/UI/EmptySection';
 6 
import EmptySection from '@components/UI/EmptySection';
Línea 7... Línea 7...
7 
import MessageItem from './MessageItem';
 7 
import MessageItem from './MessageItem';
8 
 
 8 
 
Línea 31... Línea 31...
31 
      />
 31 
      />
32 
    );
 32 
    );
33 
  }
 33 
  }
Línea 34... Línea 34...
34 
 
 34 
 
35 
  return (
 35 
  return (
36 
    <Box
 - 
 
37 
      sx={{
 - 
 
38 
        display: 'flex',
 36 
    <Card>
39 
        flexDirection: 'column',
 - 
 
40 
        height: '100%',
 37 
      <CardHeader title='Mensajes' />
41 
        overflow: 'hidden',
 - 
 
42 
        bgcolor: 'background.paper'
 - 
 
43 
      }}
 - 
 
44 
    >
 38 
      <CardContent>
45 
      <Box
 39 
        <Box
46 
        sx={{
 - 
 
47 
          flex: 1,
 40 
          sx={{
48 
          overflow: 'auto',
 41 
            display: 'flex',
49 
          display: 'flex',
 42 
            flex: 1,
50 
          flexDirection: 'column-reverse',
 43 
            flexDirection: 'column-reverse',
51 
          p: 1
 44 
            overflow: 'auto'
52 
        }}
 45 
          }}
53 
      >
 46 
        >
54 
        <div ref={messagesEndRef} />
 47 
          <div ref={messagesEndRef} />
55 
 
 48 
 
56 
        {messages.map((message, index) => {
 49 
          {messages.map((message, index) => {
57 
          if (index === messages.length - 1) {
 50 
            if (index === messages.length - 1) {
58 
            return (
 51 
              return (
59 
              <MessageItem
 52 
                <MessageItem
60 
                ref={lastElementRef}
 53 
                  lastElementRef={lastElementRef}
61 
                key={message.uuid}
 54 
                  key={message.uuid}
62 
                message={message}
 55 
                  message={message}
63 
                onReport={handleReport}
 56 
                  onReport={handleReport}
64 
              />
 57 
                />
65 
            );
 58 
              );
66 
          }
 59 
            }
67 
 
 60 
 
68 
          return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
 61 
            return <MessageItem key={message.uuid} message={message} onReport={handleReport} />;
69 
        })}
 62 
          })}
70 
 
 63 
 
71 
        {loading && (
 64 
          {loading && (
72 
          <Box
 65 
            <Box
73 
            sx={{
 66 
              sx={{
74 
              display: 'flex',
 67 
                display: 'flex',
75 
              justifyContent: 'center',
 68 
                justifyContent: 'center',
76 
              alignItems: 'center',
 - 
 
77 
              py: 2,
 69 
                alignItems: 'center',
78 
              minHeight: '60px'
 70 
                minHeight: '60px'
79 
            }}
 71 
              }}
80 
          >
 72 
            >
81 
            <Spinner size='small' />
 73 
              <Spinner size='small' />
82 
          </Box>
 74 
            </Box>
83 
        )}
 75 
          )}
- 
 
 76 
        </Box>
84 
      </Box>
 77 
      </CardContent>
85 
    </Box>
 78 
    </Card>
86 
  );
 79 
  );
Línea 87... Línea 80...
87 
};
 80 
};