refactor mov modal

;

psicoadmin/src/Components/Modal/AgregarExpress.js

+import React from 'react';
+import * as Yup from 'yup';
+import { Formik, Field, Form } from 'formik';
+import { Modal } from 'react-bootstrap'
+
+const ExpressSchema = Yup.object().shape({
+    link : Yup.string().required('El enlace es requerido').url("Debes agregar un enlace válido, recurda iniciar con http o https ").min(5).max(190),
+})
+
+export  default function Express (props) {
+    let { visible, onClose } = props
+    return (
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
+            <Modal.Header>
+                <button onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
+                <h4 className="modal-title">Agregar plaza express</h4>
+            </Modal.Header>
+            <Modal.Body>
+
+                <Formik
+                    initialValues={{
+                        link : ''
+                    }}
+                    validationSchema={ExpressSchema}
+                    onSubmit={ (values) => {
+                        props.setExpress(false)
+                        console.log('VALUES Express >> ',values)
+                    }} 
+                >
+                    { ({ errors, touched, validateField, validateForm, setFieldValue   }) =>  (
+
+                        <Form>
+                            <div className="data_product">
+                                <div className="row">
+                                    <div className="col-md-12">
+                                        <Field type="link" name="link" placeholder="Link de la plaza"/>
+                                        {errors.link && touched.link && <div className="error_feedback">{errors.link}</div>}
+                                    </div>
+                                    <div className="add_producto_confirm">
+                                        <button className="btn_add_producto_confirm" type="submit">Agregar plaza</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </Form>
+                    )}
+
+                </Formik>
+
+
+
+            </Modal.Body>
+        </Modal>
+    )
+}

psicoadmin/src/Components/Modal/AgregarManual.js

+import React from 'react';
+import * as Yup from 'yup';
+import { Formik, Field, Form } from 'formik';
+import { Row, Col, Modal, Button} from 'react-bootstrap'
+
+import NotFound from '../Images/not_found.png';
+const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/gif", "image/png"];
+
+const NewPlazaSchema = Yup.object().shape({
+    nombre : Yup.string().required('El nombre es requerido').min(5).max(20),
+    description : Yup.string().required('La description es requerida').min(5).max(20),
+    salario : Yup.number().required('El salario es requerido'),
+    imagen:  Yup.mixed().required('El imagen es requerido').test('fileSize', "El archivo es demasiado grande", value => {
+        if(!value || value.length <= 0) return false
+        return value[0].size < 200000
+    }).test('fileType', "El tipo del archivo no es válido", value => {
+        if(!value) return false
+        return SUPPORTED_FORMATS.includes(value[0].type)
+    })
+})
+
+export default function Manual ( props ) {
+
+    let [ filename, setFilename ] = React.useState('');
+    let [ file, setFile ] = React.useState(undefined);
+    let [ type, setType ] = React.useState(undefined);
+    let [ validType, setValidType ] = React.useState(false);
+
+    let { visible, onClose } = props
+    const hiddenFileInput = React.useRef(null);
+
+    const PickFile = event => hiddenFileInput.current.click();
+
+    React.useEffect(() => {
+        if( SUPPORTED_FORMATS.includes(type) ){
+            setValidType(true)
+        }else{
+            setValidType(false)
+        }
+
+    }, [type])
+
+
+    return (
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
+            <Modal.Header>
+                <button onClick={onClose}  type="button" className="close" data-dismiss="modal">&times;</button>
+                <h4 className="modal-title">Agregar plaza</h4>
+            </Modal.Header>
+            <Modal.Body className="modal-body">
+
+                <Formik
+
+                    initialValues={{
+                        nombre: '',
+                        description: '',
+                        salario: '',
+                        imagen: '',
+                    }}
+
+                    validationSchema={NewPlazaSchema}
+                    onSubmit={ (values) => {
+                        // console.log('VALUES >> ',values)
+                        props.setManual(false)
+                    }} >
+
+
+                    { ({  errors, touched, validateField, validateForm, setFieldValue  }) => (
+                        <Form>
+                            <Row>
+
+                                <Col md="4">
+                                    <div className="img-container">
+                                        <img alt="agregar plaza manual" src={ validType ? file : NotFound}/>
+                                    </div>
+                                </Col>
+
+                                <Col md="8">
+
+                                    <input 
+                                        value={filename} 
+                                        type="text" 
+                                        className="file-upload-input" 
+                                        disabled="" 
+                                        placeholder="Ningún archivo seleccionado" readOnly
+                                    />
+
+                                    <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={PickFile}>
+                                        SUBIR FOTO
+                                    </Button>
+
+                                    {errors.imagen && touched.imagen && <div className="error_feedback">{errors.imagen}</div>}
+                                    <input
+                                        multiple={false}
+                                        type="file"
+                                        ref={hiddenFileInput}
+                                        onChange={(event) => {
+                                            const files = event.target.files;
+                                            console.log('files crud ', files[0])
+                                            let myFiles =Array.from(files);
+                                            setFieldValue("imagen", myFiles);
+                                            setFilename(myFiles[0].name)
+                                            setType(myFiles[0].type)
+                                            const objectUrl = URL.createObjectURL(files[0])
+                                            setFile(objectUrl)
+                                        }}
+                                        style={{display: 'none'}}
+                                    />
+
+                                </Col>
+
+                            </Row>
+                            <div className="data_product">
+                                <Row>
+                                    <Col md="12">
+
+                                        {errors.nombre && touched.nombre && <div className="error_feedback">{errors.nombre}</div>}
+                                        <Field name="nombre" placeholder="Nombre de la plaza"/>
+
+                                        {errors.description && touched.description && <div className="error_feedback">{errors.description}</div>}
+                                        <Field name="description">
+                                            {({ field, form, meta }) => {
+                                                return(
+                                                    <textarea id="description" name="description" value={field.value} onChange={field.onChange} placeholder="Descripción general de la plaza"></textarea>
+                                                )
+                                            }}
+                                        </Field>
+
+                                        {errors.salario && touched.salario && <div className="error_feedback">{errors.salario}</div>}
+                                        <Field name="salario" type="number" placeholder="Salario"/>
+
+
+                                    </Col>
+                                    <div className="add_producto_confirm">
+                                        <button className="btn_add_producto_confirm" type="submit">Agregar plaza</button>
+                                    </div>
+                                </Row>
+                            </div>
+                        </Form>
+                    )}
+
+
+
+
+                </Formik>
+            </Modal.Body>
+        </Modal>
+    )
+}

psicoadmin/src/Pages/Puestos.js

-import React, {  } from 'react';
-import { Row, Col, Modal, Button, Table } from 'react-bootstrap'
+import React  from 'react';
+import { Row, Col, Button, Table } from 'react-bootstrap'
 import { Box } from '@mui/material';
-import { Formik, Field, Form } from 'formik';
-import * as Yup from 'yup';
 
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 
 import NotFound from '../Images/not_found.png';
-const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/gif", "image/png"];
 
+import Express from '../Components/Modal/AgregarExpress';
+import Manual from '../Components/Modal/AgregarManual';
 
-const NewPlazaSchema = Yup.object().shape({
-    nombre : Yup.string().required('El nombre es requerido').min(5).max(20),
-    description : Yup.string().required('La description es requerida').min(5).max(20),
-    salario : Yup.number().required('El salario es requerido'),
-    imagen:  Yup.mixed().required('El imagen es requerido').test('fileSize', "El archivo es demasiado grande", value => {
-        if(!value || value.length <= 0) return false
-        return value[0].size < 200000
-    }).test('fileType', "El tipo del archivo no es válido", value => {
-        if(!value) return false
-        return SUPPORTED_FORMATS.includes(value[0].type)
-    })
-})
-
-const ExpressSchema = Yup.object().shape({
-    link : Yup.string().required('El enlace es requerido').url("Debes agregar un enlace válido, recurda iniciar con http o https ").min(5).max(190),
-})
     
 let data = [{
     nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
 function ListMode() {
 
     let actions = [
-        <Button className="ver_producto">Ver</Button>,
-        <Button className="editar_producto">Editar</Button>,
-        <Button className="eliminar_producto">Eliminar</Button>,
+        <Button onClick={ ()  => console.log('ver producto') } className="ver_producto">Ver</Button>,
+        <Button onClick={ ()  => console.log('editar producto') } className="editar_producto">Editar</Button>,
+        <Button onClick={ ()  => console.log('eliminar producto') } className="eliminar_producto">Eliminar</Button>,
     ]
 
     return(
     )
 }
 
-function Manual ( props ) {
-
-    let [ filename, setFilename ] = React.useState('');
-    let [ file, setFile ] = React.useState(undefined);
-    let [ type, setType ] = React.useState(undefined);
-    let [ validType, setValidType ] = React.useState(false);
-
-    let { visible, onClose } = props
-    const hiddenFileInput = React.useRef(null);
-
-    const PickFile = event => {
-        hiddenFileInput.current.click();
-    };
-
-    React.useEffect(() => {
-
-        if( SUPPORTED_FORMATS.includes(type) ){
-            setValidType(true)
-        }else{
-            setValidType(false)
-        }
-
-    }, [type])
-
-
-
-    return (
-        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
-            <Modal.Header>
-                <button onClick={onClose}  type="button" className="close" data-dismiss="modal">&times;</button>
-                <h4 className="modal-title">Agregar plaza</h4>
-            </Modal.Header>
-            <Modal.Body className="modal-body">
-
-                <Formik
-
-                    initialValues={{
-                        nombre: '',
-                        description: '',
-                        salario: '',
-                        imagen: '',
-                    }}
-
-                    validationSchema={NewPlazaSchema}
-                    onSubmit={ (values) => {
-                        // console.log('VALUES >> ',values)
-                        props.setManual(false)
-                    }} >
-
-
-                    { ({  errors, touched, validateField, validateForm, setFieldValue  }) => (
-                        <Form>
-                            <Row>
-
-                                <Col md="4">
-                                    <div className="img-container">
-                                        <img alt="agregar plaza manual" src={ validType ? file : NotFound}/>
-                                    </div>
-                                </Col>
-
-                                <Col md="8">
-
-                                    <input 
-                                        value={filename} 
-                                        type="text" 
-                                        className="file-upload-input" 
-                                        disabled="" 
-                                        placeholder="Ningún archivo seleccionado" readOnly
-                                    />
-
-                                    <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={PickFile}>
-                                        SUBIR FOTO
-                                    </Button>
-
-                                    {errors.imagen && touched.imagen && <div className="error_feedback">{errors.imagen}</div>}
-                                    <input
-                                        multiple={false}
-                                        type="file"
-                                        ref={hiddenFileInput}
-                                        onChange={(event) => {
-                                            const files = event.target.files;
-                                            console.log('files crud ', files[0])
-                                            let myFiles =Array.from(files);
-                                            setFieldValue("imagen", myFiles);
-                                            setFilename(myFiles[0].name)
-                                            setType(myFiles[0].type)
-                                            const objectUrl = URL.createObjectURL(files[0])
-                                            setFile(objectUrl)
-                                        }}
-                                        style={{display: 'none'}}
-                                    />
-
-                                </Col>
-
-                            </Row>
-                            <div className="data_product">
-                                <Row>
-                                    <Col md="12">
-
-                                        {errors.nombre && touched.nombre && <div className="error_feedback">{errors.nombre}</div>}
-                                        <Field name="nombre" placeholder="Nombre de la plaza"/>
-
-                                        {errors.description && touched.description && <div className="error_feedback">{errors.description}</div>}
-                                        <Field name="description">
-                                            {({ field, form, meta }) => {
-                                                return(
-                                                    <textarea id="description" name="description" value={field.value} onChange={field.onChange} placeholder="Descripción general de la plaza"></textarea>
-                                                )
-                                            }}
-                                        </Field>
-
-                                        {errors.salario && touched.salario && <div className="error_feedback">{errors.salario}</div>}
-                                        <Field name="salario" type="number" placeholder="Salario"/>
-
-
-                                    </Col>
-                                    <div className="add_producto_confirm">
-                                        <button className="btn_add_producto_confirm" type="submit">Agregar plaza</button>
-                                    </div>
-                                </Row>
-                            </div>
-                        </Form>
-                    )}
-
-
-
-
-                </Formik>
-            </Modal.Body>
-        </Modal>
-    )
-}
-
-function Express (props) {
-    let { visible, onClose } = props
-    return (
-        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
-            <Modal.Header>
-                <button onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
-                <h4 className="modal-title">Agregar plaza express</h4>
-            </Modal.Header>
-            <Modal.Body>
-
-                <Formik
-                    initialValues={{
-                        link : ''
-                    }}
-                    validationSchema={ExpressSchema}
-                    onSubmit={ (values) => {
-                        props.setExpress(false)
-                        console.log('VALUES Express >> ',values)
-                    }} 
-                >
-                    { ({ errors, touched, validateField, validateForm, setFieldValue   }) =>  (
-
-                        <Form>
-                            <div className="data_product">
-                                <div className="row">
-                                    <div className="col-md-12">
-                                        {/* <input type="link" name="link" placeholder="Link de la plaza"/> */}
-                                        <Field type="link" name="link" placeholder="Link de la plaza"/>
-                                        {errors.link && touched.link && <div className="error_feedback">{errors.link}</div>}
-                                    </div>
-                                    <div className="add_producto_confirm">
-                                        <button className="btn_add_producto_confirm" type="submit">Agregar plaza</button>
-                                        {/* <div className="btn_add_producto_confirm"> */}
-                                        {/*     <span type="submit">Agregar plaza</span> */}
-                                        {/* </div> */}
-                                    </div>
-                                </div>
-                            </div>
-                        </Form>
-                    )}
-
-                </Formik>
-
-
-
-            </Modal.Body>
-        </Modal>
-    )
-}
-
-
 export function Puestos() {
 
     const [alignment, setAlignment] = React.useState('list');