0
\$\begingroup\$

To start I'd like say that I'm a beginner writing my first Next.js app though I feel this question is more React related. I'm building an app where an user can add/edit stored food, recipes etc. which means I use a lot of submit form handlers. In every handler I:

  1. Check if inputs are correct (I also do that directly in form)

  2. Manage the data

  3. Fetch to backend(Firebase)

  4. Dispatch an action to Redux

How can I achieve better architecture in this form handler?

The problem is that I feel like these handlers are too complicated and too "ugly". Could someone help me with what could I do better here ? I am thinking about exporting some functionality to custom hook or create some dynamic function but I have no idea how to do that here since all these handlers between adding/editing/removing food are so different (they are managing data much differently).

Below example form handler for editing food (the most "ugly" one)

const submitEditFoodHandler = async (e) => {
try {
  e.preventDefault();
  if (
    editFoodName.current.value.trim().length < 1 ||
    editFoodType.current.value === "DEFAULT" ||
    +editFoodQuantity.current.value < 0 ||
    editFoodQuantity.current.value.trim().length < 1
  ) {
    alert(ALERT_FOOD_EMPTY);
    return;
  } else if (!editFoodWeight.current.value.match(WEIGHT_REGEX)) {
    alert(ALERT_WEIGHT_FORMAT);
    return;
  }
  const foodObj = {
    username: foundUser.username,
    id: props.row.id,
    foodId: foundUser.foodId,
    name: editFoodName.current.value,
    type: editFoodType.current.value,
    quantity: editFoodQuantity.current.value,
    weight: editFoodWeight.current.value,
    expDate: editFoodExpDate.current.value,
    key: props.row.key,
  };

  const foodCopy = [...foundUser.food];
  const foundUserFoodIndex = foodCopy.findIndex(
    (ele) => +ele.id === +props.row.id
  );

  foodCopy[foundUserFoodIndex] = {
    name: editFoodName.current.value,
    type: editFoodType.current.value,
    quantity: editFoodQuantity.current.value,
    weight: editFoodWeight.current.value,
    expDate: editFoodExpDate.current.value,
    id: props.row.id,
    key: props.row.key,
  };

  const payload = {
    username: foundUser.username,
    recipesId: foundUser.recipesId,
    foodId: foundUser.foodId,
    totalWeight:
      foundUser.totalWeight -
      getNumberFromStr(props.row.weight) +
      getNumberFromStr(editFoodWeight.current.value),
    totalQuantity:
      foundUser.totalQuantity -
      props.row.quantity +
      +editFoodQuantity.current.value,
    food: foodCopy,
    recipes: foundUser.recipes,
  };

  const docRef = doc(db, "users", foundUser.id);
  await setDoc(docRef, payload);
  dispatch(fridgeActions.editFood(foodObj));

  editFoodName.current.value = "";
  editFoodType.current.value = "";
  editFoodQuantity.current.value = "";
  editFoodWeight.current.value = "";
  editFoodExpDate.current.value = "";
  props.setShowEditFoodModal(false);
} catch (err) {
  alert(ALERT_OTHER);
  console.error(err);
}};

Thank you in advance for any suggestions

\$\endgroup\$
1
  • 2
    \$\begingroup\$ Welcome to Code Review! The current question title, which states your concerns about the code, is too general to be useful here. Please edit to the site standard, which is for the title to simply state the task accomplished by the code. Please see How to get the best value out of Code Review: Asking Questions for guidance on writing good question titles. \$\endgroup\$ Dec 3 '21 at 8:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.