AmbireTech / adex-interface

ADX platform v5 as plugin for ambire-wallet
GNU General Public License v3.0
0 stars 0 forks source link

Fix create campaig state managment #131

Closed ivopaunov closed 6 months ago

ivopaunov commented 6 months ago

Currently the state managmet of the campaign vreation makes no sense. It uses localStorage to keep and update the state on each user input interaction. The esiest way to be fixed is as follows:

  1. move the form context provider to app or dadhboard level instead in create-campaign route (keep in mind some sensitive dtata if the user is not different or not authenticated - dashbourd route should be ok + some check on logout etc.. At the moment current create campaign datat is not linked to specific user and if there user is not loggged/authenicated)
  2. just switch useState instead useLocalStorage for campaign object - this way the state will be kept intil the page is reloaded and the user in dashboard route
  3. in order to keep the stat on page reload you can use additional campaign object wih useLocalStorage + useEffect in which to update the useState object on component mount ([] - empty array for the use efffect update deps) with callback (similar to componen will unmout) to write the the object in the localStorage

this way the local storage will not be updated on each key press etc.

const [campaign, updateCampaign] = useState(...)
const [campaignPersist, updateCampaignPersist] = useLocalStorage(...)

// NOTE: see accout context to handle localStorage campaig data if it's loaded on mount

useEffect(() => {
    updatedCamaign(campaignPersist)

    // NOTE: campaign might not be updated in this case see
    return () => {
      //. So this is possible hax - it should work - this way it's updated once on unmout but does not have the dependency on campaign
      updateCampaign((prev) => { 
          updateCampaignPersist(prev)

            return prev
          })
       }
}, [])
ivopaunov commented 6 months ago

if the useEffect does not work try something like this but it's not the best solution as it can be used for other stuff

useEffect(() => {
    window.onbeforeunload = function() {
        updateCampaign((prev) => { 
                  updateCampaignPersist(prev)

                    return prev
                  })
               }
                return true;
    }

    return () => {
        window.onbeforeunload = null
    }
}, [])
ivopaunov commented 6 months ago

try localStorage.setItem / localStorage.getItem if useLocalStorage does not wotk in window.onbeforeunload

ivopaunov commented 6 months ago

https://github.com/AmbireTech/adex-interface/pull/137/commits

ivopaunov commented 6 months ago

https://github.com/AmbireTech/adex-interface/commit/7fc35f62eb17a6fca66742c7105514a9f965fe66