Make connection clickable (#36)

eronka · Jun 5, 2024 · 1d72d9e · 1d72d9e
1 parent e2048b3
commit 1d72d9e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 32 deletions.
diff --git a/src/components/ConnectionDetails.tsx b/src/components/ConnectionDetails.tsx
@@ -1,36 +1,36 @@
-import { TextProps, View, ViewProps } from "react-native";
+import { Pressable, TextProps, View, ViewProps } from "react-native";
 import { Avatar } from "./Avatar";
 import { StyledText } from "./StyledText";
 import { twMerge } from "tailwind-merge";
+import { Connection } from "../types";
+import { useNavToConnection } from "../hooks/useNavToConnection";
 
 type ConnectionDetailsProps = {
-  userName?: string;
-  userPosition?: string;
-  userAvatar?: string;
-  isVerified?: boolean;
   className?: ViewProps["className"];
   usernameTextClassName?: TextProps["className"];
   positionTextClassName?: TextProps["className"];
   avatarSize?: number;
   badgeSize?: number;
+  user: Connection;
 };
 
 export const ConnectionDetails = ({
-  userName,
-  userPosition,
-  userAvatar,
-  isVerified,
+  user,
   className,
   usernameTextClassName,
   positionTextClassName,
   avatarSize = 45,
   badgeSize = 22,
 }: ConnectionDetailsProps) => {
+  const nav = useNavToConnection();
   return (
-    <View className={twMerge("flex-row items-center", className)}>
+    <Pressable
+      className={twMerge("flex-row items-center", className)}
+      onPress={() => nav.navigate(user.id)}
+    >
       <Avatar
-        userImage={userAvatar}
-        isVerified={isVerified}
+        userImage={user.profilePictureUrl}
+        isVerified={user.isEmailVerified}
         hasBadge={true}
         size={avatarSize}
         badgeSize={badgeSize}
@@ -42,12 +42,12 @@ export const ConnectionDetails = ({
           lg
           className={twMerge("", usernameTextClassName)}
         >
-          {userName || ""}
+          {user.name || ""}
         </StyledText>
         <StyledText color="gray33" className={positionTextClassName}>
-          {userPosition || ""}
+          {user.headline || ""}
         </StyledText>
       </View>
-    </View>
+    </Pressable>
   );
 };
diff --git a/src/components/ConnectionsReviewCard.tsx b/src/components/ConnectionsReviewCard.tsx
@@ -62,12 +62,7 @@ export const ConnectionReviewCard = ({
               ItemSeparatorComponent={() => <HorizontalDivider />}
               renderItem={({ item }) => (
                 <View className="flex-row justify-between items-center p-2">
-                  <ConnectionDetails
-                    userAvatar={item.profilePictureUrl}
-                    userName={item.name}
-                    userPosition={item.headline}
-                    isVerified={item.isEmailVerified}
-                  />
+                  <ConnectionDetails user={item} />
                   <IconButton
                     onPress={() => {}}
                     iconProps={{ name: "review" }}

diff --git a/src/components/NewUserCard.tsx b/src/components/NewUserCard.tsx
@@ -22,9 +22,7 @@ export const NewUserCard = ({ connection, className }: NewUserCardProps) => {
             <ConnectionDetails
               usernameTextClassName="text-white"
               positionTextClassName="text-white7"
-              userName={connection.name}
-              userPosition={connection.headline}
-              userAvatar={connection.profilePictureUrl}
+              user={connection}
             />
           </View>
           <VerticalDivider className="hidden md:flex" />

diff --git a/src/components/SearchableConnectionsCard.tsx b/src/components/SearchableConnectionsCard.tsx
@@ -102,10 +102,7 @@ export const SearchableConnectionsCard = ({
                     <ConnectionDetails
                       avatarSize={isPhone ? 64 : 86}
                       badgeSize={isPhone ? 24 : 34}
-                      userAvatar={item.profilePictureUrl}
-                      userName={item.name!}
-                      userPosition={item.headline!}
-                      isVerified={item.isEmailVerified}
+                      user={item}
                     />
                   </Pressable>
                   <View className="md:flex-row-reverse items-center md:justify">

diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
@@ -35,10 +35,7 @@ export const UserCard = ({ className, connection }: UserCardProps) => {
               <ConnectionDetails
                 usernameTextClassName="text-white"
                 positionTextClassName="text-white7"
-                userName={connection.name}
-                userPosition={connection.headline}
-                userAvatar={connection.profilePictureUrl}
-                isVerified={connection.isEmailVerified}
+                user={connection}
               />
             </View>
             <View className="hidden md:flex flex-1">