Build a Livewire CSV Importer
This episode is for members only

Sign up to access "Build a Livewire CSV Importer" right now.

Get started
Already a member? Sign in to continue
Playing
25. Resetting state

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
We saw an issue in the last episode
00:01
when we imported a file here and hit Import. So when we chose a file, mapped this up like this, and then hit Import, we get all of this data hanging around. Technically, we've got the file hanging around.
00:16
We've got the columns that we want to map hanging around. All of that data hasn't been reset. So what we want to do in this episode is make sure we do that so the user's
00:25
ready to upload a new file if they choose a different one at the same time. So over in the CSV Importer here, let's open this up. Just before we go ahead and emit this,
00:36
it doesn't matter which order we do this in, what we want to do is reset some of the properties that we have got inside of this component. So let's just go through the ones
00:45
that we don't want to reset, and we'll kind of exclude them. You could do this in the opposite way and reset only the ones that you need. But I'm going to do this in the, I'm
00:55
going to reset everything except things that we don't want to reset. So we don't want to reset open, because that's going to go ahead and close the modal once we've set this up.
01:05
We don't want to go ahead and reset the columns that we want to map, because if we do that, what's going to happen is the stuff that we did in mount is going to be lost.
01:15
You could go ahead and redo this if you wanted to, but I think it kind of makes sense to keep the columns to map anyway, although you could change that. We don't want to reset the column labels,
01:24
and we don't want to reset the required columns. And of course, we don't want to reset the model either, because then that data is not going to be available. So what we can do is just go down to where we import.
01:34
And once we've done everything here, we can just do a little bit of cleanup. And resetting properties in Livewire will just reset them back to their original state.
01:43
So you won't lose any of the original state that you set. So we're going to go ahead and say reset except. What you can do is reset only if you want to, or just reset, I think it is, and just pass through an array here.
01:55
But I'm going to go ahead and do this the other way around. And we're going to pass in an array here. So what don't we want to reset? We don't want to reset the model.
02:05
We don't want to reset the columns to map. We don't want to reset the column labels, because we'll lose them otherwise, and then our validation will look weird.
02:14
We don't want to reset the required columns. And we don't want to reset the fact that this component is currently open, or it will just be reset back to false, and it will close.
02:25
So let's try this out now and see what happens when we go ahead and start multiple imports. So we're going to go ahead and upload this file here, choose customers.csv, map all of these up, and hit import.
02:39
And that goes. So what we can now do is choose another file, and we get back this. Now notice this kind of state hasn't been reset,
02:45
but I think that kind of makes sense in the context of importing multiple files. These have not been reset, but that's absolutely fine. You can reset them if you want to.
02:55
We can go ahead and import now, and everything gets reset back to how it was. And of course, if we had more rows, or we didn't start our queue,
03:02
we would see multiple imports in there in progress. So there we go, just a little bit of cleanup, so we don't leave anything hanging around after we've imported.

Episode summary

In this episode, we tackle a usability issue that popped up when importing CSV files: after importing, a bunch of data—including the uploaded file, column mappings, and other details—was sticking around in our component's state when it shouldn't be. This meant if you wanted to import another file immediately, you'd see old bits of info hanging around, which isn't ideal.

To fix this, we dive into our CSV Importer component and implement a smart reset for its properties. Instead of resetting everything, we selectively keep the stuff we don't want to reset (like the columns to map, required columns, column labels, and whether the modal is open) so the component still behaves as expected. We use Livewire's resetExcept() method to clean up just the right values after an import, ensuring everything goes back to its initial state for a smooth repeat import experience.

Finally, we try out the new flow: importing one file, then another, showing how the cleanup works, and explaining why we might or might not want to reset certain bits of state. It keeps things neat and avoids confusion for users doing back-to-back imports!

Episode discussion

No comments, yet. Be the first!