Move boundary details query inside <Map>

When the query was outside of the <Map> component, it would cause
re-render of the map each time the query data was updated.

src/app/src/components/DrawTools/DrawTools.js

@@ -1,20 +1,51 @@
 import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { Button, Icon } from '@chakra-ui/react';
 import { ArrowRightIcon } from '@heroicons/react/outline';
 
 import EditToolbar from './EditToolbar';
 import MapControlButtons from './MapControlButtons';
 
+import { useGetBoundaryDetailsQuery } from '../../api/boundaries';
+import { useBoundaryId, useEndpointToastError } from '../../hooks';
+
 import useAddPolygonCursor from './useAddPolygonCursor';
 import useEditingPolygon from './useEditingPolygon';
 import useGeocoderResult from './useGeocoderResult';
 import useTrackMapZoom from './useTrackMapZoom';
 
 import { setPolygon } from '../../store/mapSlice';
+import { BOUNDARY_STATUS, ROLES } from '../../constants';
+import LoadingModal from '../LoadingModal';
+
+const DRAW_MODES = {
+    FULLY_EDITABLE: 'fully_editable',
+    ANNOTATIONS_ONLY: 'annotations_only',
+    READ_ONLY: 'read_only',
+};
+
+export default function LoadBoundaryDetails() {
+    const user = useSelector(state => state.auth.user);
+    const id = useBoundaryId();
+
+    const { isFetching, data: details, error } = useGetBoundaryDetailsQuery(id);
+    useEndpointToastError(error);
+
+    if (isFetching) {
+        return <LoadingModal isOpen title='Loading boundary data...' />;
+    }
+
+    if (error || typeof details !== 'object') {
+        return null;
+    }
+
+    const mode = getDrawMode({ status: details.status, userRole: user.role });
 
-export default function DrawTools({ details }) {
+    return <DrawTools mode={mode} details={details} />;
+}
+
+function DrawTools({ mode, details }) {
     const dispatch = useDispatch();
 
     // Add the polygon indicated by `details` to the state
@@ -45,6 +76,18 @@ export default function DrawTools({ details }) {
     );
 }
 
+function getDrawMode({ status, userRole }) {
+    if (userRole === ROLES.VALIDATOR && status === BOUNDARY_STATUS.IN_REVIEW) {
+        return DRAW_MODES.ANNOTATIONS_ONLY;
+    }
+
+    if (status === BOUNDARY_STATUS.DRAFT && userRole === ROLES.CONTRIBUTOR) {
+        return DRAW_MODES.FULLY_EDITABLE;
+    }
+
+    return DRAW_MODES.READ_ONLY;
+}
+
 function SaveAndBackButton() {
     return (
         <Button

src/app/src/pages/Draw.js

@@ -1,65 +1,18 @@
-import { useSelector } from 'react-redux';
-import { Box, Flex, Spinner } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 
-import NotFound from './NotFound';
 import DrawTools from '../components/DrawTools';
 import Layers from '../components/Layers';
 import Map from '../components/Map';
 import Sidebar from '../components/Sidebar';
 
-import { useGetBoundaryDetailsQuery } from '../api/boundaries';
-import { BOUNDARY_STATUS, ROLES } from '../constants';
-import { useBoundaryId } from '../hooks';
-
-const DRAW_MODES = {
-    FULLY_EDITABLE: 'fully_editable',
-    ANNOTATIONS_ONLY: 'annotations_only',
-    READ_ONLY: 'read_only',
-};
-
 export default function Draw() {
-    const user = useSelector(state => state.auth.user);
-    const id = useBoundaryId();
-
-    const { isFetching, data: details, error } = useGetBoundaryDetailsQuery(id);
-
-    if (isFetching) {
-        return (
-            <Box w='100%' h='100vh'>
-                <Flex direction='column' alignItems='center'>
-                    <Spinner mt={60} />
-                </Flex>
-            </Box>
-        );
-    }
-
-    if (error || typeof details !== 'object') {
-        return <NotFound />;
-    }
-
-    let mode = DRAW_MODES.READ_ONLY;
-
-    if (
-        [BOUNDARY_STATUS.SUBMITTED, BOUNDARY_STATUS.IN_REVIEW].includes(
-            details.status
-        ) &&
-        user.role === ROLES.VALIDATOR
-    ) {
-        mode = DRAW_MODES.ANNOTATIONS_ONLY;
-    } else if (
-        details.status === BOUNDARY_STATUS.DRAFT &&
-        user.role === ROLES.CONTRIBUTOR
-    ) {
-        mode = DRAW_MODES.FULLY_EDITABLE;
-    }
-
     return (
         <Flex>
             <Sidebar />
             <Box flex={1} position='relative'>
                 <Map>
-                    <Layers mode={mode} />
-                    <DrawTools mode={mode} details={details} />
+                    <Layers />
+                    <DrawTools />
                 </Map>
             </Box>
         </Flex>