From 420629845d8e7bb73e3b7bd439b75eec33d69f27 Mon Sep 17 00:00:00 2001 From: Saurav09s Date: Thu, 21 May 2026 00:11:55 +0530 Subject: [PATCH 1/2] refactor: use reusable ProfileLink component on home screen --- apps/mobile/src/components/ProfileLink.tsx | 71 +++++++++ apps/mobile/src/screens/HomeScreen.tsx | 158 +++++++++++---------- 2 files changed, 155 insertions(+), 74 deletions(-) create mode 100644 apps/mobile/src/components/ProfileLink.tsx diff --git a/apps/mobile/src/components/ProfileLink.tsx b/apps/mobile/src/components/ProfileLink.tsx new file mode 100644 index 0000000..3f2f155 --- /dev/null +++ b/apps/mobile/src/components/ProfileLink.tsx @@ -0,0 +1,71 @@ +// components/ProfileLink.tsx + +import React from 'react'; +import { + Linking, + Pressable, + Text, + View, + StyleSheet, +} from 'react-native'; + +type ProfileLinkProps = { + platform: string; + username: string; + url: string; + onPress?: () => void; +}; + +export default function ProfileLink({ + platform, + username, + url, + onPress, +}: ProfileLinkProps) { + const handlePress = () => { + if (onPress) { + onPress(); + return; + } + + Linking.openURL(url); + }; + + return ( + + + {platform} + {username} + + + Open + + ); +} + +const styles = StyleSheet.create({ + card: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: 16, + borderRadius: 12, + backgroundColor: '#161616', + marginBottom: 12, + }, + platform: { + fontSize: 16, + fontWeight: '600', + color: '#ffffff', + }, + username: { + marginTop: 4, + fontSize: 14, + color: '#a1a1aa', + }, + link: { + fontSize: 14, + fontWeight: '600', + color: '#4f8cff', + }, +}); \ No newline at end of file diff --git a/apps/mobile/src/screens/HomeScreen.tsx b/apps/mobile/src/screens/HomeScreen.tsx index 80de203..9295bf7 100644 --- a/apps/mobile/src/screens/HomeScreen.tsx +++ b/apps/mobile/src/screens/HomeScreen.tsx @@ -18,6 +18,8 @@ import { PLATFORMS } from '@devcard/shared'; import { APP_URL, API_BASE_URL } from '../config'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { RootStackParamList } from '../navigation/MainTabs'; +import ProfileLink from '../components/ProfileLink'; +import { Linking } from 'react-native'; type Props = { navigation: NativeStackNavigationProp; @@ -38,7 +40,7 @@ export default function HomeScreen({ navigation }: Props) { const [showQR, setShowQR] = useState(false); const [refreshing, setRefreshing] = useState(false); - const profileUrl = user?.defaultCardId + const profileUrl = user?.defaultCardId ? `${APP_URL}/devcard/${user.defaultCardId}` : `${APP_URL}/u/${user?.username}`; @@ -133,95 +135,99 @@ export default function HomeScreen({ navigation }: Props) { {user?.bio && {user.bio}} - {/* Platform Links Summary */} - + {/* Platform Links */} + {links.slice(0, 4).map(link => { const platform = PLATFORMS[link.platform]; + return ( - - - {platform?.name || link.platform} - - + Linking.openURL(link.url)} + /> ); })} - {links.length > 4 && ( - - +{links.length - 4} - - )} + {links.length > 4 && ( + + +{links.length - 4} + + )} + - {/* QR Code Section */} + {/* QR Code Section */} + setShowQR(!showQR)} + activeOpacity={0.85}> + {showQR ? ( + + + Scan to open your DevCard + + ) : ( + + 📱 + Tap to show QR code + + )} + + + {/* Action Buttons */} + setShowQR(!showQR)} + style={styles.actionButton} + onPress={handleShare} activeOpacity={0.85}> - {showQR ? ( - - - Scan to open your DevCard - - ) : ( - - 📱 - Tap to show QR code - - )} + 📤 + Share Card - {/* Action Buttons */} - - - 📤 - Share Card - + (navigation as any).navigate('Views')} + activeOpacity={0.85}> + 📈 + Analytics + - (navigation as any).navigate('Views')} - activeOpacity={0.85}> - 📈 - Analytics - + (navigation as any).navigate('DevCardView', { username: user?.username || '' })} + activeOpacity={0.85}> + 👁️ + Preview + + - (navigation as any).navigate('DevCardView', { username: user?.username || '' })} - activeOpacity={0.85}> - 👁️ - Preview - + {/* Stats */} + + + {links.length} + Links - - {/* Stats */} - - - {links.length} - Links - - - - {analytics?.totalViews || 0} - Views - - - - {analytics?.followsCount || 0} - Follows - + + + {analytics?.totalViews || 0} + Views + + + + {analytics?.followsCount || 0} + Follows - - + + + ); } @@ -299,4 +305,8 @@ const styles = StyleSheet.create({ statNumber: { fontSize: FONT_SIZE.xl, fontWeight: '800', color: COLORS.primary }, statLabel: { fontSize: FONT_SIZE.xs, color: COLORS.textMuted, marginTop: 4 }, statDivider: { width: 1, backgroundColor: COLORS.border }, + linksContainer: { + marginTop: SPACING.md, + gap: SPACING.sm, +}, }); From 40a4a08992acf7f729a63efdecdb9f9438fb1a88 Mon Sep 17 00:00:00 2001 From: Saurav09s Date: Thu, 21 May 2026 00:37:17 +0530 Subject: [PATCH 2/2] refactor: remove redundant onPress prop usage --- apps/mobile/src/components/ProfileLink.tsx | 32 ++++++++++++++-------- apps/mobile/src/screens/HomeScreen.tsx | 3 +- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/apps/mobile/src/components/ProfileLink.tsx b/apps/mobile/src/components/ProfileLink.tsx index 3f2f155..4cc5f8c 100644 --- a/apps/mobile/src/components/ProfileLink.tsx +++ b/apps/mobile/src/components/ProfileLink.tsx @@ -15,7 +15,12 @@ type ProfileLinkProps = { url: string; onPress?: () => void; }; - +import { + COLORS, + SPACING, + FONT_SIZE, + BORDER_RADIUS, +} from '../theme/tokens'; export default function ProfileLink({ platform, username, @@ -48,24 +53,27 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - padding: 16, - borderRadius: 12, - backgroundColor: '#161616', - marginBottom: 12, + padding: SPACING.md, + borderRadius: BORDER_RADIUS.md, + backgroundColor: COLORS.bgCard, + marginBottom: SPACING.sm, }, + platform: { - fontSize: 16, + fontSize: FONT_SIZE.md, fontWeight: '600', - color: '#ffffff', + color: COLORS.textPrimary, }, + username: { - marginTop: 4, - fontSize: 14, - color: '#a1a1aa', + marginTop: SPACING.xs, + fontSize: FONT_SIZE.sm, + color: COLORS.textMuted, }, + link: { - fontSize: 14, + fontSize: FONT_SIZE.sm, fontWeight: '600', - color: '#4f8cff', + color: COLORS.primary, }, }); \ No newline at end of file diff --git a/apps/mobile/src/screens/HomeScreen.tsx b/apps/mobile/src/screens/HomeScreen.tsx index 9295bf7..c840ff2 100644 --- a/apps/mobile/src/screens/HomeScreen.tsx +++ b/apps/mobile/src/screens/HomeScreen.tsx @@ -19,7 +19,7 @@ import { APP_URL, API_BASE_URL } from '../config'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { RootStackParamList } from '../navigation/MainTabs'; import ProfileLink from '../components/ProfileLink'; -import { Linking } from 'react-native'; + type Props = { navigation: NativeStackNavigationProp; @@ -146,7 +146,6 @@ export default function HomeScreen({ navigation }: Props) { platform={platform?.name || link.platform} username={link.username} url={link.url} - onPress={() => Linking.openURL(link.url)} /> ); })}