feat: Site Transfer

dev-client/package.json

@@ -14,13 +14,15 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.5.1",
+    "@react-native-community/checkbox": "^0.5.16",
     "@react-native/metro-config": "^0.74.0",
     "@react-navigation/material-top-tabs": "^6.6.5",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "@rnmapbox/maps": "^10.0.12",
     "formik": "^2.4.3",
     "i18next": "^23.4.2",
+    "lodash": "^4.17.21",
     "native-base": "^3.4.28",
     "react": "18.2.0",
     "react-i18next": "^13.3.0",
@@ -39,7 +41,7 @@
     "react-native-svg": "^13.13.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-vector-icons": "^10.0.0",
-    "terraso-client-shared": "github:techmatters/terraso-client-shared#67a5d10",
+    "terraso-client-shared": "github:techmatters/terraso-client-shared#2bbb0d0",
     "uuid": "^9.0.1",
     "yup": "^1.3.2"
   },

dev-client/src/components/common/Accordion.tsx

@@ -6,9 +6,15 @@ type Props = {
   Head: ReactNode;
   children: ReactNode;
   initiallyOpen?: boolean;
+  disableOpen?: boolean;
 };
 
-export function Accordion({Head, children, initiallyOpen = false}: Props) {
+export function Accordion({
+  Head,
+  children,
+  initiallyOpen = false,
+  disableOpen = false,
+}: Props) {
   const [open, setOpen] = useState(initiallyOpen);
   const onPress = useCallback(() => {
     setOpen(!open);
@@ -23,11 +29,13 @@ export function Accordion({Head, children, initiallyOpen = false}: Props) {
         justifyContent="space-between"
         px="16px">
         {Head}
-        <IconButton
-          name={name}
-          onPress={onPress}
-          _icon={{color: 'primary.contrast'}}
-        />
+        {!disableOpen && (
+          <IconButton
+            name={name}
+            onPress={onPress}
+            _icon={{color: 'primary.contrast'}}
+          />
+        )}
       </HStack>
       {open && children}
     </Box>

dev-client/src/components/common/CheckboxGroup.tsx

@@ -0,0 +1,67 @@
+import {Box, FormControl, HStack, VStack} from 'native-base';
+import {useCallback, useMemo} from 'react';
+import {useTranslation} from 'react-i18next';
+import CheckBox from '@react-native-community/checkbox';
+
+type CheckboxProps = {
+  label: string;
+  id: string;
+  checked: boolean;
+};
+
+type Props = {
+  checkboxes: CheckboxProps[];
+  groupName: string;
+  groupId: string | symbol;
+  onChangeValue: (
+    groupId: string | symbol,
+    checkboxId: string,
+  ) => (checked: boolean) => void;
+};
+
+const CheckboxGroup = ({
+  checkboxes,
+  groupName,
+  groupId,
+  onChangeValue,
+}: Props) => {
+  const {t} = useTranslation();
+  const selectAllChecked = useMemo(() => {
+    return checkboxes.every(({checked}) => checked);
+  }, [checkboxes]);
+  const onSelectAll = useCallback(() => {
+    checkboxes.forEach(({id: checkboxId}) =>
+      onChangeValue(groupId, checkboxId)(!selectAllChecked),
+    );
+  }, [checkboxes, selectAllChecked, onChangeValue, groupId]);
+  return (
+    <Box>
+      <HStack>
+        <CheckBox
+          id={'select-all-' + groupName}
+          onValueChange={onSelectAll}
+          value={selectAllChecked}
+        />
+        <FormControl.Label htmlFor={'select-all-' + groupName} variant="body1">
+          {t('general.select_all')}
+        </FormControl.Label>
+      </HStack>
+      <VStack px="20px">
+        {checkboxes.map(({label, id, checked}) => (
+          <HStack key={id}>
+            <CheckBox
+              id={'checkbox-' + id}
+              onValueChange={onChangeValue(groupId, id)}
+              value={checked}
+            />
+            <FormControl.Label htmlFor={'checkbox-' + id} variant="body1">
+              {label}
+            </FormControl.Label>
+          </HStack>
+        ))}
+      </VStack>
+    </Box>
+  );
+};
+
+export default CheckboxGroup;

dev-client/src/screens/AppScaffold.tsx

@@ -15,7 +15,7 @@ import {ProjectListScreen} from 'terraso-mobile-client/screens/ProjectListScreen
 import {ProjectViewScreen} from 'terraso-mobile-client/screens/ProjectViewScreen';
 import {CreateProjectScreen} from 'terraso-mobile-client/screens/CreateProjectScreen';
 import {HomeScreen} from 'terraso-mobile-client/screens/HomeScreen';
-import {SiteTransferProjectScreen} from 'terraso-mobile-client/screens/SiteTransferProject';
+import {SiteTransferProjectScreen} from 'terraso-mobile-client/screens/SiteTransferProjectScreen';
 import {CreateSiteScreen} from 'terraso-mobile-client/screens/CreateSiteScreen';
 import {useNavigation as useNavigationNative} from '@react-navigation/native';
 import {LocationDashboardScreen} from 'terraso-mobile-client/components/sites/LocationDashboardScreen';