Hi, so I have a form where the users submits some image files to an API route, and the route uploads those images to an S3 bucket, creates DB entries for each item, and responds with the DB-generated IDs and S3 bucket urls of the images. That data then populates a second form showing all the images uploaded (using their S3 urls), and the user enters supporting information about each image (a title and description, tags, etc), which is then submitted along with the IDs of the images so that info can be saved to the DB as a new post.
My question is that given I have two separate forms (one for image submission, and one for creating posts for the uploaded images), how should i handle the state of all of it as the user goes through this process? What i have currently is a useState which I pass the setter of to the first form, and that form calls that when it gets back the data in response to submitting it, and then i use a ternary to conditionally render the second form instead of the first when the state is populated, and pass that state value as input to the second form that it can use to render.
One thing i dont like about this approach is that the url stays the same throughout this whole process, and if the user reloads theyll be sent back to the first form, even if theyre on the second one. I could redirect to a new page after the first form gets a response, but then i cant use the response to render the second form, so id need to do something like pass the IDs as query params to the second page and then wait for that page to do its own query for the data, which would add a redundant fetch.
Ideally I'd like a way to both transition to the second form without another fetch (since all the data needed is in the response to the first form), and update the url so that a reload doesn't reset the progress. Should i maybe be using a global state management library for this kind of task? Any input is appreciated.