Przeglądaj źródła

added comments and last changes

Luis Ortiz 1 rok temu
rodzic
commit
6dd0ee0709
5 zmienionych plików z 80 dodań i 24 usunięć
  1. 13
    0
      package-lock.json
  2. 1
    0
      package.json
  3. 5
    0
      public/.htaccess
  4. 60
    23
      src/Pages/Noticias.js
  5. 1
    1
      src/index.js

+ 13
- 0
package-lock.json Wyświetl plik

@@ -12,6 +12,7 @@
12 12
         "@testing-library/react": "^13.4.0",
13 13
         "@testing-library/user-event": "^13.5.0",
14 14
         "axios": "^1.2.1",
15
+        "cors": "^2.8.5",
15 16
         "react": "^18.2.0",
16 17
         "react-dom": "^18.2.0",
17 18
         "react-icons": "^4.7.1",
@@ -5966,6 +5967,18 @@
5966 5967
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
5967 5968
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
5968 5969
     },
5970
+    "node_modules/cors": {
5971
+      "version": "2.8.5",
5972
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
5973
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
5974
+      "dependencies": {
5975
+        "object-assign": "^4",
5976
+        "vary": "^1"
5977
+      },
5978
+      "engines": {
5979
+        "node": ">= 0.10"
5980
+      }
5981
+    },
5969 5982
     "node_modules/cosmiconfig": {
5970 5983
       "version": "7.1.0",
5971 5984
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",

+ 1
- 0
package.json Wyświetl plik

@@ -7,6 +7,7 @@
7 7
     "@testing-library/react": "^13.4.0",
8 8
     "@testing-library/user-event": "^13.5.0",
9 9
     "axios": "^1.2.1",
10
+    "cors": "^2.8.5",
10 11
     "react": "^18.2.0",
11 12
     "react-dom": "^18.2.0",
12 13
     "react-icons": "^4.7.1",

+ 5
- 0
public/.htaccess Wyświetl plik

@@ -0,0 +1,5 @@
1
+RewriteEngine On
2
+RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
3
+RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
4
+RewriteRule ^ - [L]
5
+RewriteRule ^ ./index.html

+ 60
- 23
src/Pages/Noticias.js Wyświetl plik

@@ -11,23 +11,37 @@ export default function Noticias(){
11 11
 
12 12
     const [inputs, setInputs] = useState([]);
13 13
 
14
-    //Esta funcion manejea los cambio que uno hace en cuanto a la informacion
15
-    const handleChange = (event) => {
16
-        const name = event.target.name;
17
-        const value = event.target.value;
18
-        setInputs(values => ({...values, [name]: value}));
19
-    }
20
-
21
-    //Esta funcion maneja los cambios al uno presionar el boton y lo sube a la base de datos
22
-    const handleSubmit = (event) => {
23
-        event.preventDefault();
24
-
25
-        axios.post('http://localhost/apicenso/user/save', inputs).then(function(response){
26
-        //axios.post('https://ada.uprrp.edu/~luis.ortiz79/api/user/save', inputs).then(function(response){
14
+    const handleSubmit = e => {
15
+        e.preventDefault();
16
+        e.persist();
17
+        axios({
18
+        method: 'post',
19
+        headers: {
20
+            'Accept':'application/json',
21
+            'content-type': 'application/json'
22
+        },
23
+        url: `https://ada.uprrp.edu/~luis.ortiz79/api/user/save`,
24
+        //data: formData
25
+        data: inputs,
26
+        body: JSON.stringify(inputs),
27
+        })
28
+        .then((response)=>response.json())
29
+        .then((response)=>{
27 30
             console.log(response.data);
28 31
             navigate('/');
32
+        })
33
+        .catch((error)=>{
34
+            alert("Error: " + error);
29 35
         });
30
-        
36
+    }
37
+
38
+    const handleChange = (e) => {
39
+        const name = e.target.name;
40
+        const value = e.target.value;
41
+        setInputs(values => ({
42
+            ...values,
43
+            [name]: value,
44
+        }));
31 45
     }
32 46
 
33 47
     const [users, setUsers] = useState([]);
@@ -37,20 +51,44 @@ export default function Noticias(){
37 51
 
38 52
     //Esta funcion busca el id de la noticia selecionada en la base de datos
39 53
     function getUsers() {
40
-        axios.get('http://localhost/apicenso/users/').then(function(response) {
41
-        //axios.get('https://ada.uprrp.edu/~luis.ortiz79/api/users/').then(function(response) {
54
+        axios({
55
+            method: 'get',
56
+            headers: {
57
+                'Accept':'application/json',
58
+                'content-type': 'application/json'
59
+            },
60
+            url: `https://ada.uprrp.edu/~luis.ortiz79/api/users/`,
61
+            //data: formData
62
+        })
63
+        .then((response)=>response.json())
64
+        .then((response)=>{
42 65
             console.log(response.data);
43 66
             setUsers(response.data);
67
+        })
68
+        .catch((error)=>{
69
+            alert("Error: " + error);
44 70
         });
45 71
     }
46 72
 
47 73
 
48
-    //Esta funcion envie el id a la base de datos para ser borrada 
74
+    //Esta funcion envie el id a la base de datos para ser borrada
49 75
     const deleteUser = (id) => {
50
-        axios.delete(`http://localhost/apicenso/user/${id}/delete`).then(function(response){
51
-        //axios.delete(`https://ada.uprrp.edu/~luis.ortiz79/api/user/${id}/delete`).then(function(response){  
76
+        axios({
77
+            method: 'delete',
78
+            headers: {
79
+                'Accept':'application/json',
80
+                'content-type': 'application/json'
81
+            },
82
+            url: `https://ada.uprrp.edu/~luis.ortiz79/api/user/${id}/delete`,
83
+            //data: formData
84
+        })
85
+        .then((response)=>response.json())
86
+        .then((response)=>{
52 87
             console.log(response.data);
53 88
             getUsers();
89
+        })
90
+        .catch((error)=>{
91
+            alert("Error: " + error);
54 92
         });
55 93
     }
56 94
 
@@ -65,7 +103,6 @@ export default function Noticias(){
65 103
         //En la primera tabla es donde el usuario puede subir la noticia en la base de datos
66 104
         //En la segunda tabla es donde le da la lista de lo que contiene la base de datos y la opcion de poder borrar esa noticia
67 105
         <div className="Noticias">
68
-
69 106
             <h1>Noticias</h1>
70 107
 
71 108
             <form onSubmit={handleSubmit}>
@@ -83,7 +120,7 @@ export default function Noticias(){
83 120
                             <th>
84 121
                                 <label>Subject:</label>
85 122
                             </th>
86
-                            <td> 
123
+                            <td>
87 124
                                 <textarea name="subject" placeholder="Write something.." onChange={handleChange} ></textarea>
88 125
                             </td>
89 126
                         </tr>
@@ -116,9 +153,9 @@ export default function Noticias(){
116 153
                             </td>
117 154
                         </tr>
118 155
                     )}
119
-                    
156
+
120 157
                 </tbody>
121 158
             </table>
122 159
         </div>
123 160
     );
124
-}
161
+}

+ 1
- 1
src/index.js Wyświetl plik

@@ -1,7 +1,7 @@
1 1
 import React from 'react';
2 2
 import ReactDOM from 'react-dom';
3 3
 import App from './App';
4
-  
4
+
5 5
 ReactDOM.render(
6 6
     <React.StrictMode>
7 7
         <App />