finish taller2

taller2/src/views/form/FormComponent.js

@@ -0,0 +1,159 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import axios from 'axios';
+import MaterialDatatable from "material-datatable";
+
+const FormComponent = () => {
+    const divStyle = {
+        padding: "5px",
+        margin: "5px",
+        maxWidth: "100%"
+    };
+
+    const[datos, setDatos] = useState({
+        id: "",
+        firstName: "",
+        lastName: ""
+    });
+    const[people, setPeople] = useState([]);
+
+    const handleInputChange = (event) => {
+        setDatos({
+            ...datos,
+            [event.target.name] : event.target.value
+        });
+    };
+
+    const sendDatos = () => {
+        console.log("Sending datos First Name: " + datos.firstName + " and Last Name " + datos.lastName);
+        savePerson();
+    };
+
+    async function getPeople() {
+        try {
+            const response = await axios.get('http://192.99.144.232:5000/api/personas?grupo=12');
+            if (response.status === 200) {
+                setPeople(response.data.persona)
+                console.log(response.data);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+
+    function savePerson() {
+        if (datos.id === "") {
+            axios.post('http://192.99.144.232:5000/api/personas', {
+                nombre: datos.firstName,
+                apellido: datos.lastName,
+                grupo: 12
+            })
+            .then(function (response) {
+                    if (response.status === 200) {
+                        alert("Saved!");
+                        getPeople();
+                        setDatos({
+                            id: "",
+                            firstName: "",
+                            lastName: ""
+                        });
+                    }
+                    else {
+                        alert("Could not save!");
+                    }
+                
+            })
+            .catch(function (error) {
+                console.log(error);
+            });
+        }
+        else {
+            axios.put('http://192.99.144.232:5000/api/personas/' + datos.id, {
+                nombre: datos.firstName,
+                apellido: datos.lastName,
+                grupo: 12
+            })
+            .then(function (response) {
+                    if (response.status === 200) {
+                        alert("Saved!");
+                        getPeople();
+                        setDatos({
+                            id: "",
+                            firstName: "",
+                            lastName: ""
+                        });
+                    }
+                    else {
+                        alert("Could not save!");
+                    }
+                
+            })
+            .catch(function (error) {
+                console.log(error);
+            });
+        }
+    }
+
+    useEffect(()=>{
+        getPeople();
+    },[]);
+
+    const columns = [
+        {
+            name: "First Name",
+            field: "nombre",
+            options: {
+                filter: true,
+                sort: true,
+            }
+        },
+        {
+            name: "Last Name",
+            field: "apellido",
+            options: {
+                filter: true,
+                sort: true,
+            }
+        }
+    ];
+
+    const handleRowClick = (rowData, rowMeta) => {
+        setDatos({
+            ...datos,
+            firstName: rowData.nombre,
+            lastName: rowData.apellido,
+            id: rowData._id
+        });
+    };
+
+    const options = {
+        filterType: 'checkbox',
+        onlyOneRowCanBeSelected: true,
+        onRowClick: handleRowClick
+    };
+    
+    return (
+        <Fragment>
+            <div align="center" style={divStyle}>
+                <div style={divStyle}>
+                    <h1>Form</h1>
+                    <input type="text" placeholder="First Name" name="firstName" value={datos.firstName} onChange={handleInputChange}></input>
+                </div>
+                <div style={divStyle}>
+                    <input type="text" placeholder="Last Name" name="lastName" value={datos.lastName} onChange={handleInputChange}></input>
+                </div>
+                <div style={divStyle}>
+                    <button onClick={sendDatos} value="send">Send</button>
+                </div>
+            </div>
+            <MaterialDatatable
+                title="People"
+                columns={columns}
+                data={people}
+                options={options}
+            />
+        </Fragment>
+    );
+};
+
+export default FormComponent;