How to handle a checkbox in react if I want certain checkboxes to already appear checked?

I have a registration form in which the user can select multiple roles through a checkbox. These roles are saved in a database and this already does it correctly, then I have a modal which is used for the user to edit their roles. In this a checkbox is shown again with the roles that they can select.

What I want to achieve is that when the modal is displayed, the roles that the user already has assigned appear marked in the checkbox. I achieve but this only works when I reload the page. What can I do so that as soon as the modal is displayed, the roles that the user has are already marked without having to reload the page?

This is my code:

import React, { useEffect, useState } from "react";
import { supabase } from "../supabase/client";
//import FormEditRoles from "./FormEditRole";
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;

import TableRowUser from "./TableRowUser";

const TableUser = ({ dataUser, nameRol, setDataToEdit, deleteDataUser, dataRol, setDataUserRol, dataUserRol, loadRoles}) => {
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Last names</th>
            <th>Birthdate</th>
            <th>Rol</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {dataUser.length > 0 ? (
            dataUser.map((el) => (
              <TableRowUser
                key={el.user_id}
                el={el}
                nameRol={nameRol}
                setDataToEdit={setDataToEdit}
                deleteDataUser={deleteDataUser}
                dataRol={dataRol}
                setDataUserRol={setDataUserRol}
                dataUserRol={dataUserRol}
                dataUser={dataUser}
              />
            ))
          ) : (
            <tr>
              <td colSpan="5">You have not entered additional data</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default TableUser;

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;

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;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/8jUhGH5

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...

StacksPedia

Search This Blog

How to handle a checkbox in react if I want certain checkboxes to already appear checked?

Labels

Comments

Post a Comment

Popular posts from this blog

How to show number of registered users in Laravel based on usertype?

Why is my reports service not connecting?

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input