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

fix save page of profile

apps/u3/src/App.tsx

@@ -47,6 +47,10 @@ function App() {
     <Us3rAuthWithRainbowkitProvider
       projectId={WALLET_CONNECT_PROJECT_ID}
       appName="U3"
+      authOpts={{
+        resources: ['ceramic://*'],
+        expirationTime: '',
+      }}
     >
       <ProfileStateProvider ceramicHost={CERAMIC_HOST}>
         <LinkStateProvider ceramicHost={CERAMIC_HOST}>

apps/u3/src/components/profile/save/FavList.tsx

@@ -0,0 +1,46 @@
+import {
+  FavListItemData,
+  FavListLinkItem,
+  FavListPostItem,
+} from './FavListItem';
+
+export type FavListProps = {
+  data: FavListItemData[];
+  onItemClick?: (item: FavListItemData) => void;
+};
+
+export default function FavList({ data, onItemClick }: FavListProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="w-full text-center py-4 text-gray-400">
+        Nothing to see here！ Explore and favorite what you like！
+      </div>
+    );
+  }
+  return (
+    <div className="w-full flex flex-col divide-y">
+      {data.map((item) => {
+        switch (item.type) {
+          case 'link':
+            return (
+              <FavListLinkItem
+                key={item.id}
+                data={item}
+                onClick={() => onItemClick && onItemClick(item)}
+              />
+            );
+          case 'post':
+            return (
+              <FavListPostItem
+                key={item.id}
+                data={item}
+                onClick={() => onItemClick && onItemClick(item)}
+              />
+            );
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}

apps/u3/src/components/profile/save/FavListItem.tsx

@@ -0,0 +1,103 @@
+import styled, { StyledComponentPropsWithRef } from 'styled-components';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { defaultFormatFromNow } from '../../../utils/shared/time';
+import LinkBox from '../../news/contents/LinkBox';
+import FCast from '@/components/social/farcaster/FCast';
+import { useFarcasterCtx } from '@/contexts/social/FarcasterCtx';
+import { getFarcasterCastInfo } from '@/services/social/api/farcaster';
+import { FarCast } from '@/services/social/types';
+import { userDataObjFromArr } from '@/utils/social/farcaster/user-data';
+import { getExploreFcPostDetailPath } from '@/route/path';
+
+export type FavListItemData = {
+  id: string;
+  url?: string;
+  title?: string;
+  type: string;
+  data: string;
+  logo?: string;
+  createAt?: string;
+};
+
+export type FavListItemProps = StyledComponentPropsWithRef<'div'> & {
+  data: FavListItemData;
+};
+
+export function FavListLinkItem({ data, ...props }: FavListItemProps) {
+  return (
+    <div className="flex flex-col gap-4 pt-4 pb-4" {...props}>
+      <IconLink text={data.url} logo={data?.logo} className="iconLink" />
+      <p className="flex-[1] font-medium text-[16px] leading-[20px] text-white line-clamp-4 max-sm:line-clamp-1">
+        {data.title || data.url}
+      </p>
+      {!!data?.createAt && (
+        <p className="text-white">{defaultFormatFromNow(data.createAt)}</p>
+      )}
+    </div>
+  );
+}
+
+export function FavListPostItem({ data, ...props }: FavListItemProps) {
+  const navigate = useNavigate();
+  console.log('FavListPostItem', JSON.parse(data.data || ''));
+  const { openFarcasterQR } = useFarcasterCtx();
+  const [cast, setCast] = useState<FarCast>();
+  const [farcasterUserDataObj, setFarcasterUserDataObj] = useState({});
+  const castData = JSON.parse(data.data);
+  const castHex = Buffer.from(castData.hash).toString('hex');
+  useEffect(() => {
+    if (castHex)
+      getFarcasterCastInfo(castHex, {}).then((res) => {
+        console.log('getFarcasterCastInfo', res);
+        if (res.data.code !== 0) {
+          throw new Error(res.data.msg);
+        }
+        const { farcasterUserData: farcasterUserDataTemp, cast: castTemp } =
+          res.data.data;
+        setCast(castTemp);
+        setFarcasterUserDataObj(userDataObjFromArr(farcasterUserDataTemp));
+      });
+  }, [castHex]);
+  if (cast) {
+    return (
+      <FCast
+        {...props}
+        cast={cast}
+        disableRenderUrl
+        simpleLayout
+        openFarcasterQR={openFarcasterQR}
+        farcasterUserData={{}}
+        farcasterUserDataObj={farcasterUserDataObj}
+        isV2Layout
+        castClickAction={() => {
+          console.log('castClickAction');
+          navigate(getExploreFcPostDetailPath(castHex));
+        }}
+      />
+    );
+  }
+  return null;
+}
+
+const IconLink = styled(LinkBox)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  box-sizing: border-box;
+  gap: 6px;
+  background: #14171a;
+  border-radius: 100px;
+
+  img {
+    width: 20px;
+    height: 20px;
+  }
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    color: #718096;
+  }
+`;

apps/u3/src/components/profile/save/SyncingBotSaves.tsx

@@ -29,8 +29,8 @@ export default function SyncingBotSaves({
           title: text
             ? text.slice(0, 200)
             : 'Saved Farcaster Cast using U3 Bot',
-          type: 'link',
-          data: JSON.stringify(item),
+          type: 'post',
+          data: JSON.stringify({ hash: item.castHash, text }),
         };
       });
       setSaves(links);

apps/u3/src/components/shared/select/FeedsFilter.tsx

@@ -21,7 +21,7 @@ export default function FeedsFilter({
       }}
       defaultValue={defaultValue}
     >
-      <SelectTrigger className="w-[180px] border-none rounded-[10px] bg-[#1B1E23] text-[#FFF] text-[14px] font-medium outline-none focus:outline-none focus:border-none">
+      <SelectTrigger className="border-none rounded-[10px] bg-[#1B1E23] text-[#FFF] text-[14px] font-medium outline-none focus:outline-none focus:border-none space-x-2">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="20"

apps/u3/src/components/shared/select/PlatformFilter.tsx

@@ -21,7 +21,7 @@ export default function PlatformFilter({
       }}
       defaultValue={defaultValue}
     >
-      <SelectTrigger className="w-[180px] border-none rounded-[10px] bg-[#1B1E23] text-[#FFF] text-[14px] font-medium outline-none focus:outline-none focus:border-none">
+      <SelectTrigger className="border-none rounded-[10px] bg-[#1B1E23] text-[#FFF] text-[14px] font-medium outline-none focus:outline-none focus:border-none space-x-2">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="20"

apps/u3/src/components/social/PostCard.tsx

@@ -98,10 +98,11 @@ export default function PostCard({
     if (isDetail)
       setLinkParam({
         url: getOfficialPublicationUrl(id),
-        type: 'link',
+        type: 'post',
         title: data?.content.slice(0, 200), // todo: expand this limit at model
+        data,
       });
-  }, [id, isDetail]);
+  }, [id, isDetail, data?.content]);
   return (
     <PostCardWrapper {...wrapperProps} id={id}>
       <PostCardHeaderWrapper>

apps/u3/src/components/social/farcaster/FCast.tsx

@@ -162,15 +162,18 @@ export default function FCast({
 
   const [linkParam, setLinkParam] = useState(null);
   useEffect(() => {
+    if (!castId.hash || !cast) return;
+    if (!userData.userName) return;
     setLinkParam({
       url: getOfficialCastUrl(
         userData.userName,
         Buffer.from(castId.hash).toString('hex')
       ),
-      type: 'link',
+      type: 'post',
       title: cast.text.slice(0, 200), // todo: expand this limit at model
+      data: JSON.stringify(cast),
     });
-  }, [castId.hash, isDetail]);
+  }, [castId.hash, userData.userName, cast]);
 
   const [updatedCast, setUpdatedCast] = useState(cast);
   const changeCastLikesWithCurrFid = (liked: boolean) => {