DEV Community

loading...

Improving the way of saving posts on Dev.to while writing.

Mohammad Aziz
I write bugs 🐛
・2 min read

Yesterday, while I was writing a post which took me 45 minutes to finish, someone from my family came and accidentally pressed the back button of my browser. At that point, I did not understand the consequence and I thought if I will go forward all of the content written will be there. Unfortunately, this is not the case for sites like Hashnode and Dev.to.

Shocking Period

After returning back to the page where I was writing my post I saw what you'll normally see when you click on write a post button. A page with no content. That is when I first get the sense something terrible has happened. For confirmation of the catastrophe I refreshed the page and after that, I started crying inside.

All of the work that I have done for 45 minutes was gone. 😠

Current Solution

At the current scenario, to save your post periodically you will have to click on save post every time you want to save the current state of your draft. I certainly understand why the platform creators have chosen this way of implementation. Two simple reasons are there:

  1. Reduce server load time and therefore...
  2. Reduce server bills

Well, we can certainly go this way of implementation but I think there is a better way to do this.

My Solution

localStorage is one way to improve it. localStorage is a key/value Web Storage API. In which we can store the data of our post. The best part of localStorage is that data in it persist even after tab close or refresh.

Since Dev.to uses React my implementation is React specific but the general idea will be the same for other frameworks on other platforms. The implementation is on Codesandbox and you can view it from the link below.

Edit Stateful Content

At initial render, I'm checking whether there is some content already present or not. If there is, set the value of textarea to the previously saved value.

  ...
  React.useEffect(() => {
    const content = localStorage.getItem("content") || "";
    setContent(content);
  }, []);
  ...

  <textarea
    value={content}
    onChange={handleChange}
  />

The handleChange function:

  function handleChange(event) {
    const value = event.target.value;
    setContent(value);
  }

Every call to setContent will trigger useEffect hook which throttles setting the value of our content in the localStorage. While throttling is not necessary but instead of localStorage if there would have been an API then throttling definitely make sense in that case.

const throttled = throttle((content = "") => {
  localStorage.setItem("content", content);
}, 500);

  ...
  React.useEffect(() => throttled(content));
  ...

Yes, there are some corner cases that I hadn't covered in this implementation for the sake of keeping this post simple.

Please let me know @ben about your thoughts on this and how can we improve?

Discussion (10)

Collapse
somedood profile image
Basti Ortiz

This is a very interesting proposal. It's so simple that I'm now wondering why this has not become a feature yet.

@ben Any thoughts on this?

Collapse
iaziz786 profile image
Mohammad Aziz Author

Thanks, @somedood you liked the proposal. I definitely want to hear what @ben thinks about it.

Collapse
rhymes profile image
rhymes

You're right, the editor would be better with some sort of autosave capabilities.

@aspittel is working on it ;-)

[WIP] Feature/autosave editor #1633

aspittel avatar
aspittel commented on Jan 23, 2019

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Documentation Update

Description

Add base functionality for autosaving drafts

Related Tickets & Documents

github.com/thepracticaldev/dev.to/...

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [ ] no documentation needed
Thread Thread
aspittel profile image
Ali Spittel

Yes! it's pretty much there -- will get merged soon!

Thread Thread
somedood profile image
Basti Ortiz

Thanks, @aspittel !

Thread Thread
iaziz786 profile image
Mohammad Aziz Author

@aspittel , I did know you were working on this. Looks like you too using localStorage for it. 😄

Thread Thread
aspittel profile image
Ali Spittel

yep!

Thread Thread
iaziz786 profile image
Mohammad Aziz Author

Cool! Thanks for making this much wanted feature.

Collapse
rishiraghav9 profile image
Rishi Raghav

The lab board applications are perfect arrangements comprising of principal capacities computerized to disentangle the lab tasks. These Laboratory Management Lab board frameworks lessen the outstanding tasks at hand with their propelled highlights like lab stock administration, database, test results, tolerant records and create bills and solicitations.

Techjockey #lispathcare #labmanagementsoftware

techjockey.com/category/laboratory...

Collapse
itr13 profile image
Mikael Klages

This is a very nice feature to have, I've used it multiple times on my phone already (I primarily use dev.to on my phone), so I guess it's either implemented for the mobile version of the website, or my phone browser does it automagically.