WIP: fixing missing spaces for list items that have been removed.

ts/components/ConversationListItem.tsx

@@ -28,7 +28,7 @@ import { SectionType } from '../state/ducks/section';
 import { getFocusedSection } from '../state/selectors/section';
 import { ConversationNotificationSettingType } from '../models/conversation';
 import { Flex } from './basic/Flex';
-import { SessionButton } from './session/SessionButton';
+import { SessionButton, SessionButtonColor } from './session/SessionButton';
 import { getConversationById } from '../data/data';
 import { getConversationController } from '../session/conversations';
 
@@ -294,10 +294,10 @@ const ConversationListItem = (props: Props) => {
    * marks the conversation as approved.
    */
   const handleConversationAccept = async () => {
-    const convo = await getConversationById(conversationId);
-    convo?.setIsApproved(true);
+    const conversationToApprove = await getConversationById(conversationId);
+    conversationToApprove?.setIsApproved(true);
     console.warn('convo marked as approved');
-    console.warn({ convo });
+    console.warn({ convo: conversationToApprove });
   };
 
   return (
@@ -351,14 +351,24 @@ const ConversationListItem = (props: Props) => {
             lastMessage={lastMessage}
           />
           {isMessageRequest ? (
-            <Flex
+            <StyledButtonContainer
               className="module-conversation-list-item__button-container"
               container={true}
               flexDirection="row"
             >
-              <SessionButton onClick={handleConversationDecline}>Decline</SessionButton>
-              <SessionButton onClick={handleConversationAccept}>Accept</SessionButton>
-            </Flex>
+              <SessionButton
+                onClick={handleConversationDecline}
+                buttonColor={SessionButtonColor.Danger}
+              >
+                Decline
+              </SessionButton>
+              <SessionButton
+                buttonColor={SessionButtonColor.Green}
+                onClick={handleConversationAccept}
+              >
+                Accept
+              </SessionButton>
+            </StyledButtonContainer>
           ) : null}
         </div>
       </div>
@@ -381,4 +391,8 @@ const ConversationListItem = (props: Props) => {
   );
 };
 
+const StyledButtonContainer = styled(Flex)`
+  justify-content: space-evenly;
+`;
+
 export const MemoConversationListItemWithDetails = React.memo(ConversationListItem, _.isEqual);

ts/components/LeftPane.tsx

@@ -31,6 +31,8 @@ const InnerLeftPaneMessageSection = () => {
   const lists = showSearch ? undefined : useSelector(getLeftPaneLists);
   // tslint:disable: use-simple-attributes
 
+  // const
+
   return (
     <LeftPaneMessageSection
       conversations={lists?.conversations || []}

ts/components/session/LeftPaneMessageSection.tsx

@@ -54,6 +54,8 @@ interface State {
   loading: boolean;
   overlay: false | SessionClosableOverlayType;
   valuePasted: string;
+  approvedConversations: any[];
+  unapprovedConversations: any[];
 }
 
 export class LeftPaneMessageSection extends React.Component<Props, State> {
@@ -62,25 +64,42 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
   public constructor(props: Props) {
     super(props);
 
+    const approvedConversations = props.conversations?.filter(convo => Boolean(convo.isApproved));
+    const unapprovedConversations = props.conversations?.filter(
+      convo => !Boolean(convo.isApproved)
+    );
+
     this.state = {
       loading: false,
       overlay: false,
       valuePasted: '',
+      approvedConversations: approvedConversations || [],
+      unapprovedConversations: unapprovedConversations || [],
     };
 
     autoBind(this);
     this.debouncedSearch = _.debounce(this.search.bind(this), 20);
   }
 
-  public renderRow = ({ index, key, style }: RowRendererParamsType): JSX.Element => {
+  public renderRow = ({ index, key, style }: RowRendererParamsType): JSX.Element | null => {
     const { conversations } = this.props;
+    // const { approvedConversations: conversations } = this.state;
+    console.warn({ conversations });
 
     if (!conversations) {
       throw new Error('renderRow: Tried to render without conversations');
     }
-
     const conversation = conversations[index];
 
+    console.warn(`${index}`);
+    console.warn({ conversation });
+
+    // TODO: need to confirm whats best here.
+    // true by default then false on newly received or
+    // false by default and true when approved but then how to handle pre-existing convos?
+    if (conversation.isApproved === undefined || conversation.isApproved === false) {
+      return null;
+    }
     return <MemoConversationListItemWithDetails key={key} style={style} {...conversation} />;
   };
 
@@ -99,13 +118,21 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
     // TODO: make selectors for this instead.
     // TODO: only filter conversations if setting for requests is applied
     const approvedConversations = conversations.filter(c => c.isApproved === true);
-    console.warn({ approvedConversations });
     const messageRequestsEnabled =
       window.inboxStore?.getState().userConfig.messageRequests === true;
 
     const conversationsForList = messageRequestsEnabled ? approvedConversations : conversations;
+    if (!this.state.approvedConversations.length) {
+      this.setState({
+        approvedConversations: conversationsForList,
+      });
+    }
+
+    console.warn({ conversationsForList });
+
+    // const length = conversations.length;
+    const length = conversationsForList.length;
 
-    const length = conversations.length;
     const listKey = 0;
     // Note: conversations is not a known prop for List, but it is required to ensure that
     //   it re-renders when our conversation data changes. Otherwise it would just render
@@ -120,6 +147,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
               height={height}
               rowCount={length}
               rowHeight={64}
+              // rowHeight={this.getRowHeight}
               rowRenderer={this.renderRow}
               width={width}
               autoHeight={false}
@@ -132,6 +160,10 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
     return [list];
   }
 
+  // private getRowHeight({index: any}: any) {
+  //   if (this.)
+  // }
+
   public closeOverlay({ pubKey }: { pubKey: string }) {
     if (this.state.valuePasted === pubKey) {
       this.setState({ overlay: false, valuePasted: '' });

ts/components/session/MessageRequestsBanner.tsx

@@ -84,14 +84,18 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess
 export const MessageRequestsBanner = (props: { handleOnClick: () => any }) => {
   const { handleOnClick } = props;
   const convos = useSelector(getLeftPaneLists).conversations;
-  const pendingRequests = convos.filter(c => c.isApproved !== true) || [];
+  const pendingRequestsCount = (convos.filter(c => c.isApproved !== true) || []).length;
+
+  if (!pendingRequestsCount) {
+    return null;
+  }
 
   return (
     <StyledMessageRequestBanner onClick={handleOnClick}>
       <CirclularIcon iconType={'bell'} iconSize="medium" />
       <StyledMessageRequestBannerHeader>Message Requests</StyledMessageRequestBannerHeader>
       <StyledUnreadCounter>
-        <div>{pendingRequests.length}</div>
+        <div>{pendingRequestsCount}</div>
       </StyledUnreadCounter>
     </StyledMessageRequestBanner>
   );

ts/components/session/SessionClosableOverlay.tsx

@@ -131,7 +131,6 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
       case 'open-group':
         title = window.i18n('joinOpenGroup');
         buttonText = window.i18n('next');
-        // descriptionLong = '';
         subtitle = window.i18n('openGroupURL');
         placeholder = window.i18n('enterAnOpenGroupURL');
         break;
@@ -292,8 +291,6 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
   }
 }
 
-
-
 const MessageRequestList = () => {
   // get all conversations with (accepted / known)
   const lists = useSelector(getLeftPaneLists);

ts/models/conversation.ts

@@ -714,7 +714,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
 
       const sentAt = message.get('sent_at');
 
-      // TODO: for debuggong
+      // TODO: for debugging
       if (message.get('body')?.includes('unapprove')) {
         console.warn('setting to unapprove');
         await this.setIsApproved(false);
@@ -1389,11 +1389,21 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
   }
 
   public async setIsApproved(value: boolean) {
+    console.warn(`Setting ${this.attributes.nickname} isApproved to:: ${value}`);
     if (value !== this.get('isApproved')) {
       this.set({
         isApproved: value,
       });
       await this.commit();
+
+      if (window?.inboxStore) {
+        window.inboxStore?.dispatch(
+          conversationChanged({
+            id: this.id,
+            data: this.getConversationModelProps(),
+          })
+        );
+      }
     }
   }
 

ts/state/selectors/conversations.ts

@@ -343,6 +343,22 @@ export const getLeftPaneLists = createSelector(
   _getLeftPaneLists
 );
 
+export const getApprovedConversations = createSelector(
+  getConversationLookup,
+  (lookup: ConversationLookupType): Array<ReduxConversationType> => {
+    return Object.values(lookup).filter(convo => convo.isApproved === true);
+  }
+);
+
+export const getUnapprovedConversations = createSelector(
+  getConversationLookup,
+  (lookup: ConversationLookupType): Array<ReduxConversationType> => {
+    return Object.values(lookup).filter(
+      convo => convo.isApproved === false || convo.isApproved === undefined
+    );
+  }
+);
+
 export const getMe = createSelector(
   [getConversationLookup, getOurNumber],
   (lookup: ConversationLookupType, ourNumber: string): ReduxConversationType => {