luciodale / fork

A non-intrusive Clojurescript form management library for Re-frame and Reagent.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Reset "dirty" state after submit

lowecg opened this issue · comments

Hi,

Is there a way to remove dirty state from a form?

My form's initial values are populated using data retrieved from a DB. Once I have successfully saved my form's edits via a submit, I'd like to remove the dirty state from the form since the form state is now consistent with the DB.

I'm using the dirty state to drive "you have unsaved changes" type logic which currently persists after saving.

I've looked at set-untouched and reset but they do not have the desired effect. For example, I'm using something like this:

(rf/reg-event-fx
  ::submit-entity
  (fn [{:keys [db]} [_ {:keys [values, path, reset]}]]
      (make-server-call {:values values
                            :on-update (fn [item]
                                         (reset {:values values}))})

      {:db (-> db
               (fork/set-submitting path true))
       })))

This has no apparent effect on the dirty state.

Dirty state seems to be a comparison between initial-values and current values. So I'm feeling like I'm barking up the wrong tree.

Any suggestions?

Hi!

In your reset call I believe you can simply add {:initial-values values :values values}. This should fix your issue.

Hi Lucio

Thank you for the tip but, unfortunately, that didn't work for me either. The form still reports the same dirty values following the call to reset.

            :on-update (fn [item]
                                         (println "ON UPDATE" item)
                                         (try
                                           (reset {:initial-values values
                                                   :values         values})
                                           (println "RESET CALLED" reset)
                                           (catch :default cause
                                             (println "ERROR" cause)
                                             ))

In my console, I can see that the code is being invoked:

ON UPDATE <redacted>
core.cljs:200 RESET CALLED #object[G__62465]

But later logs still show the dirty value:

(defn panel [{:keys [classes, get-props]}]
  (let [{:keys [form-props]} (get-props)
        {:keys [values, dirty]} form-props]
    (println :dirty dirty)
:dirty {:company-product-id 123456}

Cheers,

Chris

I created a branch against the repro I set up for issue 24 to demonstrate my problem:

https://github.com/lowecg/issue-data-corruption/tree/clear-dirty-state

cd source
git clone git@github.com:lowecg/issue-data-corruption.git
cd issue-data-corruption
git checkout clear-dirty-state
npm run watch

Access http://localhost:8280/
Make an edit to the Description field
Click Save to invoke the submit handler that calls reset.

For me, the dirty value that is shown prior to clicking the save button remains despite the call to reset.

Let me know you need anything else

Thanks for the repo! v2.4.2 for the fix ;).

In short, when you call (reset {:initial-values ... :values ...}and pass initial-values, your dirty function will now return the proper result.

I am actually thinking whether the reset should automatically clear that mmm. Maybe it's good for now to leave the choice to the user

Thank you for the fix, it worked like a charm.

I am actually thinking whether the reset should automatically clear that mmm. Maybe it's good for now to leave the choice to the user

I agree that it would make sense for including initial-values in the default behaviour of reset, but it might be a breaking change for some.

It would be helpful to add a further example covering this scenario for reset in the "Quick overview" examples in the Readme.md.

I've been wanting to release a Fork site with some proper documentation to cover everything.. hopefully it won't take me too long :)