Accession map using ApiCall<>

src/accessions/ui/MapPage.tsx

@@ -30,6 +30,7 @@ import LayersIcon from '@material-ui/icons/Layers';
 import ClimateIcon from '@material-ui/icons/WbSunny';
 import FilterIcon from '@material-ui/icons/PermDataSetting';
 import CancelIcon from '@material-ui/icons/Cancel';
+import ApiCall from 'model/ApiCall';
 
 
 let MapComponent;
@@ -45,7 +46,7 @@ interface IMapPageProps {
     t?: any;
 
     apiUrl: string;
-    mapInfo: AccessionMapInfo;
+    mapInfo: ApiCall<AccessionMapInfo>;
     suggestions: any;
     currentTab: string;
     filterCode: string;
@@ -178,7 +179,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
     public componentWillMount() {
       const { mapInfo, filterCode, loadAccessionsMapInfo, initialPosition, initialZoom } = this.props;
       // console.log(`Filter code for map ${filterCode} ?== ${mapInfo && mapInfo.filterCode}`, filterCode, mapInfo ? mapInfo.filterCode : 'No mapInfo');
-      if (mapInfo && mapInfo.filterCode !== filterCode) {
+      if (mapInfo && !mapInfo.loading && mapInfo.data.filterCode !== filterCode) {
         // console.log(`mapInfo.filterCode !== filterCode. updatingRoute`);
         loadAccessionsMapInfo(filterCode || '', {center: initialPosition, zoom: initialZoom});
       } else if (!mapInfo) {
@@ -269,7 +270,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
                 return;
             }
 
-            const {mapInfo: {filter}, geoJsonRequest} = this.props;
+            const {mapInfo: { data: { filter } }, geoJsonRequest} = this.props;
 
             const correctLng = Math.abs(e.latlng.lng) > 180 ? (360 + e.latlng.lng) % 180 : e.latlng.lng;
 
@@ -317,18 +318,20 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
           [50, -50],
         ];
 
-        if (! mapInfo) {
+        if (! mapInfo || mapInfo.loading) {
           return <Loading />;
+        } else if (mapInfo.error) {
+          return <div>{ mapInfo.error }</div>;
         }
 
-        if (mapInfo.bounds[0][0] !== null && mapInfo.bounds[1][0] !== null) {
-          if (Math.abs(mapInfo.bounds[0][0] - mapInfo.bounds[1][0]) < Math.abs(initialBounds[0][0] - initialBounds[1][0])) {
-            initialBounds[0][0] = mapInfo.bounds[0][0];
-            initialBounds[1][0] = mapInfo.bounds[1][0];
+        if (mapInfo.data.bounds[0][0] !== null && mapInfo.data.bounds[1][0] !== null) {
+          if (Math.abs(mapInfo.data.bounds[0][0] - mapInfo.data.bounds[1][0]) < Math.abs(initialBounds[0][0] - initialBounds[1][0])) {
+            initialBounds[0][0] = mapInfo.data.bounds[0][0];
+            initialBounds[1][0] = mapInfo.data.bounds[1][0];
           }
-          if (Math.abs(mapInfo.bounds[0][1] - mapInfo.bounds[1][1]) < Math.abs(initialBounds[0][1] - initialBounds[1][1])) {
-            initialBounds[0][1] = mapInfo.bounds[0][1];
-            initialBounds[1][1] = mapInfo.bounds[1][1];
+          if (Math.abs(mapInfo.data.bounds[0][1] - mapInfo.data.bounds[1][1]) < Math.abs(initialBounds[0][1] - initialBounds[1][1])) {
+            initialBounds[0][1] = mapInfo.data.bounds[0][1];
+            initialBounds[1][1] = mapInfo.data.bounds[1][1];
           }
         }
 
@@ -342,7 +345,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
             });
         }
 
-        console.log(suggestionTerms);
+        // console.log(suggestionTerms);
 
         // const color = 'f00ba0';
         const layerUrl = `{s}/acn/tile/{z}/{x}/{y}?f=${filterCode ? filterCode : ''}`; // `&color=${color}`;
@@ -353,7 +356,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
               <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
 
               <Drawer variant="temporary" open={ sidebarOpened } onClose={ this.closeSidebar }>
-                    <AccessionsFilters terms={ suggestionTerms } onSubmit={ loadAccessionsMapInfo } initialValues={ mapInfo && mapInfo.filter }/>
+                    <AccessionsFilters terms={ suggestionTerms } onSubmit={ loadAccessionsMapInfo } initialValues={ mapInfo.data.filter }/>
                 </Drawer>
 
 
@@ -380,10 +383,10 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
                 </Tabs>
                 <PrettyFilters
                     prefix="accessions"
-                    filterObj={ mapInfo && mapInfo.filter || {} }
+                    filterObj={ mapInfo.data.filter || {} }
                     onSubmit={ this.myApplyFilters }
                     displayName="accessions.common.modelName"
-                    amount={ mapInfo && mapInfo.accessionCount }
+                    amount={ mapInfo.data.accessionCount }
                 />
                 <div className={ `${classes.leafletContainer} ${trackClickPos && classes.crosshair}` }>
                   { loading && <Loading /> }
@@ -394,7 +397,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
                         center={ position }
                         zoom={ initialZoom || 3 } minZoom={ 2 } maxZoom={ 14 }
                         zoomDelta={ 0.5 }
-                        bounds={ !initialZoom && initialPosition[0] && !initialPosition[1] ? mapInfo.bounds : initialBounds }
+                        bounds={ !initialZoom && initialPosition[0] && !initialPosition[1] ? mapInfo.data.bounds : initialBounds }
                         ref={ (ref) => this.mapRef = ref }
                     >
                         <Control position="topleft">
@@ -469,7 +472,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
                             updateWhenZooming={ false }
                             attribution="&amp;copy Accession localities from <a href=&quot;/&quot;>Genesys PGR</a>"
                             url={ layerUrl }
-                            subdomains={ mapInfo.tileServers }
+                            subdomains={ mapInfo.data.tileServers }
                         />
                         { geoData && geoData.length > 0 &&
                             <Rectangle
@@ -494,8 +497,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
 
 const mapStateToProps = (state, ownProps) => ({
     suggestions: state.accessions.public.suggestions,
-    mapInfo: state.accessions.public.mapInfo ? state.accessions.public.mapInfo.data : undefined,
-    loading: state.accessions.public.mapInfo ? state.accessions.public.mapInfo.loading : false,
+    mapInfo: state.accessions.public.mapInfo,
     mapLayers: state.accessions.public.mapLayers,
     filterCode: ownProps.match.params.filterCode || (state.accessions.public.mapInfo ? state.accessions.public.mapInfo.data && state.accessions.public.mapInfo.data.filterCode : ''),
     currentTab: ownProps.match.params.tab || 'map', // current tab, or ownProps.location.pathname