Creating A Toast Message Manager

Thank you very much for sharing, memsbdm!! 😊

Hi davidtazy!

Yeah, the toast system should be fully working by the end of this lesson. And, in fact, In lesson 5.2 Logging Out Users, we add in a session.flash('success' Welcome to PlotMyCourse') after successfully registering the user.

Are you redirecting the user after registering them? Flash messages are made available for the next request and won't be applied to the current, so the redirect does serve a purpose here.

Here is the final RegisterController's Store method.

@inject()
async store({ request, response, session }: HttpContext, webRegister: WebRegister) {
  const data = await request.validateUsing(registerValidator)

  // register the user
  await webRegister.handle({ data })

  session.flash('success', 'Welcome to PlotMyCourse')

  return response.redirect().toRoute('organizations.create')
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

If you'd like & are able, feel free to share a link to the repo and I can see if anything stands out.

Also, that's awesome to hear! I hope you enjoy AdonisJS and thank you for joining Adocasts Plus!! 😁

Nevermind, found a repo, problem solved.

Hi Pavlo! In Inertia, the built-in layout layer is positioned above the page component. This means that the instance of the layout component persists across page changes, as long as the page is linked to using Inertia’s Link component.

Since we're using the built-in layout layer in Inertia & our ToastManager lives within our AppLayout and AuthLayout, we're achieving exactly that. The only exception would be if we switch between those layouts - in which case you could use nested layouts to resolve that if needed.

Hi german-gonzalez!

Do you also have the runToasts call within the onMounted hook? Since the ToastsManager is added via the layout, when you go from a page using the AppLayout to a page using the AuthLayout the AppLayout's ToastManager will be destroyed and a new one will be created and mounted for the AuthLayout. By having runToasts called inside the onMounted hook, we're populating that initial state for our messages when the component is first created and ready.

With how we have our layouts defined when we traverse between pages using the same layout, like going from the login page to the register page, the same layout instance will be used. Since our ToastsManager is added via the layout, that also means the same ToastManager instance will be used and that is where the watchEffect comes into play. That will watch the reactive values we're using within the hook for changes and rerun when any are detected.

onMounted(() => {
  runToasts({
    exceptions: props.messages.errorsBag,
    success: props.messages.success,
  })
})

watchEffect(() => {
  runToasts({
    exceptions: props.messages.errorsBag,
    success: props.messages.success,
  })
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Why does it work when wrapped in $nextTick? The issue is that watchEffect runs immediately to pickup which reactive values to watch for changes. When it runs immediately, its running in the setup stage of our component at which time the component hasn't been mounted, so we don't have a template yet. That results in nothing happening with our toasts. By wrapping it in $nextTick you're deferring when the watchEffect's runToasts call actually run.

Hope this helps!!