From 4aad2c9b242d762e255ac44113a70e086c576b01 Mon Sep 17 00:00:00 2001 From: rushikesh dhanwant Date: Wed, 5 Apr 2023 00:42:05 +0530 Subject: [PATCH 1/6] added communityList component --- .../CommunityList/CommunityList.tsx | 136 +++++++++--------- 1 file changed, 69 insertions(+), 67 deletions(-) diff --git a/apps/web/src/components/CommunityList/CommunityList.tsx b/apps/web/src/components/CommunityList/CommunityList.tsx index 8ff63c2b..b507eb94 100644 --- a/apps/web/src/components/CommunityList/CommunityList.tsx +++ b/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(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(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 ( - // 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 ( + + handleOnCommunityClick(communityDetails)} + /> + + ); + }); + }; return ( -
- {/*
-
- {getCommunityList()} -
-
*/} +
+ {getCommunityList()}
); }; From 169b3dbedc86878fd02808d85622bf0041e5625b Mon Sep 17 00:00:00 2001 From: rushikesh dhanwant Date: Wed, 5 Apr 2023 00:43:10 +0530 Subject: [PATCH 2/6] integrated communityList in Left panel --- .../CommunityAvatar/CommunityAvatar.tsx | 4 ++-- .../web/src/components/LeftPanel/LeftPanel.tsx | 18 +++++++++++++----- apps/web/src/pages/index.tsx | 2 +- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/apps/web/src/components/CommunityAvatar/CommunityAvatar.tsx b/apps/web/src/components/CommunityAvatar/CommunityAvatar.tsx index 52d6683b..5b7bdfd6 100644 --- a/apps/web/src/components/CommunityAvatar/CommunityAvatar.tsx +++ b/apps/web/src/components/CommunityAvatar/CommunityAvatar.tsx @@ -6,14 +6,14 @@ export const CommunityAvatar = (props: CommunityAvatarProps) => { return (
{ const { style } = props; const router = useRouter(); - + const dispatch = useAppDispatch(); return (
+
{ 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"); }} />
-
+
+
+
+
); }; diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 60c21188..f1ca329d 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -29,7 +29,7 @@ const Home: NextPage = () => { return (
-

discover

+

discover

{}} />
From 2b854e6a20891acea8b16ac00076964ddd8bc8ca Mon Sep 17 00:00:00 2001 From: rushikesh dhanwant Date: Wed, 5 Apr 2023 00:45:38 +0530 Subject: [PATCH 3/6] reset community state on unmount --- apps/web/src/pages/community.tsx | 43 ++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/apps/web/src/pages/community.tsx b/apps/web/src/pages/community.tsx index ab74bf35..c0cfc7e6 100644 --- a/apps/web/src/pages/community.tsx +++ b/apps/web/src/pages/community.tsx @@ -7,16 +7,17 @@ import { ThreadCard } from "../components/ThreadCard"; import { ThreadSection } from "../components/ThreadSection"; import { trpc } from "../utils/trpc"; import { Search } from "../components/Search"; -import {CreateThread} from "../components/Thread"; -import {FlexRow} from "../components/Flex"; +import { CreateThread } from "../components/Thread"; +import { FlexRow } from "../components/Flex"; +import { selectCommunity, useAppDispatch } from "../store"; const AddIcon = () => { return ( - - + + ); -} +}; const CommunityPage = () => { const router = useRouter(); @@ -24,12 +25,26 @@ const CommunityPage = () => { const threadId = router.query.threadId as string; const [currentThread, setCurrentThread] = useState(threadId); const [questionModal, setQuestionModal] = useState(false); + const dispatch = useAppDispatch(); - const community = trpc.community.fetchCommunityUsingStreamId.useQuery({streamId: communityId}); + const community = trpc.community.fetchCommunityUsingStreamId.useQuery({ + streamId: communityId, + }); const communityName = get(community, "data.value.node.communityName"); const threads = trpc.public.fetchAllCommunityThreads.useQuery({ communityId, }); + //clean up function is getting called even when the component is mounted + //until i find any solution, below is the quick fix. + let mounted = false; + useEffect(() => { + return () => { + if(mounted){ + dispatch(selectCommunity(null)); + } + mounted = true; + }; + }, []); useEffect(() => { if (threadId) setCurrentThread(threadId); @@ -46,20 +61,22 @@ const CommunityPage = () => { } return ( -
-
- {communityName &&

{communityName}

} +
+
+ {communityName && ( +

{communityName}

+ )} - {}}/> + {}} /> -
+
{threads.data && threads.data.edges.map((thread) => ( { title={"Ask Question"} open={questionModal} onClose={() => setQuestionModal(false)} - community={{communityName, communityId}} + community={{ communityName, communityId }} />
); From c0ca027f6ed778760cbece917cd8729f020ccad5 Mon Sep 17 00:00:00 2001 From: rushikesh dhanwant Date: Wed, 5 Apr 2023 00:46:08 +0530 Subject: [PATCH 4/6] updated store test --- apps/web/src/store/store.test.tsx | 42 +++++++++++++++++++------------ packages/composedb/Query/type.ts | 3 +++ 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/apps/web/src/store/store.test.tsx b/apps/web/src/store/store.test.tsx index c16a80d6..28c5a56e 100644 --- a/apps/web/src/store/store.test.tsx +++ b/apps/web/src/store/store.test.tsx @@ -1,20 +1,29 @@ -import communityReducer, {communitySlice, selectCommunity} from "./features/community"; -import {loadFromLocalStorage, saveToLocalStorage} from "./storage"; -import {store} from "./store"; -import {useAppDispatch, useAppSelector} from "./hooks"; -import {useEffect} from "react"; -import {fireEvent, screen, render} from "@testing-library/react"; -import {Provider} from "react-redux"; +import communityReducer, { + communitySlice, + selectCommunity, +} from "./features/community"; +import { loadFromLocalStorage, saveToLocalStorage } from "./storage"; +import { store } from "./store"; +import { useAppDispatch, useAppSelector } from "./hooks"; +import { useEffect } from "react"; +import { fireEvent, screen, render } from "@testing-library/react"; +import { Provider } from "react-redux"; -const SampleComponent = (props: { onChange(value): void, value: string }) => { - const communityId = useAppSelector(state => state.community.selectedCommunity); +const SampleComponent = (props: { onChange(value): void; value: string }) => { + const communityId = useAppSelector( + (state) => state.community.selectedCommunity + ); const dispatch = useAppDispatch(); useEffect(() => props.onChange(communityId), [props, communityId]); - const handleClick = () => dispatch(selectCommunity({ - selectedCommunity: props.value, - communityAvatar: "", - communityName: "", - })); + const handleClick = () => + dispatch( + selectCommunity({ + selectedCommunity: props.value, + communityAvatar: "", + communityName: "", + description: "", + }) + ); return ; }; @@ -23,13 +32,14 @@ describe("redux.community", () => { const value = "sample"; const renderComponent = (component) => { render({component}); - } + }; it("should return initial state", () => { const state = { selectedCommunity: "new", communityAvatar: "", communityName: "", + description: "", }; const result = communityReducer(undefined, selectCommunity(state)); expect(result).toEqual(state); @@ -68,7 +78,7 @@ describe("redux.storage", () => { }); it("should handle when window is not available", () => { - Object.defineProperty(global, 'window',{}); + Object.defineProperty(global, "window", {}); saveToLocalStorage("test"); expect(loadFromLocalStorage()).toEqual(undefined); }); diff --git a/packages/composedb/Query/type.ts b/packages/composedb/Query/type.ts index 5c92fcc6..0050b316 100644 --- a/packages/composedb/Query/type.ts +++ b/packages/composedb/Query/type.ts @@ -161,3 +161,6 @@ export interface UserCommunityRelation { userId: string; communityId: string; } +export interface UserCommunities { + edges: Node[]; +} From 54bac131ef9dcc94714a50f84f7e4bb0130a83d0 Mon Sep 17 00:00:00 2001 From: rushikesh dhanwant Date: Wed, 5 Apr 2023 13:20:20 +0530 Subject: [PATCH 5/6] updated query types --- .../components/UserProfile/UserProfile.tsx | 6 +- packages/composedb/Query/query.ts | 68 ++++++++++--------- packages/composedb/Query/type.ts | 7 +- 3 files changed, 46 insertions(+), 35 deletions(-) diff --git a/apps/web/src/components/UserProfile/UserProfile.tsx b/apps/web/src/components/UserProfile/UserProfile.tsx index 7ee4c636..e565070c 100644 --- a/apps/web/src/components/UserProfile/UserProfile.tsx +++ b/apps/web/src/components/UserProfile/UserProfile.tsx @@ -121,10 +121,10 @@ export const UserProfile = (props: UserProfileProps) => { {communities.data && communities.data.edges.map((community) => { return ( ) })} diff --git a/packages/composedb/Query/query.ts b/packages/composedb/Query/query.ts index 953ff721..0b53b575 100644 --- a/packages/composedb/Query/query.ts +++ b/packages/composedb/Query/query.ts @@ -7,6 +7,7 @@ import { PageResponse, Thread, User, + UserCommunities, UserFeedResponse, } from "./type"; @@ -572,7 +573,11 @@ export const composeQueryHandler = () => { (thread: any) => thread.node.user.walletAddress === walletAddress ); }, - fetchAllCommunityThreads: async (communityId: string, first?: number, after?: string): Promise> => { + fetchAllCommunityThreads: async ( + communityId: string, + first?: number, + after?: string + ): Promise> => { const query = ` query CommunityThreads($id: ID!, $first: Int!, $after: String!) { node(id: $id) { @@ -636,44 +641,45 @@ export const composeQueryHandler = () => { after?: string ): Promise => { const query = gql` - query($first: Int!, $after: String!) { - communityIndex(first: $first, after: $after) { - pageInfo { - hasNextPage - hasPreviousPage - startCursor - endCursor - } - edges { - node { - id - communityName - description - tags(first: 10) { - edges { - node { - tag { - tag + query ($first: Int!, $after: String!) { + communityIndex(first: $first, after: $after) { + pageInfo { + hasNextPage + hasPreviousPage + startCursor + endCursor + } + edges { + node { + id + communityName + description + tags(first: 10) { + edges { + node { + tag { + tag + } } } } - } - createdAt - socialPlatforms(first: 5) { - edges { - node { - id - platform - platformId - communityName - communityAvatar + createdAt + socialPlatforms(first: 5) { + edges { + node { + id + platform + platformId + communityName + communityAvatar + } } } } } } } - }`; + `; const response = await client.request(query, { first: first, after: after || "", @@ -757,7 +763,7 @@ export const composeQueryHandler = () => { id: string, first?: number, after?: string - ): Promise => { + ): Promise => { const query = gql` query UserCommunities($id: ID!, $first: Int!, $after: String!) { node(id: $id) { diff --git a/packages/composedb/Query/type.ts b/packages/composedb/Query/type.ts index 0050b316..7f7cd16a 100644 --- a/packages/composedb/Query/type.ts +++ b/packages/composedb/Query/type.ts @@ -162,5 +162,10 @@ export interface UserCommunityRelation { communityId: string; } export interface UserCommunities { - edges: Node[]; + edges: Node<{community:CommunityExt}>[]; } + +export interface CommunityExt extends Community{ + description: string, + communityName: string +} \ No newline at end of file From 1c069bb4bc1241034edee584138668457b0e05fb Mon Sep 17 00:00:00 2001 From: rushikesh dhanwant Date: Wed, 5 Apr 2023 17:20:50 +0530 Subject: [PATCH 6/6] updated user profile tests --- .../UserProfile/UserProfile.test.tsx | 52 +++++++++++-------- 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/apps/web/src/components/UserProfile/UserProfile.test.tsx b/apps/web/src/components/UserProfile/UserProfile.test.tsx index 8e600c53..4e23258e 100644 --- a/apps/web/src/components/UserProfile/UserProfile.test.tsx +++ b/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({ui}); - } + }; it("should render the component with no issues", () => { - const result = renderComponent(); + const result = renderComponent( + + ); expect(result.container).toBeInTheDocument(); }); it("renders the user profile", async () => { - const { findByText } = renderComponent(); - expect(await findByText('username')).toBeInTheDocument(); - expect(await findByText('community name')).toBeInTheDocument(); + const { findByText } = renderComponent( + + ); + expect(await findByText("username")).toBeInTheDocument(); + expect(await findByText("community name")).toBeInTheDocument(); }); });