From 4f4fd76d5d675d3d232d3f12a4037f471934f362 Mon Sep 17 00:00:00 2001
From: shrouxm <mushrouxm@gmail.com>
Date: Thu, 11 Jul 2024 12:10:49 -0700
Subject: [PATCH] refactor: rename PermissionsRequest{Modal,Wrapper}

---
 .../components/inputs/image/ImagePicker.tsx   | 26 +++++++++++--------
 ...odal.tsx => PermissionsRequestWrapper.tsx} | 18 ++++++-------
 .../HomeScreen/components/MapSearch.tsx       | 12 ++++-----
 .../screens/SlopeScreen/SlopeMeterScreen.tsx  | 12 ++++-----
 4 files changed, 36 insertions(+), 32 deletions(-)
 rename dev-client/src/components/modals/{PermissionsRequestModal.tsx => PermissionsRequestWrapper.tsx} (88%)

diff --git a/dev-client/src/components/inputs/image/ImagePicker.tsx b/dev-client/src/components/inputs/image/ImagePicker.tsx
index 7ae5e86d6..f061f4d22 100644
--- a/dev-client/src/components/inputs/image/ImagePicker.tsx
+++ b/dev-client/src/components/inputs/image/ImagePicker.tsx
@@ -37,7 +37,7 @@ import {
   ModalHandle,
   ModalTrigger,
 } from 'terraso-mobile-client/components/modals/Modal';
-import {PermissionsRequestModal} from 'terraso-mobile-client/components/modals/PermissionsRequestModal';
+import {PermissionsRequestWrapper} from 'terraso-mobile-client/components/modals/PermissionsRequestContext';
 import {Column} from 'terraso-mobile-client/components/NativeBaseAdapters';
 import {OverlaySheet} from 'terraso-mobile-client/components/sheets/OverlaySheet';
 
@@ -100,10 +100,12 @@ export const ImagePicker = ({
   return (
     <OverlaySheet ref={ref} trigger={children} Closer={null} {...modalProps}>
       <Column padding="lg" space="md">
-        <PermissionsRequestModal
-          title={t('permissions.camera_title')}
-          body={t('permissions.camera_body', {feature: featureName})}
-          usePermissions={useCameraPermissions}
+        <PermissionsRequestWrapper
+          requestModalTitle={t('permissions.camera_title')}
+          requestModalBody={t('permissions.camera_body', {
+            feature: featureName,
+          })}
+          permissionHook={useCameraPermissions}
           permissionedAction={onUseCamera}>
           {onRequestAction => (
             <Button
@@ -113,11 +115,13 @@ export const ImagePicker = ({
               {t('image.use_camera')}
             </Button>
           )}
-        </PermissionsRequestModal>
-        <PermissionsRequestModal
-          title={t('permissions.gallery_title')}
-          body={t('permissions.gallery_body', {feature: featureName})}
-          usePermissions={useMediaLibraryPermissions}
+        </PermissionsRequestWrapper>
+        <PermissionsRequestWrapper
+          requestModalTitle={t('permissions.gallery_title')}
+          requestModalBody={t('permissions.gallery_body', {
+            feature: featureName,
+          })}
+          permissionHook={useMediaLibraryPermissions}
           permissionedAction={onUseMediaLibrary}>
           {onRequestAction => (
             <Button
@@ -127,7 +131,7 @@ export const ImagePicker = ({
               {t('image.choose_from_gallery')}
             </Button>
           )}
-        </PermissionsRequestModal>
+        </PermissionsRequestWrapper>
         <Button
           _text={{textTransform: 'uppercase'}}
           variant="outline"
diff --git a/dev-client/src/components/modals/PermissionsRequestModal.tsx b/dev-client/src/components/modals/PermissionsRequestWrapper.tsx
similarity index 88%
rename from dev-client/src/components/modals/PermissionsRequestModal.tsx
rename to dev-client/src/components/modals/PermissionsRequestWrapper.tsx
index 39a45d9f1..b91d7aa09 100644
--- a/dev-client/src/components/modals/PermissionsRequestModal.tsx
+++ b/dev-client/src/components/modals/PermissionsRequestWrapper.tsx
@@ -27,17 +27,17 @@ import {ModalHandle} from 'terraso-mobile-client/components/modals/Modal';
 type PermissionHook = ReturnType<typeof createPermissionHook>;
 
 type Props = {
-  title: string;
-  body: string;
-  usePermissions: PermissionHook;
+  requestModalTitle: string;
+  requestModalBody: string;
+  permissionHook: PermissionHook;
   permissionedAction?: () => void;
   children: (onOpen: () => void) => React.ReactNode;
 };
 
-export const PermissionsRequestModal = ({
-  title,
-  body,
-  usePermissions,
+export const PermissionsRequestWrapper = ({
+  requestModalTitle,
+  requestModalBody,
+  permissionHook: usePermissions,
   permissionedAction,
   children,
 }: Props) => {
@@ -70,8 +70,8 @@ export const PermissionsRequestModal = ({
         ref={ref}
         isConfirmError={false}
         actionName={t('general.open_settings')}
-        title={title}
-        body={body}
+        title={requestModalTitle}
+        body={requestModalBody}
         handleConfirm={Linking.openSettings}
       />
       {children(onRequestAction)}
diff --git a/dev-client/src/screens/HomeScreen/components/MapSearch.tsx b/dev-client/src/screens/HomeScreen/components/MapSearch.tsx
index fb1015861..7af735afd 100644
--- a/dev-client/src/screens/HomeScreen/components/MapSearch.tsx
+++ b/dev-client/src/screens/HomeScreen/components/MapSearch.tsx
@@ -29,7 +29,7 @@ import {Coords} from 'terraso-client-shared/types';
 
 import {IconButton} from 'terraso-mobile-client/components/icons/IconButton';
 import {searchBarStyles} from 'terraso-mobile-client/components/ListFilter';
-import {PermissionsRequestModal} from 'terraso-mobile-client/components/modals/PermissionsRequestModal';
+import {PermissionsRequestWrapper} from 'terraso-mobile-client/components/modals/PermissionsRequestContext';
 import {
   Box,
   Column,
@@ -214,10 +214,10 @@ export default function MapSearch({zoomTo, zoomToUser, toggleMapLayer}: Props) {
             padding={2}
             onPress={toggleMapLayer}
           />
-          <PermissionsRequestModal
-            title={t('permissions.location_title')}
-            body={t('permissions.location_body')}
-            usePermissions={useForegroundPermissions}
+          <PermissionsRequestWrapper
+            requestModalTitle={t('permissions.location_title')}
+            requestModalBody={t('permissions.location_body')}
+            permissionHook={useForegroundPermissions}
             permissionedAction={zoomToUser}>
             {onRequest => (
               <IconButton
@@ -229,7 +229,7 @@ export default function MapSearch({zoomTo, zoomToUser, toggleMapLayer}: Props) {
                 onPress={onRequest}
               />
             )}
-          </PermissionsRequestModal>
+          </PermissionsRequestWrapper>
         </Column>
       </Row>
     </Box>
diff --git a/dev-client/src/screens/SlopeScreen/SlopeMeterScreen.tsx b/dev-client/src/screens/SlopeScreen/SlopeMeterScreen.tsx
index 6f0c73476..826ef794e 100644
--- a/dev-client/src/screens/SlopeScreen/SlopeMeterScreen.tsx
+++ b/dev-client/src/screens/SlopeScreen/SlopeMeterScreen.tsx
@@ -28,7 +28,7 @@ import {updateSoilData} from 'terraso-client-shared/soilId/soilIdSlice';
 
 import {BigCloseButton} from 'terraso-mobile-client/components/buttons/BigCloseButton';
 import {Icon} from 'terraso-mobile-client/components/icons/Icon';
-import {PermissionsRequestModal} from 'terraso-mobile-client/components/modals/PermissionsRequestModal';
+import {PermissionsRequestWrapper} from 'terraso-mobile-client/components/modals/PermissionsRequestContext';
 import {
   Box,
   Column,
@@ -100,18 +100,18 @@ export const SlopeMeterScreen = ({siteId}: {siteId: string}) => {
               </Column>
             </CameraView>
           ) : (
-            <PermissionsRequestModal
-              title={t('permissions.camera_title')}
-              body={t('permissions.camera_body', {
+            <PermissionsRequestWrapper
+              requestModalTitle={t('permissions.camera_title')}
+              requestModalBody={t('permissions.camera_body', {
                 feature: t('slope.steepness.slope_meter'),
               })}
-              usePermissions={useCameraPermissions}>
+              permissionHook={useCameraPermissions}>
               {onRequest => (
                 <Button size="lg" onPress={onRequest}>
                   {t('slope.steepness.camera_grant')}
                 </Button>
               )}
-            </PermissionsRequestModal>
+            </PermissionsRequestWrapper>
           )}
         </Box>
         <Column alignItems="center">