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>

  );

}