useQuery in password

src/Components/Password/Operation.jsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+import { Edit as EditIcon, Send as SendIcon } from '@mui/icons-material'
+import {
+    Button, Dialog, DialogActions, DialogContent,
+    DialogContentText, DialogTitle
+} from '@mui/material'
+
+import { useQuery } from 'react-query'
+import { Service } from '../../Utils/HTTP.js'
+import useAuth from '../../Auth/useAuth.js';
+
+export function Operation(props) {
+
+    let [open, setOpen] = React.useState(false);
+    const handleOpen = (status) => setOpen(status);
+
+    return (
+        <div>
+            <div className="operation_buttons">
+                <EditIcon onClick={() => setOpen(true)} className="icon_op" />
+                <SendIcon className="icon_op" />
+            </div>
+            {
+                open ? 
+                <ModalEdit 
+                    password={props}
+                    open={open}
+                    handleOpen={handleOpen}
+                    /> 
+                : null
+            }
+        </div>
+    )
+}
+
+function ModalEdit(props) {
+
+    let { password, open, handleOpen} = props
+    let { pwd, plz } = password
+    const auth = useAuth();
+    const token = React.useRef(auth.getToken());
+    const getPassword = async () => {
+        let rest = new Service(`/contrasenia/${pwd}/${plz}`)
+        return await rest.getQuery(token.current)
+    }
+
+    let { data, status, } = useQuery('contra', getPassword);
+    console.log(data, status)
+
+
+    return (
+        <Dialog
+            open={open}
+            onClose={() => handleOpen(false)}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">
+                {pwd}
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    Let Google help apps determine location. This means sending anonymous
+                    location data to Google, even when no apps are running.
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => handleOpen(false)}>Disagree</Button>
+                <Button onClick={() => handleOpen(false)} autoFocus>
+                    Agree
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
+
+

src/Components/Password/Rows.js

@@ -1,5 +1,4 @@
-import EditIcon from '@mui/icons-material/Edit';
-import SendIcon from '@mui/icons-material/Send';
+import { Operation } from './Operation'
 
 export const Encabezados = [
     {
@@ -51,15 +50,6 @@ export const niveles_educativos = [
     "Cursos"
 ]
 
-
-export const departamentos = [
-    "Guatemala",
-    "Guatemala",
-    "Guatemala",
-    "Guatemala",
-    "Guatemala",
-]
-
 export function Build(pwds) {
     return pwds.map(password => {
         let { candidato: user, plaza_id, pwd } = password
@@ -68,17 +58,8 @@ export function Build(pwds) {
             name: user.nombre,
             apell: user.apellidos,
             mail: user.mail,
-            op: <OpButtons plz={plaza_id} pwd={pwd}  />
+            op: <Operation plz={plaza_id} pwd={pwd} />
         }
     })
 }
 
-
-function OpButtons(props){
-    return(
-        <div className="operation_buttons">
-            <EditIcon onClick={() => console.log(props)} className="icon_op"/>
-            <SendIcon className="icon_op"/>
-        </div>
-    )
-}

src/Pages/ContrasV2.jsx

@@ -20,10 +20,7 @@ export function Contrasv2() {
         return await rest.getQuery(token.current)
     }
 
-    // const { data : { data : result} } = useQuery('passwords', getAllPwd );
     const { data  } = useQuery('passwords', getAllPwd );
-    console.log('data>>', data)
-
 
     const options = {
         filterType: 'checkbox',