Because of the nature of my app, on the first time it is run it has to perform lots of setup. It does 2 main things. It checks if paths and files exist using fs and also prompts a user for signing in, so that would mean it also has to make api requests. This means there's two main "error points". One is if the user is unable to login and the other is if any of the paths/files do not exit. The unable to login error is easy to handle because the default page is the sign in page, so I can display some text.
The others errors are harder because I have to queue them. Once the user has finished signing in, it will check to see if there is anything in said queue and if there is it will display those pages (they are't actually pages, but just divs that I hide and show).
It would run like this: the app is opened and the sign in page is presented to the user. In the background the program checks a list of paths to see if they exists. For this example, two paths checked do not exist so it "queues" both the errors. The user clicks sign in and successfully signs in. Before moving on, the program checks the queue and sees the errors. It displays the first error page, in which the user can enter a new path. Once the path is entered, the queue is checked again and the page is displayed again. This can happen for as many errors in the queue. However, because there is only 2 types of errors, only one can be in the queue so they don't need to be differentiated.
What adds more difficulty is the fact that I would like a "fallback" page too. If somehow, the user could sign in before any errors were reported, it needs to just display some text on the screen either until there is an error or it is told it can move on.
So far, for the "pages" I have this:
<div className="ol-box-internals">
<img src={p.img} alt={p.name + " Logo"} width={p.imgWidth} height={p.imgHeight} className="ol-logo-image"></img>
<div className="ol-form-container">
<div className="ol-form-field">
<label htmlFor="ol-form-username">
<IonIcon class="ol-form-icons" icon={person}></IonIcon>
</label>
<input className="ol-form-username" type="text" name="username" placeholder="Username" required></input>
</div>
<div className="ol-form-field">
<label htmlFor="ol-form-password">
<IonIcon class="ol-form-icons" icon={lockClosed}></IonIcon>
</label>
<input className="ol-form-password" type="password" name="password" placeholder="Password" required></input>
</div>
<div className="ol-form-field">
<input onClick={() => signIn()} className="ol-form-submit" type="submit" value="Sign In"></input>
</div>
<div className="ol-form-text">
Don't want to login? <a style={{ "cursor": "pointer" }}>Skip</a>
</div>
</div>
<div className="ol-path-not-found">
<div className="ol-enter-path-info">{p.pathNotFound}</div>
<div className="ol-form-field">
<input className="ol-form-path-input" type="text" name="path" placeholder="Type here"></input>
</div>
<div className="ol-form-field">
<input onClick={() => checkPath()} className="ol-form-submit ol-form-path-submit" type="submit" value="Continue"></input>
</div>
</div>
<div className="ol-setting-up">
Setting up...
</div>
</div>
<IonProgressBar class="ol-setup-progess" type="indeterminate"></IonProgressBar><br />
</div>
(By default ol-setting-up and ol-path-not-found are invisible)
The checks of the paths that run in the background are:
const setup = () => {
let path = appDataPath + p.paths[getOS()] + p.paths.filename;
let doesExist = fs.existsSync(path);
if (!doesExist) {
ipcRenderer.send(Events.DOCK_BOUNCE);
//Here I need to queue the error event
}
}
In the terms of that code, it starts by running the setup. If that fails it needs to be queued and once signIn has finished, ol-form-container is hidden and ol-path-not-found is shown. If for whatever reason there is no errors in the queue but setup has not finished, once signIn has finished, ol-form-container is hidden but ol-setting-up is shown instead, until an error occurs or it is told it can move.
In simple terms, it needs to wait for the user to press a button basically.
I've tried mainly with react hooks and an array which I append values to but I couldn't get a fully working version. It probably doesn't help that I need to set the opacity of the sections rather than just redirecting to another page, but I still would have the problem.
Maybe I'm approaching this in totally the wrong way but could anyone give some ideas about this?