Thoughts on multi-project setup for this application

[alukach]

At time of writing, the react-arcgis app is a view for a single project, referenced by a hardcoded portalId:

react-arcgis/src/App.tsx

Lines 21 to 23 in 7ae0372

	<WebMapContainer
	portalId="459eb07ed2544fd4b655b87dca7abf8c"
	/>

However, it would not be too difficult for us to adapt this codebase to support viewing any project permitted by a user's permissions.

set PortalId via Route

I think the simplest solution would be for us to set the portalId via the user's Route. The react-router has a good example of this. I think our code would look something like this:

import * as React from 'react';
import { Navbar } from 'reactstrap';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import { Footer } from './components/Footer';
import { WebMapContainer } from './containers/WebMapContainer';

import './App.css';

class App extends React.Component<object, object> {

  render() {
    return (
      <div className="container-fluid h-100 d-flex flex-column">
        <div className="row">
        // ...
        </div>
        <div className="row h-100">
          <Router>
            <Route path="/p/:portalId" component={WebMapContainer} /> // I put `/p`, but we could prepend it with anything
          </Router>
        </div>
        // ...
      </div>
    );
  }
}

export default App;

And then the WebMapContainer will get the portalId from the match prop:

export class WebMapContainer extends React.Component<WebMapComponentProps, WebMapComponentState> {
  // ...
  render() {
    return (
      <WebMapView
        portalId={this.props.match.params.portalId}
        // ...
      />
    );
  }
}

This way, you could route to any portalId and let the user's permissions control whether or not they can actually load the project (aka FeatureLayer). The home route should probably be a list of all projects associated to the logged-in user (possible made available via the queryItems() method).