Recommand · October 14, 2021 0

Is this an efficient way to send data between components using Link from react router?

I want to know if the way I implemented the transfer of data between two components, is the efficient way. To be more precise, in one component that is called TableComponent.js I am fetching data from an API and then with Link from react router, I am sending that data to another component called User.js.

User.js component is used for editing or creating new users based on the fact if an url has an ID passed with Link. If the Link is not sending an ID then the path will be: /users/new, but if it has an ID then the path will be: /users/ID (id of the clicked user in the table)

Let me show you the code.

I am going to show you just a part where I am sending data with Link in TableComponent.js, as other part is not necessary and the code is quite big:

              <Link
                    to={{
                      pathname: `/users/${apiData.id}`,
                      user: {
                        name: apiData.name,
                        email: apiData.email,
                        status: apiData.status,
                        gender: apiData.gender,
                      },
                    }}
                  >
                    {apiData.name}
                  </Link>

This is now the User.js component:

const User = (props) => {
  const { name, email, status, gender } = props.location.user;

  const { id } = useParams();

  const [newName, setNewName] = useState(name);
  const [newEmail, setNewEmail] = useState(email);
  const [newStatus, setNewStatus] = useState(status);
  const [newGender, setNewGender] = useState(gender);

  const updateName = (e) => {
    setNewName(e.target.value);
  };

  const updateEmail = (e) => {
    setNewEmail(e.target.value);
  };

  const updateStatus = (e) => {
    setNewStatus(e.target.value);
  };

  const updateGender = (e) => {
    setNewGender(e.target.value);
  };

  const updateData = () => {
    if (id) {
      axios
        .put(
          `${process.env.REACT_APP_API_URL}users/${id}`,
          {
            name: newName,
            email: newEmail,
            status: newStatus,
            gender: newGender,
          },
          {
            headers: {
              Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}`,
            },
          }
        )
        .catch(function (error) {
          if (error.response.status === 422) {
            alert(
              "Error: The format of email is wrong! Please put it like this: yourname@yourname.com"
            );
          }
        });
    } else {
      axios
        .post(
          `${process.env.REACT_APP_API_URL}users/`,
          {
            name: newName,
            email: newEmail,
            status: newStatus,
            gender: newGender,
          },
          {
            headers: {
              Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}`,
            },
          }
        )
        .catch(function (error) {
          if (error.response.status === 422) {
            alert("Error: Name or email already taken!");
          }
        });
    }
  };

  return (
    <Layout title={id ? "Edit User" : "Create User"} hasSearchBox={false}>
      <ActionsInputsContainer data-testid="actionspage-inputs">
        <NameInputContainer>
          <ActionsInputs
            labelName="Name:"
            placeholder="Insert the name..."
            value={newName}
            onChange={updateName}
          />
        </NameInputContainer>
        <EmailInputContainer>
          <ActionsInputs
            labelName="Email:"
            placeholder="Insert the email..."
            value={newEmail}
            onChange={updateEmail}
          />
        </EmailInputContainer>

        <SelectInput value={newStatus} onChange={updateStatus}>
          <MenuItem value="active">Active</MenuItem>
          <MenuItem value="inactive">Inactive</MenuItem>
        </SelectInput>

        <SelectInput value={newGender} onChange={updateGender}>
          <MenuItem value="male">Male</MenuItem>
          <MenuItem value="female">Female</MenuItem>
        </SelectInput>

        <ButtonsContainer data-testid="actionspage-buttons">
          <Link to="/users">
            <CancelButton variant="outlined" text="CANCEL"></CancelButton>
          </Link>
          <Link to="/users">
            <ActionsButton
              onClick={updateData}
              variant="filled"
              text="ACCEPT"
              data-testid="actionspage-updatebutton"
            ></ActionsButton>
          </Link>
        </ButtonsContainer>
      </ActionsInputsContainer>
    </Layout>
  );
};

As you can see in this component I am sending the ID like a parameter whereas other data is being send using props. Is this a good way, because now I have certain bugs for example, if I refresh the page it fails, because there are no props being send. Also is it a good practice to send certain data as url parameter and other via props. If you could help me to make this code more efficient, I would be thankful.