feat(chat-channel): implement base UI for channel editing

ice-blockchain · Jun 5, 2023 · 9009ecd · 9009ecd
1 parent b4cb0f5
commit 9009ecd
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 31 deletions.
diff --git a/src/navigation/Main.tsx b/src/navigation/Main.tsx
@@ -19,7 +19,7 @@ import {NavigatorScreenParams} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {ChannelAdministrators} from '@screens/ChatFlow/ChannelAdministrators';
 import {ChannelTypeSelect} from '@screens/ChatFlow/ChannelTypeSelect';
-import {CreateChannel} from '@screens/ChatFlow/CreateChannel';
+import {EditChannel} from '@screens/ChatFlow/EditChannel';
 import {BalanceHistory} from '@screens/HomeFlow/BalanceHistory';
 import {Home} from '@screens/HomeFlow/Home';
 import {
@@ -137,7 +137,12 @@ export type MainStackParamList = {
   ProfilePrivacyEditStep1: undefined;
   ProfilePrivacyEditStep2: undefined;
   ProfilePrivacyEditStep3: undefined;
-  'Chat/CreateChannel': undefined;
+  'Chat/EditChannel': {
+    /**
+     * null for new channel (create channel flow)
+     */
+    channelId: string | null;
+  };
   'Chat/ChannelType': {
     channelId: string | null;
   };
@@ -409,7 +414,7 @@ export function MainNavigator() {
         options={modalOptions}
         component={JoinTelegramPopUp}
       />
-      <MainStack.Screen name={'Chat/CreateChannel'} component={CreateChannel} />
+      <MainStack.Screen name={'Chat/EditChannel'} component={EditChannel} />
       <MainStack.Screen
         name={'Chat/ChannelType'}
         component={ChannelTypeSelect}

diff --git a/...Channel/components/ChannelPhoto/index.tsx → ...Channel/components/ChannelPhoto/index.tsx b/...Channel/components/ChannelPhoto/index.tsx → ...Channel/components/ChannelPhoto/index.tsx
@@ -23,7 +23,7 @@ export const ChannelPhoto = () => {
   }, []);
 
   const {onEditPress, localImage} = useActionSheetUpdateAvatar({
-    title: t('chat.create_channel.add_channel_photo'),
+    title: t('chat.edit_channel.add_channel_photo'),
     onChange,
     uri,
   });
@@ -58,8 +58,8 @@ export const ChannelPhoto = () => {
 
       <Text style={styles.text}>
         {imageSource
-          ? t('chat.create_channel.buttons.change_photo')
-          : t('chat.create_channel.buttons.add_photo')}
+          ? t('chat.edit_channel.buttons.change_photo')
+          : t('chat.edit_channel.buttons.add_photo')}
       </Text>
     </Touchable>
   );

diff --git a/...ateChannel/components/ConfigRow/index.tsx → ...ditChannel/components/ConfigRow/index.tsx b/...ateChannel/components/ConfigRow/index.tsx → ...ditChannel/components/ConfigRow/index.tsx
diff --git a/src/screens/ChatFlow/CreateChannel/index.tsx → src/screens/ChatFlow/EditChannel/index.tsx b/src/screens/ChatFlow/CreateChannel/index.tsx → src/screens/ChatFlow/EditChannel/index.tsx
@@ -4,30 +4,36 @@ import {PrimaryButton} from '@components/Buttons/PrimaryButton';
 import {CommonInput, CommonInputRef} from '@components/Inputs/CommonInput';
 import {KeyboardAvoider} from '@components/KeyboardAvoider';
 import {LinesBackground} from '@components/LinesBackground';
+import {Touchable} from '@components/Touchable';
 import {COLORS} from '@constants/colors';
 import {commonStyles} from '@constants/styles';
 import {useSafeAreaInsets} from '@hooks/useSafeAreaInsets';
 import {useScrollShadow} from '@hooks/useScrollShadow';
 import {Header} from '@navigation/components/Header';
 import {MainStackParamList} from '@navigation/Main';
-import {useNavigation} from '@react-navigation/native';
+import {RouteProp} from '@react-navigation/native';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {AdminIcon} from '@svg/AdminIcon';
+import {BinIcon} from '@svg/BinIcon';
 import {SpeakerphoneIcon} from '@svg/SpeakerphoneIcon';
 import {t} from '@translations/i18n';
-import React, {useRef, useState} from 'react';
+import React, {useCallback, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {rem} from 'rn-units';
 
 import {CHANNEL_PHOTO_SIZE, ChannelPhoto} from './components/ChannelPhoto';
 import {ConfigRow} from './components/ConfigRow';
 
-export const CreateChannel = () => {
-  const safeAreaInsets = useSafeAreaInsets();
+interface Props {
+  navigation: NativeStackNavigationProp<MainStackParamList>;
+  route: RouteProp<MainStackParamList, 'Chat/EditChannel'>;
+}
+
+export const EditChannel = ({navigation, route}: Props) => {
+  const {channelId} = route.params;
 
-  const navigation =
-    useNavigation<NativeStackNavigationProp<MainStackParamList>>();
+  const safeAreaInsets = useSafeAreaInsets();
 
   const {scrollHandler, shadowStyle} = useScrollShadow();
 
@@ -43,13 +49,51 @@ export const CreateChannel = () => {
 
   const [admins, _setAdmins] = useState<string[]>(['currentUser']);
 
+  const onDeleteChannel = useCallback(() => {
+    navigation.navigate('PopUp', {
+      title: t('chat.edit_channel.dialogs.delete_channel.title'),
+      message: t('chat.edit_channel.dialogs.delete_channel.message'),
+      buttons: [
+        {
+          text: t('button.cancel'),
+          preset: 'outlined',
+        },
+        {
+          text: t('chat.edit_channel.dialogs.delete_channel.buttons.delete'),
+          preset: 'destructive',
+          onPress: () => {
+            // TODO: Close all screens related to this channelId (if not null)
+            navigation.goBack();
+          },
+        },
+      ],
+    });
+  }, [navigation]);
+
+  const renderDeleteChannelButton = useCallback(() => {
+    if (!channelId) {
+      return null;
+    }
+
+    return (
+      <Touchable onPress={onDeleteChannel}>
+        <BinIcon width={rem(24)} height={rem(24)} color={COLORS.attention} />
+      </Touchable>
+    );
+  }, [channelId, onDeleteChannel]);
+
   return (
     <KeyboardAvoider>
       <Header
         color={COLORS.primaryDark}
-        title={t('chat.create_channel.title')}
+        title={
+          channelId
+            ? t('chat.edit_channel.title_edit')
+            : t('chat.edit_channel.title_create')
+        }
         containerStyle={shadowStyle}
         backgroundColor={COLORS.white}
+        renderRightButtons={renderDeleteChannelButton}
       />
 
       <Animated.ScrollView
@@ -72,7 +116,7 @@ export const CreateChannel = () => {
 
         <View style={styles.contentContainer}>
           <CommonInput
-            label={t('chat.create_channel.labels.title')}
+            label={t('chat.edit_channel.labels.title')}
             value={title}
             onChangeText={setTitle}
             returnKeyType={'next'}
@@ -82,7 +126,7 @@ export const CreateChannel = () => {
           <CommonInput
             ref={refDescription}
             containerStyle={styles.item}
-            label={t('chat.create_channel.labels.description')}
+            label={t('chat.edit_channel.labels.description')}
             value={description}
             onChangeText={setDescription}
             multiline
@@ -92,7 +136,7 @@ export const CreateChannel = () => {
           <ConfigRow
             style={styles.item}
             Icon={SpeakerphoneIcon}
-            title={t('chat.create_channel.labels.channel_type')}
+            title={t('chat.edit_channel.labels.channel_type')}
             value={t(`chat.channel.type.${channelType}`)}
             onPress={() => {
               navigation.navigate('Chat/ChannelType', {
@@ -104,7 +148,7 @@ export const CreateChannel = () => {
           <ConfigRow
             style={styles.item}
             Icon={AdminIcon}
-            title={t('chat.create_channel.labels.administrators')}
+            title={t('chat.edit_channel.labels.administrators')}
             value={admins.length}
             onPress={() => {
               navigation.navigate('Chat/ChannelAdministrators', {
@@ -117,7 +161,11 @@ export const CreateChannel = () => {
 
           <PrimaryButton
             style={styles.item}
-            text={t('chat.create_channel.buttons.create_channel')}
+            text={
+              channelId
+                ? t('chat.edit_channel.buttons.save_changes')
+                : t('chat.edit_channel.buttons.create_channel')
+            }
             onPress={() => {
               navigation.goBack();
             }}

diff --git a/src/translations/locales/en.json b/src/translations/locales/en.json
@@ -901,19 +901,31 @@
         "private": "Private"
       }
     },
-    "create_channel": {
-      "title": "Creating a channel",
+    "edit_channel": {
+      "title_create": "Creating a channel",
+      "title_edit": "Channel editing",
       "add_channel_photo": "Add channel photo",
       "labels": {
         "administrators": "Administrators",
         "channel_type": "Channel type",
         "description": "Description",
+        "invitation_link": "Invitation link",
         "title": "Title"
       },
       "buttons": {
-        "create_channel": "Create channel",
         "add_photo": "Add photo",
-        "change_photo": "Change photo"
+        "change_photo": "Change photo",
+        "create_channel": "Create channel",
+        "save_changes": "Save changes"
+      },
+      "dialogs": {
+        "delete_channel": {
+          "title": "Delete channel?",
+          "message": "All publications and subscribers will be lost. Do you really want to delete the channel?",
+          "buttons": {
+            "delete": "Delete"
+          }
+        }
       }
     },
     "channel_type": {

diff --git a/src/translations/locales/en.json.d.ts b/src/translations/locales/en.json.d.ts
@@ -585,15 +585,21 @@ export type Translations = {
   'social_media.instagram.description_part2': null;
   'chat.channel.type.public': null;
   'chat.channel.type.private': null;
-  'chat.create_channel.title': null;
-  'chat.create_channel.add_channel_photo': null;
-  'chat.create_channel.labels.administrators': null;
-  'chat.create_channel.labels.channel_type': null;
-  'chat.create_channel.labels.description': null;
-  'chat.create_channel.labels.title': null;
-  'chat.create_channel.buttons.create_channel': null;
-  'chat.create_channel.buttons.add_photo': null;
-  'chat.create_channel.buttons.change_photo': null;
+  'chat.edit_channel.title_create': null;
+  'chat.edit_channel.title_edit': null;
+  'chat.edit_channel.add_channel_photo': null;
+  'chat.edit_channel.labels.administrators': null;
+  'chat.edit_channel.labels.channel_type': null;
+  'chat.edit_channel.labels.description': null;
+  'chat.edit_channel.labels.invitation_link': null;
+  'chat.edit_channel.labels.title': null;
+  'chat.edit_channel.buttons.add_photo': null;
+  'chat.edit_channel.buttons.change_photo': null;
+  'chat.edit_channel.buttons.create_channel': null;
+  'chat.edit_channel.buttons.save_changes': null;
+  'chat.edit_channel.dialogs.delete_channel.title': null;
+  'chat.edit_channel.dialogs.delete_channel.message': null;
+  'chat.edit_channel.dialogs.delete_channel.buttons.delete': null;
   'chat.channel_type.title': null;
   'chat.channel_type.info': null;
   'chat.channel_administrators.title': null;