Custom Widget - Update datasource of map widget with jimuMapView

[BrittaneyHarkness]

Hi,

I'm trying to modify the web-map-swap custom widget created by @GavinR : GitHub - gavinr/web-map-swap-experience-builder: Sample widget experimenting how to swap the webmap ... to accept a web map datasource rather than an item portal id. 

I've updated the settings for the widget to accept mutiple web maps and datasources and I would like the user to be able to choose those datasources from a drop down to update the map widget. 

/** @jsx jsx */
import { AllWidgetProps, React, jsx } from 'jimu-core'
import { IMConfig } from '../config'

import defaultMessages from './translations/default'
import { MapViewManager, JimuMapViewComponent, JimuMapView } from 'jimu-arcgis'
import WebMap from 'esri/WebMap'
import MapView from "esri/views/MapView";
import { WidgetPlaceholder } from 'jimu-ui'
import { _SettingRow } from 'jimu-ui/advanced/lib/setting-components/components/layout/row'
const starIcon = require('jimu-ui/lib/icons/star.svg')
const { useState } = React

export default function Widget (props: AllWidgetProps<IMConfig>) {
  const [jimuMapView, setJimuMapView] = useState<JimuMapView>()
  const mvManager: MapViewManager = MapViewManager.getInstance();


  const selectChangeHandler = (evt) => {
    if (jimuMapView) {
      if (evt.target.value !== '') {
        console.log("This is the starting jimMapView")
        console.log(jimuMapView)

        console.log("This is the starting jimMapView")
        // const options:  __esri.MapViewProperties = {
        //   map: new WebMap(),
        // };
        // jimuMapView.view.map = mvManager.createJimuMapView({
        //   mapWidgetId: props.useMapWidgetIds?.[0],
        //   view: new MapView(options),
        //   dataSourceId: evt.target.value,
        //   isActive: true
        // }).then(jv => {
        //   //setJimuMapView(jv)
        //   return jv.view.map
        // })
        console.log(jimuMapView)
        //try set map view
        jimuMapView.view.map = new WebMap({
          // portalItem: {
          //   // autocasts as new PortalItem()
          //   id: evt.target.value
          // }
        })
      } else {
        // set to default (todo)
      }
    }
  }
  let content
  if (props.useDataSources &&
    props.useDataSources.length > 0) {
    content = <p className="shadow-lg m-3 p-3 bg-white rounded">
      <label style={{ maxWidth: '100%' }}>
        {defaultMessages.webMap}:<br />
        <select
          onChange={(evt) => {
            selectChangeHandler(evt)
          }}
          style={{ maxWidth: '100%' }}
        >
          {/* <option value=""></option>
          {props.config.webMapIds.map((webMapId) => {
            return <option value={webMapId}>{webMapId}</option> */}
            <option selected disabled>
            Choose one
          </option>
          {props.useDataSources.map((datasource, index) => {
            return <option value={datasource.dataSourceId}>{datasource.dataSourceId}</option>
          })}
        </select>
      </label>
      <JimuMapViewComponent
        useMapWidgetId={props.useMapWidgetIds?.[0]}
        onActiveViewChange={(jmv: JimuMapView) => {
          setJimuMapView(jmv)
        }}
      />
    </p>
  } else {
    content = <WidgetPlaceholder icon={starIcon} widgetId={props.id} message={defaultMessages.placeholderMessage} />
  }
  return (
    <div
      className="widget-view-layers-toggle jimu-widget"
      style={{ overflow: 'auto' }}
    >
      {content}
    </div>
  )
}