Merge pull request #610 from us3r-network/F-communitiesV2-shixuewen

F communities v2 shixuewen
degencast · Mar 13, 2024 · f882353 · f882353
2 parents ac31330 + 2b3b7ca
commit f882353
Show file tree

Hide file tree

Showing 30 changed files with 1,600 additions and 168 deletions.
diff --git a/apps/u3/src/components/common/select/Select2.tsx b/apps/u3/src/components/common/select/Select2.tsx
@@ -0,0 +1,61 @@
+import { SelectProps } from '@radix-ui/react-select';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+export default function SelectWithOptions({
+  options,
+  icon,
+  ...props
+}: SelectProps & {
+  options: Array<{ value: any; label: string }>;
+  icon?: React.ReactNode;
+}) {
+  return (
+    <Select {...props}>
+      <SelectTrigger
+        className={cn(
+          'w-[180px] border-none rounded-[10px] bg-[#1B1E23] text-[#FFF] text-[14px] font-medium outline-none focus:outline-none focus:border-none',
+          'max-sm:w-auto max-sm:h-auto max-sm:p-0 max-sm:m-0 max-sm:bg-transparent'
+        )}
+      >
+        {icon || (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            className="max-sm:hidden"
+          >
+            <path
+              d="M5.625 1.875C4.63044 1.875 3.67661 2.27009 2.97335 2.97335C2.27009 3.67661 1.875 4.63044 1.875 5.625C1.875 6.61956 2.27009 7.57339 2.97335 8.27665C3.67661 8.97991 4.63044 9.375 5.625 9.375H8.75C8.91576 9.375 9.07473 9.30915 9.19194 9.19194C9.30915 9.07473 9.375 8.91576 9.375 8.75V5.625C9.375 4.63044 8.97991 3.67661 8.27665 2.97335C7.57339 2.27009 6.61956 1.875 5.625 1.875ZM8.75 10.625H5.625C4.88332 10.625 4.1583 10.8449 3.54161 11.257C2.92493 11.669 2.44428 12.2547 2.16045 12.9399C1.87662 13.6252 1.80236 14.3792 1.94706 15.1066C2.09175 15.834 2.4489 16.5022 2.97335 17.0267C3.4978 17.5511 4.16598 17.9083 4.89341 18.0529C5.62084 18.1976 6.37484 18.1234 7.06006 17.8396C7.74529 17.5557 8.33096 17.0751 8.74301 16.4584C9.15507 15.8417 9.375 15.1167 9.375 14.375V11.25C9.375 11.0842 9.30915 10.9253 9.19194 10.8081C9.07473 10.6908 8.91576 10.625 8.75 10.625ZM14.375 1.875C13.3804 1.875 12.4266 2.27009 11.7234 2.97335C11.0201 3.67661 10.625 4.63044 10.625 5.625V8.75C10.625 8.91576 10.6908 9.07473 10.8081 9.19194C10.9253 9.30915 11.0842 9.375 11.25 9.375H14.375C15.3696 9.375 16.3234 8.97991 17.0267 8.27665C17.7299 7.57339 18.125 6.61956 18.125 5.625C18.125 4.63044 17.7299 3.67661 17.0267 2.97335C16.3234 2.27009 15.3696 1.875 14.375 1.875Z"
+              fill="#EEEFF7"
+            />
+            <path
+              opacity="0.3"
+              d="M14.3751 10.6249H11.2501C11.0843 10.6249 10.9253 10.6907 10.8081 10.8079C10.6909 10.9251 10.6251 11.0841 10.6251 11.2499V14.3749C10.6251 15.1166 10.845 15.8416 11.2571 16.4583C11.6691 17.075 12.2548 17.5556 12.94 17.8394C13.6252 18.1233 14.3792 18.1975 15.1067 18.0528C15.8341 17.9081 16.5023 17.551 17.0267 17.0265C17.5512 16.5021 17.9083 15.8339 18.053 15.1065C18.1977 14.379 18.1235 13.625 17.8396 12.9398C17.5558 12.2546 17.0751 11.6689 16.4585 11.2569C15.8418 10.8448 15.1168 10.6249 14.3751 10.6249Z"
+              fill="#EEEFF7"
+            />
+          </svg>
+        )}
+
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent className="rounded-[10px] bg-[#1B1E23] text-[#FFF] text-[14px] font-medium border-none">
+        {options.map(({ value, label }) => {
+          return (
+            <SelectItem value={value} className="hover:bg-[#20262F]">
+              {label}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/u3/src/components/community/CommonStyled.tsx b/apps/u3/src/components/community/CommonStyled.tsx
@@ -0,0 +1,17 @@
+import { ComponentPropsWithRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export function CommunityList({
+  className,
+  ...props
+}: ComponentPropsWithRef<'div'>) {
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-2 gap-[20px] max-lg:grid-cols-1 max-sm:gap-[10px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/u3/src/components/community/CommunityItem.tsx b/apps/u3/src/components/community/CommunityItem.tsx
@@ -0,0 +1,65 @@
+import { ComponentPropsWithRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { CommunityInfo } from '@/services/community/types/community';
+import { cn } from '@/lib/utils';
+import JoinCommunityBtn from './JoinCommunityBtn';
+
+export default function CommunityItem({
+  className,
+  communityInfo,
+  ...props
+}: ComponentPropsWithRef<'div'> & {
+  communityInfo: CommunityInfo;
+}) {
+  const navigate = useNavigate();
+  const { logo, name, description, memberInfo, types } = communityInfo || {};
+  return (
+    <div
+      className={cn(
+        'h-[160px] flex p-[20px] box-border items-center gap-[20px] bg-[#1B1E23] rounded-[20px] cursor-pointer',
+        'max-sm:p-[10px] max-sm:h-[120px]',
+        className
+      )}
+      onClick={() => {
+        navigate(`/community/${communityInfo.channelId}`);
+      }}
+      {...props}
+    >
+      <img
+        src={logo}
+        alt=""
+        className="w-[120px] h-[120px] rounded-[20px] max-sm:w-[100px] max-sm:h-[100px]"
+      />
+      <div className="flex-1 flex h-full flex-col justify-between items-start">
+        <div className="w-full flex justify-between items-start gap-[10px]">
+          <div className="flex-1 flex flex-col gap-[10px]">
+            {types?.length > 0 && (
+              <div className="text-[#718096] text-[12px] font-normal line-clamp-1">
+                {types.reduce((acc, cur) => {
+                  return `${acc}, ${cur}`;
+                })}
+              </div>
+            )}
+            <div className="text-[#FFF] text-[16px] font-medium">{name}</div>
+          </div>
+          <JoinCommunityBtn communityInfo={communityInfo} />
+        </div>
+        <div className="flex gap-[10px] items-center">
+          {memberInfo?.newPostNumber > 0 && (
+            <div className="text-[#718096] text-[12px] font-normal leading-[15px]">
+              {memberInfo?.newPostNumber} new posts
+            </div>
+          )}
+          {memberInfo?.totalNumber > 0 && (
+            <div className="text-[#718096] text-[12px] font-normal leading-[15px]">
+              {memberInfo?.totalNumber} members
+            </div>
+          )}
+        </div>
+        <div className="text-[#FFF] text-[14px] font-normal leading-[20px] line-clamp-2">
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/u3/src/components/community/GrowingCommunityItem.tsx b/apps/u3/src/components/community/GrowingCommunityItem.tsx
@@ -0,0 +1,60 @@
+import { ComponentPropsWithRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { CommunityInfo } from '@/services/community/types/community';
+import { cn } from '@/lib/utils';
+import JoinCommunityBtn from './JoinCommunityBtn';
+
+export default function GrowingCommunityItem({
+  className,
+  ranking,
+  communityInfo,
+  ...props
+}: ComponentPropsWithRef<'div'> & {
+  ranking: number;
+  communityInfo: CommunityInfo;
+}) {
+  const navigate = useNavigate();
+  const { logo, name, memberInfo } = communityInfo || {};
+  return (
+    <div
+      className={cn(
+        'w-full h-[50px] flex items-center gap-[10px] bg-[#1B1E23] cursor-pointer',
+        className
+      )}
+      onClick={() => {
+        navigate(`/community/${communityInfo.channelId}`);
+      }}
+      {...props}
+    >
+      <div className="w-[50px] flex justify-between items-center gap-[5px]">
+        <span className="text-[#FFF] text-[12px] font-normal">{ranking}</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+        >
+          <path
+            d="M3.79126 12.1326H16.8599L10.3256 4.91549L3.79126 12.1326Z"
+            fill="#F41F4C"
+          />
+        </svg>
+      </div>
+
+      <div className="flex-1 flex items-center gap-[10px]">
+        <img src={logo} alt="" className="w-[50px] h-[50px] rounded-[10px]" />
+        <div className="flex-1 flex flex-col justify-center items-start gap-[10px]">
+          <div className="text-[#FFF] text-[16px] font-medium line-clamp-1">
+            {name}
+          </div>
+          <div className="text-[#00D1A7] text-[12px] font-normal line-clamp-1">
+            {memberInfo?.totalNumber || 0} members
+          </div>
+        </div>
+      </div>
+
+      <JoinCommunityBtn communityInfo={communityInfo} />
+    </div>
+  );
+}
diff --git a/apps/u3/src/components/community/JoinCommunityBtn.tsx b/apps/u3/src/components/community/JoinCommunityBtn.tsx
@@ -0,0 +1,43 @@
+import { ComponentPropsWithRef } from 'react';
+import { CommunityInfo } from '@/services/community/types/community';
+import ColorButton from '../common/button/ColorButton';
+import { cn } from '@/lib/utils';
+import useJoinCommunityAction from '@/hooks/community/useJoinCommunityAction';
+
+export default function JoinCommunityBtn({
+  className,
+  communityInfo,
+  ...props
+}: ComponentPropsWithRef<'button'> & {
+  communityInfo: CommunityInfo;
+}) {
+  const { joined, isPending, isDisabled, joinChangeAction } =
+    useJoinCommunityAction(communityInfo);
+  return (
+    <ColorButton
+      className={cn(
+        'px-[12px] min-w-[48px] h-[30px] py-[8px] box-border gap-[20px] rounded-[20px] bg-[#F41F4C] text-[#FFF] text-[12px] font-normal',
+        className
+      )}
+      disabled={isDisabled}
+      onClick={(e) => {
+        e.stopPropagation();
+        joinChangeAction();
+      }}
+      {...props}
+    >
+      {(() => {
+        if (joined) {
+          if (isPending) {
+            return 'Unjoining...';
+          }
+          return 'Joined';
+        }
+        if (isPending) {
+          return 'Joining...';
+        }
+        return 'Join';
+      })()}
+    </ColorButton>
+  );
+}
diff --git a/apps/u3/src/components/layout/Index.tsx b/apps/u3/src/components/layout/Index.tsx
@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 import { useLocation, useSearchParams } from 'react-router-dom';
-import { ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, useEffect } from 'react';
 import { MEDIA_BREAK_POINTS } from '../../constants/index';
 import Main from './Main';
 import { useGAPageView } from '../../hooks/shared/useGoogleAnalytics';
@@ -21,6 +21,8 @@ import ClaimOnboard from '../onboard/Claim';
 import RedEnvelopeFloatingWindow from '../social/frames/red-envelope/RedEnvelopeFloatingWindow';
 import { cn } from '@/lib/utils';
 import { isCommunityPath } from '@/route/path';
+import useAllJoinedCommunities from '@/hooks/community/useAllJoinedCommunities';
+import useLogin from '@/hooks/shared/useLogin';
 
 function Layout() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -30,6 +32,17 @@ function Layout() {
 
   useGAPageView();
 
+  const { isLogin } = useLogin();
+  const { loadAllJoinedCommunities, clearJoinedCommunities } =
+    useAllJoinedCommunities();
+  useEffect(() => {
+    if (isLogin) {
+      loadAllJoinedCommunities();
+    } else {
+      clearJoinedCommunities();
+    }
+  }, [isLogin]);
+
   return (
     <div
       id="layout-wrapper"

diff --git a/apps/u3/src/components/layout/menu.tsx b/apps/u3/src/components/layout/menu.tsx
@@ -7,11 +7,12 @@
  */
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { ComponentPropsWithRef, useMemo } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import { ReactComponent as LogoIconSvg } from '../common/assets/imgs/logo-icon.svg';
-import { useFarcasterCtx } from '@/contexts/social/FarcasterCtx';
 import { getCommunityPath } from '@/route/path';
 import { cn } from '@/lib/utils';
+import useAllJoinedCommunities from '@/hooks/community/useAllJoinedCommunities';
+import { CommunityInfo } from '@/services/community/types/community';
 
 export default function Menu({
   className,
@@ -43,60 +44,51 @@ export default function Menu({
       </div>
       <hr className="border-t border-[#39424C] my-4 w-full max-sm:hidden" />
 
-      <UserChannels />
+      <UserCommunities />
     </div>
   );
 }
 
-function UserChannels() {
-  const { userChannels, currFid, browsingChannel } = useFarcasterCtx();
-
-  let showChannels = [];
-  if (currFid) {
-    showChannels = [...userChannels];
-  }
-  if (browsingChannel?.parent_url) {
-    const findChannel = showChannels.find(
-      (c) => c.parent_url === browsingChannel.parent_url
+function UserCommunities() {
+  const { joinedCommunities } = useAllJoinedCommunities();
+  // TODO : browsingCommunity
+  const browsingCommunity = null;
+  const showCommunities = [...joinedCommunities];
+  if (browsingCommunity?.parent_url) {
+    const findCommunity = showCommunities.find(
+      (c) => c.id === browsingCommunity.id
     );
-    if (!findChannel) {
-      showChannels.unshift(browsingChannel);
+    if (!findCommunity) {
+      showCommunities.unshift(browsingCommunity);
     }
   }
 
   return (
     <div className="w-full overflow-scroll h-full flex gap-5 flex-col">
-      {showChannels.map(({ parent_url }) => (
-        <ChannelItem parent_url={parent_url} key={parent_url} />
+      {showCommunities.map((item) => (
+        <CommunityItem communityInfo={item} />
       ))}
     </div>
   );
 }
 
-function ChannelItem({ parent_url }: { parent_url: string }) {
-  const { getChannelFromUrl } = useFarcasterCtx();
+function CommunityItem({ communityInfo }: { communityInfo: CommunityInfo }) {
   const navigate = useNavigate();
 
-  const item = useMemo(() => {
-    return getChannelFromUrl(parent_url);
-  }, [parent_url, getChannelFromUrl]);
-
-  if (!item) return null;
-
   return (
     <div
       onClick={() => {
-        navigate(getCommunityPath(item.channel_id));
+        navigate(getCommunityPath(communityInfo.channelId));
       }}
       className="cursor-pointer relative"
     >
       <div className="flex items-center gap-3">
         <img
-          src={item.image}
-          alt={item.name}
+          src={communityInfo.logo}
+          alt={communityInfo.name}
           className="rounded-md w-[40px] h-[40px]"
         />
-        <div className="text-white font-bold">{item.name}</div>
+        <div className="text-white font-bold">{communityInfo.name}</div>
       </div>
     </div>
   );

diff --git a/apps/u3/src/components/layout/mobile/MobileMainNav.tsx b/apps/u3/src/components/layout/mobile/MobileMainNav.tsx
@@ -32,8 +32,12 @@ export default function MobileMainNav({
     firstRouteKey === RouteKey.home && lastRouteKey !== RouteKey.communities;
 
   const isCommunityRoute =
-    lastRouteKey === RouteKey.communities ||
-    firstRouteKey === RouteKey.community;
+    [
+      RouteKey.communities,
+      RouteKey.trendingCommunities,
+      RouteKey.newestCommunities,
+      RouteKey.joinedCommunities,
+    ].includes(lastRouteKey) || firstRouteKey === RouteKey.community;
 
   const isMessageRoute = firstRouteKey === RouteKey.message;
   const isNotificationRoute = firstRouteKey === RouteKey.notification;