fix: non-admin user group add/remove permissions (#1079)

khushal87 · web-flow · commit 667260a51189 · 2022-01-20T00:44:52.000+01:00
diff --git a/examples/SampleApp/src/components/ChatScreenHeader.tsx b/examples/SampleApp/src/components/ChatScreenHeader.tsx
@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Image, StyleSheet, TouchableOpacity } from 'react-native';
 import { CompositeNavigationProp, useNavigation } from '@react-navigation/native';
 import { useChatContext, useTheme } from 'stream-chat-react-native';
 
 import { RoundButton } from './RoundButton';
 import { ScreenHeader } from './ScreenHeader';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 import { NewDirectMessageIcon } from '../icons/NewDirectMessageIcon';
 
 import type { DrawerNavigationProp } from '@react-navigation/drawer';
@@ -36,7 +36,7 @@ export const ChatScreenHeader: React.FC<{ title?: string }> = ({ title = 'Stream
   } = useTheme();
 
   const navigation = useNavigation<ChatScreenHeaderNavigationProp>();
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const { isOnline } = useChatContext();
 
   return (
diff --git a/examples/SampleApp/src/components/UnreadCountBadge.tsx b/examples/SampleApp/src/components/UnreadCountBadge.tsx
@@ -1,9 +1,9 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { isOwnUser } from 'stream-chat';
 import { useTheme } from 'stream-chat-react-native';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 
 const styles = StyleSheet.create({
   unreadContainer: {
@@ -27,7 +27,7 @@ export const UnreadCountBadge: React.FC = () => {
     },
   } = useTheme();
 
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const [count, setCount] = useState<number>();
 
   useEffect(() => {
diff --git a/examples/SampleApp/src/components/UserInfoOverlay.tsx b/examples/SampleApp/src/components/UserInfoOverlay.tsx
@@ -44,13 +44,13 @@ import type {
   LocalReactionType,
   LocalUserType,
 } from '../types';
+import { useAppContext } from '../context/AppContext';
+import { UserResponse } from 'stream-chat';
 
 dayjs.extend(relativeTime);
 
 const avatarSize = 64;
 
-const permissions = ['admin', 'moderator'];
-
 const styles = StyleSheet.create({
   avatarPresenceIndicator: {
     right: 5,
@@ -114,7 +114,7 @@ export type UserInfoOverlayProps = {
 
 export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
   const { overlayOpacity, visible } = props;
-
+  const { chatClient } = useAppContext();
   const { overlay, setOverlay } = useAppOverlayContext();
   const { client } = useChatContext<
     LocalAttachmentType,
@@ -242,13 +242,10 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
     return null;
   }
 
-  const memberModifiable = permissions.every(
-    (permission) => (member.role || '').toLowerCase() !== permission,
-  );
-  const modifyingPermissions =
-    (permissions.some((permission) => (self.role || '').toLowerCase() === permission) &&
-      memberModifiable) ||
-    memberModifiable;
+  if (!channel) return null;
+
+  const channelCreatorId =
+    channel.data && (channel.data.created_by_id || (channel.data.created_by as UserResponse)?.id);
 
   return (
     <Animated.View pointerEvents={visible ? 'auto' : 'none'} style={StyleSheet.absoluteFill}>
@@ -388,7 +385,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
                           <Text style={[styles.rowText, { color: black }]}>Message</Text>
                         </View>
                       </TapGestureHandler>
-                      {modifyingPermissions ? (
+                      {channelCreatorId === chatClient?.user?.id ? (
                         <TapGestureHandler
                           onHandlerStateChange={({ nativeEvent: { state } }) => {
                             if (state === State.END) {
diff --git a/examples/SampleApp/src/context/AppContext.ts b/examples/SampleApp/src/context/AppContext.ts
@@ -29,3 +29,5 @@ type AppContextType = {
 };
 
 export const AppContext = React.createContext({} as AppContextType);
+
+export const useAppContext = () => React.useContext(AppContext);
diff --git a/examples/SampleApp/src/hooks/useChannelMembersStatus.ts b/examples/SampleApp/src/hooks/useChannelMembersStatus.ts
@@ -1,6 +1,6 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 import { getUserActivityStatus } from '../utils/getUserActivityStatus';
 
 import type { Channel } from 'stream-chat';
@@ -50,7 +50,7 @@ export const useChannelMembersStatus = (
   };
 
   const [status, setStatus] = useState(getStatus());
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
 
   useEffect(() => {
     setStatus(getStatus());
diff --git a/examples/SampleApp/src/hooks/usePaginatedAttachments.ts b/examples/SampleApp/src/hooks/usePaginatedAttachments.ts
@@ -1,6 +1,6 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 
 import type { Channel, MessageResponse } from 'stream-chat';
 
@@ -26,7 +26,7 @@ export const usePaginatedAttachments = (
   >,
   attachmentType: string,
 ) => {
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const offset = useRef(0);
   const hasMoreResults = useRef(true);
   const queryInProgress = useRef(false);
diff --git a/examples/SampleApp/src/hooks/usePaginatedPinnedMessages.ts b/examples/SampleApp/src/hooks/usePaginatedPinnedMessages.ts
@@ -1,6 +1,6 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 
 import type { Channel, MessageResponse } from 'stream-chat';
 
@@ -26,7 +26,7 @@ export const usePaginatedPinnedMessages = (
     LocalUserType
   >,
 ) => {
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const offset = useRef(0);
   const hasMoreResults = useRef(true);
   const queryInProgress = useRef(false);
diff --git a/examples/SampleApp/src/hooks/usePaginatedSearchedMessages.ts b/examples/SampleApp/src/hooks/usePaginatedSearchedMessages.ts
@@ -1,6 +1,6 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 
 import type { MessageFilters, MessageResponse } from 'stream-chat';
 
@@ -43,7 +43,7 @@ export const usePaginatedSearchedMessages = (
   const offset = useRef(0);
   const hasMoreResults = useRef(true);
   const queryInProgress = useRef(false);
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
 
   const done = () => {
     queryInProgress.current = false;
diff --git a/examples/SampleApp/src/hooks/usePaginatedUsers.ts b/examples/SampleApp/src/hooks/usePaginatedUsers.ts
@@ -1,6 +1,6 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 
 import type { UserFilters, UserResponse } from 'stream-chat';
 
@@ -27,7 +27,7 @@ export type PaginatedUsers = {
 };
 
 export const usePaginatedUsers = (): PaginatedUsers => {
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
 
   const [initialResults, setInitialResults] = useState<UserResponse<LocalUserType>[] | null>(null);
   const [loading, setLoading] = useState(true);
diff --git a/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx b/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx
@@ -1,10 +1,10 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KeyboardCompatibleView, useTheme, version } from 'stream-chat-react-native';
 
 import { ScreenHeader } from '../components/ScreenHeader';
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 
 const styles = StyleSheet.create({
   bottomContainer: {
@@ -143,7 +143,7 @@ export const AdvancedUserSelectorScreen: React.FC = () => {
     },
   } = useTheme();
 
-  const { loginUser } = useContext(AppContext);
+  const { loginUser } = useAppContext();
   const [apiKey, setApiKey] = useState('');
   const [apiKeyError, setApiKeyError] = useState(false);
   const [userId, setUserId] = useState('');
diff --git a/examples/SampleApp/src/screens/ChannelListScreen.tsx b/examples/SampleApp/src/screens/ChannelListScreen.tsx
@@ -1,12 +1,12 @@
-import React, { useContext, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { useNavigation, useScrollToTop } from '@react-navigation/native';
 import { ChannelList, CircleClose, Search, useTheme } from 'stream-chat-react-native';
 import { Channel } from 'stream-chat';
 import { ChannelPreview } from '../components/ChannelPreview';
 import { ChatScreenHeader } from '../components/ChatScreenHeader';
 import { MessageSearchList } from '../components/MessageSearch/MessageSearchList';
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 import { usePaginatedSearchedMessages } from '../hooks/usePaginatedSearchedMessages';
 
 import type { ChannelSort } from 'stream-chat';
@@ -67,7 +67,7 @@ const options = {
 };
 
 export const ChannelListScreen: React.FC = () => {
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const navigation = useNavigation();
   const {
     theme: {
diff --git a/examples/SampleApp/src/screens/ChannelScreen.tsx b/examples/SampleApp/src/screens/ChannelScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { Channel as StreamChatChannel } from 'stream-chat';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
@@ -17,7 +17,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 import { ScreenHeader } from '../components/ScreenHeader';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
@@ -65,7 +65,7 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
   const membersStatus = useChannelMembersStatus(channel);
   const displayName = useChannelPreviewDisplayName(channel, 30);
   const { isOnline } = useChatContext();
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const navigation = useNavigation<ChannelScreenNavigationProp>();
   const typing = useTypingString();
 
@@ -110,7 +110,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     params: { channel: channelFromProp, channelId, messageId },
   },
 }) => {
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const navigation = useNavigation();
   const { bottom } = useSafeAreaInsets();
   const {
diff --git a/examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx b/examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx
@@ -19,7 +19,7 @@ import {
 
 import { RoundButton } from '../components/RoundButton';
 import { ScreenHeader } from '../components/ScreenHeader';
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 import { useAppOverlayContext } from '../context/AppOverlayContext';
 import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
 import { useUserInfoOverlayContext } from '../context/UserInfoOverlayContext';
@@ -166,7 +166,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
     params: { channel },
   },
 }) => {
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const { setOverlay: setAppOverlay } = useAppOverlayContext();
   const { setData: setBottomSheetOverlayData } = useBottomSheetOverlayContext();
   const { setData: setUserInfoOverlayData } = useUserInfoOverlayContext();
@@ -261,11 +261,13 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
     <SafeAreaView style={[styles.container, { backgroundColor: white }]}>
       <ScreenHeader
         inSafeArea
-        RightContent={() => (
-          <RoundButton onPress={openAddMembersSheet}>
-            <AddUser fill={accent_blue} height={24} width={24} />
-          </RoundButton>
-        )}
+        RightContent={() =>
+          channelCreatorId === chatClient?.user?.id ? (
+            <RoundButton onPress={openAddMembersSheet}>
+              <AddUser fill={accent_blue} height={24} width={24} />
+            </RoundButton>
+          ) : null
+        }
         subtitleText={membersStatus}
         titleText={displayName}
       />
diff --git a/examples/SampleApp/src/screens/MentionsScreen.tsx b/examples/SampleApp/src/screens/MentionsScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { FlatList, StyleSheet, Text, View } from 'react-native';
 import { AtMentions, useTheme } from 'stream-chat-react-native';
 import { MessageResponse } from 'stream-chat';
@@ -11,7 +11,7 @@ import { useScrollToTop } from '@react-navigation/native';
 import type { StackNavigationProp } from '@react-navigation/stack';
 
 import type { BottomTabNavigatorParamList } from '../types';
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 import type {
   LocalAttachmentType,
   LocalChannelType,
@@ -61,7 +61,7 @@ export const MentionsScreen: React.FC<MentionsScreenProps> = () => {
       colors: { white_snow },
     },
   } = useTheme();
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
   const messageFilters = useMemo(
     () => ({
       'mentioned_users.id': {
diff --git a/examples/SampleApp/src/screens/MenuDrawer.tsx b/examples/SampleApp/src/screens/MenuDrawer.tsx
@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { Edit, Group, User, useTheme } from 'stream-chat-react-native';
 
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 
 import type { DrawerContentComponentProps } from '@react-navigation/drawer';
 
@@ -50,7 +50,7 @@ export const MenuDrawer: React.FC<DrawerContentComponentProps> = ({ navigation }
     },
   } = useTheme();
 
-  const { chatClient, logout } = useContext(AppContext);
+  const { chatClient, logout } = useAppContext();
 
   if (!chatClient) return null;
 
diff --git a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
@@ -15,7 +15,7 @@ import { RoundButton } from '../components/RoundButton';
 import { ScreenHeader } from '../components/ScreenHeader';
 import { SelectedUserTag } from '../components/UserSearch/SelectedUserTag';
 import { UserSearchResults } from '../components/UserSearch/UserSearchResults';
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 import { useUserSearchContext } from '../context/UserSearchContext';
 
 import type { StackNavigationProp } from '@react-navigation/stack';
@@ -130,7 +130,7 @@ export const NewDirectMessagingScreen: React.FC<NewDirectMessagingScreenProps> =
       colors: { accent_blue, black, border, grey, white },
     },
   } = useTheme();
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
 
   const {
     onChangeSearchText,
diff --git a/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx b/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx
@@ -1,11 +1,11 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { FlatList, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
 import { ArrowRight, Search, useTheme } from 'stream-chat-react-native';
 
 import { ScreenHeader } from '../components/ScreenHeader';
 import { UserGridItem } from '../components/UserSearch/UserGridItem';
 import { UserSearchResults } from '../components/UserSearch/UserSearchResults';
-import { AppContext } from '../context/AppContext';
+import { useAppContext } from '../context/AppContext';
 import { useUserSearchContext } from '../context/UserSearchContext';
 
 import type { StackNavigationProp } from '@react-navigation/stack';
@@ -73,7 +73,7 @@ type Props = {
 };
 
 export const NewGroupChannelAddMemberScreen: React.FC<Props> = ({ navigation }) => {
-  const { chatClient } = useContext(AppContext);
+  const { chatClient } = useAppContext();
 
   const {
     theme: {
diff --git a/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx b/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx
diff --git a/examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx b/examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx
diff --git a/examples/SampleApp/src/screens/SharedGroupsScreen.tsx b/examples/SampleApp/src/screens/SharedGroupsScreen.tsx
diff --git a/examples/SampleApp/src/screens/UserSelectorScreen.tsx b/examples/SampleApp/src/screens/UserSelectorScreen.tsx
