local dependencia

src/views/administracion/dependencias/DependenciasListado.js

@@ -1,24 +1,20 @@
-import React, { useEffect, useState } from 'react';
-import { Table, Modal } from 'antd';
+import React, { useState } from 'react';
+import { Modal, Divider } from 'antd';
 import { useHistory } from 'react-router-dom';
 import { EditOutlined, DeleteOutlined, PlusCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
-import { firestore } from "../../../services/firebase";
-import { ActionsButton } from '../../../components';
-import { SimpleTableLayout } from '../../../components/layouts'
-import { collection, onSnapshot, doc, updateDoc } from "firebase/firestore";
 import moment from 'moment';
+import { ActionsButton } from '../../../components';
+import { SimpleTableLayout } from '../../../components/layouts';
+import Tabla from '../../../components/Tabla';
+import HttpService from '../../../services/httpService';
 
 const DependenciasListado = () => {
 
   const titulo = "Dependencias";
-  const firebaseCollection = "dependencias";
   const url = "/administracion/dependencias";
   const history = useHistory();
   const { confirm } = Modal;
 
-  const [cargandoDependencias, setCargandoDependencias] = useState(true);
-  const [dependencias, setDependencias] = useState([]);
-  const [filteredResults, setFilteredResults] = useState([]);
   const [searchInput, setSearchInput] = useState('');
 
   const defaultText = prop => prop || <span style={{ color: '#c7c3c3' }}>---</span>;
@@ -30,21 +26,19 @@ const DependenciasListado = () => {
       key: "id",
       align: "center",
       width: 100,
-      render: (_, item ) => (
+      render: (_, item) => (
         <ActionsButton
           key={item}
           options={[
             {
               name: "Editar",
               icon: <EditOutlined />,
-              onClick: () => history.push(url+'/detalle?id='+item.id)
+              onClick: () => history.push(url + '/detalle?id=' + item.id)
             },
             {
               name: "Eliminar",
               icon: <DeleteOutlined />,
-              onClick: () => {
-                eliminarRegistro(item)
-              },
+              onClick: () => eliminarRegistro(item),
               styleProps: { color: '#e91e63' },
             },
           ]}
@@ -62,16 +56,16 @@ const DependenciasListado = () => {
       dataIndex: "timestamp",
       key: "timestamp",
       render: (_, item) => (
-        moment(item?.timestamp?.toDate()).format('DD-MM-YYYY')
+        moment(item?.timestamp?.toDate ? item.timestamp.toDate() : item?.timestamp).format('DD-MM-YYYY')
       ),
     },
   ];
-  
+
   const multipleButtonData = [{
     text: "Agregar",
-    to: () => history.push(url+'/nueva'),
+    to: () => history.push(url + '/nueva'),
     icon: <PlusCircleOutlined />,
-    props: { disabled: false, type: 'primary', }
+    props: { disabled: false, type: 'primary' }
   }];
 
   const eliminarRegistro = async (item) => {
@@ -81,7 +75,7 @@ const DependenciasListado = () => {
       content: '¿Seguro que desea eliminar este registro?',
       onOk: async () => {
         try {
-          await updateDoc(doc(firestore, firebaseCollection, item.id), {estatus: false}); 
+          await HttpService.post('v1/dependencia/delete', { id: item.id });
         } catch (error) {
           console.log('error al eliminar: ', error);
         }
@@ -90,53 +84,25 @@ const DependenciasListado = () => {
     });
   };
 
-  const onSearch = (searchValue) =>  {
+  const onSearch = (searchValue) => {
     setSearchInput(searchValue);
-    if( searchValue !== '' ){
-      const filteredData = dependencias.filter((item) => {
-        return Object.values(item).join('').toLowerCase().includes(searchValue.toLowerCase());
-      })
-      setFilteredResults(filteredData);
-    }else{
-      setFilteredResults(dependencias);
-    }
   };
 
-  // Dependencias
-  useEffect (() => {  
-    try {
-      onSnapshot( collection(firestore, firebaseCollection), (querySnapshot) => {
-         const docs = [];
-         querySnapshot.forEach((doc) => {
-          if( doc.data().estatus ) {
-            docs.push({ ...doc.data(), id:doc.id });
-          }
-         });
-         setDependencias(docs);
-       })
-     } catch (error) {
-       console.log('error al cargar dependencias de firebase: ', error);
-     } finally {
-      setCargandoDependencias(false);
-     }
-  }, []);
-  
   return (
-    <SimpleTableLayout 
+    <SimpleTableLayout
       title={titulo}
       multipleButtonData={multipleButtonData}
       onSearchClicked={onSearch}
     >
-      <Table
-        dataSource={searchInput.length > 1 ? filteredResults : dependencias}
-        rowKey="id"
-        loading={cargandoDependencias}
+      <Divider />
+      <Tabla
+        nameURL={"v1/dependencia"}
         columns={columns}
-        size='small'
-        scroll={{ x: 700 }}
+        extraParams={{ q: searchInput }}
+        scroll={{ x: "30vw" }}
       />
     </SimpleTableLayout>
-  )
-}
+  );
+};
 
-export default DependenciasListado
+export default DependenciasListado;