From a5b6765cf68169c91837a0b04d91561c87cf77f0 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Thu, 12 Oct 2023 11:24:39 +0800
Subject: [PATCH] feat: channel tag filter

---
 apps/u3/src/components/social/AddPostForm.tsx | 26 ++++----
 .../src/components/social/ChannelSelect.tsx   | 66 ++++++++++++-------
 .../src/components/social/SocialPageNav.tsx   |  4 +-
 apps/u3/src/utils/social/getChannel.ts        |  2 +-
 4 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/apps/u3/src/components/social/AddPostForm.tsx b/apps/u3/src/components/social/AddPostForm.tsx
index 6564ecec..72250361 100644
--- a/apps/u3/src/components/social/AddPostForm.tsx
+++ b/apps/u3/src/components/social/AddPostForm.tsx
@@ -44,6 +44,7 @@ import useLogin from '../../hooks/useLogin';
 import getAvatar from '../../utils/lens/getAvatar';
 import { Channel } from '../../services/types/farcaster';
 import ChannelSelect from './ChannelSelect';
+import { getChannelFromName } from '../../utils/social/getChannel';
 
 export default function AddPostForm({
   onSuccess,
@@ -141,6 +142,11 @@ export default function AddPostForm({
   const handleSubmitToFarcaster = useCallback(async () => {
     if (!text || !encryptedSigner) return;
     const currFid = getCurrFid();
+    let parentUrl;
+    if (channelValue !== 'Home') {
+      const ch = getChannelFromName(channelValue);
+      parentUrl = ch?.parent_url;
+    }
     try {
       const uploadedLinks = await uploadSelectedImages();
       // eslint-disable-next-line no-underscore-dangle
@@ -152,8 +158,7 @@ export default function AddPostForm({
             embedsDeprecated: [],
             mentions: [],
             mentionsPositions: [],
-            parentUrl:
-              channelValue === 'Home' ? undefined : channel?.parent_url,
+            parentUrl,
           },
           { fid: currFid, network: FARCASTER_NETWORK },
           encryptedSigner
@@ -330,15 +335,14 @@ export default function AddPostForm({
           <SendEmojiBtn disabled>
             <EmojiIcon />
           </SendEmojiBtn>
-          {channel && (
-            <ChannelSelect
-              channel={channel}
-              selectChannelName={channelValue}
-              setSelectChannelName={(v) => {
-                setChannelValue(v);
-              }}
-            />
-          )}
+
+          <ChannelSelect
+            channel={channel}
+            selectChannelName={channelValue}
+            setSelectChannelName={(v) => {
+              setChannelValue(v);
+            }}
+          />
           <Description
             hidden={
               !(
diff --git a/apps/u3/src/components/social/ChannelSelect.tsx b/apps/u3/src/components/social/ChannelSelect.tsx
index 05f488fb..eb78133d 100644
--- a/apps/u3/src/components/social/ChannelSelect.tsx
+++ b/apps/u3/src/components/social/ChannelSelect.tsx
@@ -10,7 +10,7 @@ import {
   SelectValue,
 } from 'react-aria-components';
 import ArrowDown from '../icons/ArrowDown';
-import ChannelHome from '../icons/ChannelHome';
+import { getChannel } from '../../utils/social/getChannel';
 
 export default function ChannelSelect({
   channel,
@@ -21,24 +21,28 @@ export default function ChannelSelect({
   selectChannelName: string;
   setSelectChannelName: (name: string) => void;
 }) {
-  // const [value, setValue] = useState('Home');
+  const [value, setValue] = useState('');
   const options = useMemo(() => {
     return [
       {
         name: 'Home',
-        image: '',
+        image: '/social/imgs/channel-home.png',
       },
-      {
-        name: channel.name || channel.channel_description,
-        image: channel.image,
-      },
-    ];
-  }, [channel]);
+      ...getChannel().map((c) => ({
+        name: c.name || c.channel_description,
+        image: c.image,
+      })),
+    ].filter((c) => {
+      return c.name.toLowerCase().includes(value.toLowerCase());
+    });
+  }, [channel, value]);
+
   return (
     <SelectStyled
       selectedKey={selectChannelName}
       onSelectionChange={(k) => {
         setSelectChannelName(k as string);
+        setValue('');
       }}
       aria-label="Select a channel"
     >
@@ -47,19 +51,22 @@ export default function ChannelSelect({
         <ArrowDown />
       </ButtonStyled>
       <PopoverStyled>
+        <input
+          type="text"
+          placeholder="search for trends"
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+        />
         <ListBox items={options}>
           {(item) => (
             <ItemStyled id={item.name} textValue={item.name}>
               <div className="item">
-                {(item.image && (
-                  <span>
-                    <img src={item.image} alt={item.name} />
-                  </span>
-                )) || (
-                  <span>
-                    <ChannelHome />
-                  </span>
-                )}
+                <span>#</span>
+                <span>
+                  <img src={item.image} alt={item.name} />
+                </span>
                 <span>{item.name}</span>
               </div>
             </ItemStyled>
@@ -78,7 +85,7 @@ const SelectStyled = styled(Select)`
   font-size: 16px;
   line-height: 24px;
   position: relative;
-  width: 100px;
+  width: 130px;
   > span {
     font-weight: 500;
     font-size: 16px;
@@ -92,7 +99,7 @@ const ButtonStyled = styled(Button)`
   cursor: pointer;
   border: none;
   padding: 5px;
-  width: 100px;
+  width: 130px;
   border-radius: 4px;
   height: 20px;
   display: inline-flex;
@@ -125,6 +132,7 @@ const ButtonStyled = styled(Button)`
       > img {
         width: 12px;
         height: 12px;
+        border-radius: 2px;
       }
     }
   }
@@ -133,9 +141,10 @@ const ButtonStyled = styled(Button)`
 const PopoverStyled = styled(Popover)`
   background: #1b1e23;
   border: none;
-  width: 100px;
+  width: 130px;
   border-radius: 10px;
-
+  overflow: scroll;
+  margin-top: 3px;
   &[data-placement='top'] {
     --origin: translateY(4px);
   }
@@ -163,6 +172,18 @@ const PopoverStyled = styled(Popover)`
       opacity: 1;
     }
   }
+
+  input {
+    background-color: inherit;
+    border: none;
+    outline: none;
+    font-size: 13px;
+    padding: 5px;
+    width: 100%;
+    box-sizing: border-box;
+    caret-color: #fff;
+    color: #fff;
+  }
 `;
 
 const ItemStyled = styled(Item)`
@@ -216,6 +237,7 @@ const ItemStyled = styled(Item)`
         width: 10px;
         height: 10px;
         margin: 1px;
+        border-radius: 2px;
       }
     }
   }
diff --git a/apps/u3/src/components/social/SocialPageNav.tsx b/apps/u3/src/components/social/SocialPageNav.tsx
index 75851ecc..5497c2f7 100644
--- a/apps/u3/src/components/social/SocialPageNav.tsx
+++ b/apps/u3/src/components/social/SocialPageNav.tsx
@@ -3,7 +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';
+import { getChannelFromName } from '../../utils/social/getChannel';
 
 export enum FeedsType {
   FOLLOWING = 'following',
@@ -54,7 +54,7 @@ export function SocialBackNav({
   isChannel?: boolean;
 }) {
   const navigate = useNavigate();
-  const channel = isChannel ? getChannelFormName(title) : null;
+  const channel = isChannel ? getChannelFromName(title) : null;
   return (
     <SocialNavWrapper>
       {!isMobile && (
diff --git a/apps/u3/src/utils/social/getChannel.ts b/apps/u3/src/utils/social/getChannel.ts
index 529b3092..5523a752 100644
--- a/apps/u3/src/utils/social/getChannel.ts
+++ b/apps/u3/src/utils/social/getChannel.ts
@@ -1,6 +1,6 @@
 import FarcasterChannelData from '../../constants/warpcast.json';
 
-export function getChannelFormName(name: string) {
+export function getChannelFromName(name: string) {
   const channel = FarcasterChannelData.find(
     (c) => c.name === name || c.channel_description === name
   );