Skip to content

Commit

Permalink
fix: fixed elements hidden behind tabbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Louis3797
Louis3797 committed Jun 20, 2024
1 parent 22fa38d commit aad1772
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 95 deletions.
34 changes: 18 additions & 16 deletions src/screens/FollowersPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,24 @@ const FollowersPage: React.FC<{ id: string }> = ({ id }) => {
</H1>
</XStack>
{isSuccess && (
<ScrollView testID="followers-list">
<YStack space="$3">
{data?.data?.user.followedBy.map((u) => {
return (
<UserFollowerCard
key={u.user.id}
id={u.user.id}
username={u.user.username}
dispname={u.user.dispname}
avatar_url={u.user.avatar_url}
subscribed={u.subscribed}
/>
);
})}
</YStack>
</ScrollView>
<YStack flex={1} paddingBottom="$10">
<ScrollView testID="followers-list">
<YStack space="$3">
{data?.data?.user.followedBy.map((u) => {
return (
<UserFollowerCard
key={u.user.id}
id={u.user.id}
username={u.user.username}
dispname={u.user.dispname}
avatar_url={u.user.avatar_url}
subscribed={u.subscribed}
/>
);
})}
</YStack>
</ScrollView>
</YStack>
)}
</YStack>
);
Expand Down
34 changes: 18 additions & 16 deletions src/screens/FollowingPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,24 @@ const FollowingPage: React.FC<{ id: string }> = ({ id }) => {
</H1>
</XStack>
{isSuccess && (
<ScrollView testID="followings-list">
<YStack space="$3">
{data?.data?.user.following.map((u) => {
return (
<UserFollowerCard
key={u.user.id}
id={u.user.id}
username={u.user.username}
dispname={u.user.dispname}
avatar_url={u.user.avatar_url}
subscribed={true}
/>
);
})}
</YStack>
</ScrollView>
<YStack flex={1} paddingBottom="$10">
<ScrollView testID="followings-list">
<YStack space="$3">
{data?.data?.user.following.map((u) => {
return (
<UserFollowerCard
key={u.user.id}
id={u.user.id}
username={u.user.username}
dispname={u.user.dispname}
avatar_url={u.user.avatar_url}
subscribed={true}
/>
);
})}
</YStack>
</ScrollView>
</YStack>
)}
</YStack>
);
Expand Down
34 changes: 18 additions & 16 deletions src/screens/HomePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ const HomePage = () => {
});

const [feed, setFeed] = useState<NonNullable<GetFeedResponse['data']>>({
// feed: generateFeed(50),
feed: [],
feed: generateFeed(50),
// feed: [],
hasNext: false,
nextCursor: '',
});
Expand Down Expand Up @@ -83,20 +83,22 @@ const HomePage = () => {
) : isError ? (
<ErrorFeedPlaceholder onRetry={handleRefresh} />
) : (
<MasonryFlashList
bounces
showsVerticalScrollIndicator={false}
ListEmptyComponent={<EmptyFeedPlaceholder onRefresh={handleRefresh} />}
data={feed.feed}
numColumns={2}
renderItem={renderItem}
keyExtractor={keyExtractor}
estimatedItemSize={273}
onEndReached={() => !isFetching && fetchNextPage()}
onEndReachedThreshold={0.3}
onRefresh={handleRefresh}
refreshing={isRefetching}
/>
<YStack flex={1} paddingBottom="$10">
<MasonryFlashList
bounces
showsVerticalScrollIndicator={false}
ListEmptyComponent={<EmptyFeedPlaceholder onRefresh={handleRefresh} />}
data={feed.feed}
numColumns={2}
renderItem={renderItem}
keyExtractor={keyExtractor}
estimatedItemSize={273}
onEndReached={() => !isFetching && fetchNextPage()}
onEndReachedThreshold={0.3}
onRefresh={handleRefresh}
refreshing={isRefetching}
/>
</YStack>
)}
</YStack>
);
Expand Down
16 changes: 9 additions & 7 deletions src/screens/NotificationPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,15 @@ const NotificationPage = () => {
Notifications
</H1>

<ScrollView bounces testID="notification-list">
<YStack space="$3">
{data?.data?.notifications.map((n) => {
return <NotificationCard key={n.id} notification={n} />;
})}
</YStack>
</ScrollView>
<YStack flex={1} paddingBottom="$10">
<ScrollView bounces testID="notification-list">
<YStack space="$3">
{data?.data?.notifications.map((n) => {
return <NotificationCard key={n.id} notification={n} />;
})}
</YStack>
</ScrollView>
</YStack>
</YStack>
);
};
Expand Down
58 changes: 31 additions & 27 deletions src/screens/ProfilePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { AchievementType, Genre, GetMostStreamedGenresResponse, GetUserResponse } from '@api/responses';
import {
AchievementType,
Genre,
GetMostStreamedGenresResponse,
GetUserResponse,
} from '@api/responses';
import { useGetGenreStatistic } from '@api/user/query/useGetGenreStatistic';
import { useGetUser } from '@api/user/query/useGetUser';
import SwitchButton from '@components/SwitchButton';
Expand All @@ -9,10 +14,9 @@ import { groupAchievements } from '@utils/groupAchievements';
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, ScrollView } from 'react-native';
import { SizableText, View, XStack, YStack } from 'tamagui';
import { DisplayedAchievement } from "../types/types";
import { DisplayedAchievement } from '../types/types';
import AchievementBadge from '@components/profile/AchievementBadge';


type States = 'Statistics' | 'Achievements';
const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
const { data, isFetching } = useGetUser({
Expand All @@ -37,15 +41,14 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {

const [groupedAchievements, setGroupedAchievements] = useState<DisplayedAchievement[]>([]);


const handleStateChange = (newState: string) => {
setActiveState(newState as States);
};

useEffect(() => {
if (data && data.data) {
setUserData(data.data);
setGroupedAchievements(groupAchievements(data.data.user.userToAchievement))
setGroupedAchievements(groupAchievements(data.data.user.userToAchievement));
}
}, [data]);

Expand All @@ -55,8 +58,6 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
}
}, [mostStreamedGenres]);



if (isFetching && !userData) {
return (
<YStack
Expand All @@ -70,7 +71,6 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
);
}


return (
<YStack height="100%" backgroundColor="$color.background" paddingBottom="$4">
<ProfileHeader
Expand Down Expand Up @@ -101,28 +101,31 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
</>
) : (
<>
<ScrollView bounces>
<YStack marginBottom="$8" padding="$4">
<YStack flex={1} gap="$3">
{genreData.map((genre, index) => (
<GenreStatisticBadge
key={index}
genre={genre.name}
percent={genre.percent}
avgViewer={genre.avgViewers}
days={genre.days}
/>
))}
<YStack flex={1} paddingBottom="$10">
<ScrollView bounces>
<YStack marginBottom="$8" padding="$4">
<YStack flex={1} gap="$3">
{genreData.map((genre, index) => (
<GenreStatisticBadge
key={index}
genre={genre.name}
percent={genre.percent}
avgViewer={genre.avgViewers}
days={genre.days}
/>
))}
</YStack>
</YStack>
</YStack>
</ScrollView>
</ScrollView>
</YStack>
</>
)
) : (
<>
<ScrollView bounces>
<YStack marginBottom="$8" padding="$4">
<YStack flex={1} gap="$3">
<YStack flex={1} paddingBottom="$10">
<ScrollView bounces>
<YStack marginBottom="$8" padding="$4">
<YStack flex={1} gap="$3">
{groupedAchievements.map((achievement) => (
<AchievementBadge
key={achievement.id}
Expand All @@ -134,8 +137,9 @@ const ProfilePage: React.FC<{ userid: string }> = ({ userid }) => {
/>
))}
</YStack>
</YStack>
</ScrollView>
</YStack>
</ScrollView>
</YStack>
</>
)}
</YStack>
Expand Down
28 changes: 15 additions & 13 deletions src/screens/SearchPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,19 +102,21 @@ const SearchPage = () => {
<YStack space="$4" flex={1}>
<SearchHistory onPress={handleSearch} />

<FlashList
bounces
showsVerticalScrollIndicator={false}
data={searchResults.result.users}
numColumns={1}
renderItem={renderItem}
keyExtractor={keyExtractor}
onEndReached={() => !isFetching && fetchNextPage()}
onEndReachedThreshold={0.3}
onRefresh={handleRefresh}
refreshing={isRefetching}
estimatedItemSize={100}
/>
<YStack flex={1} paddingBottom="$10">
<FlashList
bounces
showsVerticalScrollIndicator={false}
data={searchResults.result.users}
numColumns={1}
renderItem={renderItem}
keyExtractor={keyExtractor}
onEndReached={() => !isFetching && fetchNextPage()}
onEndReachedThreshold={0.3}
onRefresh={handleRefresh}
refreshing={isRefetching}
estimatedItemSize={100}
/>
</YStack>
</YStack>
</YStack>
</TouchableWithoutFeedback>
Expand Down

0 comments on commit aad1772

Please sign in to comment.