expres required

psicoadmin/src/Pages/Puestos.js

 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"];
 
 
 const NewPlazaSchema = Yup.object().shape({
         if(!value || value.length <= 0) return false
         return value[0].size < 200000
     }).test('fileType', "El tipo del archivo no es válido", value => {
-        let SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/gif", "image/png"];
         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',
 
     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);
 
         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>
                     }}
 
                     validationSchema={NewPlazaSchema}
-                    onSubmit={async (values) => {
-                        console.log('VALUES >> ',values)
+                    onSubmit={ (values) => {
+                        // console.log('VALUES >> ',values)
+                        props.setManual(false)
                     }} >
 
 
 
                                 <Col md="4">
                                     <div className="img-container">
-                                        <img alt="agregar plaza manual" src={ file ? file : NotFound}/>
+                                        <img alt="agregar plaza manual" src={ validType ? file : NotFound}/>
                                     </div>
                                 </Col>
 
                                             let myFiles =Array.from(files);
                                             setFieldValue("imagen", myFiles);
                                             setFilename(myFiles[0].name)
-
-                                            // var reader = new FileReader();
-                                            // var url = reader.readAsDataURL(files[0]);
-                                            // console.log('img url  >> ', url)
-                                            // setFile(reader.result);j
+                                            setType(myFiles[0].type)
                                             const objectUrl = URL.createObjectURL(files[0])
-                                            console.log(objectUrl)
                                             setFile(objectUrl)
-
-
-
-
                                         }}
                                         style={{display: 'none'}}
                                     />
                 <h4 className="modal-title">Agregar plaza express</h4>
             </Modal.Header>
             <Modal.Body>
-                <div className="data_product">
-                    <div className="row">
-                        <div className="col-md-12">
-                            <input type="link" name="link" placeholder="Link de la plaza"/>
-                        </div>
-                        <div className="add_producto_confirm">
-                            <div className="btn_add_producto_confirm">
-                                <span type="submit">Agregar plaza</span>
+
+                <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>
-                        </div>
-                    </div>
-                </div>
+                        </Form>
+                    )}
+
+                </Formik>
+
+
+
             </Modal.Body>
         </Modal>
     )
         exclusive: true,
     };
 
-
     let [manual, setManual] = React.useState(false);
     let [expres, setExpress] = React.useState(false);
 
-    const showExpress = () => setExpress(true)
-
     return (
         <div className="content-section">
+
             <div className="main">
                 <Row>
                     <Col md="2" sm="2" xs="2">
                         <div className="add_producto">
                             <div onClick={() => setManual(true) } className="btn_add_producto"> <span >Agregar manual</span> </div>
                         </div>
-                        <div onClick={showExpress} className="add_producto">
+                        <div onClick={() => setExpress(true) } className="add_producto">
                             <div className="btn_add_producto"> <span >Agregar express</span> </div>
                         </div>
                     </Col>
                     </Row>
                 </div>
             </div>
-            <Express visible={expres} onClose={ () => setExpress(false) } />
-            <Manual visible={manual}  onClose={ () => setManual(false) } />
+
+            <Express setExpress={setExpress} visible={expres} onClose={ () => setExpress(false) } />
+            <Manual setManual={setManual} visible={manual}  onClose={ () => setManual(false) } />
+
         </div>
     )
 }