Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { useDispatch, useSelector } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import EmptySection from '../../components/UI/EmptySection'

const mock = {
  items: [
    {
      image:
        '/storage/type/knowledge-area/code/facd46a7-70dd-4a8f-9827-605b8f32aaeb/filename/646e347a5124e-area1.png/',
      title: 'Programa #1',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq...',
      category: 'Programas de Desarrollo',
      link_view: '/knowledge-area/view/facd46a7-70dd-4a8f-9827-605b8f32aaeb',
      link_edit: '/knowledge-area/edit/facd46a7-70dd-4a8f-9827-605b8f32aaeb',
      link_delete:
        '/knowledge-area/delete/facd46a7-70dd-4a8f-9827-605b8f32aaeb',
    },
    {
      image:
        '/storage/type/knowledge-area/code/174ae74a-3e97-4820-a35e-8315d3a698ff/filename/646e39ca08a08-profile_1.png/',
      title: 'Desarrollo web',
      description: 'Prueba de desarrollo',
      category: 'Programas de Desarrollo',
      link_view: '/knowledge-area/view/174ae74a-3e97-4820-a35e-8315d3a698ff',
      link_edit: '/knowledge-area/edit/174ae74a-3e97-4820-a35e-8315d3a698ff',
      link_delete:
        '/knowledge-area/delete/174ae74a-3e97-4820-a35e-8315d3a698ff',
    },
  ],
  total: 2,
  page: 1,
  total_pages: 10,
}

const KnowledgeAreaPage = ({ allowAdd = true, content_edit = true }) => {
  const [knowledges, setKnowledges] = useState([])
  const [knowledgesCategories, setKnowledgesCategories] = useState([])
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  useEffect(() => {
    axios
      .get('/knowledge-area', {
        headers: {
          'Content-Type': 'application/json',
        },
      })
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Ha ocurrido un error, por favor intente más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        setKnowledges(data.items)
      })
      .catch((error) => {
        dispatch(
          addNotification({
            style: 'danger',
            msg: 'Ha ocurrido un error, por favor intente más tarde.',
          })
        )
        throw new Error(error)
      })
  }, [])

  return (
    <section className="companies-info container px-0">
      <div className="company-title">
        <h1 className="title mx-auto">{labels.knowledge_area_title}</h1>
        {content_edit && allowAdd && (
          <h2 className="title cursor-pointer" id="knowledge-add-a">
            {labels.knowledge_area_add}
          </h2>
        )}
      </div>

      <div className="row gap-3" id="row-list">
        <div className="knowledge-category-list col-12 col-md-3">
          <ul>
            <li className="knowledge-category-li knowledge-category-li-selected">
              <a className="knowledge-category-a" href="">
                {labels.knowledge_area_category_all}
              </a>
            </li>
            {knowledgesCategories.map((category, index) => (
              <li className="knowledge-category-li" key={index}>
                <a className="knowledge-category-a" href="">
                  {category.name}
                </a>
              </li>
            ))}
          </ul>
        </div>

        <div className="col px-0">
          <div className="search-box">
            <form id="form-filter" name="form-filter">
              <input
                type="text"
                name="search"
                id="search"
                className="form-control"
              />
              <button className="btn btn-search">{labels.search}</button>
            </form>
          </div>

          <div className="knowledge-record-list mt-3">
            {knowledges.length ? (
              knowledges.map((knowledge, index) => (
                <Item key={index} {...knowledge} />
              ))
            ) : (
              <EmptySection
                message={labels.error_no_record_matched_your_query}
              />
            )}
          </div>

          {/* <div id="knowledge-record-pagination"></div> */}
        </div>
      </div>
    </section>
  )
}

const Item = ({
  link_delete,
  link_view,
  link_edit,
  category,
  description,
  image,
  title,
}) => {
  return (
    <div className="knowledge-record-card">
      <a
        href={link_view}
        target="_blank"
        className="knowledge-record-card-actions-view"
        rel="noreferrer"
      >
        <img src={image} alt={`${title} image`} />
      </a>
      <div className="d-flex align-items-center justify-content-between">
        {link_edit && (
          <button data-link="{{>link_edit}}" className="btn-knowledge-edit">
            <i className="fa fa-pencil" aria-hidden="true" />
          </button>
        )}

        {link_delete && (
          <button data-link="{{>link_delete}}" className="btn-knowledge-delete">
            <i className="fa fa-trash" aria-hidden="true" />
          </button>
        )}
      </div>
      <h3>{category}</h3>
      <a href={link_view} target="_blank" rel="noreferrer">
        <h2>{title}</h2>
      </a>
      <p>{description}</p>
    </div>
  )
}

export default KnowledgeAreaPage