Skip to content

Commit

Permalink
Merge pull request #620 from us3r-network/F-reconstructProfile-bufan
Browse files Browse the repository at this point in the history 
F-reconstructProfile-bufan
  • Loading branch information
@sin-bufan
sin-bufan committed Mar 15, 2024
2 parents f3ee877 + 2bed590 commit bafb627
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 122 deletions.
5 changes: 3 additions & 2 deletions apps/u3/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,17 @@
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.7",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-hover-card": "^1.0.7",
"@rainbow-me/rainbowkit": "^2.0.0",
"@react-spring/web": "^9.6.1",
"@reduxjs/toolkit": "^1.8.3",
Expand Down
190 changes: 77 additions & 113 deletions apps/u3/src/components/layout/LoginButtonV2Mobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,11 @@ import React, { ComponentPropsWithRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import useLogin from '../../hooks/shared/useLogin';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from '../ui/dropdown-menu';
Drawer,
DrawerContent,
DrawerPortal,
DrawerTrigger,
} from '../ui/drawer';
import { cn } from '@/lib/utils';
import { LogoutIcon2 } from '../common/icons/LogoutIcon';
import SocialAccountIcon from '../common/icons/SocialAccountIcon';
Expand All @@ -29,6 +25,11 @@ import {
LensAccount,
} from '../profile/info/PlatformAccounts';
import LoginIcon from './nav-icons/LoginIcon';
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '../ui/collapsible';

const CONTACT_LINKS = [
{
Expand Down Expand Up @@ -69,7 +70,6 @@ export default function LoginButtonV2Mobile() {
<ButtonWrapper onClick={login}>
<div className="flex items-center gap-4">
<LoginIcon />
<span className="max-sm:hidden">Login</span>
</div>
</ButtonWrapper>
);
Expand All @@ -86,8 +86,8 @@ export default function LoginButtonV2Mobile() {
setOpenLogoutConfirm(false);
}}
/>
<DropdownMenu open={openMenu} onOpenChange={setOpenMenu}>
<DropdownMenuTrigger
<Drawer open={openMenu} onOpenChange={setOpenMenu}>
<DrawerTrigger
className="
focus:outline-none focus:border-none
active:outline-none active:border-none
Expand All @@ -99,84 +99,72 @@ export default function LoginButtonV2Mobile() {
}}
>
<div className="flex items-center gap-4">
<UserAvatar style={{ width: '24px', height: '24px' }} />
<UserName className="max-sm:hidden" />
<UserAvatar style={{ width: '32px', height: '32px' }} />
</div>
</ButtonWrapper>
</DropdownMenuTrigger>
<DropdownMenuContent
</DrawerTrigger>
<DrawerContent
className={cn(
'inline-flex w-[280px] box-border p-[20px] flex-col items-start gap-[20px] rounded-[20px] border-[1px] border-solid border-[#39424C] bg-[#14171A]'
'inline-flex w-full box-border p-[20px] flex-col items-start gap-4 rounded-[20px] border-[1px] border-solid border-[#39424C] bg-[#14171A]'
)}
side="top"
align="center"
sideOffset={10}
>
<DropdownMenuItemWarper onClick={() => navigate('/u')}>
<ItemWarper onClick={() => navigate('/u')}>
<UserAvatar
className="size-4 flex-shrink-0"
style={{ width: '20px', height: '20px' }}
/>
My Profile
</DropdownMenuItemWarper>

<DropdownMenuSub>
<DropdownMenuSubTriggerWarper>
<SocialAccountIcon />
Social Accounts
</DropdownMenuSubTriggerWarper>
<DropdownMenuPortal>
<DropdownMenuSubContent
className={cn(
'inline-flex w-[280px] box-border p-[20px] flex-col items-start gap-[20px] rounded-[20px] border-[1px] border-solid border-[#39424C] bg-[#14171A]'
)}
sideOffset={30}
</ItemWarper>
<Collapsible className="w-full">
<CollapsibleTrigger asChild className="w-full">
<ItemWarper>
<SocialAccountIcon />
Social Accounts
</ItemWarper>
</CollapsibleTrigger>
<CollapsibleContent className="w-full px-4 gap-2">
<ItemWarper
onClick={() => {
setOpenMenu(false);
}}
>
<FarcasterAccount />
</ItemWarper>
<ItemWarper
onClick={() => {
setOpenMenu(false);
}}
>
<DropdownMenuItemWarper>
<FarcasterAccount />
</DropdownMenuItemWarper>
<DropdownMenuItemWarper>
<LensAccount />
</DropdownMenuItemWarper>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<LensAccount />
</ItemWarper>
</CollapsibleContent>
</Collapsible>

<DropdownMenuItemWarper disabled>
<ItemWarper>
<EmailIcon />
Subscribe
</DropdownMenuItemWarper>

<DropdownMenuSub>
<DropdownMenuSubTriggerWarper>
<ContactUsIcon />
Contact us
</DropdownMenuSubTriggerWarper>
<DropdownMenuPortal>
<DropdownMenuSubContent
className={cn(
'inline-flex w-[280px] box-border p-[20px] flex-col items-start gap-[20px] rounded-[20px] border-[1px] border-solid border-[#39424C] bg-[#14171A]'
)}
sideOffset={30}
>
{CONTACT_LINKS.map((link) => (
<DropdownMenuItemWarper
key={link.link}
onClick={() => window.open(link.link, '_blank')}
>
<img
className="size-4"
src={link.iconUrl}
alt={link.name}
/>
<span>{link.name}</span>
</DropdownMenuItemWarper>
))}
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</ItemWarper>

<DropdownMenuItemWarper
<Collapsible className="w-full">
<CollapsibleTrigger className="w-full">
<ItemWarper>
<ContactUsIcon />
Contact us
</ItemWarper>
</CollapsibleTrigger>
<CollapsibleContent className="w-full px-4 gap-2">
{CONTACT_LINKS.map((link) => (
<ItemWarper
key={link.link}
onClick={() => window.open(link.link, '_blank')}
>
<img className="size-4" src={link.iconUrl} alt={link.name} />
<span>{link.name}</span>
</ItemWarper>
))}
</CollapsibleContent>
</Collapsible>
<ItemWarper
onClick={(e) => {
e.preventDefault();
setOpenLogoutConfirm(true);
Expand All @@ -185,9 +173,9 @@ export default function LoginButtonV2Mobile() {
>
<LogoutIcon2 />
Logout
</DropdownMenuItemWarper>
</DropdownMenuContent>
</DropdownMenu>
</ItemWarper>
</DrawerContent>
</Drawer>
</>
);
}
Expand All @@ -207,40 +195,16 @@ function ButtonWrapper({ className, ...props }: ComponentPropsWithRef<'div'>) {
);
}

const DropdownMenuItemWarper = React.forwardRef<
React.ElementRef<typeof DropdownMenuItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuItem>
// eslint-disable-next-line react/prop-types
>(({ className, ...props }, ref) => (
<DropdownMenuItem
ref={ref}
className={cn(
`w-full p-[10px] box-border select-none rounded-[10px] leading-none no-underline outline-none transition-colors
text-[#718096] text-[16px] font-medium
flex gap-[10px] items-center`,
`hover:bg-[#20262F]`,
'max-sm:text-[14px]',
className
)}
{...props}
/>
));

const DropdownMenuSubTriggerWarper = React.forwardRef<
React.ElementRef<typeof DropdownMenuSubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuSubTrigger>
// eslint-disable-next-line react/prop-types
>(({ className, ...props }, ref) => (
<DropdownMenuSubTrigger
ref={ref}
className={cn(
`w-full p-[10px] box-border select-none rounded-[10px] leading-none no-underline outline-none transition-colors
function ItemWarper({ className, ...props }: ComponentPropsWithRef<'div'>) {
return (
<div
className={cn(
`w-full p-[10px] box-border select-none rounded-[10px] leading-none no-underline outline-none transition-colors
text-[#718096] text-[16px] font-medium
flex gap-[10px] items-center`,
`hover:bg-[#20262F]`,
'max-sm:text-[14px]',
className
)}
{...props}
/>
));
className
)}
{...props}
/>
);
}
4 changes: 2 additions & 2 deletions apps/u3/src/components/profile/save/FavListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function FavListLinkItem({ data, ...props }: FavListItemProps) {

export function FavListPostItem({ data, ...props }: FavListItemProps) {
const navigate = useNavigate();
console.log('FavListPostItem', JSON.parse(data.data || ''));
// console.log('FavListPostItem', JSON.parse(data.data || ''));
const { openFarcasterQR } = useFarcasterCtx();
const [cast, setCast] = useState<FarCast>();
const [farcasterUserDataObj, setFarcasterUserDataObj] = useState({});
Expand All @@ -49,7 +49,7 @@ export function FavListPostItem({ data, ...props }: FavListItemProps) {
useEffect(() => {
if (castHex)
getFarcasterCastInfo(castHex, {}).then((res) => {
console.log('getFarcasterCastInfo', res);
// console.log('getFarcasterCastInfo', res);
if (res.data.code !== 0) {
throw new Error(res.data.msg);
}
Expand Down
11 changes: 11 additions & 0 deletions apps/u3/src/components/ui/collapsible.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
'use client';

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';

const Collapsible = CollapsiblePrimitive.Root;

const { CollapsibleTrigger } = CollapsiblePrimitive;

const { CollapsibleContent } = CollapsiblePrimitive;

export { Collapsible, CollapsibleTrigger, CollapsibleContent };
10 changes: 5 additions & 5 deletions apps/u3/src/container/fav/Fav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,9 @@ export default function Fav() {
if (pathname.includes('links')) return FavType.Link;
return '';
}, [pathname]);
const list = useMemo(
() => [
const list = useMemo(() => {
// console.log('personalFavors', personalFavors, savedLinks);
return [
...savedLinks.map((item) => {
const createAt = item.createAt || new Date().getTime();
return { ...item, createAt };
Expand Down Expand Up @@ -76,9 +77,8 @@ export default function Fav() {
}),
'id'
),
],
[personalFavors, savedLinks]
);
];
}, [personalFavors, savedLinks]);
return (
<MainWrapper className="flex flex-col gap-4">
<SyncingBotSaves
Expand Down

0 comments on commit bafb627

Please sign in to comment.