CCOM4030
/
AnCaJuLu
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Function to add and delete in the database with comments

Luis Ortiz 2 years ago
parent
9dc367d625
commit
93324dca59
14 changed files with 155 additions and 74 deletions
Unified View Show Diff Stats
  1. 29
    0
      package-lock.json
  2. 1
    0
      package.json
  3. BIN
      public/Logo.jpeg
  4. 1
    1
      public/index.html
  5. BIN
      public/smallLogo.jpeg
  6. 1
    0
      src/App.js
  7. 0
    0
      src/Components/EditNoticias.js
  8. 0
    45
      src/Pages/Datos.css
  9. 2
    7
      src/Pages/Datos.js
  10. 5
    1
      src/Pages/Login.js
  11. 2
    2
      src/Pages/Noticias.css
  12. 112
    15
      src/Pages/Noticias.js
  13. 2
    2
      src/Pages/index.js
  14. 0
    1
      src/index.js

+ 29
- 0
package-lock.json View File

11 
         "@testing-library/jest-dom": "^5.16.5",
 11 
         "@testing-library/jest-dom": "^5.16.5",
12 
         "@testing-library/react": "^13.4.0",
 12 
         "@testing-library/react": "^13.4.0",
13 
         "@testing-library/user-event": "^13.5.0",
 13 
         "@testing-library/user-event": "^13.5.0",
14 
+        "axios": "^1.2.1",
14 
         "react": "^18.2.0",
 15 
         "react": "^18.2.0",
15 
         "react-dom": "^18.2.0",
 16 
         "react-dom": "^18.2.0",
16 
         "react-icons": "^4.7.1",
 17 
         "react-icons": "^4.7.1",
5009 
         "node": ">=4"
 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 
     "node_modules/axobject-query": {
 5036 
     "node_modules/axobject-query": {
5013 
       "version": "2.2.0",
 5037 
       "version": "2.2.0",
5014 
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
 5038 
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
13964 
         "node": ">= 0.10"
 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 
     "node_modules/psl": {
 13996 
     "node_modules/psl": {
13968 
       "version": "1.9.0",
 13997 
       "version": "1.9.0",
13969 
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
 13998 
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

+ 1
- 0
package.json View File

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

BIN
public/Logo.jpeg View File


+ 1
- 1
public/index.html View File

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

BIN
public/smallLogo.jpeg View File


+ 1
- 0
src/App.js View File

9
9
10 
 function App() {
 10 
 function App() {
11 
   return (
 11 
   return (
12 
+    //Esto connecta todas las paginas a la principal
12 
     <Router>
 13 
     <Router>
13 
     <Navbar />
 14 
     <Navbar />
14 
     <Routes>
 15 
     <Routes>

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


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

1 
 .Datos {
1 
 .Datos {
2 
     text-align: center;
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
7
8 
             <h1>Datos</h1>
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 
         </div>
12 
         </div>
18 
     );
13 
     );
19 
 };
14 
 };

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

3
3
4 
 const Login = () => {
4 
 const Login = () => {
5 
     return (
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 
         <div className="Login">
8 
         <div className="Login">
7
9
8 
             <h1>Login</h1>
10 
             <h1>Login</h1>
9
11
12 
+            <h4>Esta pagina todavia esta incompleta, el boton todavia no funciona</h4>
13 
+
10 
             <form>
14 
             <form>
11 
                 <label>Username:</label>
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 
             </form>
17 
             </form>
14
18
15 
             <form>
19 
             <form>

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

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

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

1 
 import React from "react";
1 
 import React from "react";
2 
+import axios from "axios";
3 
+import { useState, useEffect } from "react";
4 
+import { useNavigate} from "react-router-dom";
2 
 import './Noticias.css';
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 
     return (
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 
         <div className="Noticias">
67 
         <div className="Noticias">
7
68
8 
             <h1>Noticias</h1>
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 
             </form>
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 
         </div>
122 
         </div>
24 
     );
123 
     );
25 
-};
26 
-
27 
-export default Noticias;
124 
+}

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

6 
         <div className="Home">
6 
         <div className="Home">
7 
             <h1>Bienvenido a la pagina admin</h1>
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 
         </div>
11 
         </div>
12 
     );
12 
     );
13 
 };
13 
 };

+ 0
- 1
src/index.js View File

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