jollyjerr / react-autosave Goto Github PK

Your link on:
https://betterprogramming.pub/how-to-embed-a-react-application-on-any-website-1bee1d15617f

to

https://github.com/jollyjerr/react-widget

to Github does not work. Cannot find the repository.

Hey this is an amazing library but I do have an issue that I'm currently facing.

I have a simple app like this:

I click on New Docs, type in quickly something & then click on New Docs again before it saves.

There is an indicator beside it that shows Saving & Saved state. When it's on Saving state & I switch to New Docs, it keeps the old doc empty because the state hadn't been saved.

See the new image below:

I did type in something quickly but clicked on New Docs immediately so it kept that part empty. 1st & 2nd item has Empty Docs in it (see image)

How do I fix it?

I have a full repro at https://github.com/deadcoder0904/docs-autosync/tree/react-autosave (see 2 files: DocsList.tsx & Writer.tsx)

Also, I'm wondering if alertIfUnsavedChanges is good to implement. https://github.com/lukesmurray/react-query-autosync has a similar option (search for alertIfUnsavedChanges on the readme) & here's the implementation

But would love to know if this is a problem with my implementation of react-autosave or not using React State perfectly or something else?

I imagine this is due to the fact that the types field in package.json is no longer used if there is an exports field

We'd need to move them inside the exports:

"exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/react-autosave.js",
      "require": "./dist/react-autosave.umd.cjs"
    }
  },

Just installed the 0.4.0 update (thanks for the quick update) and the useAutosave hook mock (jest-mock) I was using in my tests stopped working.

It fails with the error Failed to get mock metadata: [...]/node_modules/react-autosave/dist/react-autosave.umd.js.

I’m no test guru, so I don’t have a fix to suggest, but I continue trying to find a workaround on my end.

package does not work in production. Please deprecate or close till beta is over.

Hey, thanks for this library. It's wonderfully simple. I was using use-react-query-auto-sync but it wasn't working for my usecase & this one did work removing a lot of code.

I am facing 1 problem though. In the README, it's mentioned I should use useCallback but I'm not sure how to pass id to it as I need that in the mutation.

id & text is everchanging in my case.

const updateDraft = useCallback(
    (newText: string) => {
      console.log('updateDraft')
      console.log({ id: snap.doc.id, text: newText })
      updateDocs({ id: snap.doc.id, text: newText })
      toggleIsSaved(true)
    },
    [snap.doc.id]
  )

  useAutosave({
    data: snap.doc.text,
    onSave: updateDraft,
  })

I am using valtio as a global state manager. That's where the snap.doc.id is coming from. But every time, the 1st snap.doc.id gets passed because of useCallback as the same function is used so every time it mutates the same row as snap.doc.id stays the same.

I'd love to know a solution to this.

Complete reproduction on branch react-autosave → https://github.com/deadcoder0904/docs-autosync/tree/react-autosave

HI!) When I used our hooks I Faced with a problem.
Currently, if you pass an object/array as data in useAutosave or useDebounce.
Then debouncing never stop.
I see the following solution.
But maybe you know how to implement it better, still I don't have much experience.

hey, i get a warning when in my console that says:

(node:6111) [DEP0128] DeprecationWarning: Invalid 'main' field in '~/docs-autosync/node_modules/react-autosave/package.json' of 'build/index.js'. Please either fix that or report it to the module author (Use node --trace-deprecation ... to show where the warning was created)

might wanna fix that :)

In the useAutosave.tsx, when evaluating if onSave will be called, if the value is falsy (empty string, 0), onSave is not called.

    if (initialRender.current) {
      initialRender.current = false;
    } else if (debouncedValueToSave) {
      onSave(debouncedValueToSave);
    }

You should remove this check.

P.S. thanks for this great hook!

package.json contains

  "module": "./dist/react-autosave.es.js",
  "exports": {
    ".": {
      "import": "./dist/react-autosave.es.js",
    }
  },

But dist/react-autosave.es.js does not exist. Looks like it should be dist/react-autosave.mjs instead.

My onSave callback needs to verify against a state value that changes often. But if I put that state value as a dependency to the useCallback, it will create a new callback each time that state value changes and then useAutosave will call onSave. I would like to silently update onSave without triggering useAutosave to call it.

Hi, this lib is amazing. I have a question, how autosave behaves when componentWillUnmount fired before debounce time end?
If the user quickly fill a input and switches to another screen by menu, autosave should force save. I tried but to no avail.

Versions:
react-autosave: 0.4.2
react: 16.8.6

While using the hook useAutosave , the following error is being shown. Is the latest release of react-autosave not supported for react 16 ?