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>
  );
}