Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useSelector } from 'react-redux'

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

import styled from 'styled-components'

import OpenInNewIcon from '@mui/icons-material/OpenInNew'

import EditIcon from '@mui/icons-material/Edit'

import DeleteIcon from '@mui/icons-material/Delete'

import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'

import Paraphrase from '../UI/Paraphrase'

import StyledContainer from '../widgets/WidgetLayout'

export const QuestionStats = styled.div`

  display: flex;

  align-items: center;

  gap: 0.5rem;

  justify-content: space-around;

  padding: 5px;

`

const StyledQuestionContainer = styled(StyledContainer)`

  display: flex;

  flex-direction: column;

  height: 100%;

`

const StyledBody = styled(StyledContainer.Body)`

  flex: 1 1 0;

`

const QuestionCategories = styled.ul`

  align-items: center;

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

  max-width: 200px;

  li {

    background: rgb(198, 209, 240);

    border-radius: var(--border-radius);

    color: var(--font-color);

    padding: 0.3rem 0.4rem;

    font-size: 0.7rem;

    font-weight: 600;

  }

`

const QuestionCard = ({

  last_answer_on = '',

  added_on = '',

  user_name = '',

  user_image = '',

  title = '',

  description = '',

  categories = [],

  views = 0,

  answers = 0,

  reactions = 0,

  comments = 0,

  link_view = '',

  link_edit = '',

  link_delete = '',

  link_answers_add = '',

  link_answers = '',

  onDelete = () => null,

  onEdit = () => null,

  onReply = () => null

}) => {

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

  const history = useHistory()

  const onView = (url = '') => {

    history.replace(url)

  }

  const goBack = () => {

    history.replace('/my-coach')

  }

  return (

    <StyledQuestionContainer>

      <StyledContainer.Header image={user_image} title={user_name}>

        <QuestionCategories>

          {categories.map(({ category }) => (

            <li key={category}>{category}</li>

          ))}

        </QuestionCategories>

      </StyledContainer.Header>

      <StyledBody>

        <h2>{title}</h2>

        <span>{`${labels.my_coach_question} ${added_on}`}</span>

        {last_answer_on ? (

          <span>{`${labels.my_coach_last_answer} ${last_answer_on}`}</span>

        ) : null}

        <Paraphrase>{description}</Paraphrase>

      </StyledBody>

      <QuestionStats>

        <span>{`${answers} ${labels.my_coach_answers}`}</span>

        <span>{`${reactions} ${labels.my_coach_reactions}`}</span>

        <span>{`${views} ${labels.my_coach_views}`}</span>

        <span>{`${comments} ${labels.comments}`}</span>

      </QuestionStats>

      <StyledContainer.Actions>

        {link_answers && (

          <button onClick={goBack}>

            <ArrowBackIosNewIcon />

            {labels.back}

          </button>

        )}

        {link_view && (

          <button onClick={() => onView(link_view)}>

            <OpenInNewIcon />

            {labels.view}

          </button>

        )}

        {link_edit && (

          <button onClick={() => onEdit(link_edit)}>

            <EditIcon />

            {labels.edit}

          </button>

        )}

        {link_answers_add && (

          <button onClick={() => onReply(link_edit)}>

            <EditIcon />

            {labels.reply}

          </button>

        )}

        {link_delete && (

          <button

            className='btn feed__share-option'

            onClick={() => onDelete(link_delete)}

          >

            <DeleteIcon />

            {labels.delete}

          </button>

        )}

      </StyledContainer.Actions>

    </StyledQuestionContainer>

  )

}

export default QuestionCard