Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { connect } from "react-redux";
import { styled } from "@mui/material";
import { CheckCircle } from "@mui/icons-material";
import parse from "html-react-parser";

import { axios } from "@app/utils";
import { addNotification } from "@app/redux/notification/notification.actions";
import { useFetch } from "@hooks";

import { FILE_TYPE_LABELS } from "@app/constants/files";

import Button from "@app/components/UI/buttons/Buttons";
import Spinner from "@app/components/UI/Spinner";
import WidgetWrapper from "@app/components/widgets/WidgetLayout";
import MicrolearningLayout from "@app/layouts/micro-learning/GoBack";

const Slide = styled(WidgetWrapper)`
  margin: auto;
  width: fit-content;
  svg {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  img,
  video {
    max-width: 400px;
    max-height: 400px;
    object-fit: contain;
  }
  button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
  }
`;

const SlideViewPage = ({ addNotification }) => {
  const { uuid } = useParams();
  const {
    data: slide,
    isLoading,
    mutate,
  } = useFetch(`/microlearning/get-slide/${uuid}`, {});
  const [displayFile, setDisplayFile] = useState(false);
  const navigate = useNavigate();

  const closeParent = async (url = "") => {
    const response = await axios.post(url);
    const { data, success } = response.data;

    if (!success) {
      const errorMessage =
        typeof data === "string"
          ? data
          : Object.entries(data)
              .map(([key, value]) => `${key}: ${value}`)
              .join(", ");
      throw new Error(errorMessage);
    }

    const resMsg = data.message ?? data;
    addNotification({ style: "success", msg: resMsg });
  };

  const markCompleted = async () => {
    try {
      const response = await axios.post(slide?.link_sync);
      const { data, success } = response.data;

      if (!success) {
        const errorMessage =
          typeof data === "string"
            ? data
            : Object.entries(data)
                .map(([key, value]) => `${key}: ${value}`)
                .join(", ");
        throw new Error(errorMessage);
      }

      if (data.link_close_capsule) {
        await closeParent(data?.link_close_capsule);
        navigate("/microlearning");
      }

      if (data.link_close_topic) {
        await closeParent(data?.link_close_topic);
      }

      const resMsg = data.message ?? data;
      addNotification({ style: "success", msg: resMsg });
      mutate({ ...slide, completed: 1 });
    } catch (error) {
      addNotification({ style: "danger", msg: error.message });
    } finally {
      setDisplayFile(false);
    }
  };

  const renderFile = (type = "video") => {
    switch (type) {
      case "video": {
        return (
          <>
            {displayFile ? (
              <video controls controlsList="nodownload" onEnded={markCompleted}>
                <source src={slide?.file} />
              </video>
            ) : (
              <>
                <img src={slide?.background} alt={slide?.name} />
                <Button
                  color="primary"
                  onClick={() => setDisplayFile(!displayFile)}
                >
                  {FILE_TYPE_LABELS[slide?.type]}
                </Button>
              </>
            )}
          </>
        );
      }

      case "image": {
        return <img src={slide?.file} alt={slide?.name} />;
      }

      case "audio": {
        return (
          <>
            {displayFile ? (
              <audio
                controls
                src={slide?.file}
                alt={slide?.name}
                onEnded={markCompleted}
              />
            ) : (
              <>
                <img src={slide?.background} alt={slide?.name} />
                <Button
                  color="primary"
                  onClick={() => setDisplayFile(!displayFile)}
                >
                  {FILE_TYPE_LABELS[slide?.type]}
                </Button>
              </>
            )}
          </>
        );
      }

      case "text": {
        return parse(slide?.description);
      }

      case "document": {
        return (
          <a href={slide?.file} target="_blank" rel="noreferrer">
            <img className="pdf" src="/images/extension/pdf.png" alt="pdf" />
          </a>
        );
      }

      default:
        return (
          <>
            {displayFile ? (
              <video controls controlsList="nodownload" onEnded={markCompleted}>
                <source src={slide?.file} />
              </video>
            ) : (
              <>
                <img src={slide?.background} alt={slide?.name} />
                <Button
                  color="primary"
                  onClick={() => setDisplayFile(!displayFile)}
                >
                  {FILE_TYPE_LABELS[slide?.type]}
                </Button>
              </>
            )}
          </>
        );
    }
  };

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

  return (
    <MicrolearningLayout title={slide?.name}>
      <Slide>
        {slide?.completed && !displayFile ? (
          <CheckCircle color="success" />
        ) : null}
        {renderFile(slide?.type)}
      </Slide>

      <Button
        color="primary"
        disabled={slide?.completed}
        onClick={() => markCompleted()}
        sx={{ width: "100%", mt: 2 }}
      >
        Marcar como completado
      </Button>
    </MicrolearningLayout>
  );
};

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
};

export default connect(null, mapDispatchToProps)(SlideViewPage);