# Resource Browser Developer Notes

## Component usage / render order

1. ResourceBrowser e.g. index.tsx
2. PluginRender
   . A plugin is create for each inputted plugin to the ResourceBrowser
   . They are conditional rendered based on if that plugin is needed by a source that matches that plugin being selected
   . This pattern allows React Hooks to continue working inside the plugins because React doesn't like functions that include hooks being switch out at runtime e.g. switching what functions are used based on the selected source.
3. ResourceBrowserInput
   . This renders the first thing you see in the UI, an input area for a Resource to be selected or changed.
   . This has two states: empty where selecting opens directly opens the modal at the next Component in the chain or selected where it will use a function from the selected resources matching plugin to render what that plugin thinks the Resource looks like.
4. MainContainer
   . This is the main body of the modal which opens when a Resource needs to be selected
   . This has two sub views which can show: a launcher selection where the user can pick which connected source they want to select from and whether they want to search or browser or a resource browser / search page for when either a source is being changed.
5. (path 1) ResourceLauncher
   . This will show a list of connected sources and render a small UI from each's plugin to allow a user to launch into that sources selector via a search or browser context based on what that plugin supports.
6. (path 2) Plugin's `sourceBrowserComponent` or `sourceSearchComponent` depending on what was selected in the launcher or browse if the launcher wasn't used e.g. changing and existing resource.