Move blocked and hidden messages to the archive (#110)

components/conversation-screen.tsx

@@ -53,7 +53,7 @@ const ConversationScreen = ({navigation, route}) => {
   const personId: number = route?.params?.personId;
   const name: string = route?.params?.name;
   const imageUuid: number = route?.params?.imageUuid;
-  const isDeletedUser: boolean = route?.params?.isDeletedUser;
+  const isAvailableUser: boolean = route?.params?.isAvailableUser ?? true;
 
   const listRef = useRef<ScrollView>(null)
 
@@ -320,7 +320,7 @@ const ConversationScreen = ({navigation, route}) => {
         {lastMessageStatus === 'blocked' ?  name + ' is unavailable right now. Try messaging someone else!' : '' }
         {lastMessageStatus === 'not unique' ? `Someone already sent that intro! Try sending ${name} a different message...` : '' }
       </DefaultText>
-      {!messageFetchTimeout && !isDeletedUser &&
+      {!messageFetchTimeout && isAvailableUser &&
         <TextInputWithButton onPress={onPressSend}/>
       }
     </>

components/inbox-item.tsx

@@ -21,7 +21,7 @@ const InboxItem = ({
   matchPercentage,
   lastMessage,
   lastMessageTimestamp,
-  isDeletedUser,
+  isAvailableUser,
 }: {
   wasRead: boolean
   name: string
@@ -30,7 +30,7 @@ const InboxItem = ({
   matchPercentage: number
   lastMessage: string
   lastMessageTimestamp: Date
-  isDeletedUser: boolean
+  isAvailableUser: boolean
 }) => {
   const navigation = useNavigation<any>();
 
@@ -60,8 +60,8 @@ const InboxItem = ({
 
   const onPress = useCallback(() => navigation.navigate(
     'Conversation Screen',
-    { personId, name, imageUuid, isDeletedUser }
-  ), [personId, name, imageUuid, isDeletedUser]);
+    { personId, name, imageUuid, isAvailableUser }
+  ), [personId, name, imageUuid, isAvailableUser]);
 
   return (
     <Pressable

components/inbox-tab.tsx

@@ -22,7 +22,7 @@ import { Notice } from './notice';
 import { OptionScreen } from './option-screen';
 import { hideMeFromStrangersOptionGroup } from '../data/option-groups';
 import { DefaultFlatList } from './default-flat-list';
-import { Inbox, Conversation, observeInbox } from '../xmpp/xmpp';
+import { Inbox, Conversation, inboxStats, observeInbox } from '../xmpp/xmpp';
 import { compareArrays } from '../util/util';
 import { TopNavBarButton } from './top-nav-bar-button';
 
@@ -54,6 +54,28 @@ const InboxTab_ = ({navigation}) => {
   const [showArchive, setShowArchive] = useState(false);
   const listRef = useRef<any>(undefined);
 
+  const _inboxStats = inbox ? inboxStats(inbox) : null;
+
+  const numUnreadChats = (() => {
+    if (!_inboxStats) {
+      return 0;
+    }
+
+    return showArchive ?
+      _inboxStats.chats.numUnreadUnavailable :
+      _inboxStats.chats.numUnreadAvailable;
+  })();
+
+  const numUnreadIntros = (() => {
+    if (!_inboxStats) {
+      return 0;
+    }
+
+    return showArchive ?
+      _inboxStats.intros.numUnreadUnavailable :
+      _inboxStats.intros.numUnreadAvailable;
+  })();
+
   const buttonOpacity = useRef(new Animated.Value(0)).current;
 
   const fadeOut = useCallback(() => {
@@ -116,20 +138,19 @@ const InboxTab_ = ({navigation}) => {
 
     const a = section.conversations[0];
 
-
     const pageSize = 10;
     const page = [...section.conversations]
-      .filter((c) => c.isDeletedUser === showArchive)
+      .filter((c) => (!c.isAvailableUser || c.wasArchivedByMe) === showArchive)
       .sort((a, b) => {
         if (sectionName === 'intros' && sortByIndex === 1) {
           return compareArrays(
-            [!b.isDeletedUser, b.matchPercentage, +b.lastMessageTimestamp],
-            [!a.isDeletedUser, a.matchPercentage, +a.lastMessageTimestamp],
+            [b.matchPercentage, +b.lastMessageTimestamp],
+            [a.matchPercentage, +a.lastMessageTimestamp],
           );
         } else {
           return compareArrays(
-            [!b.isDeletedUser, +b.lastMessageTimestamp, b.matchPercentage],
-            [!a.isDeletedUser, +a.lastMessageTimestamp, a.matchPercentage],
+            [+b.lastMessageTimestamp, b.matchPercentage],
+            [+a.lastMessageTimestamp, a.matchPercentage],
           );
         }
       })
@@ -157,8 +178,8 @@ const InboxTab_ = ({navigation}) => {
       <>
         <ButtonGroup
           buttons={[
-            'Intros' + (inbox?.intros?.numUnread ? ` (${inbox.intros.numUnread})` : ''),
-            'Chats'  + (inbox?.chats?.numUnread  ? ` (${inbox.chats.numUnread})`  : ''),
+            'Intros' + (numUnreadIntros ? ` (${numUnreadIntros})` : ''),
+            'Chats'  + (numUnreadChats  ? ` (${numUnreadChats})`  : ''),
           ]}
           selectedIndex={sectionIndex}
           onPress={setSectionIndex_}
@@ -186,7 +207,7 @@ const InboxTab_ = ({navigation}) => {
             }}
           />
         </Animated.View>
-        {!isTooManyTapped && sectionIndex === 0 && inbox && inbox.intros.numUnread >= 5 &&
+        {!isTooManyTapped && sectionIndex === 0 && !showArchive && numUnreadIntros >= 3 &&
           <Notice
             onPress={onPressTooMany}
             style={{
@@ -213,7 +234,7 @@ const InboxTab_ = ({navigation}) => {
       matchPercentage={x.item.matchPercentage}
       lastMessage={x.item.lastMessage}
       lastMessageTimestamp={x.item.lastMessageTimestamp}
-      isDeletedUser={x.item.isDeletedUser}
+      isAvailableUser={x.item.isAvailableUser}
     />
   ), []);
 

components/speech-bubble.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import { DefaultText } from './default-text';
-import { friendlyTimestamp } from '../util/util';
+import { longFriendlyTimestamp } from '../util/util';
 
 type State = 'Read' | 'Delivered';
 
@@ -66,7 +66,7 @@ const SpeechBubble = (props: Props) => {
             color: '#666',
           }}
         >
-          {friendlyTimestamp(props.timestamp)}
+          {longFriendlyTimestamp(props.timestamp)}
         </DefaultText>
       }
       {props.state &&

components/tab-bar.tsx

@@ -12,7 +12,7 @@ import { DefaultText } from './default-text';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { StackActions } from '@react-navigation/native';
 import { QAndADevice } from './q-and-a-device';
-import { Inbox, observeInbox } from '../xmpp/xmpp';
+import { Inbox, inboxStats, observeInbox } from '../xmpp/xmpp';
 
 const displayedTabs: Set<string> = new Set([
   "Q&A",
@@ -24,13 +24,16 @@ const displayedTabs: Set<string> = new Set([
 
 const TabBar = ({state, descriptors, navigation}) => {
   const [inboxHasUnread, setInboxHasUnread] = useState(false);
-  const onChangeInbox = useCallback(
-    (inbox: Inbox) => setInboxHasUnread(
-      inbox?.numUnread !== undefined &&
-      inbox?.numUnread > 0
-    ),
-    []
-  );
+  const onChangeInbox = useCallback((inbox: Inbox | null) => {
+    if (!inbox) {
+      setInboxHasUnread(false);
+      return;
+    }
+
+    const numUnreadAvailable = inboxStats(inbox).numUnreadAvailable;
+
+    setInboxHasUnread(numUnreadAvailable > 0);
+  }, []);
   observeInbox(onChangeInbox);
 
   return (

util/util.tsx

@@ -35,7 +35,7 @@ const friendlyTimestamp = (date: Date): string => {
     return format(date, 'h:mm aaa')
   } else if (isThisWeek(date)) {
     // Format as 'eeee' (day of the week)
-    return format(date, 'eeee')
+    return format(date, 'eee')
   } else if (isThisYear(date)) {
     // Format as 'd MMM' (date and month)
     return format(date, 'd MMM')
@@ -45,6 +45,17 @@ const friendlyTimestamp = (date: Date): string => {
   }
 };
 
+const longFriendlyTimestamp = (date: Date): string => {
+  // Format as 'hh:mm'
+  const timeOfDay = format(date, 'h:mm aaa');
+
+  if (isToday(date)) {
+    return timeOfDay;
+  } else {
+    return friendlyTimestamp(date) + ', ' + timeOfDay
+  }
+};
+
 const delay = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
 const deleteFromArray = <T,>(array: T[], element: T): T[] => {
@@ -68,5 +79,6 @@ export {
   deleteFromArray,
   friendlyTimestamp,
   isMobile,
+  longFriendlyTimestamp,
   withTimeout,
 };