Wire up boundary details page

azavea · Oct 19, 2022 · 9c51cec · 9c51cec
1 parent 76a3344
commit 9c51cec
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 103 deletions.
diff --git a/src/app/src/components/Submissions/ActivityLog.js b/src/app/src/components/Submissions/ActivityLog.js
@@ -1,31 +1,32 @@
 import { Fragment } from 'react';
 import { Text } from '@chakra-ui/react';
 
-export default function ActivityLog({ submissionId }) {
-    const fetchLogEntries = () => {
-        return [
-            [
-                'July 7, 2022 | 3:30 pm',
-                'Jenny Smith has submitted a new map for review',
-            ],
-        ];
-    };
+import { formatDateTime } from '../../utils';
 
-    const logEntries = fetchLogEntries();
-
-    const logEntriesAsTextElements = logEntries.map((entry, index) => {
-        const [timestamp, description] = entry;
-        return (
-            <Fragment key={index}>
-                <Text textStyle='submissionDetailHeading'>{timestamp}</Text>
-                <Text mt={2}>{description}</Text>
-            </Fragment>
-        );
-    });
+export default function ActivityLog({ entries }) {
+    const logEntriesAsTextElements = entries.map(
+        ({ user, action, time }, index) => {
+            return (
+                <Fragment key={index}>
+                    <Text textStyle='submissionDetailHeading'>
+                        {formatDateTime(time)}
+                    </Text>
+                    <Text mb={2}>
+                        {action} by {user}
+                    </Text>
+                </Fragment>
+            );
+        }
+    );
 
     return (
         <>
-            <Text key='heading' mt={7} textStyle='submissionDetailCategory'>
+            <Text
+                key='heading'
+                mt={7}
+                mb={4}
+                textStyle='submissionDetailCategory'
+            >
                 Activity log
             </Text>
             {logEntriesAsTextElements}

diff --git a/src/app/src/components/Submissions/Badges.js b/src/app/src/components/Submissions/Badges.js
@@ -2,22 +2,6 @@ import { Badge } from '@chakra-ui/react';
 
 import { BOUNDARY_STATUS } from '../../constants';
 
-export function SubmittedBadge({ variant = 'solidFixedHeight' }) {
-    return (
-        <Badge bg='teal.400' variant={variant} colorScheme='green'>
-            SUBMITTED
-        </Badge>
-    );
-}
-
-export function DraftBadge({ variant = 'solidFixedHeight' }) {
-    return (
-        <Badge variant={variant} colorScheme='yellow'>
-            DRAFT
-        </Badge>
-    );
-}
-
 const BADGE_COLORS = {
     [BOUNDARY_STATUS.DRAFT]: 'gray',
     [BOUNDARY_STATUS.SUBMITTED]: 'teal',
@@ -26,9 +10,12 @@ const BADGE_COLORS = {
     [BOUNDARY_STATUS.APPROVED]: 'green',
 };
 
-export function StatusBadge({ status }) {
+export function StatusBadge({ status, fixedHeight }) {
     return (
-        <Badge variant='solid' colorScheme={BADGE_COLORS[status]}>
+        <Badge
+            variant={fixedHeight ? 'solidFixedHeight' : 'solid'}
+            colorScheme={BADGE_COLORS[status]}
+        >
             {status.toUpperCase()}
         </Badge>
     );

diff --git a/src/app/src/components/Submissions/Detail/Detail.js b/src/app/src/components/Submissions/Detail/Detail.js
@@ -1,47 +1,50 @@
+import { useEffect } from 'react';
+
 import {
     Box,
     Flex,
     Heading,
     Icon,
     IconButton,
     StackDivider,
+    useToast,
     VStack,
 } from '@chakra-ui/react';
 import { ArrowLeftIcon } from '@heroicons/react/outline';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useGetBoundaryDetailsQuery } from '../../../api/boundaries';
+import CenteredSpinner from '../../CenteredSpinner';
 
 import ActivityLog from '../ActivityLog';
-import { SubmittedBadge } from '../Badges';
+import { StatusBadge } from '../Badges';
 import Info from './Info';
 import Map from './Map';
 
 export default function SubmissionDetail() {
     const navigate = useNavigate();
-    const params = useParams();
-
-    const submissionId = params.id;
+    const toast = useToast();
+    const { id } = useParams();
 
-    const fetchSubmissionDetails = submissionId => {
-        return {
-            submissionName: 'Raleigh',
-            contactName: 'Jenny Smith',
-            contactPhone: '1-919-123-4567',
-            contactTitle: 'Water System Operator',
-            pwsId: '0392010',
-            utilityName: 'Raleigh City Of',
-            utilityAddress1: 'Division of Water Resources',
-            utilityAddress2: '1634 Mail Service Center',
-            utilityCity: 'Raleigh',
-            utilityState: 'NC',
-            utilityZip: '27699-1634',
-            sharingPreference: true,
-            status: 'submitted',
-        };
-    };
+    const { data: details, isFetching, error } = useGetBoundaryDetailsQuery(id);
+    // TODO: use useEndpointToastError
+    useEffect(() => {
+        if (error) {
+            toast({
+                title: 'There was an error fetching boundary details.',
+                status: 'error',
+                isClosable: true,
+                duration: 5000,
+            });
+        }
+    }, [error, toast]);
 
-    const submission = fetchSubmissionDetails(submissionId);
+    if (isFetching) {
+        return <CenteredSpinner />;
+    }
 
-    const { submissionName } = submission;
+    if (!details) {
+        return null;
+    }
 
     return (
         <VStack
@@ -53,19 +56,22 @@ export default function SubmissionDetail() {
         >
             <Flex mb={7}>
                 <Flex direction='column' w='50%'>
-                    <Flex>
+                    <Flex alignItems='center'>
                         <IconButton
                             icon={<Icon as={ArrowLeftIcon} />}
                             aria-label='Back'
                             mr={6}
                             onClick={() => navigate('/submissions')}
                         />
                         <Heading size='lg' mr={6}>
-                            {submissionName}
+                            {details.name}
                         </Heading>
-                        <SubmittedBadge variant='submissionDetail' />
+                        <StatusBadge status={details.status} fixedHeight />
                     </Flex>
-                    <Info submission={submission} />
+                    <Info
+                        primaryContact={details.submission.primary_contact}
+                        utility={details.utility}
+                    />
                 </Flex>
                 <Box
                     w='50%'
@@ -74,11 +80,15 @@ export default function SubmissionDetail() {
                     borderColor='gray.200'
                     borderRadius={6}
                 >
-                    <Map submission={submission} />
+                    <Map
+                        id={id}
+                        status={details.status}
+                        submission={details.submission}
+                    />
                 </Box>
             </Flex>
             <Box>
-                <ActivityLog submissionId={submissionId} />
+                <ActivityLog entries={details.activity_log} />
             </Box>
         </VStack>
     );

diff --git a/src/app/src/components/Submissions/Detail/Info.js b/src/app/src/components/Submissions/Detail/Info.js
@@ -1,49 +1,36 @@
 import { Text } from '@chakra-ui/react';
 import DataGrid from './DataGrid';
 
-export default function Info({ submission }) {
-    const {
-        contactName,
-        contactPhone,
-        contactTitle,
-        pwsId,
-        utilityName,
-        utilityAddress1,
-        utilityAddress2,
-        utilityCity,
-        utilityState,
-        utilityZip,
-    } = submission;
-
-    const cityStateZip = `${utilityCity}, ${utilityState} ${utilityZip}`;
-
+export default function Info({ utility, primaryContact }) {
     return (
         <>
             <DataGrid
                 initialMarginTop={7}
                 title='Primary contact'
                 data={{
-                    'Full name': contactName,
-                    'Phone number': contactPhone,
-                    'Job title': contactTitle,
+                    'Full name': primaryContact.full_name,
+                    'Phone number': primaryContact.phone_number,
+                    'Job title': primaryContact.job_title,
                 }}
             />
+
             <DataGrid
                 initialMarginTop={10}
                 title='Water system information'
                 data={{
-                    PWSID: pwsId,
-                    'Water system name': utilityName,
+                    PWSID: utility.pwsid,
+                    'Water system name': utility.name,
                     'Mailing address': (
                         <>
                             <Text mt={1} textStyle='detail'>
-                                {utilityAddress1}
+                                {utility.address_line_1}
                             </Text>
                             <Text mt={1} textStyle='detail'>
-                                {utilityAddress2}
+                                {utility.address_line_2}
                             </Text>
                             <Text mt={1} textStyle='detail'>
-                                {cityStateZip}
+                                {utility.address_city}, {utility.state}{' '}
+                                {utility.address_zip_code}
                             </Text>
                         </>
                     ),