Merge pull request #574 from ephemeraHQ/lr/view-and-undelete

View and restore flow update

components/Chat/ChatPlaceholder/GroupChatPlaceholder.tsx

@@ -3,7 +3,7 @@ import { useGroupMembers } from "@hooks/useGroupMembers";
 import { useGroupName } from "@hooks/useGroupName";
 import { translate } from "@i18n";
 import { useGroupQuery } from "@queries/useGroupQuery";
-import { actionSheetColors, textPrimaryColor } from "@styles/colors";
+import { textPrimaryColor } from "@styles/colors";
 import { useCallback, useMemo } from "react";
 import {
   Keyboard,
@@ -20,7 +20,6 @@ import { useConversationContext } from "../../../utils/conversation";
 import { sendMessage } from "../../../utils/message";
 import ActivityIndicator from "../../ActivityIndicator/ActivityIndicator";
 import Button from "../../Button/Button";
-import { showActionSheetWithOptions } from "../../StateHandlers/ActionSheetStateHandler";
 
 type Props = {
   messagesCount: number;
@@ -77,26 +76,6 @@ export function GroupChatPlaceholder({ messagesCount }: Props) {
     }
   }, [conversation, messagesCount, onReadyToFocus]);
 
-  const onUnblock = useCallback(() => {
-    showActionSheetWithOptions(
-      {
-        options: [translate("unblock"), translate("cancel")],
-        cancelButtonIndex: 1,
-        destructiveButtonIndex: isBlockedGroup ? undefined : 0,
-        title: translate("if_you_unblock_group"),
-        ...actionSheetColors(colorScheme),
-      },
-      (selectedIndex?: number) => {
-        if (selectedIndex === 0) {
-          allowGroup({
-            includeCreator: false,
-            includeAddedBy: false,
-          });
-        }
-      }
-    );
-  }, [isBlockedGroup, colorScheme, allowGroup]);
-
   return (
     <TouchableWithoutFeedback onPress={handleDismiss}>
       <View onLayout={onLayout} style={styles.chatPlaceholder}>
@@ -108,38 +87,21 @@ export function GroupChatPlaceholder({ messagesCount }: Props) {
             </Text>
           </View>
         )}
-        {conversation && isBlockedGroup && (
+        {conversation && messagesCount === 0 && !groupCreatedByUser && (
           <View>
             <Text style={styles.chatPlaceholderText}>
-              {translate("this_group_is_blocked")}
+              This is the beginning of your{"\n"}conversation in {groupName}
             </Text>
+
             <Button
               variant="secondary"
-              picto="lock.open"
-              title={translate("unblock")}
+              picto="hand.wave"
+              title={translate("say_hi")}
               style={styles.cta}
-              onPress={onUnblock}
+              onPress={handleSend}
             />
           </View>
         )}
-        {conversation &&
-          !isBlockedGroup &&
-          messagesCount === 0 &&
-          !groupCreatedByUser && (
-            <View>
-              <Text style={styles.chatPlaceholderText}>
-                This is the beginning of your{"\n"}conversation in {groupName}
-              </Text>
-
-              <Button
-                variant="secondary"
-                picto="hand.wave"
-                title={translate("say_hi")}
-                style={styles.cta}
-                onPress={handleSend}
-              />
-            </View>
-          )}
       </View>
     </TouchableWithoutFeedback>
   );

components/Chat/ConsentPopup/GroupConsentPopup.tsx

@@ -10,6 +10,7 @@ import {
   backgroundColor,
   textPrimaryColor,
 } from "@styles/colors";
+import { getGroupIdFromTopic } from "@utils/groupUtils/groupId";
 import React, { useCallback, useMemo } from "react";
 import { StyleSheet, Text, useColorScheme, View } from "react-native";
 
@@ -42,7 +43,8 @@ export function GroupConsentPopup() {
   const { groupCreator } = useGroupCreator(topic);
   const { groupStatus } = useSettingsStore(useSelect(["groupStatus"]));
   const { members } = useGroupMembers(topic);
-  const groupStatusForTopic = groupStatus[topic];
+  const groupId = getGroupIdFromTopic(topic);
+  const groupStatusForTopic = groupStatus[groupId];
 
   const isCreator = useMemo(() => {
     if (!members || !currentAccount) {

components/ConversationListItem.tsx

@@ -1,3 +1,4 @@
+import { useGroupConsent } from "@hooks/useGroupConsent";
 import { translate } from "@i18n";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import {
@@ -109,8 +110,58 @@ const ConversationListItem = memo(function ConversationListItem({
   const hasImagePreview = lastMessageImageUrl && lastMessagePreview;
   const showError = lastMessageFromMe && lastMessageStatus === "error";
   const isBlockedChatView = route.name === "Blocked";
+  const { allowGroup } = useGroupConsent(conversationTopic);
 
   const openConversation = useCallback(async () => {
+    const getUserAction = async () => {
+      const methods = {
+        [translate("view_only")]: () => {},
+        [translate("view_and_restore")]: () => {
+          allowGroup({
+            includeCreator: false,
+            includeAddedBy: false,
+          });
+          // Take the user back to wherever the conversation was restored "to"
+          // https://github.com/ephemeraHQ/converse-app/issues/315#issuecomment-2312903441
+          navigation.pop(isSplitScreen ? 1 : 2);
+        },
+        [translate("cancel")]: () => {},
+      };
+      const options = Object.keys(methods);
+
+      return new Promise<(() => void) | null>((resolve) => {
+        showActionSheetWithOptions(
+          {
+            options,
+            title: translate("view_removed_group_chat"),
+            cancelButtonIndex: 2,
+            ...actionSheetColors(colorScheme),
+          },
+          (selectedIndex?: number) => {
+            if (
+              selectedIndex === undefined ||
+              options[selectedIndex] === translate("cancel")
+            ) {
+              return resolve(null);
+            }
+            const method = (methods as any)[options[selectedIndex]];
+            resolve(method);
+          }
+        );
+      });
+    };
+
+    // Ask user's approval when visiting blocked group chats
+    if (isGroupConversation && isBlockedChatView) {
+      const userAction = await getUserAction();
+      if (userAction === null) {
+        setSelected(false);
+        return; // User canceled, stop further execution
+      }
+      userAction();
+    }
+
+    // Open conversation
     if (route.params?.frameURL) {
       // Sharing a frame !!
       navigation.goBack();
@@ -134,7 +185,16 @@ const ConversationListItem = memo(function ConversationListItem({
       topic: conversationTopic,
       message: route.params?.frameURL,
     });
-  }, [conversationTopic, isSplitScreen, navigation, route.params?.frameURL]);
+  }, [
+    conversationTopic,
+    isSplitScreen,
+    navigation,
+    route.params?.frameURL,
+    colorScheme,
+    isGroupConversation,
+    isBlockedChatView,
+    allowGroup,
+  ]);
 
   useEffect(() => {
     navigation.addListener("transitionEnd", resetSelected);

i18n/translations/en.ts

@@ -18,13 +18,15 @@ const en = {
   restore_and_unblock_inviter: "Restore and unblock inviter",
   unblock_and_restore: "Unblock and restore",
   cancel: "Cancel",
+  view_only: "View only",
+  view_and_restore: "View and Restore",
+  view_removed_group_chat: "View removed group chat?",
 
   // Conversation
   accept: "Accept",
   block: "Block",
   decline: "Decline",
   unblock: "Unblock",
-  this_group_is_blocked: "This group is blocked",
   if_you_unblock_contact:
     "If you unblock this contact, they will be able to send you messages again.",
   if_you_block_contact: