Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import React, { useState } from 'react';

import { useNavigate } from 'react-router-dom'

import { useNavigate } from 'react-router-dom';

import { useDispatch, useSelector } from 'react-redux'

import { useDispatch, useSelector } from 'react-redux';

import { addNotification } from '@app/redux/notification/notification.actions'

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

import { showReportModal } from '@app/redux/report/report.actions'

import { showReportModal } from '@app/redux/report/report.actions';

import { deleteFeed, fetchFeeds } from '@app/redux/feed/feed.actions'

import { deleteFeed, fetchFeeds } from '@app/redux/feed/feed.actions';

import Widget from '@components/UI/Widget'

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

import Options from '@components/UI/Option'

import Options from '@components/UI/Option';

import ConfirmModal from '@components/modals/ConfirmModal'

import ConfirmModal from '@components/modals/ConfirmModal';

export default function FeedHeader({ id }) {

export default function FeedHeader({ id }) {

  const [showConfirmModal, setShowConfirmModal] = useState(false)

  const [showConfirmModal, setShowConfirmModal] = useState(false);

  const navigate = useNavigate()

  const navigate = useNavigate();

  const dispatch = useDispatch()

  const dispatch = useDispatch();

  const { timelineUrl, currentPage } = useSelector(({ feed }) => feed)

  const { timelineUrl, currentPage } = useSelector(({ feed }) => feed);

  const {

  const {

    feed_delete_url: deleteUrl,

    feed_delete_url: deleteUrl,

    feed_abuse_report_url: reportUrl,

    feed_abuse_report_url: reportUrl,

    owner_image: image,

    owner_image: image,

    owner_name: name,

    owner_name: name,

    owner_time_elapse: timeElapse,

    owner_time_elapse: timeElapse,

    owner_url: profileUrl

    owner_url: profileUrl

  } = useSelector(({ feed }) => feed.feeds.byId[id])

  } = useSelector(({ feed }) => feed.feeds.byId[id]);

  const removeFeed = async () => {

  const removeFeed = async () => {

    try {

    try {

      const response = await dispatch(deleteFeed(deleteUrl, id))

      const response = await dispatch(deleteFeed(deleteUrl, id));

      dispatch(addNotification({ style: 'success', msg: response }))

      dispatch(addNotification({ style: 'success', msg: response }));

      toggleConfirm()

      toggleConfirm();

    } catch (error) {

    } catch (error) {

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

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

    }

    }

  }

  };

  const reportFeed = () =>

  const reportFeed = () =>

    dispatch(

    dispatch(

      showReportModal({

      showReportModal({

        type: 'publicación',

        type: 'publicación',

        reportUrl,

        reportUrl,

        onComplete: () => dispatch(fetchFeeds(timelineUrl, currentPage))

        onComplete: () => dispatch(fetchFeeds(timelineUrl, currentPage))

      })

      })

    )

    );

  const toggleConfirm = () => setShowConfirmModal(!showConfirmModal)

  const toggleConfirm = () => setShowConfirmModal(!showConfirmModal);

  return (

  return (

    <>

    <>

      <Widget.Header

      <Widget.Header

        avatar={image}

        avatar={image}

        title={name}

        title={name}

        onClick={() => navigate(profileUrl)}

        onClick={() => navigate(profileUrl)}

        subheader={timeElapse}

        subheader={timeElapse}

        renderAction={() => (

        renderAction={() => (

          <Options>

          <Options>

              <Options.Item onClick={reportFeed}>Reportar</Options.Item>

            {reportUrl ? <Options.Item onClick={reportFeed}>Reportar</Options.Item> : null}

              <Options.Item onClick={toggleConfirm}>Borrar</Options.Item>

            {deleteUrl ? <Options.Item onClick={toggleConfirm}>Borrar</Options.Item> : null}

          </Options>

          </Options>

        )}

        )}

      />

      />

        onClose={toggleConfirm}

      <ConfirmModal show={showConfirmModal} onClose={toggleConfirm} onAccept={removeFeed} />

    </>

    </>

  )

  );

}

}