JavaScript - ¿Como manejar un checkbox en react si quiero que ciertas checkbox ya me aparezcan marcadas?

 
Vista:

¿Como manejar un checkbox en react si quiero que ciertas checkbox ya me aparezcan marcadas?

Publicado por Emmanuel Herrera (1 intervención) el 17/03/2023 23:34:45
tengo el siguiente problema tengo un formulario de registro en el cual el usuario puede seleccionar múltiples roles a través de un checkbox, estos roles se guardan en una base de datos y esto ya lo hace de manera correcta, después tengo un modal el cual sirve para que el usuario edite sus roles en este se muestra nuevamente un checkbox con los roles que puede seleccionar, lo que quiero lograr es que cuando se muestre el modal los roles que el usuario ya tiene asignados aparezcan marcados en el checkbox, logre esto pero solo funciona cuando recargo la página que puedo hacer para que enseguida que se muestre el modal ya aparezcan marcados los roles que el usuario tiene sin necesidad de recargar la página.Les comparto mi código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
import React, { useEffect, useState } from "react";
import { supabase } from "../supabase/client";
import RegisterFormUser from "./RegisterFormUser";
import SignOut from "./SignOut";
import TableUser from "./TableUser";
 
const CrudUser = () => {
  const [db, setDb] = useState({});
  const [dataRol, setDataRol] = useState({});
  const [nameRol, setNameRol] = useState([]);
  const [dataUserRol, setDataUserRol] = useState({});
  const [dataToEdit, setDataToEdit] = useState(null);
  const [user, setUser] = useState([]);
 
  const getAuthenticatedUserData = () => {
    try {
      supabase.auth.getUser().then(async (value) => {
        setUser(value.data.user);
      });
    } catch (error) {
      console.error(error.message);
    }
  };
 
  const getUserData = () => {
    try {
      supabase.auth.getUser().then(async (value) => {
        const user = value.data.user;
        const { data } = await supabase
          .from("users")
          .select()
          .eq("email", user.email);
        setDb(data);
      });
    } catch (error) {
      console.error(error.message);
    }
  };
 
  const getRoles = async () => {
    try {
      const { data } = await supabase.from("roles").select("*");
      setDataRol(data);
    } catch (error) {
      console.error(error);
    }
  };
 
  const getDataTabRolesUser = async () => {
    try {
      const { data } = await supabase.from("users_roles").select("*");
      setDataUserRol(data);
    } catch (error) {
      console.error(error.message);
    }
  };
 
  useEffect(() => {
    const getUserRole = async () => {
      try {
        const { data } = await supabase
          .from("users")
          .select("roles(nombre)")
          .eq("email", user.email);
 
        const auxNameRol = [];
 
        if (data.length > 0) {
          data[0].roles.map((el) => auxNameRol.push(el.nombre));
        }
        setNameRol(auxNameRol);
      } catch (error) {
        console.log(error.message);
      }
    };
    getUserRole();
  }, [dataUserRol, user]);
 
  useEffect(() => {
    getUserData();
    getRoles();
    getDataTabRolesUser();
  }, []);
 
  useEffect(() => {
    getAuthenticatedUserData();
  }, []);
 
  const createDataUser = async (data) => {
    try {
      data.user_id = Date.now();
      await supabase.from("users").insert({
        user_id: data.user_id,
        email: user.email,
        nombres: data.nombres,
        apellidos: data.apellidos,
        fecha_nacimiento: data.fecha_nacimiento,
        is_active: true,
      });
      console.log("Register added successfully");
      setDb([...db, data]);
    } catch (error) {
      console.error(error.message);
    }
  };
 
  const createRolesUser = (data) => {
    data.roles.map(async (el) => {
      await supabase
        .from("users_roles")
        .insert({ user_id: data.user_id, rol_id: el });
      setDataUserRol([...dataUserRol, data]);
    });
  };
 
  const deleteDataUser = async (id) => {
    let isDelete = window.confirm("Are you sure to delete your data?");
    if (isDelete) {
      try {
        await supabase.from("users_roles").delete().eq("user_id", id);
        await supabase.from("users").delete().eq("user_id", id);
 
        let newData = db.filter((el) => el.user_id !== id);
        setDb(newData);
 
        console.log("The record was deleted");
      } catch (error) {
        console.error(error.message);
      }
    } else {
      return;
    }
  };
 
  const updateDataUser = async (data, updateFields) => {
    const { error } = await supabase
      .from("users")
      .update(updateFields)
      .eq("user_id", data.user_id);
 
    let newData = db.map((el) => (el.user_id === data.user_id ? data : el));
    setDb(newData);
 
    if (error) throw error;
  };
 
  return (
    <div>
      <div className="grid-1-2">
        <RegisterFormUser
          data={dataRol}
          userData={db}
          createDataUser={createDataUser}
          createRolesUser={createRolesUser}
          dataToEdit={dataToEdit}
          updateDataUser={updateDataUser}
          setDataToEdit={setDataToEdit}
        />
        <br />
        <br />
        <TableUser
          dataUser={db}
          nameRol={nameRol}
          setDataToEdit={setDataToEdit}
          deleteDataUser={deleteDataUser}
          dataRol={dataRol}
          setDataUserRol={setDataUserRol}
          dataUserRol={dataUserRol}
        />
        <SignOut />
      </div>
    </div>
  );
};
 
export default CrudUser;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, { useEffect, useState } from "react";
import { supabase } from "../supabase/client";
 
const initialForm = {
  roles: [],
};
 
const FormEditRoles = ({ dataUser, dataRol, setDataUserRol, dataUserRol }) => {
  const [form, setForm] = useState(initialForm);
  const [selectedRoles, setSelectedRoles] = useState([]);
  const [message, setMessage] = useState();
  const [response, setResponse] = useState(null);
 
  useEffect(() => {
    const loadSelectedRoles = async () => {
      const { data: userRoles } = await supabase
        .from("users_roles")
        .select("rol_id")
        .eq("user_id", dataUser[0].user_id);
 
      const selectedRoles = userRoles.map((r) => r.rol_id);
      setSelectedRoles(selectedRoles);
    };
    if (dataUser && dataUser.length > 0) {
      loadSelectedRoles();
    }
  }, [dataUser]);
 
  const handleCheckboxChange = (e) => {
    const roleId = parseInt(e.target.value, 10);
 
    if (e.target.checked) {
      setSelectedRoles([...selectedRoles, roleId]);
      setForm({ ...form, roles: [...selectedRoles, roleId] });
    } else {
      setSelectedRoles(selectedRoles.filter((id) => id !== roleId));
      setForm({
        ...form,
        roles: selectedRoles.filter((id) => id !== roleId),
      });
    }
  };
 
  const updateRolesUser = async () => {
    const { data: userRoles } = await supabase
      .from("users_roles")
      .select("rol_id")
      .eq("user_id", dataUser[0].user_id);
 
    //Gets the IDs of the roles to be removed
    const rolesToDelete = userRoles.filter(
      (r) => !form.roles.includes(r.rol_id)
    );
 
    //Removes roles that are no longer selected by the user
    for (const role of rolesToDelete) {
      await supabase
        .from("users_roles")
        .delete()
        .eq("user_id", dataUser[0].user_id)
        .eq("rol_id", role.rol_id);
    }
 
    //When removing any role we update the data
    let newData = dataUserRol.filter(
      (el) => el.user_id !== dataUser[0].user_id
    );
    setDataUserRol(newData);
 
    //Gets the IDs of the roles to be add
    const rolesToAdd = form.roles.filter(
      (r) => !userRoles.some((ur) => ur.rol_id === r)
    );
 
    for (const roleId of rolesToAdd) {
      await supabase
        .from("users_roles")
        .insert({ user_id: dataUser[0].user_id, rol_id: roleId });
    }
 
    setDataUserRol([...dataUserRol, dataUser]);
    setMessage("Roles actualizados exitosamente");
    setResponse(true);
    setTimeout(() => {
      setResponse(false);
    }, 2000);
  };
 
  return (
    <>
      <h3>Edit roles</h3>
      {dataRol.length > 0 ? (
        dataRol.map((el, index) => (
          <div key={index} className="inline-role">
            <input
              type="checkbox"
              id={`role-${el.roles_id}`}
              value={el.roles_id}
              name={el.nombre}
              checked={selectedRoles.includes(el.roles_id)}
              onChange={handleCheckboxChange}
            />
            <label htmlFor={`role-${el.roles_id}`}>{el.nombre}</label>
          </div>
        ))
      ) : (
        <p>Loading...</p>
      )}
      <button onClick={updateRolesUser}>Guardar</button>
      {response && <p>{message}</p>}
    </>
  );
};
 
export default FormEditRoles;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { useModal } from "../hooks/useModal";
import FormEditRoles from "./FormEditRole";
import Modal from "./Modal";
 
const TableRowUser = ({
  el,
  nameRol,
  setDataToEdit,
  deleteDataUser,
  dataRol,
  setDataUserRol,
  dataUserRol,
  dataUser,
}) => {
  let { user_id, nombres, apellidos, fecha_nacimiento } = el;
 
  const [isOpenModal, openModal, closeModal] = useModal(false);
 
  return (
    <tr>
      <td>{nombres}</td>
      <td>{apellidos}</td>
      <td>{fecha_nacimiento}</td>
      {nameRol.length > 0 ? (
        <td>{nameRol.join(", ")}</td>
      ) : (
        <td>empty data</td>
      )}
      <td>
        <button onClick={() => setDataToEdit(el)}>Edit</button>
        <button onClick={openModal}>Edit roles</button>
        <button onClick={() => deleteDataUser(user_id)}>Delete</button>
        <div>
          <Modal isOpen={isOpenModal} closeModal={closeModal}>
            <FormEditRoles
              dataUser={dataUser}
              dataRol={dataRol}
              setDataUserRol={setDataUserRol}
              dataUserRol={dataUserRol}
            />
          </Modal>
        </div>
      </td>
    </tr>
  );
};
export default TableRowUser;
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder