Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FollowBack button regression on mobile #2006

Merged
merged 7 commits into from
Oct 15, 2023
Merged

FollowBack button regression on mobile #2006

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cbde480
base
Rohan-cp Oct 9, 2023
141b2d1
minor
Rohan-cp Oct 13, 2023
cc8126b
move to notif skeleton
Rohan-cp Oct 14, 2023
0176be3
right aligned button
Rohan-cp Oct 14, 2023
c1fa7b4
improvement
Rohan-cp Oct 14, 2023
d738237
lint
Rohan-cp Oct 15, 2023
05f5c73
Merge branch 'main' into rohan/follow-back-wrap
Rohan-cp Oct 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 34 additions & 12 deletions apps/mobile/src/components/Notification/NotificationSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { PropsWithChildren, useCallback, useMemo, useRef } from 'react';
import { Text, View } from 'react-native';
import { graphql, useFragment } from 'react-relay';

import { FollowButton } from '~/components/FollowButton';
import {
GalleryBottomSheetModal,
GalleryBottomSheetModalType,
Expand All @@ -24,19 +25,22 @@ type Props = PropsWithChildren<{
queryRef: NotificationSkeletonQueryFragment$key;
notificationRef: NotificationSkeletonFragment$key;
responsibleUserRefs: NotificationSkeletonResponsibleUsersFragment$key;
shouldShowFollowBackButton?: boolean;
}>;

export function NotificationSkeleton({
onPress,
children,
queryRef,
notificationRef,
shouldShowFollowBackButton = false,
responsibleUserRefs = [],
}: Props) {
const query = useFragment(
graphql`
fragment NotificationSkeletonQueryFragment on Query {
...UserFollowListQueryFragment
...FollowButtonQueryFragment
}
`,
queryRef
Expand Down Expand Up @@ -73,6 +77,15 @@ export function NotificationSkeleton({
}
}
}
... on SomeoneFollowedYouNotification {
followers(last: 1) {
edges {
node {
...FollowButtonUserFragment
}
}
}
}
}
`,
notificationRef
Expand Down Expand Up @@ -115,34 +128,43 @@ export function NotificationSkeleton({
return null;
}, [notification]);

const lastFollower = useMemo(() => notification.followers?.edges?.[0]?.node, [notification]);

return (
<GalleryTouchableOpacity
onPress={onPress}
className="flex flex-row justify-between p-4"
eventElementId="Notification Row"
eventName="Notification Row Clicked"
>
<View className="flex-1 flex-row space-x-2 items-center">
<ProfilePictureBubblesWithCount
eventElementId="Notification Row PFP Bubbles"
eventName="Notification Row PFP Bubbles Pressed"
onPress={handleBubblesPress}
userRefs={responsibleUsers}
totalCount={responsibleUserRefs.length}
size="md"
/>

<View className="flex-1 flex-row items-center">
<View className="mr-2">
<ProfilePictureBubblesWithCount
eventElementId="Notification Row PFP Bubbles"
eventName="Notification Row PFP Bubbles Pressed"
onPress={handleBubblesPress}
userRefs={responsibleUsers}
totalCount={responsibleUserRefs.length}
size="md"
/>
</View>
<Text className="dark:text-white mt-[1] pr-1 flex-1">{children}</Text>
</View>
<View className="flex flex-row items-center justify-between space-x-2">

{shouldShowFollowBackButton && lastFollower && (
<View className="flex justify-center">
<FollowButton queryRef={query} userRef={lastFollower} />
</View>
)}

<View className="flex flex-row items-center justify-between ${postToken ? 'space-x-2' : ''}">
{postToken ? (
<View className="w-[56px] h-[56px]">
<NotificationPostPreviewWithBoundary tokenRef={postToken} />
</View>
) : (
<View />
)}

<View
className={`w-[35px] flex-row space-x-2 items-center ${
!notification.seen ? 'justify-between' : 'justify-end'
Expand Down
46 changes: 24 additions & 22 deletions apps/mobile/src/components/Notification/Notifications/SomeoneFollowedYou.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Text, View } from 'react-native';
import { useFragment } from 'react-relay';
import { graphql } from 'relay-runtime';

import { FollowButton } from '~/components/FollowButton';
import { GalleryBottomSheetModalType } from '~/components/GalleryBottomSheet/GalleryBottomSheetModal';
import { NotificationBottomSheetUserList } from '~/components/Notification/NotificationBottomSheetUserList';
import { NotificationSkeleton } from '~/components/Notification/NotificationSkeleton';
Expand All @@ -23,7 +22,6 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
const query = useFragment(
graphql`
fragment SomeoneFollowedYouQueryFragment on Query {
...FollowButtonQueryFragment
viewer {
... on Viewer {
user {
Expand Down Expand Up @@ -51,7 +49,6 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
node {
username

...FollowButtonUserFragment
...NotificationSkeletonResponsibleUsersFragment
... on GalleryUser {
dbid
Expand Down Expand Up @@ -113,29 +110,34 @@ export function SomeoneFollowedYou({ notificationRef, queryRef }: SomeoneFollowe
<NotificationSkeleton
queryRef={query}
onPress={handlePress}
shouldShowFollowBackButton={shouldShowFollowBackButton ?? false}
responsibleUserRefs={followers}
notificationRef={notification}
>
<View className="flex flex-row w-full justify-between items-center">
<Text className={shouldShowFollowBackButton ? 'max-w-70' : ''}>
<Typography
font={{
family: 'ABCDiatype',
weight: 'Bold',
}}
className="text-sm"
>
{count > 1 ? (
`${count} collectors`
) : (
<>{lastFollower ? lastFollower.username : 'Someone'}</>
)}
</Typography>{' '}
<Typography className="text-sm" font={{ family: 'ABCDiatype', weight: 'Regular' }}>
followed you
</Typography>
</Text>
{shouldShowFollowBackButton && <FollowButton queryRef={query} userRef={lastFollower} />}
<View className="max-w-[180px]">
<Text>
<Typography
font={{
family: 'ABCDiatype',
weight: 'Bold',
}}
className="text-sm"
>
{count > 1 ? (
`${count} collectors`
) : (
<>{lastFollower ? lastFollower.username : 'Someone'}</>
)}
</Typography>{' '}
<Typography className="text-sm" font={{ family: 'ABCDiatype', weight: 'Regular' }}>
followed
</Typography>{' '}
<Typography className="text-sm" font={{ family: 'ABCDiatype', weight: 'Regular' }}>
you
</Typography>
</Text>
</View>
</View>
<NotificationBottomSheetUserList
ref={bottomSheetRef}
Expand Down