Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'

import { openShareModal } from '../../../../redux/share-modal/shareModal.actions'

import { shareModalTypes } from '../../../../redux/share-modal/shareModal.types'

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

import styled from 'styled-components'

import Avatar from '@mui/material/Avatar'

import ImageIcon from '@mui/icons-material/Image'

import CreateIcon from '@mui/icons-material/Create'

import ArticleIcon from '@mui/icons-material/Article'

import PostAddIcon from '@mui/icons-material/PostAdd'

import SubscriptionsIcon from '@mui/icons-material/Subscriptions'

import Input from '../../../UI/Input'

import ShareOption from './ShareOption'

import styles from './ShareComponent.module.scss'

import InputForm from 'components/UI/form/InputForm'

import { useForm } from 'react-hook-form'

const StyledInput = styled(Input)`

  border: 1px solid lightgray;

  background-color: #fff;

  border-radius: 30px;

  padding: 5px;

  padding-left: 1rem;

  flex: 1;

  cursor: pointer;

  &:hover {

    background-color: rgba(0, 0, 0, 0.08);

  }

`

const ShareComponent = ({ feedType, postUrl = '', image = '' }) => {

  const labels = useSelector(({ intl }) => intl.labels)

  const dispatch = useDispatch()

  const { control, watch } = useForm()

  const onClickHandler = (postType) => {

    dispatch(openShareModal(postUrl, postType, feedType))

  }

  useEffect(() => {

    const subscription = watch((value, { name, type }) =>

      console.log(value, name, type)

    )

    return () => subscription.unsubscribe()

  }, [watch])

  return (

    <div className={styles.share__container}>

      <div className={styles.input__container}>

        <Avatar src={image} className={styles.user_image} />

        <StyledInput

          type='text'

          readOnly

          icon={CreateIcon}

          placeholder={labels.what_are_you_thinking}

          onClick={() => onClickHandler(shareModalTypes.POST)}

        />

        <InputForm control={control} name='text' />

      </div>

      <div className={styles.share__options}>

        <ShareOption

          icon={ImageIcon}

          title={labels.image}

          color='#7405f9'

          onClick={() => onClickHandler(shareModalTypes.IMAGE)}

        />

        <ShareOption

          icon={SubscriptionsIcon}

          title={labels.video}

          color='#E7A33E'

          onClick={() => onClickHandler(shareModalTypes.VIDEO)}

        />

        <ShareOption

          icon={ArticleIcon}

          title={labels.document}

          color='#C0C8CD'

          onClick={() => onClickHandler(shareModalTypes.FILE)}

        />

        <ShareOption

          icon={PostAddIcon}

          title={labels.write}

          color='#7FC15E'

          onClick={() => onClickHandler(shareModalTypes.POST)}

        />

      </div>

    </div>

  )

}

export default ShareComponent