Как определить что пользователь имеет не сохраненные данные?

Question

[campus1]

Всем привет. Есть у меня компонент в котором рендерится инфа про продукты.
Есть так же кнопки prev / next, на клик которых можно переходить между продуктами внутри компонента.
То есть если у нас есть [{id: 2, name: "Apple"}, {id: 3, name: "Banana"}]
Мы допустим на компоненте Banana - /products-setup/product-info/3
Кликаем на prev кнопку переходим на - /products-setup/product-info/2
И так далее

Вот так это реализовано

changeContent = (action) => {
    const {productTable, routeParams: {id}} = this.props;
    const indexOfCurrentElement = productTable.data.findIndex(obj => obj.id === Number(id));
    const index = action === "next" ? indexOfElement + 1 : indexOfElement - 1;
    const previousElement = productTable.data[index];
    const path = `/products-setup/product-info/${previousElement.id}`;
    browserHistory.push(path);
  }

componentDidUpdate(prevProps){
    if(this.props.location !== prevProps.location){
      getProductById(
        this.props.routeParams.id
      )
    }
  }

То есть когда мы кликаем внутри компонента на допустим prev, то происходит поиск индекс current продукта и берется предыдущий объект продукта и идет запрос на получение инфы про продукт и делается ре-рендер.

Теперь вопрос - Допустим пользователь зашёл на компонент, сделал какие-то действия (проредактировал название продукта) и нажимает на кпопку Previous. Как мне определить что пользователь имеет не сохраненные данные и выдать попап что перед тем как перейти на предыдущий продукт, надо сохранить данные??

P.S Весь код не могу выставить потому что проект confidence

Answer 1

[Sergiu Mitu]

Вещаете обработчик на изменения (onChange), если что-то изменилось изменяем state, с changed: false на true. Ну и соответственно в changeContent проверяем если this.state.changed то выводим попап или что там нужно, если нет то ничего не делаем пускаем его дальше.

Comments

[campus1]

А если допустим у меня был текст Hello, пользователей проредактировал его Hello1
Но потом убрал на опять Hello. По сути он не редактировал ничего, но changed будет true

[Sergiu Mitu]

campus1, это пример из разряда фантастики, но все же реален. В таком случае нужно сохранять изначальные данные и изминеные данные отдельно. В функции тогда сверяем эти самые объекты, но честно я бы не стал заморачиваться так, сделал изминения - значит ты что-то хотел поменять ну а если нет то просто а модалке нажимаем не сохранить а оставить/отмена и все.. Всетаки с точки зрения производительности сверять два объекта куда труднозатратнее чем просто проверить одну переменную.

[campus1]

Sergiu Mitu, Я тоже думал сначала делать 2 объекта и вешать onChange на 1. Но потом запустил perf тест и как-то не оч(

Answer 2

[0xD34F]

Пусть данные будут представлены двумя экземплярами - первый пользователь редактирует, второй остаётся неизменным. При необходимости определить наличие изменений, внесённых пользователем - сравниваете попарно их свойства.

Comments

[campus1]

А не будет это слишком ресурсозатратным?
Делать 2 проперти в redux state. Делать cloneDeep

[0xD34F]

campus1, это уж вам виднее, смотрите сами. В чём преимущество сравнения с оригиналом? Пользователь может внести изменения, а затем внести изменения ещё раз - так, что значение не будет отличаться от исходного. Реально ничего не изменилось - и при сравнении с изначальным набором данных это будет видно. А если воспользоваться вариантом с флагом, как предлагают в соседних ответах - то в результате вы будете предлагать сохранять несуществующие изменения.

[campus1]

0xD34F, Я понял вас. Спасибо!

[campus1]

0xD34F, Я имею еще небольшой вопросик.
Стоит ли выносить функцию смены в action или оставить как простую ф-цию в компоненте??

changeContent = (action) => {
    const {productTable, routeParams: {id}} = this.props;
    const indexOfCurrentElement = productTable.data.findIndex(obj => obj.id === Number(id));
    const index = action === "next" ? indexOfElement + 1 : indexOfElement - 1;
    const previousElement = productTable.data[index];
    const path = `/products-setup/product-info/${previousElement.id}`;
    browserHistory.push(path);
  }

componentDidUpdate(prevProps){
    if(this.props.location !== prevProps.location){
      getProductById(
        this.props.routeParams.id
      )
    }
  }

Answer 3

[Антон Спирин]

Например так:

hasUnsavedChanges() {
  // валидация данных
}

handleClick = e => {
  const { dataset } = e.target;

  if (this.hasUnsavedChanges()) {
    return this.showWarningPopup();
  }

  return this.changeContent(dataset.action);
};

Comments

[campus1]

Интересный вариант. Спасибо.

Но если вы хотите показывать в компоненте какую-нибудь идентификацию наличия несохраненных данных, то тогда имеет смысл перенести флаг hasUnsavedChanges в state компонента.

Нужен будет лишь поп-ап что есть где-то несохраненные данные и все, при клике на prev || next кнопки.

P.S Порылся немного в инете и нашел так же интересный вариант с Prompt библиотеки react-router-dom

[Антон Спирин]

campus1, видите, чтобы точно знать что что-то поменялось в данных, необходима валидация модели.
Там как раз пример работает примерно как я писал в первой версии ответа. Там нет начальных данных, поэтому все так просто.

[campus1]

Антон Спирин, Да я уже увидел. Спасибо за ответ. Буду реализововать.

[campus1]

Антон Спирин, Я имею еще небольшой вопросик.
Стоит ли выносить функцию смены в action или оставить как простую ф-цию в компоненте??

changeContent = (action) => {
    const {productTable, routeParams: {id}} = this.props;
    const indexOfCurrentElement = productTable.data.findIndex(obj => obj.id === Number(id));
    const index = action === "next" ? indexOfElement + 1 : indexOfElement - 1;
    const previousElement = productTable.data[index];
    const path = `/products-setup/product-info/${previousElement.id}`;
    browserHistory.push(path);
  }

componentDidUpdate(prevProps){
    if(this.props.location !== prevProps.location){
      getProductById(
        this.props.routeParams.id
      )
    }
  }