Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef, useState } from 'react';

import { useDispatch } from 'react-redux';

import { Backdrop, IconButton } from '@mui/material';

import Close from '@mui/icons-material/Close';

import { useHabitsUrls } from '@hooks';

import { useDailyLogCategories } from './use-daily-log-categories';

import { savePreferences } from '@services/habits/daily-log';

import { addNotification } from '@store/notification/notification.actions';

import Widget from '@components/UI/Widget';

import DailyLogForm from './daily-log-form';

import DailyMediaContent from './daily-media-content';

export default function DailyLog() {

  const [show, setShow] = useState(false);

  const [dailyMediaContent, setDailyMediaContent] = useState(null);

  const mediaRef = useRef(null);

  const dispatch = useDispatch();

  const { selectEmoji, categories } = useDailyLogCategories();

  const { links } = useHabitsUrls();

  const allCategoriesSelected = categories.length && categories.every((cat) => cat.selected);

  const saveDailyLog = async (log) => {

    try {

      const mediaResponse = await savePreferences(links.link_aspect_daily_log, log);

      mediaResponse.link ? setDailyMediaContent(mediaResponse) : setShow(false);

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }));

    }

  };

  useEffect(() => {

    if (!allCategoriesSelected) setShow(true);

  }, [allCategoriesSelected]);

  useEffect(() => {

    if (!show && !mediaRef.current?.paused) setDailyMediaContent(null);

  }, [show, mediaRef.current, setDailyMediaContent]);

  return (

    <Backdrop sx={{ color: '#fff', zIndex: 1250 }} open={show}>

      <Widget styles={{ maxWidth: '800px' }}>

        <Widget.Header

          renderAction={() =>

            dailyMediaContent ? (

              <IconButton onClick={() => setShow(false)}>

                <Close />

              </IconButton>

            ) : null

          }

        />

        <Widget.Body>

          {dailyMediaContent ? (

            <DailyMediaContent

              type={dailyMediaContent.type}

              mediaUrl={dailyMediaContent.link}

              ref={mediaRef}

            />

          ) : (

            <DailyLogForm categories={categories} onSelect={selectEmoji} onSubmit={saveDailyLog} />

          )}

        </Widget.Body>

      </Widget>

    </Backdrop>

  );

}