Merge pull request #614 from us3r-network/F-reconstructProfile-bufan

fav page
degencast · Mar 14, 2024 · add21fa · add21fa
2 parents 6c8c665 + 4b9a0e3
commit add21fa
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 57 deletions.
diff --git a/apps/u3/src/components/layout/LoginButtonV2.tsx b/apps/u3/src/components/layout/LoginButtonV2.tsx
@@ -123,7 +123,7 @@ export default function LoginButtonV2() {
             My Profile
           </DropdownMenuItemWarper>
 
-          <DropdownMenuItemWarper onClick={() => navigate('/u/fav')}>
+          <DropdownMenuItemWarper onClick={() => navigate('/fav/posts')}>
             <BookmarkIcon />
             My favorites
           </DropdownMenuItemWarper>

diff --git a/apps/u3/src/container/profile/Fav.tsx → apps/u3/src/container/fav/Fav.tsx b/apps/u3/src/container/profile/Fav.tsx → apps/u3/src/container/fav/Fav.tsx
@@ -1,13 +1,11 @@
-import { TabsContent, TabsList, TabsTrigger } from '@radix-ui/react-tabs';
 import { usePersonalFavors } from '@us3r-network/link';
 import { uniqBy } from 'lodash';
 import { useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import Loading from '@/components/common/loading/Loading';
 import { MainWrapper } from '@/components/layout/Index';
 import SaveExploreList from '@/components/profile/save/FavList';
 import SyncingBotSaves from '@/components/profile/save/SyncingBotSaves';
-import { Tabs } from '@/components/ui/tabs';
-import { cn } from '@/lib/utils';
 import { getDappLinkDataWithJsonValue } from '@/utils/dapp/dapp';
 import {
   getContentLinkDataWithJsonValue,
@@ -23,10 +21,18 @@ enum FavType {
   Post = 'post',
 }
 export default function Fav() {
+  const { pathname } = useLocation();
+
   const { isFetching, personalFavors } = usePersonalFavors();
   const [savedLinks, setSavedLinks] = useState([]);
-  const [type, setType] = useState(FavType.Post);
-  // console.log('personalFavors', personalFavors);
+  const type = useMemo(() => {
+    if (pathname.includes('dapps')) return FavType.Dapp;
+    if (pathname.includes('contents')) return FavType.Content;
+    if (pathname.includes('events')) return FavType.Event;
+    if (pathname.includes('posts')) return FavType.Post;
+    if (pathname.includes('links')) return FavType.Link;
+    return '';
+  }, [pathname]);
   const list = useMemo(
     () => [
       ...savedLinks.map((item) => {
@@ -86,57 +92,12 @@ export default function Fav() {
           <Loading />
         </div>
       ) : (
-        <Tabs
-          className="h-full items-start"
-          value={type}
-          onValueChange={(v) => {
-            setType(v as FavType);
+        <SaveExploreList
+          data={list.filter((item) => (type ? item.type === type : true))}
+          onItemClick={(item) => {
+            window.open(item.url, '_blank');
           }}
-        >
-          <TabsList className="flex gap-5 justify-start w-full bg-inherit">
-            <TabsTrigger
-              value={FavType.Post}
-              className={cn(
-                'border-[#1B1E23] border-b-2 px-0 pb-2 text-base rounded-none data-[state=active]:bg-inherit text-gray-400 data-[state=active]:text-white data-[state=active]:border-white'
-              )}
-            >
-              {`Posts`}
-            </TabsTrigger>
-            <TabsTrigger
-              value={FavType.Link}
-              className={cn(
-                'border-[#1B1E23] border-b-2 px-0 pb-2 text-base rounded-none data-[state=active]:bg-inherit text-gray-400 data-[state=active]:text-white data-[state=active]:border-white'
-              )}
-            >
-              {`Links`}
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent
-            id="profile-contacts-following-warper"
-            value={FavType.Post}
-            className="h-full"
-          >
-            {' '}
-            <SaveExploreList
-              data={list.filter((item) => item.type === FavType.Post)}
-              onItemClick={(item) => {
-                window.open(item.url, '_blank');
-              }}
-            />
-          </TabsContent>
-          <TabsContent
-            id="profile-contacts-follower-warper"
-            value={FavType.Link}
-            className="h-full"
-          >
-            <SaveExploreList
-              data={list.filter((item) => item.type === FavType.Link)}
-              onItemClick={(item) => {
-                window.open(item.url, '_blank');
-              }}
-            />
-          </TabsContent>
-        </Tabs>
+        />
       )}
     </MainWrapper>
   );

diff --git a/apps/u3/src/container/fav/FavLayout.tsx b/apps/u3/src/container/fav/FavLayout.tsx
@@ -0,0 +1,26 @@
+import { Outlet } from 'react-router-dom';
+import FavMenu from './FavMenu';
+import FavMobileHeader from './FavMobileHeader';
+
+export default function FavLayout() {
+  return (
+    <>
+      {/* Desktop */}
+      <div className="w-full h-full flex max-sm:hidden">
+        <div className="bg-[#1B1E23] w-[280px] h-full">
+          <FavMenu />
+        </div>
+        <div className="flex-1 h-full overflow-auto" id="profile-warper">
+          <Outlet />
+        </div>
+      </div>
+      {/* Mobile */}
+      <div className="w-full h-full flex-col sm:hidden">
+        <FavMobileHeader />
+        <div className="flex-1 h-full overflow-auto" id="profile-warper">
+          <Outlet />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/u3/src/container/fav/FavMenu.tsx b/apps/u3/src/container/fav/FavMenu.tsx
@@ -0,0 +1,57 @@
+import { ComponentPropsWithRef } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+import LoginButtonV2 from '@/components/layout/LoginButtonV2';
+import NavLinkItem from '@/components/layout/NavLinkItem';
+
+export default function FavMenu({
+  className,
+  ...props
+}: ComponentPropsWithRef<'div'>) {
+  const { user } = useParams();
+  const { pathname } = useLocation();
+  const pathSuffix = user ? `/${user}` : '';
+  return (
+    <div
+      className={cn(
+        `
+        w-full h-full flex flex-col`,
+        className
+      )}
+      {...props}
+    >
+      <div className="flex-1 w-full p-[20px] box-border overflow-auto">
+        <h1 className="text-[#FFF] text-[24px] font-medium leading-[20px] mb-[20px]">
+          {user || 'My'} Favorites
+        </h1>
+        <div className="flex-1 w-full flex flex-col gap-[5px]">
+          <NavLinkItem
+            href={`/fav/posts${pathSuffix}`}
+            active={pathname === `/fav/posts${pathSuffix}`}
+          >
+            Posts
+          </NavLinkItem>
+          <NavLinkItem
+            href={`/fav/links${pathSuffix}`}
+            active={pathname === `/fav/links${pathSuffix}`}
+          >
+            Links
+          </NavLinkItem>
+          {/* <NavLinkItem
+            href={`/fav/frame${pathSuffix}`}
+            active={pathname === `/fav/frame${pathSuffix}`}
+          >
+            Frame
+          </NavLinkItem>
+          <NavLinkItem
+            href={`/fav/apps${pathSuffix}`}
+            active={pathname === `/fav/apps${pathSuffix}`}
+          >
+            Apps
+          </NavLinkItem> */}
+        </div>
+      </div>
+      <LoginButtonV2 />
+    </div>
+  );
+}
diff --git a/apps/u3/src/container/fav/FavMobileHeader.tsx b/apps/u3/src/container/fav/FavMobileHeader.tsx
@@ -0,0 +1,13 @@
+/*
+ * @Author: shixuewen [email protected]
+ * @Date: 2022-12-29 18:44:14
+ * @LastEditors: shixuewen [email protected]
+ * @LastEditTime: 2023-02-28 23:32:58
+ * @Description: file description
+ */
+import { ComponentPropsWithRef } from 'react';
+import { MobileHeaderWrapper } from '@/components/layout/mobile/MobileHeaderCommon';
+
+export default function FavMobileHeader(props: ComponentPropsWithRef<'div'>) {
+  return <MobileHeaderWrapper {...props}>My Favorites</MobileHeaderWrapper>;
+}
diff --git a/apps/u3/src/route/routes.tsx b/apps/u3/src/route/routes.tsx
@@ -20,7 +20,6 @@ export enum RouteKey {
   profile = 'profile',
   profileByUser = 'profileByUser',
   contacts = 'contacts',
-  fav = 'fav',
   asset = 'asset',
   gallery = 'gallery',
   activity = 'activity',
@@ -77,6 +76,11 @@ export enum RouteKey {
   dappStore = 'dappStore',
   dapp = 'dapp',
   dappCreate = 'dappCreate',
+  // fav
+  fav = 'fav',
+  favPosts = 'favPosts',
+  favLinks = 'favLinks',
+  favApps = 'favApps',
   // notification
   notification = 'notification',
   notificationActivity = 'notificationActivity',
@@ -370,6 +374,34 @@ export const routes: CutomRouteObject[] = [
     element: loadContainerElement('Policy'),
     key: RouteKey.policy,
   },
+  // fav
+  {
+    path: '/fav',
+    element: loadContainerElement('fav/FavLayout'),
+    key: RouteKey.fav,
+    permissions: [RoutePermission.login],
+    title: 'Favorites',
+    children: [
+      {
+        path: 'posts',
+        element: loadContainerElement('fav/Fav'),
+        key: RouteKey.favPosts,
+        title: 'Favorite Posts',
+      },
+      {
+        path: 'links',
+        element: loadContainerElement('fav/Fav'),
+        key: RouteKey.favLinks,
+        title: 'Favorite Links',
+      },
+      {
+        path: 'apps',
+        element: loadContainerElement('fav/Apps'),
+        key: RouteKey.favApps,
+        title: 'Favorite Apps',
+      },
+    ],
+  },
   // notification
   {
     path: '/notification',