From 0bdf163224f6ce643f90f52350f2b354bcc42c92 Mon Sep 17 00:00:00 2001 From: youngkidwarrior Date: Mon, 30 Sep 2024 18:47:37 -0700 Subject: [PATCH] Use Mobile Buttons Row in profile screen --- apps/next/pages/[tag].tsx | 11 +- apps/next/pages/profile/[sendid].tsx | 9 +- .../app/components/MobileButtonRowLayout.tsx | 70 ++ .../app/features/profile/ProfileButtons.tsx | 31 + .../__snapshots__/screen.test.tsx.snap | 838 +++++++++--------- packages/app/features/profile/screen.test.tsx | 3 - packages/app/features/profile/screen.tsx | 84 +- 7 files changed, 524 insertions(+), 522 deletions(-) create mode 100644 packages/app/features/profile/ProfileButtons.tsx diff --git a/apps/next/pages/[tag].tsx b/apps/next/pages/[tag].tsx index 5cf20239f..ee56c22e5 100644 --- a/apps/next/pages/[tag].tsx +++ b/apps/next/pages/[tag].tsx @@ -10,8 +10,9 @@ import { CheckoutTagSchema } from 'app/features/account/sendtag/checkout/Checkou import { assert } from 'app/utils/assert' import { supabaseAdmin } from 'app/utils/supabase/admin' import { ButtonOption, TopNav } from 'app/components/TopNav' +import { MobileButtonRowLayout } from 'app/components/MobileButtonRowLayout' -export const Page: NextPageWithLayout<{ sendid: string }> = ({ sendid }) => { +export const Page: NextPageWithLayout<{ sendid: number | null }> = ({ sendid }) => { return ( <> @@ -82,9 +83,11 @@ export const getServerSideProps = (async (ctx: GetServerSidePropsContext) => { }) satisfies GetServerSideProps Page.getLayout = (children) => ( - }> - {children} - + + }> + {children} + + ) export default Page diff --git a/apps/next/pages/profile/[sendid].tsx b/apps/next/pages/profile/[sendid].tsx index 4e1ed1f4f..469219f2b 100644 --- a/apps/next/pages/profile/[sendid].tsx +++ b/apps/next/pages/profile/[sendid].tsx @@ -8,6 +8,7 @@ import type { Database } from '@my/supabase/database.types' import { userOnboarded } from 'utils/userOnboarded' import { supabaseAdmin } from 'app/utils/supabase/admin' import { ButtonOption, TopNav } from 'app/components/TopNav' +import { MobileButtonRowLayout } from 'app/components/MobileButtonRowLayout' export const Page: NextPageWithLayout = () => { return ( @@ -67,9 +68,11 @@ export const getServerSideProps = (async (ctx: GetServerSidePropsContext) => { }) satisfies GetServerSideProps Page.getLayout = (children) => ( - }> - {children} - + + }> + {children} + + ) export default Page diff --git a/packages/app/components/MobileButtonRowLayout.tsx b/packages/app/components/MobileButtonRowLayout.tsx index de3f8cd4f..0bd936cb0 100644 --- a/packages/app/components/MobileButtonRowLayout.tsx +++ b/packages/app/components/MobileButtonRowLayout.tsx @@ -14,6 +14,10 @@ import { coinsDict } from 'app/data/coins' import { baseMainnet, usdcAddress } from '@my/wagmi' import { HomeButtons } from '../features/home/HomeButtons' import { useScrollDirection } from '../provider/scroll' +import { ProfileButtons } from 'app/features/profile/ProfileButtons' +import { useUser } from 'app/utils/useUser' +import { useProfileLookup } from 'app/utils/useProfileLookup' +import { usePathname } from 'app/utils/usePathname' const Row = styled(XStack, { w: '100%', @@ -88,3 +92,69 @@ export const Home = ({ children, ...props }: XStackProps) => { ) } + +export const Profile = ( + { children, ...props }: XStackProps //@todo another use case for a generated type for our route names +) => { + const isPwa = usePwa() + const pathname = usePathname() + const identifier = pathname.split('/').at(-1) + const identifierType = pathname.split('/').at(-2) === 'profile' ? 'sendid' : 'tag' + const { profile, isLoading } = useUser() + const { data: otherUserProfile } = useProfileLookup(identifierType, identifier?.toString() || '') + + const { direction } = useScrollDirection() + + const isVisible = Boolean(otherUserProfile) && profile?.send_id !== otherUserProfile?.sendid + + return ( + <> + {children} + + {!isLoading && isVisible && direction !== 'down' && ( + + + + + + + + + )} + + + ) +} + +export const MobileButtonRowLayout = { + Home: Home, + Profile: Profile, +} diff --git a/packages/app/features/profile/ProfileButtons.tsx b/packages/app/features/profile/ProfileButtons.tsx new file mode 100644 index 000000000..ed249781d --- /dev/null +++ b/packages/app/features/profile/ProfileButtons.tsx @@ -0,0 +1,31 @@ +import { LinkableButton, XStack } from '@my/ui' +import { IconArrowRight } from 'app/components/icons' + +export const SendButton = ({ + identifier, + idType, +}: { identifier: string | number; idType: string }) => ( + + + + SEND + + + + + + +) diff --git a/packages/app/features/profile/__snapshots__/screen.test.tsx.snap b/packages/app/features/profile/__snapshots__/screen.test.tsx.snap index b328c5056..9cb676ce1 100644 --- a/packages/app/features/profile/__snapshots__/screen.test.tsx.snap +++ b/packages/app/features/profile/__snapshots__/screen.test.tsx.snap @@ -18,9 +18,7 @@ exports[`ProfileScreen: ProfileScreen 1`] = ` } } > - - + @@ -44,8 +52,7 @@ exports[`ProfileScreen: ProfileScreen 1`] = ` "alignItems": "center", "flexDirection": "column", "gap": 24, - "justifyContent": "space-between", - "marginBottom": 40, + "justifyContent": "center", } } > @@ -53,170 +60,91 @@ exports[`ProfileScreen: ProfileScreen 1`] = ` style={ { "alignItems": "center", + "borderBottomLeftRadius": 9, + "borderBottomRightRadius": 9, + "borderTopLeftRadius": 9, + "borderTopRightRadius": 9, "flexDirection": "column", - "gap": 24, + "gap": 7, + "height": 84, "justifyContent": "center", + "marginLeft": "auto", + "marginRight": "auto", + "maxHeight": 84, + "maxWidth": 84, + "minHeight": 84, + "minWidth": 84, + "overflow": "hidden", + "position": "relative", + "width": 84, } } + testID="avatar" > - - - - - - ?? - - + testID="avatarImage" + /> - Mabel Bechtelar - - - /pip_test44677 - - - Doctissimae poster est quibus solut quae concuriosum quod, disputatur sit voluptate ea interror pugnantium est conspecta. + ?? @@ -224,388 +152,414 @@ exports[`ProfileScreen: ProfileScreen 1`] = ` style={ { "alignItems": "center", - "display": "none", + "flexDirection": "column", + } + } + > + + Mabel Bechtelar + + + /pip_test44677 + + + Doctissimae poster est quibus solut quae concuriosum quod, disputatur sit voluptate ea interror pugnantium est conspecta. + + + + + - /SEND + SEND + + + + + - + + } + /> + - - + + - May 19, 2024 - - - + - - - You - Sent - - + - 10,000 - - + 10,000 + + - 12:00 AM - - + } + suppressHighlighting={true} + > + 12:00 AM + - + - - - - - - - - - - - /SEND - + style={ + { + "opacity": 0, + "transform": [ + { + "scale": 0.9, + }, + ], + } + } + /> + diff --git a/packages/app/features/profile/screen.test.tsx b/packages/app/features/profile/screen.test.tsx index b83c27e98..3476d5d7f 100644 --- a/packages/app/features/profile/screen.test.tsx +++ b/packages/app/features/profile/screen.test.tsx @@ -3,7 +3,6 @@ import { ProfileScreen } from './screen' import { TamaguiProvider, config } from '@my/ui' import { render, screen, act, waitFor } from '@testing-library/react-native' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { useProfileScreenParams } from 'app/routers/params' const queryClient = new QueryClient() const TAG_NAME = 'pip_test44677' @@ -133,8 +132,6 @@ test('ProfileScreen', async () => { expect(image.props.source).toStrictEqual({ uri: PROFILE.avatar_url, }) - const button1 = screen.getByText('/SEND') - expect(button1).toBeOnTheScreen() const activity = screen.getByTestId('activityTest') expect(activity).toBeOnTheScreen() diff --git a/packages/app/features/profile/screen.tsx b/packages/app/features/profile/screen.tsx index 0bf5fe8ad..5550266c3 100644 --- a/packages/app/features/profile/screen.tsx +++ b/packages/app/features/profile/screen.tsx @@ -4,11 +4,10 @@ import { H1, H2, isWeb, - LinearGradient, Paragraph, - ScrollView, Separator, Spinner, + Stack, Text, useMedia, XStack, @@ -16,15 +15,13 @@ import { } from '@my/ui' import { useProfileLookup } from 'app/utils/useProfileLookup' import { useUser } from 'app/utils/useUser' -import { useRouter } from 'solito/router' -import { createParam } from 'solito' import { AvatarProfile } from './AvatarProfile' -// import { IconDots } from 'app/components/icons' import { useInterUserActivityFeed } from './utils/useInterUserActivityFeed' import type { Activity } from 'app/utils/zod/activity' import { amountFromActivity } from 'app/utils/activity' import { Fragment } from 'react' import { useProfileScreenParams } from 'app/routers/params' +import { SendButton } from './ProfileButtons' interface ProfileScreenProps { sendid?: number | null @@ -39,7 +36,6 @@ export function ProfileScreen({ sendid: propSendid }: ProfileScreenProps) { error, } = useProfileLookup('sendid', otherUserId?.toString() || '') const { user, profile: currentUserProfile } = useUser() - const router = useRouter() const media = useMedia() const { @@ -62,17 +58,17 @@ export function ProfileScreen({ sendid: propSendid }: ProfileScreenProps) { <> {error && {error.message}} - {isLoading && } + {isLoading && ( + + + + )} {otherUserProfile ? ( - + - {otherUserProfile && user?.id !== otherUserProfile?.id ? ( + {Boolean(otherUserProfile) && user?.id !== otherUserProfile?.id ? ( - - - {/* */} + ) : null} @@ -219,41 +197,7 @@ export function ProfileScreen({ sendid: propSendid }: ProfileScreenProps) { - - {otherUserProfile && user?.id !== otherUserProfile?.id ? ( - <> - - - - - - ) : null} + ) : null}