Browse Source

Function to add and delete in the database with comments

Luis Ortiz 1 year ago
parent
commit
93324dca59

+ 29
- 0
package-lock.json View File

@@ -11,6 +11,7 @@
11 11
         "@testing-library/jest-dom": "^5.16.5",
12 12
         "@testing-library/react": "^13.4.0",
13 13
         "@testing-library/user-event": "^13.5.0",
14
+        "axios": "^1.2.1",
14 15
         "react": "^18.2.0",
15 16
         "react-dom": "^18.2.0",
16 17
         "react-icons": "^4.7.1",
@@ -5009,6 +5010,29 @@
5009 5010
         "node": ">=4"
5010 5011
       }
5011 5012
     },
5013
+    "node_modules/axios": {
5014
+      "version": "1.2.1",
5015
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz",
5016
+      "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
5017
+      "dependencies": {
5018
+        "follow-redirects": "^1.15.0",
5019
+        "form-data": "^4.0.0",
5020
+        "proxy-from-env": "^1.1.0"
5021
+      }
5022
+    },
5023
+    "node_modules/axios/node_modules/form-data": {
5024
+      "version": "4.0.0",
5025
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
5026
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
5027
+      "dependencies": {
5028
+        "asynckit": "^0.4.0",
5029
+        "combined-stream": "^1.0.8",
5030
+        "mime-types": "^2.1.12"
5031
+      },
5032
+      "engines": {
5033
+        "node": ">= 6"
5034
+      }
5035
+    },
5012 5036
     "node_modules/axobject-query": {
5013 5037
       "version": "2.2.0",
5014 5038
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -13964,6 +13988,11 @@
13964 13988
         "node": ">= 0.10"
13965 13989
       }
13966 13990
     },
13991
+    "node_modules/proxy-from-env": {
13992
+      "version": "1.1.0",
13993
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
13994
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
13995
+    },
13967 13996
     "node_modules/psl": {
13968 13997
       "version": "1.9.0",
13969 13998
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

+ 1
- 0
package.json View File

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

BIN
public/Logo.jpeg View File


+ 1
- 1
public/index.html View File

@@ -2,7 +2,7 @@
2 2
 <html lang="en">
3 3
   <head>
4 4
     <meta charset="utf-8" />
5
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5
+    <link rel="icon" href="%PUBLIC_URL%/smallLogo.jpeg" />
6 6
     <meta name="viewport" content="width=device-width, initial-scale=1" />
7 7
     <meta name="theme-color" content="#000000" />
8 8
     <meta

BIN
public/smallLogo.jpeg View File


+ 1
- 0
src/App.js View File

@@ -9,6 +9,7 @@ import Login from './Pages/Login';
9 9
 
10 10
 function App() {
11 11
   return (
12
+    //Esto connecta todas las paginas a la principal
12 13
     <Router>
13 14
     <Navbar />
14 15
     <Routes>

+ 0
- 0
src/Components/EditNoticias.js View File


+ 0
- 45
src/Pages/Datos.css View File

@@ -1,48 +1,3 @@
1 1
 .Datos {
2 2
     text-align: center;
3
-  }
4
-  
5
-  .Datos_button::after {
6
-    display: table;
7
-    clear: both;
8
-  }
9
-    
10
-  .Datos_button {
11
-    display: flex;
12
-  }
13
-  
14
-  .Datos_button1 {
15
-    width: 50%;
16
-    border: none;
17
-    background-color: lightcoral;
18
-    padding: 14px 28px;
19
-    font-size: 16px;
20
-    cursor: pointer;
21
-    text-align: center;
22
-    display: inline-block;
23
-    border-radius: 12px;
24
-  }
25
-  
26
-  .Datos_button2 {
27
-    width: 50%;
28
-    border: none;
29
-    background-color: lightcoral;
30
-    padding: 14px 28px;
31
-    font-size: 16px;
32
-    cursor: pointer;
33
-    text-align: center;
34
-    display: inline-block;
35
-    border-radius: 12px;
36
-  }
37
-  
38
-  .Datos_button3 {
39
-    width: 50%;
40
-    border: none;
41
-    background-color: lightcoral;
42
-    padding: 14px 28px;
43
-    font-size: 16px;
44
-    cursor: pointer;
45
-    text-align: center;
46
-    display: inline-block;
47
-    border-radius: 12px;
48 3
   }

+ 2
- 7
src/Pages/Datos.js View File

@@ -7,13 +7,8 @@ const Datos = () => {
7 7
     
8 8
             <h1>Datos</h1>
9 9
     
10
-            <div className="Datos_button">
11
-              <button type="button" class="Datos_button1"> Add </button>
12
-    
13
-              <button type="button" class="Datos_button2"> Modifie </button>
14
-    
15
-              <button type="button" class="Datos_button3"> Delete </button>
16
-            </div>
10
+            <h3>Esta en processo para cambios futuros</h3>
11
+            <h3>Los processos estan al momento en el app</h3>
17 12
         </div>
18 13
     );
19 14
 };

+ 5
- 1
src/Pages/Login.js View File

@@ -3,13 +3,17 @@ import './Login.css';
3 3
 
4 4
 const Login = () => {
5 5
     return (
6
+        //Esta pagina permitiria al administrador entrar con sus credenciales para poder hacerle cambio a la informacion
7
+        //de las noticias o los datos en la base de datos
6 8
         <div className="Login">
7 9
 
8 10
             <h1>Login</h1>
9 11
 
12
+            <h4>Esta pagina todavia esta incompleta, el boton todavia no funciona</h4>
13
+
10 14
             <form>
11 15
                 <label>Username:</label>
12
-                <input type="text" id="uname" name="Username" placeholder="Your name.." />
16
+                <input type="text" id="uname" name="Username" placeholder="Your email.." />
13 17
             </form>
14 18
 
15 19
             <form>

+ 2
- 2
src/Pages/Noticias.css View File

@@ -24,7 +24,7 @@ input[type=text], select, textarea {
24 24
 }
25 25
 
26 26
 input[type=submit] {
27
- background-color: lightblue;
27
+ background-color: #4CAF50;
28 28
  color: white;
29 29
  padding: 12px 20px;
30 30
  border: none;
@@ -33,7 +33,7 @@ input[type=submit] {
33 33
 }
34 34
 
35 35
 input[type=submit]:hover {
36
- background-color: lightblue;
36
+ background-color: #45a049;
37 37
 }
38 38
 
39 39
 .container {

+ 112
- 15
src/Pages/Noticias.js View File

@@ -1,27 +1,124 @@
1 1
 import React from "react";
2
+import axios from "axios";
3
+import { useState, useEffect } from "react";
4
+import { useNavigate} from "react-router-dom";
2 5
 import './Noticias.css';
3 6
 
4
-const Noticias = () => {
7
+//Al momento la base de datos esta siendo accedida de manera local y esta en processo a ser accedido desde el servidor
8
+
9
+export default function Noticias(){
10
+    const navigate = useNavigate();
11
+
12
+    const [inputs, setInputs] = useState([]);
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){
27
+            console.log(response.data);
28
+            navigate('/');
29
+        });
30
+        
31
+    }
32
+
33
+    const [users, setUsers] = useState([]);
34
+    useEffect(() => {
35
+        getUsers();
36
+    }, []);
37
+
38
+    //Esta funcion busca el id de la noticia selecionada en la base de datos
39
+    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) {
42
+            console.log(response.data);
43
+            setUsers(response.data);
44
+        });
45
+    }
46
+
47
+
48
+    //Esta funcion envie el id a la base de datos para ser borrada 
49
+    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){  
52
+            console.log(response.data);
53
+            getUsers();
54
+        });
55
+    }
56
+
57
+    //Crea el pop up window para asegura de que si el usuario quiere borrar la noticia o no
58
+    const deleteConfirm = (id) => {
59
+        if (window.confirm("Estas seguro que lo quieres borrar?")) {
60
+          deleteUser(id);
61
+        }
62
+      };
63
+
5 64
     return (
65
+        //En la primera tabla es donde el usuario puede subir la noticia en la base de datos
66
+        //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
6 67
         <div className="Noticias">
7 68
 
8 69
             <h1>Noticias</h1>
9 70
 
10
-            <form>
11
-                <label>Title:</label>
12
-                <input type="text" id="uname" name="Title" placeholder="Title for the news.." />
71
+            <form onSubmit={handleSubmit}>
72
+            <table cellSpacing="10">
73
+                    <tbody>
74
+                        <tr>
75
+                            <th>
76
+                                <label>Title:</label>
77
+                            </th>
78
+                            <td>
79
+                                <input type="text" name="title" placeholder="Title for the news.." onChange={handleChange} />
80
+                            </td>
81
+                        </tr>
82
+                        <tr>
83
+                            <th>
84
+                                <label>Subject:</label>
85
+                            </th>
86
+                            <td> 
87
+                                <textarea name="subject" placeholder="Write something.." onChange={handleChange} ></textarea>
88
+                            </td>
89
+                        </tr>
90
+                        <tr>
91
+                            <td colSpan="2" align ="right">
92
+                                <input type="submit" value="Submit" />
93
+                            </td>
94
+                        </tr>
95
+                    </tbody>
96
+                </table>
13 97
             </form>
14 98
 
15
-            <form>
16
-                <label>Subject:</label>
17
-                <textarea id="subject" name="subject" placeholder="Write something.."></textarea>
18
-            </form>
19
-
20
-            <form>
21
-                <input type="submit" value="Submit" />
22
-            </form>
99
+            <table>
100
+                <thead>
101
+                    <tr>
102
+                        <th>#</th>
103
+                        <th>Title</th>
104
+                        <th>Subject</th>
105
+                        <th>Actions</th>
106
+                    </tr>
107
+                </thead>
108
+                <tbody>
109
+                    {users.map((user, key) =>
110
+                        <tr key={key}>
111
+                            <td>{user.id}</td>
112
+                            <td>{user.title}</td>
113
+                            <td>{user.subject}</td>
114
+                            <td>
115
+                                <input type="submit" value="Delete" onClick={() => deleteConfirm(user.id)} />
116
+                            </td>
117
+                        </tr>
118
+                    )}
119
+                    
120
+                </tbody>
121
+            </table>
23 122
         </div>
24 123
     );
25
-};
26
-
27
-export default Noticias;
124
+}

+ 2
- 2
src/Pages/index.js View File

@@ -6,8 +6,8 @@ const Home = () => {
6 6
         <div className="Home">
7 7
             <h1>Bienvenido a la pagina admin</h1>
8 8
 
9
-            <h3>Tiene dos paginas donde puedes anadir, modificar o borrar informacion</h3>
10
-            <h4>Antes the hacer cambio por favor hacer login</h4>
9
+            <h4>Antes the hacer cambios por favor hacer login</h4>
10
+            <img href="%PUBLIC_URL%/Logo.jpeg" alt="App logo" />
11 11
         </div>
12 12
     );
13 13
 };

+ 0
- 1
src/index.js View File

@@ -1,4 +1,3 @@
1
-
2 1
 import React from 'react';
3 2
 import ReactDOM from 'react-dom';
4 3
 import App from './App';