Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { Avatar, Card } from '@mui/material'

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'

export const StyledQuestionCard = styled(Card)`

  background: var(--bg-color);

  border: 1px solid var(--border-primary);

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

  height: fit-content;

  padding: 1rem 0;

  & > * {

    padding-right: 0.8rem;

    padding-left: 0.8rem;

  }

  & > h2 {

    font-size: 16px;

    line-height: 1.2;

    margin-bottom:5px;

  }

  input[text]{

    flex-grow: 1;

    padding: 0.5rem;

    background-color: #ECECEC;

    border: 1px solid var(--border-primary);

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

    width:80%;

  }

  p {

    color: var(--font-color);

    font-size: 14px;

    font-weight: 400;

    text-align: justify;

    margin-bottom: 0.5rem;

  }

  span {

    color: var(--subtitle-color);

    font-weight: 400;

    font-size: .7rem;

    margin-top:3px;

  }

`

export const QuestionDetails = styled.div`

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

  justify-content: space-between;

  margin-bottom: 0.5rem;

  padding-bottom: 0.5rem;

  border-bottom: 1px solid var(--border-primary);

`

export const QuestionUserInfo = styled.div`

  align-items: center;

  display: inline-flex;

  gap: 0.5rem;

  width: fit-content;

  span {

    color: #000;

    font-weight: 600;

    font-size: 0.8rem;

  }

`

export const QuestionActions = styled.div`

  display: flex;

  align-items: center;

  gap: 0.5rem;

  justify-content: space-around;

  padding-top: 0.5rem;

  border-top: 1px solid var(--border-primary);

  & > * {

    flex-grow: 1;

  }

  .btn {

    color: var(--icons-color);

    font-size: 0.9rem !important;

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

    padding: 5px !important;

    position: relative;

    display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

  }

`

export const QuestionStats = styled.div`

  display: flex;

  align-items: center;

  gap: 0.5rem;

  justify-content: space-around;

`

export 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 (

    <StyledQuestionCard>

      <QuestionDetails>

        <QuestionUserInfo>

          <Avatar

            src={user_image}

            alt={`${user_name} profile image`}

            sx={{ width: '50px', height: '50px' }}

          />

          <span>{user_name}</span>

        </QuestionUserInfo>

        <QuestionCategories>

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

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

          ))}

        </QuestionCategories>

      </QuestionDetails>

      <h2>{title}</h2>

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

      {last_answer_on && (

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

      )}

      <Paraphrase className="my-2">{description}</Paraphrase>

      <QuestionStats className="mb-2">

        <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>

      <QuestionActions>

        {link_answers && (

          <button className="btn feed__share-option" onClick={goBack}>

            <ArrowBackIosNewIcon />

            {labels.back}

          </button>

        )}

        {link_view && (

          <button

            className="btn feed__share-option"

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

          >

            <OpenInNewIcon />

            {labels.view}

          </button>

        )}

        {link_edit && (

          <button

            className="btn feed__share-option"

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

          >

            <EditIcon />

            {labels.edit}

          </button>

        )}

        {link_answers_add && (

          <button

            className="btn feed__share-option"

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

          >

            <EditIcon />

            {labels.reply}

          </button>

        )}

        {link_delete && (

          <button

            className="btn feed__share-option"

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

          >

            <DeleteIcon />

            {labels.delete}

          </button>

        )}

      </QuestionActions>

    </StyledQuestionCard>

  )

}

export default QuestionCard