Skip to content

Commit f8d43d8

Browse files
hall9zehahall9zeha
committed
fixed: borrar documento de mongodb completa y redireccionamiento usando la versión 6.3.0 de react-router-dom
1 parent 5af5b7d commit f8d43d8

File tree

6 files changed

+78
-32
lines changed

6 files changed

+78
-32
lines changed

‎Project/API/controllers/patientController.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ exports.updatePatient = async(req,res,next) =>{
5959
}
6060
exports.deletePatient = async(req,res,next) =>{
6161
try {
62+
6263
await Patient.findByIdAndDelete({_id : req.params.id});
6364
res.json({message: 'El registro fue eliminado'});
6465
} catch (error) {

‎Project/API/routes/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ module.exports = function() {
2020
patientController.updatePatient
2121
)
2222
//Eliminar pacient por id
23-
router.delete('patients/:id',
23+
router.delete('/patients/:id',
2424
patientController.deletePatient
2525
)
2626
return router;

‎Project/frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
"name": "frontend",
33
"version": "0.1.0",
44
"private": true,
5+
56
"dependencies": {
67
"@testing-library/jest-dom": "^5.16.5",
78
"@testing-library/react": "^13.3.0",
89
"@testing-library/user-event": "^13.5.0",
910
"axios": "^0.27.2",
1011
"react": "^18.2.0",
1112
"react-dom": "^18.2.0",
12-
"react-router-dom": "^5.2.0",
13+
"react-router-dom": "^6.3.0",
1314
"react-scripts": "5.0.1",
1415
"sweetalert2": "^11.4.29",
1516
"web-vitals": "^2.1.4"

‎Project/frontend/src/App.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React,{useEffect, useState} from 'react'
2-
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
1+
import React,{useEffect, useState, } from 'react'
2+
import {BrowserRouter as Router, Route, Routes, useParams} from 'react-router-dom'
33
import Patients from './components/Patients'
44
import NewDate from './components/NewDate'
55
import Meeting from './components/Meeting'
@@ -34,37 +34,42 @@ function App() {
3434
},[consult])
3535

3636
console.log(process.env.REACT_APP_BACKEND_URL)
37+
38+
39+
let MeetingRoute = () => {
40+
const props=useParams()
41+
42+
const meeting = meetings.filter(meeting => meeting._id === props.id)
43+
return (
44+
<Meeting
45+
meeting={meeting[0]}
46+
saveConsult={saveConsult} />
47+
);
48+
};
3749
return (
3850
<Router>
39-
<Switch>
51+
<Routes>
4052
<Route
4153
exact
4254
path="/"
43-
component = {()=><Patients meetings={meetings} />}
55+
element = {<Patients meetings={meetings} />}
4456
/>
4557
<Route
4658
exact
4759
path="/nueva"
48-
component = {()=><NewDate saveConsult={saveConsult}/>}
60+
element = {<NewDate saveConsult={saveConsult}/>}
4961
/>
5062
<Route
5163
exact
5264
path="/cita/:id"
53-
component={(props) =>{
54-
const meeting = meetings.filter(meeting => meeting._id === props.match.params.id)
55-
return(
56-
<Meeting
57-
meeting={meeting[0]}
58-
saveConsult={saveConsult}
59-
/>
60-
)
61-
}}
65+
element={<MeetingRoute/>}
6266
/>
6367

64-
</Switch>
68+
</Routes>
6569
</Router>
6670

6771
);
72+
6873
}
6974

7075
export default App;

‎Project/frontend/src/components/Meeting.js‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,41 @@
11
import React ,{Fragment}from 'react'
2-
import {Link, withRouter} from 'react-router-dom'
2+
import {Link, useNavigate, useLocation, useParams} from 'react-router-dom'
33
import clientAxios from '../config/axios'
44
import Swal from 'sweetalert2';
5+
let navigate;
6+
function withRouter(Component) {
7+
function ComponentWithRouterProp(props) {
8+
let location = useLocation();
9+
navigate = useNavigate();
10+
let params = useParams();
11+
return (
12+
<Component
13+
{...props}
14+
router={{ location, navigate, params }}
15+
/>
16+
);
17+
}
18+
19+
return ComponentWithRouterProp;
20+
}
21+
522

623
const Meeting = (props) => {
724

25+
826
if(!props.meeting){
9-
props.history.push('/')
27+
//props.history.push('/')
28+
//para las nuevas versiones de react
29+
navigate('/')
1030
return null;
1131
}
12-
32+
console.log(props)
33+
1334
//extraemos props
1435
const{meeting:{_id,name,owner,date,time,signals,phone}} = props
15-
16-
const deleteMeeting=id=>{
17-
36+
37+
const deleteMeeting = id =>{
38+
1839
Swal.fire({
1940
title: 'Estas seguro?',
2041
text: "Una cita eliminada no se puede recuperar!",
@@ -31,12 +52,13 @@ const Meeting = (props) => {
3152
'success'
3253
)
3354
//Eliminando de la base de datos
34-
clientAxios.delete(`/patients/${id}`)
35-
.then(
55+
//clientAxios.delete(`/patients/${id}`)
56+
clientAxios.delete("/patients/"+id)
57+
.then(
3658
response => {
3759
props.saveConsult(true)
3860
console.log(response);
39-
props.history.push('/')
61+
navigate('/')
4062
}
4163
)
4264

@@ -78,16 +100,14 @@ const Meeting = (props) => {
78100
</div>
79101
<div className="d-flex">
80102
<button type="button"
81-
className="text-uppercase py-2 px-5 font-weight-bold btn btn-dange col"
103+
className="text-uppercase py-2 px-5 font-weight-bold btn btn-danger col"
82104
onClick={()=> deleteMeeting(_id)}
83105
>
84106
Eliminar &times;
85107
</button>
86108

87109
</div>
88110

89-
90-
91111
</div>
92112

93113
</div>

‎Project/frontend/src/components/NewDate.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
11
import React, {Fragment, useState} from 'react'
2-
import {Link, withRouter} from 'react-router-dom'
2+
import {Link, useNavigate, useLocation, useParams} from 'react-router-dom'
33
import clientAxios from '../config/axios';
4+
let navigate;
5+
function withRouter(Component) {
6+
47

8+
function ComponentWithRouterProp(props) {
9+
let location = useLocation();
10+
navigate = useNavigate();
11+
let params = useParams();
12+
return (
13+
<Component
14+
{...props}
15+
router={{ location, navigate, params }}
16+
/>
17+
);
18+
}
19+
20+
return ComponentWithRouterProp;
21+
}
522

623
//Los componentes deben comenzar con los nombres en mayúsculas siempre
724
const NewDate = (props) => {
825

9-
26+
1027
//Generamos el state como objeto
1128
const [meeting, saveMeeting] = useState({
1229
name: '',
@@ -38,7 +55,9 @@ const NewDate = (props) => {
3855

3956
props.saveConsult(true);
4057
//redireccionar
41-
props.history.push('/')
58+
//props.history.push('/')
59+
//par las nuevas versiones de react
60+
navigate('/');
4261
}
4362

4463
return (

0 commit comments

Comments
 (0)