feat: Community links modal UI and routing

degencast · Feb 23, 2024 · c186d29 · c186d29
1 parent 7c34e1e
commit c186d29
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 60 deletions.
diff --git a/apps/u3/src/components/news/links/LinkModal.tsx b/apps/u3/src/components/news/links/LinkModal.tsx
@@ -8,10 +8,17 @@ export default function LinkModal({
   show,
   closeModal,
   data,
+  isV2Layout,
+  castClickAction,
 }: {
   show: boolean;
   closeModal: () => void;
   data: LinkListItem | null;
+  isV2Layout?: boolean;
+  castClickAction?: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    castHex: string
+  ) => void;
 }) {
   return (
     <ModalContainer open={show} closeModal={closeModal}>
@@ -21,7 +28,13 @@ export default function LinkModal({
           'max-sm:w-[100vw] max-sm:p-[0px] max-sm:pt-[30px]'
         )}
       >
-        {data && <LinkPreview data={data} />}
+        {data && (
+          <LinkPreview
+            data={data}
+            isV2Layout={isV2Layout}
+            castClickAction={castClickAction}
+          />
+        )}
         <ModalCloseBtn
           className={cn(
             'absolute top-[20px] right-[20px]',

diff --git a/apps/u3/src/components/news/links/LinkPost.tsx b/apps/u3/src/components/news/links/LinkPost.tsx
@@ -13,7 +13,18 @@ import { useGlobalModalsCtx } from 'src/contexts/shared/GlobalModalsCtx';
 import IconSend from 'src/components/common/icons/IconSend';
 import { ButtonPrimaryLine } from '../../common/button/ButtonBase';
 
-export default function LinkPost({ url }: { url: string }) {
+export default function LinkPost({
+  url,
+  isV2Layout,
+  castClickAction,
+}: {
+  url: string;
+  isV2Layout?: boolean;
+  castClickAction?: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    castHex: string
+  ) => void;
+}) {
   const {
     firstLoading,
     moreLoading,
@@ -70,6 +81,8 @@ export default function LinkPost({ url }: { url: string }) {
                           simpleLayout
                           openFarcasterQR={openFarcasterQR}
                           farcasterUserData={farcasterUserData}
+                          isV2Layout={isV2Layout}
+                          castClickAction={castClickAction}
                         />
                       </ItemWraper>
                     );

diff --git a/apps/u3/src/components/news/links/LinkPreview.tsx b/apps/u3/src/components/news/links/LinkPreview.tsx
@@ -21,8 +21,18 @@ import { cn } from '@/lib/utils';
 
 export type LinkPreviewProps = StyledComponentPropsWithRef<'div'> & {
   data?: LinkListItem;
+  isV2Layout?: boolean;
+  castClickAction?: (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    castHex: string
+  ) => void;
 };
-export default function LinkPreview({ data, ...otherProps }: LinkPreviewProps) {
+export default function LinkPreview({
+  data,
+  isV2Layout,
+  castClickAction,
+  ...otherProps
+}: LinkPreviewProps) {
   // const navigate = useNavigate();
   const { ref, isFullscreen, onToggle } = useFullScreen();
   const [linkParam, setLinkParam] = useState(null);
@@ -71,7 +81,11 @@ export default function LinkPreview({ data, ...otherProps }: LinkPreviewProps) {
               'max-sm:hidden'
             )}
           >
-            <LinkPost url={data.url} />
+            <LinkPost
+              url={data.url}
+              isV2Layout={isV2Layout}
+              castClickAction={castClickAction}
+            />
           </div>
         </div>
       </PreviewBox>

diff --git a/apps/u3/src/components/social/PostCard.tsx b/apps/u3/src/components/social/PostCard.tsx
@@ -232,7 +232,7 @@ export function PostCardMainWrapper({
   return (
     <div
       className={cn(
-        'flex-1 p-[10px] box-border flex flex-col gap-[10px] ',
+        'w-full flex-1 p-[10px] box-border flex flex-col gap-[10px] ',
         className
       )}
       {...props}
@@ -352,9 +352,11 @@ export function PostCardUserInfoV2({
           src={data.avatar}
           className="w-[20px] h-[20px] rounded-full object-cover"
         />
-        <div className="text-[#FFF] text-[14px] font-medium">{data.name}</div>
+        <div className="text-[#FFF] text-[14px] font-medium  line-clamp-1">
+          {data.name}
+        </div>
       </TooltipProfileNavigateLinkWrapper>
-      <div className="text-[#718096] text-[12px] font-normal">
+      <div className="text-[#718096] text-[12px] font-normal line-clamp-1">
         @{data.handle} · {dayjs(data.createdAt).fromNow()}
       </div>
     </div>

diff --git a/apps/u3/src/components/social/farcaster/FCast.tsx b/apps/u3/src/components/social/farcaster/FCast.tsx
@@ -223,24 +223,27 @@ export default function FCast({
         }}
         {...wrapperProps}
       >
-        <div className="flex w-[50px] p-[10px] box-border flex-col items-center gap-[10px] self-stretch">
-          <FCastSuperLike
-            openFarcasterQR={openFarcasterQR}
-            cast={updatedCast}
-            linkId={linkId}
-            link={formatLinkParam}
-            onSaveSuccess={(newLinkId) => {
-              setLinkId(newLinkId);
-            }}
-            onLikeSuccess={() => {
-              changeCastLikesWithCurrFid(true);
-            }}
-            onRecastSuccess={() => {
-              changeCastRecastsWithCurrFid(true);
-            }}
-          />
-          <FCastTipDetail cast={cast} isV2Layout />
-        </div>
+        {!simpleLayout && (
+          <div className="flex w-[50px] p-[10px] box-border flex-col items-center gap-[10px] self-stretch">
+            <FCastSuperLike
+              openFarcasterQR={openFarcasterQR}
+              cast={updatedCast}
+              linkId={linkId}
+              link={formatLinkParam}
+              onSaveSuccess={(newLinkId) => {
+                setLinkId(newLinkId);
+              }}
+              onLikeSuccess={() => {
+                changeCastLikesWithCurrFid(true);
+              }}
+              onRecastSuccess={() => {
+                changeCastRecastsWithCurrFid(true);
+              }}
+            />
+            <FCastTipDetail cast={cast} isV2Layout />
+          </div>
+        )}
+
         <PostCardMainWrapper>
           <div className="flex items-center gap-[5px]">
             <PostCardUserInfoV2
@@ -327,37 +330,42 @@ export default function FCast({
                 e.stopPropagation();
               }}
             >
-              <PostCardActionsWrapper
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-              >
-                <SaveButton
-                  linkId={linkId}
-                  link={linkParam}
-                  onSuccessfullyFavor={(isFavored) => {
-                    if (!linkId && linkParam?.url && linkParam?.type) {
-                      getLinkId(linkParam).then((id) => {
-                        if (id) setLinkId(id);
-                        else setLinkId('');
-                      });
-                    }
-                  }}
-                />
-                <PostShareMenuBtn
-                  offialUrl={getOfficialCastUrl(
-                    userData.userName,
-                    Buffer.from(castId.hash).toString('hex')
-                  )}
-                  shareLink={getSocialDetailShareUrlWithFarcaster(
-                    Buffer.from(castId.hash).toString('hex')
-                  )}
-                  shareLinkDefaultText={SOCIAL_SHARE_TITLE}
-                  shareLinkEmbedTitle={cast.text}
-                  popoverConfig={{ placement: 'top end', offset: 0 }}
-                />
-              </PostCardActionsWrapper>
-              <div className="w-[1px] h-[16px] bg-[#39424C]" />
+              {!simpleLayout && (
+                <>
+                  <PostCardActionsWrapper
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                  >
+                    <SaveButton
+                      linkId={linkId}
+                      link={linkParam}
+                      onSuccessfullyFavor={(isFavored) => {
+                        if (!linkId && linkParam?.url && linkParam?.type) {
+                          getLinkId(linkParam).then((id) => {
+                            if (id) setLinkId(id);
+                            else setLinkId('');
+                          });
+                        }
+                      }}
+                    />
+                    <PostShareMenuBtn
+                      offialUrl={getOfficialCastUrl(
+                        userData.userName,
+                        Buffer.from(castId.hash).toString('hex')
+                      )}
+                      shareLink={getSocialDetailShareUrlWithFarcaster(
+                        Buffer.from(castId.hash).toString('hex')
+                      )}
+                      shareLinkDefaultText={SOCIAL_SHARE_TITLE}
+                      shareLinkEmbedTitle={cast.text}
+                      popoverConfig={{ placement: 'top end', offset: 0 }}
+                    />
+                  </PostCardActionsWrapper>
+                  <div className="w-[1px] h-[16px] bg-[#39424C]" />
+                </>
+              )}
+
               <FCastLike
                 openFarcasterQR={openFarcasterQR}
                 cast={updatedCast}

diff --git a/apps/u3/src/components/social/farcaster/FCastTips.tsx b/apps/u3/src/components/social/farcaster/FCastTips.tsx
@@ -120,7 +120,7 @@ export default function FCastTips({
   return (
     <>
       <div
-        className="flex items-center gap-2 font-[12px] cursor-pointer"
+        className="flex items-center gap-2 font-[12px] cursor-pointer whitespace-nowrap"
         onClick={(e) => {
           e.stopPropagation();
           const replyDirect =

diff --git a/apps/u3/src/container/community/PostsFcMentionedLinks.tsx b/apps/u3/src/container/community/PostsFcMentionedLinks.tsx
@@ -1,12 +1,13 @@
 import { useEffect, useCallback, useMemo, useState } from 'react';
-import { useOutletContext } from 'react-router-dom';
+import { useNavigate, useOutletContext } from 'react-router-dom';
 import useFeedLinks from '@/hooks/news/useFeedLinks';
 import useLinksSearchParams from '@/hooks/news/useLinksSearchParams';
 import { useFarcasterCtx } from '@/contexts/social/FarcasterCtx';
 import LinkModal from '@/components/news/links/LinkModal';
 import CommunityLinks from '@/components/news/links/community/CommunityLinks';
 
 export default function PostsFcMentionedLinks() {
+  const navigate = useNavigate();
   const communityContext = useOutletContext<any>();
   // 可以在这个组件根据这个channelId查询，也可以在上层context里查询，数据从communityContext里传递下来
   // 可参考MembersLayout 里的 TotalMembers 组件
@@ -45,8 +46,10 @@ export default function PostsFcMentionedLinks() {
 
   return (
     <div className="w-full h-full overflow-auto">
-      <div className="text-[#fff] text-[16px] mt-[20px] text-center">
-        <h3>Mentioned Links</h3>
+      <div className="mt-[20px]">
+        <h3 className="text-[#718096] text-[14px] font-medium px-[20px] box-border">
+          🔗 Mentioned Links
+        </h3>
         {links && links.length > 0 && (
           <CommunityLinks
             loading={loading}
@@ -65,6 +68,11 @@ export default function PostsFcMentionedLinks() {
             setSelectLink(null);
           }}
           data={selectLink}
+          isV2Layout
+          castClickAction={(e, castHex) => {
+            setSelectLink(null);
+            navigate(`/community/${channelId}/posts/fc/${castHex}`);
+          }}
         />
       </div>
     </div>