Skip to content

Commit

Permalink
New conversation profile search design system migration, fix scroll v…
Browse files Browse the repository at this point in the history 
…iew height and bottom padding issue
  • Loading branch information
@lourou
lourou committed Jan 3, 2025
1 parent 640a2f1 commit 84b225b
Show file tree
Hide file tree
Showing 3 changed files with 270 additions and 304 deletions.
222 changes: 109 additions & 113 deletions components/Recommendations/Recommendations.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,14 @@
import { IProfileSocials } from "@/features/profiles/profile-types";
import {
backgroundColor,
itemSeparatorColor,
primaryColor,
textPrimaryColor,
textSecondaryColor,
} from "@styles/colors";
import * as Linking from "expo-linking";
import { useCallback, useEffect, useState } from "react";
import {
FlatList,
Keyboard,
Platform,
StyleSheet,
Text,
View,
useColorScheme,
ViewStyle,
TextStyle,
} from "react-native";
import * as Linking from "expo-linking";

import { Recommendation } from "./Recommendation";
import config from "@config";
Expand All @@ -28,8 +20,10 @@ import {
import { useSelect } from "@data/store/storeHelpers";
import { useRouter } from "@navigation/useNavigation";
import { refreshRecommendationsForAccount } from "@utils/recommendations";
import ActivityIndicator from "@components/ActivityIndicator/ActivityIndicator";
import { translate } from "@/i18n";
import { Text } from "@design-system/Text";
import { Loader } from "@/design-system/loader";
import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme";

const EXPIRE_AFTER = 86400000; // 1 DAY

Expand Down Expand Up @@ -65,7 +59,7 @@ export default function Recommendations({
"updatedAt",
])
);
const styles = useStyles();
const { themed } = useAppTheme();

const openSignalList = useCallback(() => {
Linking.openURL(
Expand Down Expand Up @@ -124,18 +118,18 @@ export default function Recommendations({
return (
<>
{visibility === "FULL" && showTitle && (
<View style={styles.titleContainer}>
<View style={themed($titleContainer)}>
<>
<Text style={styles.emoji}>👋</Text>
<Text style={styles.title}>
<Text style={themed($emoji)}>👋</Text>
<Text style={themed($title)}>
{translate("recommendations.title")}
</Text>
</>
</View>
)}
{visibility === "EMBEDDED" && showTitle && (
<View style={styles.sectionTitleContainer}>
<Text style={styles.sectionTitle}>
<View style={themed($sectionTitleContainer)}>
<Text style={themed($sectionTitle)}>
{translate("recommendations.section_title")}
</Text>
</View>
Expand Down Expand Up @@ -165,11 +159,7 @@ export default function Recommendations({
},
[
frens,
styles.emoji,
styles.sectionTitle,
styles.sectionTitleContainer,
styles.title,
styles.titleContainer,
themed,
viewableItems,
visibility,
groupMembers,
Expand All @@ -183,9 +173,9 @@ export default function Recommendations({

if (loading && Object.keys(frens).length === 0 && visibility === "FULL") {
return (
<View style={styles.fetching}>
<ActivityIndicator />
<Text style={styles.fetchingText}>
<View style={themed($fetching)}>
<Loader />
<Text style={themed($fetchingText)}>
{translate("recommendations.loading")}
</Text>
</View>
Expand All @@ -195,14 +185,14 @@ export default function Recommendations({
if (visibility === "FULL" && frens && Object.keys(frens).length === 0) {
return (
<>
<Text style={styles.emoji}>😐</Text>
<Text style={styles.title}>
<Text style={themed($emoji)}>😐</Text>
<Text style={themed($title)}>
{translate("recommendations.no_recommendations")}
<Text style={styles.clickableText} onPress={openSignalList}>
<Text style={themed($clickableText)} onPress={openSignalList}>
{translate("recommendations.signal_list")}
</Text>
{translate("recommendations.please_feel_free_to")}
<Text style={styles.clickableText} onPress={contactPol}>
<Text style={themed($clickableText)} onPress={contactPol}>
{translate("recommendations.contact_pol")}
</Text>{" "}
{translate("recommendations.if_you_want_us_to_add_anything")}
Expand All @@ -212,7 +202,7 @@ export default function Recommendations({
}

return (
<View style={styles.recommendations}>
<View style={themed($recommendations)}>
<FlatList
data={["title", ...Object.keys(frens)]}
keyExtractor={keyExtractor}
Expand All @@ -223,98 +213,104 @@ export default function Recommendations({
minimumViewTime: 0,
}}
onTouchStart={Keyboard.dismiss}
showsVerticalScrollIndicator={false}
/>
</View>
);
}

const useStyles = () => {
const colorScheme = useColorScheme();
return StyleSheet.create({
emoji: {
textAlign: "center",
marginTop: 30,
fontSize: 34,
marginBottom: 12,
},
title: {
color: textPrimaryColor(colorScheme),
...Platform.select({
default: {
fontSize: 17,
paddingHorizontal: 32,
},
android: {
fontSize: 14,
paddingHorizontal: 39,
},
}),
const $emoji: ThemedStyle<TextStyle> = ({ spacing }) => ({
textAlign: "center",
marginTop: spacing.xl,
fontSize: 34,
marginBottom: spacing.sm,
});

textAlign: "center",
const $title: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
color: colors.text.primary,
...Platform.select({
default: {
fontSize: 17,
paddingHorizontal: spacing.xl,
},
recommendations: {
marginBottom: 30,
backgroundColor: backgroundColor(colorScheme),
marginLeft: Platform.OS === "android" ? 16 : 0,
android: {
fontSize: 14,
paddingHorizontal: spacing.xxl,
},
fetching: {
flexGrow: 1,
justifyContent: "center",
marginBottom: 40,
},
fetchingText: {
color: textPrimaryColor(colorScheme),
...Platform.select({
default: { fontSize: 17 },
android: { fontSize: 16 },
}),
}),
textAlign: "center",
});

textAlign: "center",
marginTop: 20,
},
clickableText: {
color: primaryColor(colorScheme),
fontWeight: "500",
},
noMatch: {
marginTop: 30,
const $recommendations: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
marginBottom: spacing.xl,
backgroundColor: colors.background.surface,
marginLeft: Platform.OS === "android" ? spacing.md : 0,
});

const $fetching: ThemedStyle<ViewStyle> = () => ({
flexGrow: 1,
justifyContent: "center",
marginBottom: 40,
});

const $fetchingText: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
color: colors.text.primary,
...Platform.select({
default: { fontSize: 17 },
android: { fontSize: 16 },
}),
textAlign: "center",
marginTop: spacing.lg,
});

const $clickableText: ThemedStyle<TextStyle> = ({ colors }) => ({
color: colors.text.action,
fontWeight: "500",
});

const $noMatch: ThemedStyle<ViewStyle> = ({ spacing }) => ({
marginTop: spacing.xl,
});

const $titleContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
paddingBottom: spacing.xl,
...Platform.select({
default: {
borderBottomWidth: 0.5,
borderBottomColor: colors.border.subtle,
},
titleContainer: {
paddingBottom: 30,
...Platform.select({
default: {
borderBottomWidth: 0.5,
borderBottomColor: itemSeparatorColor(colorScheme),
},
android: {},
web: {},
}),
android: {},
web: {},
}),
});

const $sectionTitleContainer: ThemedStyle<ViewStyle> = ({
colors,
spacing,
}) => ({
...Platform.select({
default: {
borderBottomWidth: 0.5,
borderBottomColor: colors.border.subtle,
paddingLeft: spacing.md,
},
sectionTitleContainer: {
...Platform.select({
default: {
borderBottomWidth: 0.5,
borderBottomColor: itemSeparatorColor(colorScheme),
paddingLeft: 16,
},
android: {},
web: {},
}),
android: {},
web: {},
}),
});

const $sectionTitle: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
color: colors.text.secondary,
...Platform.select({
default: {
fontSize: 12,
marginBottom: spacing.xs,
marginTop: spacing.lg,
},
sectionTitle: {
color: textSecondaryColor(colorScheme),
...Platform.select({
default: {
fontSize: 12,
marginBottom: 8,
marginTop: 23,
},
android: {
fontSize: 11,
marginBottom: 12,
marginTop: 16,
},
}),
android: {
fontSize: 11,
marginBottom: spacing.sm,
marginTop: spacing.md,
},
});
};
}),
});
9 changes: 3 additions & 6 deletions features/search/screens/ProfileSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@ export default function ProfileSearch({

const renderFooter = useCallback(
() => (
<View style={[themed($footer), { marginBottom: insets.bottom + 55 }]}>
<View style={[themed($footer), { marginBottom: insets.bottom }]}>
<Text
preset={Platform.OS === "ios" ? "body" : "small"}
style={themed($footerText)}
style={{ textAlign: Platform.OS === "ios" ? "center" : "left" }}
>
{translate("full_address_hint", {
providers: ".converse.xyz, .eth, .lens, .fc, .x",
Expand All @@ -83,6 +83,7 @@ export default function ProfileSearch({
ListHeaderComponent={renderHeader}
ListFooterComponent={renderFooter}
onTouchStart={Keyboard.dismiss}
showsVerticalScrollIndicator={false}
/>
</View>
);
Expand Down Expand Up @@ -127,7 +128,3 @@ const $footer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
},
}),
});

const $footerText: ThemedStyle<TextStyle> = () => ({
textAlign: Platform.OS === "ios" ? "center" : "left",
});
Loading

0 comments on commit 84b225b

Please sign in to comment.