feat(app): use Link for hrefs where possible

This allows greater accessibility e.g. middle clicking links
zallo-labs · Jan 30, 2024 · b1df928 · b1df928
1 parent ea7e1c9
commit b1df928
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 263 deletions.
diff --git a/app/src/app/(drawer)/[account]/settings.tsx b/app/src/app/(drawer)/[account]/settings.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from 'expo-router';
+import { Link, useRouter } from 'expo-router';
 import { gql } from '@api/generated';
 import { FlashList } from '@shopify/flash-list';
 import { EditIcon, NavigateNextIcon } from '@theme/icons';
@@ -117,17 +117,15 @@ function AccountSettingsScreen() {
             </Button>
           )}
 
-          <Button
-            mode="contained"
-            onPress={() =>
-              router.push({
-                pathname: `/(drawer)/[account]/policies/[key]/`,
-                params: { account: account.address, key: 'add' },
-              })
-            }
+          <Link
+            href={{
+              pathname: `/(drawer)/[account]/policies/[key]/`,
+              params: { account: account.address, key: 'add' },
+            }}
+            asChild
           >
-            Add policy
-          </Button>
+            <Button mode="contained">Add policy</Button>
+          </Link>
         </Actions>
       </ScrollableScreenSurface>
 

diff --git a/app/src/app/(drawer)/approvers/[address]/index.tsx b/app/src/app/(drawer)/approvers/[address]/index.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from 'expo-router';
+import { Link } from 'expo-router';
 import { View } from 'react-native';
 import { Actions } from '~/components/layout/Actions';
 import { StyleSheet } from 'react-native';
@@ -55,7 +55,6 @@ const ApproverScreenParams = z.object({ address: zAddress() });
 
 function ApproverScreen() {
   const params = useLocalParams(ApproverScreenParams);
-  const router = useRouter();
   const update = useMutation(Update)[1];
 
   const query = useQuery(Query, { approver: params.address });
@@ -98,18 +97,17 @@ function ApproverScreen() {
         </View>
 
         <Actions>
-          <Button
-            mode="contained"
-            icon={QrCodeIcon}
-            onPress={() =>
-              router.push({
-                pathname: `/(modal)/approvers/[address]/qr`,
-                params: { address: approver.address },
-              })
-            }
+          <Link
+            href={{
+              pathname: `/(modal)/approvers/[address]/qr`,
+              params: { address: approver.address },
+            }}
+            asChild
           >
-            View
-          </Button>
+            <Button mode="contained" icon={QrCodeIcon}>
+              View
+            </Button>
+          </Link>
         </Actions>
       </ScrollableScreenSurface>
     </>

diff --git a/app/src/app/onboard/auth.tsx b/app/src/app/onboard/auth.tsx
@@ -1,17 +1,15 @@
-import { useRouter } from 'expo-router';
-import { Button } from 'react-native-paper';
+import { Link } from 'expo-router';
+import { Button } from '~/components/Button';
 import { AuthSettings } from '~/components/shared/AuthSettings';
 
 export default function NotificationsOnboardingScreen() {
-  const router = useRouter();
-
   return (
     <AuthSettings
-      passwordHref={`/onboard/password`}
+      passwordHref="/onboard/password"
       actions={
-        <Button mode="contained" onPress={() => router.push(`/onboard/notifications`)}>
-          Continue
-        </Button>
+        <Link href="/onboard/notifications" asChild>
+          <Button mode="contained">Continue</Button>
+        </Link>
       }
     />
   );

diff --git a/app/src/components/Button.tsx b/app/src/components/Button.tsx
@@ -1,14 +1,16 @@
 import { useWithLoading } from '~/hooks/useWithLoading';
-import { Keyboard } from 'react-native';
+import { Keyboard, View } from 'react-native';
 import { Button as PaperButton, ButtonProps as PaperButtonProps } from 'react-native-paper';
+import { forwardRef } from 'react';
 
 export interface ButtonProps extends PaperButtonProps {}
 
-export const Button = (props: PaperButtonProps) => {
+export const Button = forwardRef<View, PaperButtonProps>((props, ref) => {
   const [loading, onPress] = useWithLoading(props.onPress);
 
   return (
     <PaperButton
+      ref={ref}
       {...props}
       loading={props.loading || (props.loading !== false && loading)}
       {...(onPress && {
@@ -20,4 +22,4 @@ export const Button = (props: PaperButtonProps) => {
       })}
     />
   );
-};
+});
diff --git a/app/src/components/home/GettingStarted/useCreatePolicySuggestion.tsx b/app/src/components/home/GettingStarted/useCreatePolicySuggestion.tsx
@@ -1,6 +1,6 @@
 import { FragmentType, gql, useFragment } from '@api';
 import { PolicyIcon } from '@theme/icons';
-import { useRouter } from 'expo-router';
+import { Link } from 'expo-router';
 import { Suggestion } from '~/components/home/GettingStarted/suggestions';
 import { ListItem } from '~/components/list/ListItem';
 
@@ -23,21 +23,18 @@ export interface UseCreatePolicySuggestionParams {
 
 export function useCreatePolicySuggestion(props: UseCreatePolicySuggestionParams): Suggestion {
   const account = useFragment(Account, props.account);
-  const router = useRouter();
 
   return {
     Item: (props) => (
-      <ListItem
-        leading={PolicyIcon}
-        headline="Create a policy"
-        onPress={() =>
-          router.push({
-            pathname: `/(drawer)/[account]/policies/[key]/`,
-            params: { account: account.address, key: 'add' },
-          })
-        }
-        {...props}
-      />
+      <Link
+        href={{
+          pathname: `/(drawer)/[account]/policies/[key]/`,
+          params: { account: account.address, key: 'add' },
+        }}
+        asChild
+      >
+        <ListItem leading={PolicyIcon} headline="Create a policy" {...props} />
+      </Link>
     ),
     complete: account.policies.filter((p) => p.state).length > 1,
   };

diff --git a/app/src/components/home/GettingStarted/useLinkDeviceSuggestion.tsx b/app/src/components/home/GettingStarted/useLinkDeviceSuggestion.tsx
@@ -1,7 +1,7 @@
 import { FragmentType, gql, useFragment } from '@api';
 import { useApproverAddress } from '~/lib/network/useApprover';
 import { DevicesIcon } from '@theme/icons';
-import { useRouter } from 'expo-router';
+import { Link } from 'expo-router';
 import { Suggestion } from '~/components/home/GettingStarted/suggestions';
 import { ListItem } from '~/components/list/ListItem';
 
@@ -27,16 +27,12 @@ export interface UseLinkDeviceSuggestionProps {
 export function useLinkDeviceSuggestion(props: UseLinkDeviceSuggestionProps): Suggestion {
   const user = useFragment(User, props.user);
   const approver = useApproverAddress();
-  const router = useRouter();
 
   return {
     Item: (props) => (
-      <ListItem
-        leading={DevicesIcon}
-        headline="Link a device"
-        onPress={() => router.push(`/link/`)}
-        {...props}
-      />
+      <Link href="/link" asChild>
+        <ListItem leading={DevicesIcon} headline="Link a device" {...props} />
+      </Link>
     ),
     complete: !!user.approvers.find(
       (a) => a.address !== approver && !a.bluetoothDevices?.length && !a.cloud,

diff --git a/app/src/components/item/UserApproverItem.tsx b/app/src/components/item/UserApproverItem.tsx
@@ -1,6 +1,6 @@
 import { FragmentType, gql, useFragment } from '@api/generated';
 import { useApproverAddress } from '~/lib/network/useApprover';
-import { useRouter } from 'expo-router';
+import { Link } from 'expo-router';
 import { ListItem, ListItemProps } from '~/components/list/ListItem';
 import { truncateAddr } from '~/util/format';
 
@@ -23,19 +23,20 @@ export interface UserApproverItemProps extends Partial<ListItemProps> {
 
 export function UserApproverItem(props: UserApproverItemProps) {
   const a = useFragment(UserApprover, props.approver);
-  const router = useRouter();
   const selected = useApproverAddress() === a.address;
 
   return (
-    <ListItem
-      leading={a.address}
-      headline={a.name}
-      supporting={truncateAddr(a.address)}
-      {...(selected && { trailing: 'This device' })}
-      onPress={() =>
-        router.push({ pathname: `/(drawer)/approvers/[address]/`, params: { address: a.address } })
-      }
-      {...props}
-    />
+    <Link
+      href={{ pathname: `/(drawer)/approvers/[address]/`, params: { address: a.address } }}
+      asChild
+    >
+      <ListItem
+        leading={a.address}
+        headline={a.name}
+        supporting={truncateAddr(a.address)}
+        {...(selected && { trailing: 'This device' })}
+        {...props}
+      />
+    </Link>
   );
 }