fix: update location details screen (#1212)

* fix: round GPS accuracy to whole numbers * fix: remove + button from location dashboard app bar * fix: site dashboard improvements - remove divider - remove accordion - remove last modified - remove accuracy placeholder - add "create site here" button * fix: change ""more info" to "learn more" * fix: remove last updated strings * fix: add create site button label and description * fix: improve button label name * fix: add people badge to project * fix: use pushpin icon * fix: remove unused code * fix: fix create site here button alignment * fix: use member count on people badge * fix: shrink note button to closer match badge * fix: remove "learn more" from tooltip * fix: correct color for note button * refactor: use PeopleBadge component
techmatters · May 2, 2024 · 3de2dd0 · 3de2dd0
1 parent c47a0e0
commit 3de2dd0
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 123 deletions.
diff --git a/dev-client/src/components/PeopleBadge.tsx b/dev-client/src/components/PeopleBadge.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright © 2024 Technology Matters
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import {Badge} from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {Icon} from 'terraso-mobile-client/components/icons/Icon';
+
+type Props = {
+  count: number;
+};
+
+export const PeopleBadge = ({count}: Props) => {
+  return (
+    <Badge variant="chip" startIcon={<Icon name="people-alt" />}>
+      {count}
+    </Badge>
+  );
+};
diff --git a/dev-client/src/components/SiteCard.tsx b/dev-client/src/components/SiteCard.tsx
@@ -21,7 +21,6 @@ import {Site} from 'terraso-client-shared/site/siteSlice';
 import {useSelector} from 'terraso-mobile-client/store';
 import {useTranslation} from 'react-i18next';
 import {StyleSheet} from 'react-native';
-import {Icon} from 'terraso-mobile-client/components/icons/Icon';
 import {IconButton} from 'terraso-mobile-client/components/icons/IconButton';
 import {StaticMapView} from 'terraso-mobile-client/components/StaticMapView';
 import {Card} from 'terraso-mobile-client/components/Card';
@@ -30,8 +29,8 @@ import {
   Row,
   Heading,
   Text,
-  Badge,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {PeopleBadge} from 'terraso-mobile-client/components/PeopleBadge';
 
 const TEMP_MODIFIED_DATE = '8/15/23';
 const TEMP_MODIFIED_NAME = 'Sample Sam';
@@ -83,9 +82,9 @@ export const SiteCard = ({
       <Row alignItems="center">
         <StaticMapView coords={site} style={styles.mapView} />
         <Box w="4" />
-        <Badge variant="chip" startIcon={<Icon name="people" />}>
-          1
-        </Badge>
+        {project && (
+          <PeopleBadge count={Object.keys(project.memberships).length} />
+        )}
         <Box flexGrow={1} />
         {onShowSiteOnMap && (
           <IconButton

diff --git a/dev-client/src/screens/CreateSiteScreen/components/CreateSiteForm.tsx b/dev-client/src/screens/CreateSiteScreen/components/CreateSiteForm.tsx
@@ -96,7 +96,7 @@ export const CreateSiteForm = ({
             <FormLabel>{t('site.create.location_label')}</FormLabel>
             <Text>
               {t('site.create.location_accuracy', {
-                accuracyM: accuracyM?.toFixed(5),
+                accuracyM: accuracyM?.toFixed(0),
               })}
             </Text>
             <FormInput keyboardType="decimal-pad" />

diff --git a/dev-client/src/screens/LocationDashboardScreen.tsx b/dev-client/src/screens/LocationDashboardScreen.tsx
@@ -51,18 +51,9 @@ export const LocationDashboardScreen = ({siteId, coords}: Props) => {
   );
 
   const appBarRightButton = useMemo(() => {
-    // display add button if no site associated with location
-    if (!siteId) {
-      return (
-        <AppBarIconButton
-          name="add"
-          onPress={() => navigation.navigate('CREATE_SITE', {coords})}
-        />
-      );
-    }
-
-    // display nothing if user does not own the site / is not manager
-    if (userRole === null || !isSiteManager(userRole)) {
+    // display nothing if no site associated with location or
+    // user does not own the site / is not manager
+    if (!siteId || userRole === null || !isSiteManager(userRole)) {
       return undefined;
     }
 
@@ -73,7 +64,7 @@ export const LocationDashboardScreen = ({siteId, coords}: Props) => {
         onPress={() => navigation.navigate('SITE_SETTINGS', {siteId})}
       />
     );
-  }, [siteId, coords, navigation, userRole]);
+  }, [siteId, navigation, userRole]);
 
   const onInfoPress = useCallback(
     () => infoModalRef.current?.present(),

diff --git a/dev-client/src/screens/ProjectListScreen/components/ProjectPreviewCard.tsx b/dev-client/src/screens/ProjectListScreen/components/ProjectPreviewCard.tsx
@@ -27,6 +27,7 @@ import {
   Heading,
   Text,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {PeopleBadge} from 'terraso-mobile-client/components/PeopleBadge';
 
 type Props = {
   project: Project;
@@ -63,9 +64,7 @@ export const ProjectPreviewCard = ({project}: Props) => {
         <Badge variant="chip" startIcon={<Icon name="location-on" />}>
           {Object.keys(project.sites).length}
         </Badge>
-        <Badge variant="chip" startIcon={<Icon name="people-alt" />}>
-          {Object.keys(project.memberships).length}
-        </Badge>
+        <PeopleBadge count={Object.keys(project.memberships).length} />
       </HStack>
     </Card>
   );

diff --git a/dev-client/src/screens/SiteScreen/SiteScreen.tsx b/dev-client/src/screens/SiteScreen/SiteScreen.tsx
@@ -18,12 +18,12 @@
 import {useCallback} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {useTranslation} from 'react-i18next';
-import {Button, Divider} from 'native-base';
+import {Button} from 'native-base';
 
+import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
 import {SitePrivacy, updateSite} from 'terraso-client-shared/site/siteSlice';
 import {useDispatch, useSelector} from 'terraso-mobile-client/store';
 import {RadioBlock} from 'terraso-mobile-client/components/RadioBlock';
-import {Accordion} from 'terraso-mobile-client/components/Accordion';
 import {StaticMapView} from 'terraso-mobile-client/components/StaticMapView';
 import {Coords} from 'terraso-mobile-client/model/map/mapSlice';
 import {ProjectInstructionsButton} from 'terraso-mobile-client/screens/SiteScreen/components/ProjectInstructionsButton';
@@ -40,12 +40,9 @@ import {
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
 
 import StackedBarChart from 'terraso-mobile-client/assets/stacked-bar.svg';
+import {PeopleBadge} from 'terraso-mobile-client/components/PeopleBadge';
 
 const TEMP_ELEVATION = '1900 ft';
-const TEMP_ACCURACY = '20 ft';
-const TEMP_MODIFIED_DATE = '8/15/23';
-const TEMP_MODIFIED_NAME = 'Sample Sam';
-const TEMP_NOT_FOUND = 'not found';
 const TEMP_SOIL_ID_VALUE = 'Clifton';
 const TEMP_ECO_SITE_PREDICTION = 'Loamy Upland';
 
@@ -55,7 +52,7 @@ type Props = {
 };
 
 const LocationDetail = ({label, value}: {label: string; value: string}) => (
-  <Text variant="body1">
+  <Text variant="body1" mb={1}>
     <Text bold>{label}: </Text>
     <Text>{value}</Text>
   </Text>
@@ -110,6 +107,11 @@ export const SiteScreen = ({siteId, coords}: Props) => {
   const {t} = useTranslation();
   const dispatch = useDispatch();
   const onInfoPress = useInfoPress();
+  const navigation = useNavigation();
+
+  const onCreate = useCallback(() => {
+    navigation.navigate('CREATE_SITE', {coords});
+  }, [navigation, coords]);
 
   const site = useSelector(state =>
     siteId === undefined ? undefined : state.site.sites[siteId],
@@ -135,92 +137,82 @@ export const SiteScreen = ({siteId, coords}: Props) => {
         style={styles.mapView}
         displayCenterMarker={true}
       />
-      <Accordion
-        initiallyOpen
-        Head={
-          <Text variant="body1" color="primary.contrast">
-            {t('general.details')}
-          </Text>
-        }>
-        <Box px="16px" py="8px">
-          {project && (
-            <LocationDetail label={t('projects.label')} value={project.name} />
-          )}
-          {project && (
-            <LocationDetail
-              label={t('site.dashboard.privacy')}
-              value={t(`privacy.${project.privacy.toLowerCase()}.title`)}
-            />
-          )}
-          {site && !project && (
-            <HStack>
-              <RadioBlock
-                label={
-                  <HStack>
-                    <Text variant="body1" bold>
-                      {t('site.dashboard.privacy')}
-                    </Text>
-                    <IconButton
-                      pt={0}
-                      pb={0}
-                      pl={2}
-                      size="md"
-                      name="info"
-                      onPress={onInfoPress}
-                      _icon={{color: 'primary'}}
-                    />
-                  </HStack>
-                }
-                options={{
-                  PUBLIC: {text: t('privacy.public.title')},
-                  PRIVATE: {text: t('privacy.private.title')},
-                }}
-                groupProps={{
-                  name: 'site-privacy',
-                  onChange: onSitePrivacyChanged,
-                  value: site.privacy,
-                  ml: '0',
-                }}
-              />
-            </HStack>
-          )}
-          <LocationDetail
-            label={t('geo.latitude.title')}
-            value={coords?.latitude.toFixed(6)}
-          />
-          <LocationDetail
-            label={t('geo.longitude.title')}
-            value={coords?.longitude.toFixed(6)}
-          />
+      <Box px="16px" py="16px">
+        <LocationDetail
+          label={t('geo.latitude.title')}
+          value={coords?.latitude.toFixed(6)}
+        />
+        <LocationDetail
+          label={t('geo.longitude.title')}
+          value={coords?.longitude.toFixed(6)}
+        />
+        <LocationDetail
+          label={t('geo.elevation.title')}
+          value={TEMP_ELEVATION}
+        />
+        {!site && (
+          <Box mt={5}>
+            <Button
+              alignSelf="center"
+              onPress={onCreate}
+              leftIcon={<Icon name="add" />}>
+              {t('site.create.button_label').toUpperCase()}
+            </Button>
+            <Text variant="body1" mt={5}>
+              {t('site.create.description')}
+            </Text>
+          </Box>
+        )}
+        {project && (
+          <LocationDetail label={t('projects.label')} value={project.name} />
+        )}
+        {project && (
           <LocationDetail
-            label={t('geo.elevation.title')}
-            value={TEMP_ELEVATION}
+            label={t('site.dashboard.privacy')}
+            value={t(`privacy.${project.privacy.toLowerCase()}.title`)}
           />
-          {site && (
-            <>
-              <LocationDetail
-                label={t('site.dashboard.location_accuracy')}
-                value={TEMP_ACCURACY}
-              />
-              <LocationDetail
-                label={t('soil.bedrock')}
-                value={TEMP_NOT_FOUND}
-              />
-              <LocationDetail
-                label={t('site.dashboard.last_modified.label')}
-                value={t('site.dashboard.last_modified.value', {
-                  date: TEMP_MODIFIED_DATE,
-                  name: TEMP_MODIFIED_NAME,
-                })}
-              />
-            </>
-          )}
-          {project?.siteInstructions && (
-            <ProjectInstructionsButton project={project} />
-          )}
-        </Box>
-      </Accordion>
-      <Divider />
+        )}
+        {site && !project && (
+          <HStack>
+            <RadioBlock
+              label={
+                <HStack>
+                  <Text variant="body1" bold>
+                    {t('site.dashboard.privacy')}
+                  </Text>
+                  <IconButton
+                    pt={0}
+                    pb={0}
+                    pl={2}
+                    size="md"
+                    name="info"
+                    onPress={onInfoPress}
+                    _icon={{color: 'primary'}}
+                  />
+                </HStack>
+              }
+              options={{
+                PUBLIC: {text: t('privacy.public.title')},
+                PRIVATE: {text: t('privacy.private.title')},
+              }}
+              groupProps={{
+                name: 'site-privacy',
+                onChange: onSitePrivacyChanged,
+                value: site.privacy,
+                ml: '0',
+              }}
+            />
+          </HStack>
+        )}
+        {project && (
+          <HStack space={4} alignItems="baseline">
+            <PeopleBadge count={Object.keys(project.memberships).length} />
+            {project?.siteInstructions && (
+              <ProjectInstructionsButton project={project} />
+            )}
+          </HStack>
+        )}
+      </Box>
       <Column space="20px" padding="16px">
         <LocationPrediction
           label={t('soil.soil_id').toUpperCase()}

diff --git a/dev-client/src/screens/SiteScreen/components/ProjectInstructionsButton.tsx b/dev-client/src/screens/SiteScreen/components/ProjectInstructionsButton.tsx
@@ -49,12 +49,12 @@ export const ProjectInstructionsButton = ({project}: Props) => {
         mt={2}
         pl={4}
         pr={4}
-        size="lg"
-        backgroundColor="primary.dark"
+        size="md"
+        backgroundColor="primary.main"
         shadow={5}
         onPress={onShowNote()}>
         <HStack>
-          <Icon color="primary.contrast" size={'sm'} mr={2} name={'place'} />
+          <Icon color="primary.contrast" size={'sm'} mr={2} name={'push-pin'} />
           <Text color="primary.contrast" textTransform={'uppercase'}>
             {t('projects.inputs.instructions.add_label')}
           </Text>

diff --git a/dev-client/src/screens/SiteSettingsScreen/SiteSettingsScreen.tsx b/dev-client/src/screens/SiteSettingsScreen/SiteSettingsScreen.tsx
@@ -84,7 +84,7 @@ export const SiteSettingsScreen = ({siteId}: Props) => {
             size="container"
             alignItems="center"
             justifyContent="space-around">
-            <Icon name="people" />
+            <Icon name="people-alt" />
             <Spacer flexGrow={0} w="16px" />
             <Text>{t('site.dashboard.team_button')}</Text>
             <Spacer />