Merge pull request #153 from us3r-network/F-channelTag-ttang

feat: channel tag

apps/u3/src/api/farcaster.ts

@@ -264,7 +264,7 @@ export function getFarcasterChannelFeeds({
 }
 
 export function getFarcasterChannelTrends(
-  limit = 5
+  limit = 500
 ): AxiosPromise<ApiResp<{ parent_url: string; count: string }[]>> {
   return axios({
     url: `${REACT_APP_API_SOCIAL_URL}/3r/farcaster/channel/trends`,

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

@@ -133,7 +133,7 @@ export const PostCardWrapper = styled.div<{ isDetail?: boolean }>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 15px;
   cursor: ${(props) => (props.isDetail ? 'initial' : 'pointer')};
   &:hover {
     background: ${(props) => (props.isDetail ? '#212228' : '#39424c')};

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

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import MobilePageHeader from '../common/mobile/MobilePageHeader';
 import { ArrowLeft } from '../icons/ArrowLeft';
+import { getChannelFormName } from '../../utils/social/getChannel';
 
 export enum FeedsType {
   FOLLOWING = 'following',
@@ -45,8 +46,15 @@ export default function SocialPageNav({
   );
 }
 
-export function SocialBackNav({ title = 'Post' }: { title?: string }) {
+export function SocialBackNav({
+  title = 'Post',
+  isChannel,
+}: {
+  title?: string;
+  isChannel?: boolean;
+}) {
   const navigate = useNavigate();
+  const channel = isChannel ? getChannelFormName(title) : null;
   return (
     <SocialNavWrapper>
       {!isMobile && (
@@ -64,7 +72,15 @@ export function SocialBackNav({ title = 'Post' }: { title?: string }) {
         >
           <ArrowLeft />
         </button>
-        <span>{title}</span>
+        <div className="channels">
+          {channel && (
+            <>
+              <span>#</span>
+              <img src={channel.image} alt="" />
+            </>
+          )}
+          <span>{title}</span>
+        </div>
       </SocialNavCenter>
       {!isMobile && <SocialNavRight />}
     </SocialNavWrapper>
@@ -159,15 +175,26 @@ const SocialNavCenter = styled.div`
     background: var(--neutral-100, #1a1e23);
     cursor: pointer;
   }
-  > span {
-    overflow: hidden;
-    color: #fff;
-    text-overflow: ellipsis;
-    font-family: Rubik;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
+  > div.channels {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    > span {
+      overflow: hidden;
+      color: #fff;
+      text-overflow: ellipsis;
+      font-family: Rubik;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
+  }
+  img {
+    width: 18px;
+    height: 18px;
+    object-fit: cover;
+    border-radius: 2px;
   }
 `;
 const SocialNavRight = styled.div`

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

@@ -0,0 +1,71 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+export default function ChannelItem({
+  data,
+}: {
+  data: {
+    name?: string;
+    channel_description?: string;
+    parent_url: string;
+    image: string;
+    channel_id: string;
+    count: string;
+  };
+}) {
+  return (
+    <ItemWrapper
+      to={`/social/channel/${encodeURIComponent(
+        data.name || data.channel_description
+      )}`}
+    >
+      <NameWrapper>
+        <span>#</span>
+        <img src={data.image} alt="" />
+        <NameText>{data.name || data.channel_description}</NameText>
+      </NameWrapper>
+      <HandleText>{`${data.count} posts today`}</HandleText>
+    </ItemWrapper>
+  );
+}
+
+const ItemWrapper = styled(Link)`
+  /* width: 100%; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  gap: 5px;
+  padding: 20px;
+  text-decoration: none;
+`;
+
+const NameWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  font-weight: 700;
+  > span {
+    color: #fff;
+  }
+  img {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    object-fit: cover;
+  }
+`;
+const NameText = styled.div`
+  font-size: 16px;
+  color: white;
+  font-style: normal;
+  font-weight: 700;
+`;
+const HandleText = styled.div`
+  font-size: 12px;
+  color: grey;
+  font-style: normal;
+  font-weight: 500;
+`;

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

@@ -121,6 +121,7 @@ export default function FCast({
         </PostCardShowMoreWrapper>
       )}
       <Embed embedImgs={[...embeds.imgs]} embedWebpages={embeds.webpages} />
+      {cast.parent_url && <FarcasterChannel url={cast.parent_url} />}
       <PostCardActionsWrapper
         onClick={(e) => {
           e.stopPropagation();
@@ -142,7 +143,6 @@ export default function FCast({
           farcasterUserData={farcasterUserData}
         />
       </PostCardActionsWrapper>
-      {cast.parent_url && <FarcasterChannel url={cast.parent_url} />}
     </PostCardWrapper>
   );
 }

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

@@ -37,10 +37,11 @@ const ChannelBox = styled.div`
     align-items: center;
     text-decoration: none;
     gap: 5px;
+    font-weight: 700;
     .channel-img {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      border-radius: 2px;
     }
     &:hover {
       text-decoration: underline;

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

@@ -1,123 +1,51 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { getFarcasterChannelTrends } from 'src/api/farcaster';
+import { useNavigate } from 'react-router-dom';
+import { useFarcasterCtx } from 'src/contexts/FarcasterCtx';
 import styled from 'styled-components';
-
-import FarcasterChannelData from '../../../constants/warpcast.json';
+import ChannelItem from './ChannelItem';
 
 export default function TrendChannel() {
-  const [trendChannel, setTrendChannel] = useState<
-    {
-      parent_url: string;
-      count: string;
-    }[]
-  >([]);
-  const loadTrendChannel = async () => {
-    const resp = await getFarcasterChannelTrends();
-    if (resp.data.code !== 0) {
-      console.error(resp.data.msg);
-      return;
-    }
-    setTrendChannel(resp.data.data);
-  };
-  useEffect(() => {
-    loadTrendChannel();
-  }, []);
-
-  const channels = useMemo(() => {
-    return FarcasterChannelData.map((c) => {
-      const trend = trendChannel.find((t) => t.parent_url === c.parent_url);
-      if (!trend) return null;
-      return {
-        ...trend,
-        ...c,
-      };
-    })
-      .filter((c) => c !== null)
-      .sort((a, b) => {
-        return Number(b.count) - Number(a.count);
-      });
-  }, [trendChannel]);
-
-  if (trendChannel.length === 0) {
+  const navigate = useNavigate();
+  const { channels } = useFarcasterCtx();
+  if (channels.length === 0) {
     return null;
   }
 
   return (
     <Wrapper>
-      <Title>Trending Channels</Title>
+      <Header>
+        <Title>Trends</Title>
+        <MoreButton
+          onClick={() => {
+            navigate(`/social/trends`);
+          }}
+        >
+          View All
+        </MoreButton>
+      </Header>
       <ChannelListWrapper>
-        {channels.map((item) => {
+        {channels.slice(0, 5).map((item) => {
           return <ChannelItem key={item.channel_id} data={item} />;
         })}
       </ChannelListWrapper>
     </Wrapper>
   );
 }
 
-function ChannelItem({
-  data,
-}: {
-  data: {
-    name?: string;
-    channel_description?: string;
-    parent_url: string;
-    image: string;
-    channel_id: string;
-    count: string;
-  };
-}) {
-  return (
-    <ItemWrapper
-      to={`/social/channel/${encodeURIComponent(
-        data.name || data.channel_description
-      )}`}
-    >
-      <img src={data.image} alt="" />
-      <NameWrapper>
-        <NameText>{data.name || data.channel_description}</NameText>
-        <HandleText>{`${data.count} posts today`}</HandleText>
-      </NameWrapper>
-    </ItemWrapper>
-  );
-}
-
-const ItemWrapper = styled(Link)`
-  /* width: 100%; */
+const Header = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-  padding: 20px;
-  text-decoration: none;
-  > img {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    object-fit: cover;
-  }
+  justify-content: space-between;
 `;
 
-const NameWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-const NameText = styled.div`
+const MoreButton = styled.button`
+  cursor: pointer;
+  color: #718096;
   font-size: 16px;
-  color: white;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 0;
-`;
-const HandleText = styled.div`
-  font-size: 12px;
-  color: grey;
-  font-style: normal;
   font-weight: 500;
-  line-height: 0;
+  border: none;
+  outline: none;
+  background: inherit;
 `;
 
 const Wrapper = styled.div`
@@ -146,7 +74,4 @@ const ChannelListWrapper = styled.div`
   border: 1px solid #718096;
   border-radius: 20px;
   background-color: #212228;
-  > :not(:first-child) {
-    border-top: 1px solid #718096;
-  }
 `;

apps/u3/src/container/SocialLayout.tsx

@@ -68,8 +68,11 @@ export default function Home() {
   ]);
 
   const titleElem = useMemo(() => {
+    if (location.pathname.includes('social/trends')) {
+      return <SocialBackNav title="Trends" />;
+    }
     if (location.pathname.includes('social/channel') && channelName) {
-      return <SocialBackNav title={channelName} />;
+      return <SocialBackNav title={channelName} isChannel />;
     }
     if (location.pathname.includes('post-detail')) {
       return <SocialBackNav />;