From 1dfc3821f6a60a5fc81d795dc1ad7c913c6a85a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Przemys=C5=82aw=20Janowski?= Date: Fri, 24 Jun 2022 10:46:22 +0200 Subject: [PATCH] feat(lib): useMemberships working implementation --- lib/src/hooks/use-memberships.ts | 38 +++++++++-------------- lib/src/types.ts | 6 ++-- samples/group-chat/src/moderated-chat.tsx | 31 ++---------------- 3 files changed, 21 insertions(+), 54 deletions(-) diff --git a/lib/src/hooks/use-memberships.ts b/lib/src/hooks/use-memberships.ts index aab8b4b35..f6e893cc3 100644 --- a/lib/src/hooks/use-memberships.ts +++ b/lib/src/hooks/use-memberships.ts @@ -1,5 +1,4 @@ import { useState, useEffect, useMemo, useCallback } from "react"; -import { GetMembershipsParametersv2 } from "pubnub"; import { usePubNub } from "pubnub-react"; import merge from "lodash.merge"; import cloneDeep from "lodash.clonedeep"; @@ -7,12 +6,12 @@ import { VSPPubnub, ChannelEntity, UserEntity, - FetchMembershipsFromUserParametersUsers, + FetchMembershipsFromUserParameters, FetchMembershipsFromSpaceParameters, } from "../types"; export const useMemberships = < - T extends FetchMembershipsFromUserParametersUsers | FetchMembershipsFromSpaceParameters + T extends FetchMembershipsFromUserParameters | FetchMembershipsFromSpaceParameters >( options: T ): [ @@ -37,7 +36,7 @@ export const useMemberships = < merge({}, JSON.parse(jsonOptions), { page: { next: page }, include: { totalCount: true }, - }) as GetMembershipsParametersv2, + }) as T, [page, jsonOptions] ); @@ -55,7 +54,6 @@ export const useMemberships = < try { if (totalCount && entities.length >= totalCount) return; const response = await pubnub.fetchMemberships(paginatedOptions); - // console.log("response from new hook: ", response); setEntities((entities) => [...entities, ...response.data.map((m) => m.user || m.space)]); setTotalCount(response.totalCount); setPage(response.next); @@ -68,33 +66,27 @@ export const useMemberships = < useEffect(() => { const listener = { - space: (event) => { - console.log("Received SPACE event: ", event); - }, - user: (event) => { - console.log("Received USER event: ", event); - }, - membership: (event) => { - console.log("Received MEMBERSHIP event: ", event); - }, objects: (event) => { - console.log("Received OBJECT event: ", event); - const message = event.message; if (message.type !== "membership") return; setEntities((entities) => { + let membership; const entitiesCopy = cloneDeep(entities); - const channel = entitiesCopy.find((u) => u.id === message.data.channel.id); - const currentUuid = paginatedOptions.uuid || pubnub.getUUID(); - // Make sure the event is for the same uuid as the hook - if (message.data.uuid.id !== currentUuid) return entitiesCopy; + if (paginatedOptions.spaceId !== undefined) { + membership = entitiesCopy.find((u) => u.id === message.data.uuid.id); + if (message.data.channel.id !== paginatedOptions.spaceId) return entitiesCopy; + } else { + membership = entitiesCopy.find((u) => u.id === message.data.channel.id); + const hookUserId = paginatedOptions.userId || pubnub.getUUID(); + if (message.data.uuid.id !== hookUserId) return entitiesCopy; + } // Set events are not handled since there are no events fired for data updates // New memberships are not handled in order to conform to filters and pagination - if (channel && message.event === "delete") { - entitiesCopy.splice(entitiesCopy.indexOf(channel), 1); + if (membership && message.event === "delete") { + entitiesCopy.splice(entitiesCopy.indexOf(membership), 1); } return entitiesCopy; @@ -107,7 +99,7 @@ export const useMemberships = < return () => { pubnub.removeListener(listener); }; - }, [pubnub, paginatedOptions.uuid]); + }, [pubnub, paginatedOptions.userId, paginatedOptions.spaceId]); useEffect(() => { resetHook(); diff --git a/lib/src/types.ts b/lib/src/types.ts index c38bf0961..91917f44b 100644 --- a/lib/src/types.ts +++ b/lib/src/types.ts @@ -56,6 +56,7 @@ interface FetchMembershipsParametersBase { export interface FetchMembershipsFromSpaceParameters extends FetchMembershipsParametersBase { spaceId?: string; + readonly userId?: undefined; include?: | { totalCount?: boolean | undefined; @@ -66,8 +67,9 @@ export interface FetchMembershipsFromSpaceParameters extends FetchMembershipsPar | undefined; } -export interface FetchMembershipsFromUserParametersUsers extends FetchMembershipsParametersBase { +export interface FetchMembershipsFromUserParameters extends FetchMembershipsParametersBase { userId?: string; + readonly spaceId?: undefined; include?: | { totalCount?: boolean | undefined; @@ -111,7 +113,7 @@ export interface VSPPubnub extends Pubnub { createSpace: (options: CreateSpaceParameters) => Pubnub.SetChannelMetadataResponse; createUser: (options: CreateUserParameters) => Pubnub.SetUUIDMetadataResponse; fetchMemberships: ( - options: FetchMembershipsFromSpaceParameters | FetchMembershipsFromUserParametersUsers + options: FetchMembershipsFromSpaceParameters | FetchMembershipsFromUserParameters ) => PagedObjectsResponse; } diff --git a/samples/group-chat/src/moderated-chat.tsx b/samples/group-chat/src/moderated-chat.tsx index c0b93ddeb..609c1a22d 100644 --- a/samples/group-chat/src/moderated-chat.tsx +++ b/samples/group-chat/src/moderated-chat.tsx @@ -11,11 +11,9 @@ import { MessageInput, MessageList, TypingIndicator, - useChannelMembers, useChannels, usePresence, useUser, - useUserMemberships, useUsers, useMemberships, } from "@pubnub/react-chat-components"; @@ -59,38 +57,13 @@ export default function ModeratedChat(): JSX.Element { const [currentUser] = useUser({ userId: uuid }); const [allUsers] = useUsers({ include: { customFields: true } }); const [allChannels] = useChannels({ include: { customFields: true } }); - const [joinedChannels, , refetchJoinedChannels] = useUserMemberships({ - include: { channelFields: true, customChannelFields: true }, - }); - const [channelMembers, , refetchChannelMemberships, totalChannelMembers] = useChannelMembers({ - channel: currentChannel.id, - include: { customUUIDFields: true }, - }); - - const [joinedChannels2, , refetchJoinedChannels2] = useMemberships({ + const [joinedChannels, , refetchJoinedChannels] = useMemberships({ include: { spaceFields: true, customSpaceFields: true }, }); - const [channelMembers2, , refetchChannelMemberships2, totalChannelMembers2] = useMemberships({ + const [channelMembers, , refetchChannelMemberships, totalChannelMembers] = useMemberships({ spaceId: currentChannel.id, include: { customUserFields: true }, }); - - // useEffect(() => { - // console.log("Channel members: ", channelMembers); - // }, [channelMembers]); - // useEffect(() => { - // if (joinedChannels.length) console.log("Joined channels old: ", joinedChannels); - // }, [joinedChannels]); - // useEffect(() => { - // if (joinedChannels2.length) console.log("Joined channels new: ", joinedChannels2); - // }, [joinedChannels2]); - // useEffect(() => { - // if (channelMembers.length) console.log("Channel members old: ", channelMembers); - // }, [channelMembers]); - // useEffect(() => { - // if (channelMembers2.length) console.log("Channel members new: ", channelMembers2); - // }, [channelMembers2]); - const [presenceData] = usePresence({ channels: joinedChannels.length ? joinedChannels.map((c) => c.id) : [currentChannel.id], });