[#1238] Create a derived atom for dataset hydration from Next.js

[dzole0311]

Related Ticket: #1238
Related Next.js PR: developmentseed/next-veda-ui#17

Description of Changes

• Removed dependency on static datasets (veda_faux_module_datasets) when reconciling datasets from URL params in E&A
• Created externalDatasetsAtom to store datasets from host applications (eg Next.js)
• Modified datasetLayersAtom to use external datasets instead of the bundled static datasets from VEDA UI

Notes & Questions About Changes

{Add additonal notes and outstanding questions here related to changes in this pull request}

Validation / Testing

VEDA UI

1. Open E&A and select a few datasets
2. Once they are loaded, refresh the page
3. Verify that the datasets still load without issues, no errors are thrown

Next.js

1. Same as for the VEDA UI above

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	41a3a48
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/673eeb897e78e5000817a99e
😎 Deploy Preview	https://deploy-preview-1266--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dzole0311]

The current approach using setExternalDatasets works, but it might need to be called in multiple places where we depend on the static datasets.

I was wondering if a more scalable solution would be to use our existing EnvConfigProvider and evolve it into a more general ConfigProvider. Like this it would centralize both our env and data configuration in one place.

The provider could be used like this (note the extra datasets prop passed):

<EnvConfigProvider
      config={{
                envMapboxToken: process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? '',
                envApiStacEndpoint: process.env.NEXT_PUBLIC_API_STAC_ENDPOINT ?? '',
                envApiRasterEndpoint: process.env.NEXT_PUBLIC_API_RASTER_ENDPOINT ?? '',
                datasets: static-datasets
      }}
>
              {children}
</EnvConfigProvider>

And internally, the provider would handle dataset hydration:

const setExternalDatasets = useSetAtom(externalDatasetsAtom);
setExternalDatasets(allExploreDatasets);

Like that the setter won't have to be manually called several times if it's needed.