Feat/community list

apps/web/src/components/CommunityAvatar/CommunityAvatar.tsx

@@ -6,14 +6,14 @@ export const CommunityAvatar = (props: CommunityAvatarProps) => {
   return (
     <div
     className={utils.classNames(
-      " inline-block ",
+      " inline-block w-full",
       props.selected ? " border-r-[3px] rounded-r-sm border-black" : ""
     )}
     >
       <div
         id="community-avatar"
         className={utils.classNames(
-          "group relative flex h-12 w-12 cursor-pointer items-center justify-center z-2 mx-auto",
+          "group relative flex h-12 w-12 cursor-pointer items-center justify-center z-2 mx-auto overflow-hidden ",
           props.classes
         )}
         onClick={props.onClick}

apps/web/src/components/CommunityList/CommunityList.tsx

@@ -7,81 +7,83 @@ import { useState } from "react";
 import { toast } from "react-toastify";
 import { isRight } from "../../utils/fp";
 import { constants } from "../../config";
+import Link from "next/link";
 
 const CommunityList = () => {
-  // const [clicked, setClicked] = useState<boolean>(false);
-  // const dispatch = useAppDispatch();
-  // const communityId = useAppSelector(
-  //   (state) => state.community.selectedCommunity
-  // );
-  // const didSession = useAppSelector((state) => state.user.didSession);
-  // const userId = useAppSelector((state) => state.user.id);
-
-  // //fetch user joined communities
-  // let communities :any;
-
-  // const handleOnCommunityClick = (communityDetails: {
-  //   selectedCommunity: string;
-  //   communityName: string;
-  //   communityAvatar: string;
-  // }) => {
-  //   dispatch(selectCommunity(communityDetails));
-  // };
-
+  const [clicked, setClicked] = useState<boolean>(false);
+  const dispatch = useAppDispatch();
+  const communityId = useAppSelector(
+    (state) => state.community.selectedCommunity
+  );
+  const didSession = useAppSelector((state) => state.user.didSession);
+  const userId = useAppSelector((state) => state.user.id);
 
-  // const getCommunityList = () => {
-  //   if (isNil(communities.data) || isEmpty(communities.data)) {
-  //     return <></>;
-  //   }
+  //fetch user joined communities
+  const communities = trpc.user.getUserCommunities.useQuery({
+    streamId: userId,
+    first: 10,
+  });
+  console.log("joinedcommunities", communities);
+  const handleOnCommunityClick = (communityDetails: {
+    selectedCommunity: string;
+    communityName: string;
+    communityAvatar: string;
+    description: string;
+  }) => {
+    dispatch(selectCommunity(communityDetails));
+  };
 
-  //   if (isEmpty(communityId) && has(communities, "data[0].node.id")) {
-  //     const communityDetails = {
-  //       selectedCommunity: get(communities, "data[0].node.id"),
-  //       communityName: get(communities, "data[0].node.communityName"),
-  //       communityAvatar: get(
-  //         communities,
-  //         "data[0].node.socialPlatforms.edges[0].node.communityAvatar"
-  //       ),
-  //     };
-  //     handleOnCommunityClick(communityDetails);
-  //   }
+  const getCommunityList = () => {
+    if (isNil(communities.data) || isEmpty(communities.data)) {
+      return <></>;
+    }
 
-  //   return communities.data.map((community, index) => {
-  //     if (!community.node) return null;
+    return communities.data.edges.map((community, index) => {
+      if (!community.node) return null;
 
-  //     const communityDetails = {
-  //       selectedCommunity: community.node.id,
-  //       communityName: community.node.communityName,
-  //       communityAvatar: get(
-  //         community,
-  //         "node.socialPlatforms.edges[0].node.communityAvatar"
-  //       ),
-  //     };
-  //     const name = community.node.communityName;
-  //     const image =
-  //       get(community, "node.socialPlatforms.edges[0].node.communityAvatar") ||
-  //       "https://placekitten.com/200/200";
-  //     const selected = community.node.id == communityId;
-  //     return (
-  //       <CommunityAvatar
-  //         classes={""}
-  //         key={index}
-  //         name={name}
-  //         image={image}
-  //         selected={selected}
-  //         onClick={() => handleOnCommunityClick(communityDetails)}
-  //       />
-  //     );
-  //   });
-  // };
+      const communityDetails = {
+        selectedCommunity: community.node?.community?.id,
+        communityName: community.node?.community?.communityName,
+        communityAvatar: get(
+          community,
+          "node.community.socialPlatforms.edges[0].node.communityAvatar"
+        ),
+        description: community.node?.community?.description,
+      };
+      const name = community.node?.community?.communityName;
+      const image =
+        get(
+          community,
+          "node.community.socialPlatforms.edges[0].node.communityAvatar"
+        ) || "https://placekitten.com/200/200";
+      const selected = community.node?.community?.id == communityId;
+      return (
+        <Link
+        className={'w-full'}
+          key={index}
+          href={{
+            pathname: "/community",
+            query: { communityId: community.node?.community?.id },
+          }}
+        >
+          <CommunityAvatar
+            classes={utils.classNames(
+              "bg-slate-100	w-full rounded-full hover:rounded-xl hover:bg-slate-100 px-auto"
+            )}
+            key={index}
+            name={name}
+            image={image}
+            selected={selected}
+            onClick={() => handleOnCommunityClick(communityDetails)}
+          />
+        </Link>
+      );
+    });
+  };
 
   return (
-    <div className="box-border flex min-h-screen w-full flex-col">
-      {/* <div className="flex flex-row">
-        <div className="flex h-screen flex-col gap-7 border-r py-10 sm:hidden md:flex ">
-          {getCommunityList()}
-        </div>
-      </div> */}
+    <div className={"flex w-full flex-col items-center gap-[15px]"}>
+      {getCommunityList()}
     </div>
   );
 };

apps/web/src/components/LeftPanel/LeftPanel.tsx

@@ -4,17 +4,20 @@ import { useRouter } from "next/router";
 import * as utils from "../../utils";
 import UserOnboard from "../UserOnboard/UserOnboard";
 import { CommunityOnboard } from "../CommunityOnboard";
+import { CommunityList } from "../CommunityList";
+import { selectCommunity, useAppDispatch } from "../../store";
 
 const LeftPanel = (props: LeftPanelProp) => {
   const { style } = props;
   const router = useRouter();
-
+  const dispatch = useAppDispatch();
   return (
     <div
-      className={`fixed left-0 h-screen border-r border-solid border-[#08010d12] ${style}`}
+      className={`fixed left-0 h-full border-r border-solid border-[#08010d12] ${style}`}
     >
+      <div className={`h-full flex flex-col justify-between`}>
       <div
-        className={`sticky z-1 w-full top-0 my-[14px] flex h-auto flex-col gap-[30px] `}
+        className={`relative z-1 w-full top-0 my-[14px] flex h-auto flex-col gap-[30px] `}
       >
           <CommunityAvatar
             key={"create"}
@@ -26,6 +29,7 @@ const LeftPanel = (props: LeftPanelProp) => {
             image={"/devnode.png"}
             selected={false}
             onClick={() => {
+              dispatch(selectCommunity(null));
               router.push("/");
             }}
           />
@@ -40,18 +44,22 @@ const LeftPanel = (props: LeftPanelProp) => {
           image={"/feed.png"}
           selected={false}
           onClick={() => {
+            dispatch(selectCommunity(null));
             router.push("/feed");
           }}
         />
       </div>
-      <div  className={` relative z-0 w-full top-0 my-[14px] flex h-auto flex-col gap-[30px] `}>
+      <hr className="my-2" />
+      <div  className={` relative z-0 w-full top-0 my-[14px] flex h-full flex-col gap-[15px] items-center overflow-scroll scrollbar-hide`}>
       <CommunityOnboard />
+      <CommunityList/>
       </div>
       <div
-        className={`absolute z-1 bottom-0 my-[14px] flex h-auto flex-col gap-[30px] w-full`}
+        className={`reltaive z-1 bottom-0 mt-[14px] flex h-auto flex-col gap-[30px] w-full`}
       >
         <UserOnboard />
       </div>
+      </div>
     </div>
   );
 };

apps/web/src/components/UserProfile/UserProfile.test.tsx

@@ -1,7 +1,7 @@
-import { UserProfile } from './UserProfile';
-import {renderWithTrpc} from "../../../test/trpcWrapper";
-import {Provider} from "react-redux";
-import {store} from "../../store";
+import { UserProfile } from "./UserProfile";
+import { renderWithTrpc } from "../../../test/trpcWrapper";
+import { Provider } from "react-redux";
+import { store } from "../../store";
 
 const mockUser = {
   isLoading: false,
@@ -10,9 +10,9 @@ const mockUser = {
     value: {
       userPlatforms: [
         {
-          platformName: 'platform name',
-          platformUsername: 'username',
-          platformAvatar: 'https://some-url.com',
+          platformName: "platform name",
+          platformUsername: "username",
+          platformAvatar: "https://some-url.com",
         },
       ],
     },
@@ -25,23 +25,25 @@ const mockCommunities = {
     edges: [
       {
         node: {
-          id: 'community id',
-          socialPlatforms: {
-            edges: [
-              {
-                node: {
-                  communityAvatar: 'https://some-url.com',
-                  communityName: 'community name',
+          community: {
+            id: "community id",
+            socialPlatforms: {
+              edges: [
+                {
+                  node: {
+                    communityAvatar: "https://some-url.com",
+                    communityName: "community name",
+                  },
                 },
-              },
-            ],
+              ],
+            },
           },
         },
       },
     ],
   },
 };
-jest.mock('../../utils/trpc', () => ({
+jest.mock("../../utils/trpc", () => ({
   trpc: {
     user: {
       getUserByStreamId: {
@@ -54,19 +56,23 @@ jest.mock('../../utils/trpc', () => ({
   },
 }));
 
-describe('UserProfile', () => {
+describe("UserProfile", () => {
   const renderComponent = (ui) => {
     return renderWithTrpc(<Provider store={store}>{ui}</Provider>);
-  }
+  };
 
   it("should render the component with no issues", () => {
-    const result = renderComponent(<UserProfile userStreamId={"sample-user-id"} />);
+    const result = renderComponent(
+      <UserProfile userStreamId={"sample-user-id"} />
+    );
     expect(result.container).toBeInTheDocument();
   });
 
   it("renders the user profile", async () => {
-    const { findByText } = renderComponent(<UserProfile userStreamId="12345" />);
-    expect(await findByText('username')).toBeInTheDocument();
-    expect(await findByText('community name')).toBeInTheDocument();
+    const { findByText } = renderComponent(
+      <UserProfile userStreamId="12345" />
+    );
+    expect(await findByText("username")).toBeInTheDocument();
+    expect(await findByText("community name")).toBeInTheDocument();
   });
 });

apps/web/src/components/UserProfile/UserProfile.tsx

@@ -121,10 +121,10 @@ export const UserProfile = (props: UserProfileProps) => {
           {communities.data && communities.data.edges.map((community) => {
             return (
               <AvatarCard
-                key={community.node.id}
-                image={get(community, "node.socialPlatforms.edges[0].node.communityAvatar")}
+                key={community.node.community.id}
+                image={get(community, "node.community.socialPlatforms.edges[0].node.communityAvatar")}
                 imageSize={44}
-                name={get(community, "node.socialPlatforms.edges[0].node.communityName")}
+                name={get(community, "node.community.socialPlatforms.edges[0].node.communityName")}
               />
             )
           })}