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