Skip to content

refactor: use reusable ProfileLink component on home screen#204

Open
Saurav09s wants to merge 2 commits into
Dev-Card:mainfrom
Saurav09s:refactor/profile-link-component
Open

refactor: use reusable ProfileLink component on home screen#204
Saurav09s wants to merge 2 commits into
Dev-Card:mainfrom
Saurav09s:refactor/profile-link-component

Conversation

@Saurav09s
Copy link
Copy Markdown

Summary

Refactored HomeScreen to use reusable ProfileLink component.

Changes

  • Imported ProfileLink
  • Replaced hardcoded platform badges with reusable component
  • Passed platform, username, url, and onPress props
  • Preserved existing UI styling and spacing

Testing

  • Verified mobile screen renders correctly
  • Verified links display properly

Copilot AI review requested due to automatic review settings May 20, 2026 18:49
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the mobile HomeScreen to render platform/profile links using a new reusable ProfileLink component, aiming to replace the previously hardcoded platform badge UI.

Changes:

  • Added a new ProfileLink component for displaying a platform + username row with an “Open” affordance.
  • Updated HomeScreen to render up to 4 links via ProfileLink and show a “+N” overflow indicator.
  • Reorganized the HomeScreen layout around the links/QR/actions sections.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.

File Description
apps/mobile/src/screens/HomeScreen.tsx Switches platform link rendering to ProfileLink and rearranges sections, but currently introduces JSX syntax issues.
apps/mobile/src/components/ProfileLink.tsx Introduces the reusable link row component used by HomeScreen.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +144 to +150
<ProfileLink
key={link.id}
platform={platform?.name || link.platform}
username={link.username}
url={link.url}
onPress={() => Linking.openURL(link.url)}
/>
Comment on lines 18 to 23
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';

Comment on lines +309 to +311
marginTop: SPACING.md,
gap: SPACING.sm,
},
Comment on lines +46 to +69
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',
padding: 16,
borderRadius: 12,
backgroundColor: '#161616',
marginBottom: 12,
Comment on lines +12 to +18
type ProfileLinkProps = {
platform: string;
username: string;
url: string;
onPress?: () => void;
};

Comment on lines +19 to +42
export default function ProfileLink({
platform,
username,
url,
onPress,
}: ProfileLinkProps) {
const handlePress = () => {
if (onPress) {
onPress();
return;
}

Linking.openURL(url);
};

return (
<Pressable style={styles.card} onPress={handlePress}>
<View>
<Text style={styles.platform}>{platform}</Text>
<Text style={styles.username}>{username}</Text>
</View>

<Text style={styles.link}>Open</Text>
</Pressable>
@Harxhit Harxhit added the gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. label May 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants