An application-wide modal, which sends actions to its own route

I’ve been trying to redesign my modal handling logic to clean things up but I’ve run into a “not sure how best to do this” situation.

I have a quiz platform where users can add quizzes to folders. Quizzes are displayed as QuizCardComponent, and are reusable in almost any route in the app. In order to add a quiz to a folder, I display an “add to playlist” button on the QuizCardComponent. This fires a route-action called “addToFolder”; however, given that QuizCardComponent can be in almost any route, I handle this all the way up in ApplicationRoute which has the action ‘addToFolder’. In order to pick which folder to add the quiz to, a modal dialog is opened (a component which resides on the ApplicationRoute’s template) and yields a given component within it; in this case ‘components/folder/add-to-folder’. Finally, any actions defined in Folder/AddToFolderComponent are sent back to ApplicationRoute, such as ‘addTestToThisFolder’.

The problem here is two-fold; I don’t think the ApplicationRoute should be dealing with opening the modal and more importantly, I don’t want ApplicationRoute to handle adding the test to the folder.

Ideally, I want FolderRoute to both open the modal, and receive the actions which will mutate the Folder record.

I have heard about routable modals but I doubt they’ll work from any starting point: for example

  • /home … user clicks add to folder; show modal /home/showModal
  • /profile … user clicks add to folder; show modal /profile/showModal That seems strange to me.

TL;DR

Reusable, compartmentalised modals which can be opened from any route, but send actions back to a specific route directly.

Really hope that’s clear!

1 Like