Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { Backdrop, Box, styled, Typography } from '@mui/material';

import { parse } from '@utils';
import { useFetch, useInmail } from '@hooks';

import Widget from '@components/UI/Widget';
import Input from '@components/UI/inputs/Input';
import Ckeditor from '@components/common/ckeditor/Ckeditor';
import Spinner from '@components/UI/Spinner';

const Row = styled(Box)(({ theme }) => ({
  display: 'flex',
  gap: theme.spacing(1),
  marginBottom: theme.spacing(0.5)
}));

function InmailAttachment({ filename, contentType, attachmentLink }) {
  const [show, setShow] = useState(false);

  const getAttachmentType = (type = '') => {
    const attachmentTypes = ['image', 'video', 'audio'];
    return (
      attachmentTypes.find((attachmentType) => type.includes(attachmentType)) ?? attachmentTypes[0]
    );
  };

  const attachmentTypeTags = {
    image: <img src={attachmentLink} alt={filename} />,
    video: <video src={attachmentLink} />,
    audio: <audio src={attachmentLink} />
  };

  const toggleShow = () => setShow(!show);

  return (
    <>
      <img
        src={`/images/${getAttachmentType(contentType)}.png`}
        alt={filename}
        onClick={toggleShow}
        width={60}
        height={60}
      />
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={show}
        onClick={toggleShow}
      >
        <Widget styles={{ maxWidth: '500px' }}>
          <Widget.Header title={filename} />
          <Widget.Body>
            {attachmentTypeTags[getAttachmentType(contentType)] ?? attachmentTypeTags.image}
          </Widget.Body>
        </Widget>
      </Backdrop>
    </>
  );
}

export function MessageViewPage() {
  const { messages, loading } = useInmail();
  const { uuid } = useParams();
  const currentMessage = messages.find((message) => message.email_id === uuid);

  const { data: message, isLoading } = useFetch(currentMessage?.get_link, null);

  if (isLoading || loading) {
    return <Spinner />;
  }

  return (
    <Widget>
      <Widget.Body>
        <Row>
          <Typography variant='overline'>De: </Typography>
          <Input value={message?.name} disabled fullWidth />
        </Row>
        <Row>
          <Typography variant='overline'>Asunto: </Typography>
          <Input value={message?.subject} disabled fullWidth />
        </Row>
        <Typography variant='overline' sx={{ marginBottom: 0.5 }}>
          Fecha: {message?.date}
        </Typography>
        <Ckeditor defaultValue={parse(message?.body)} disabled />
        <Typography variant='h3' sx={{ my: 0.5 }}>
          Archivos adjuntos:
        </Typography>
        {message?.attachments.map((attachment, index) => (
          <InmailAttachment
            key={index}
            filename={attachment.filename}
            attachmentLink={attachment.attachment_link}
            contentType={attachment['content-type']}
          />
        ))}
      </Widget.Body>
    </Widget>
  );
}