Merge pull request #5656 from lilyfromseattle/convo-select

artsy · May 28, 2020 · b5ffc86 · b5ffc86
2 parents 30825d2 + 8780f51
commit b5ffc86
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 13 deletions.
diff --git a/src/v2/Apps/Conversation/Components/Conversation.tsx b/src/v2/Apps/Conversation/Components/Conversation.tsx
@@ -137,7 +137,6 @@ const Conversation: React.FC<ConversationProps> = props => {
 
   return (
     <Flex flexDirection="column" width="100%">
-      x
       <Box>
         <Spacer mt="45px" />
         <Flex flexDirection="column" width="100%" px={1}>

diff --git a/src/v2/Apps/Conversation/Components/ConversationSnippet.tsx b/src/v2/Apps/Conversation/Components/ConversationSnippet.tsx
@@ -48,6 +48,8 @@ const PurpleCircle = styled.div`
 
 interface ConversationSnippetProps {
   conversation: ConversationSnippet_conversation
+  hasDivider: boolean
+  isSelected: boolean
 }
 
 const ConversationSnippet: React.FC<ConversationSnippetProps> = props => {
@@ -77,8 +79,10 @@ const ConversationSnippet: React.FC<ConversationSnippetProps> = props => {
   const conversationText =
     conversation.lastMessage && conversation.lastMessage.replace(/\n/g, " ")
 
+  const backgroundColor = props.isSelected ? "black5" : "white"
+
   return (
-    <Box>
+    <Box bg={backgroundColor}>
       <Link
         href={`/user/conversations/${conversation.internalID}`}
         underlineBehavior="none"
@@ -98,10 +102,10 @@ const ConversationSnippet: React.FC<ConversationSnippetProps> = props => {
                 )}
               />
             ) : (
-                <Flex width="80px" height="80px">
-                  {renderFallbackImage()}
-                </Flex>
-              )}
+              <Flex width="80px" height="80px">
+                {renderFallbackImage()}
+              </Flex>
+            )}
           </StyledFlex>
           <Flex pt={2} pl={1} width="100%" height="100%">
             <Box width="100%">
@@ -142,7 +146,7 @@ const ConversationSnippet: React.FC<ConversationSnippetProps> = props => {
           </Flex>
         </Flex>
       </Link>
-      <Separator mx={2} width="auto" />
+      {props.hasDivider && <Separator mx={2} width="auto" />}
     </Box>
   )
 }

diff --git a/src/v2/Apps/Conversation/Components/Conversations.tsx b/src/v2/Apps/Conversation/Components/Conversations.tsx
@@ -17,18 +17,35 @@ const Container = styled(Box)`
 interface ConversationsProps {
   me: Conversations_me
   relay: RelayRefetchProp
+  selectedConversationID: string
 }
 
 const Conversations: React.FC<ConversationsProps> = props => {
-  const { me } = props
+  const { me, selectedConversationID } = props
   const conversations = me.conversationsConnection.edges
+
+  const selectedConversationIndex = conversations
+    .map(e => e.node.internalID)
+    .indexOf(selectedConversationID)
+
   return (
     <>
       <Container width={["100%", "375px"]}>
         {conversations.length ? (
           <Box>
             {conversations.map(edge => (
-              <ConversationSnippet conversation={edge.node} key={edge.cursor} />
+              <ConversationSnippet
+                selectedConversationID={selectedConversationID}
+                isSelected={edge.node.internalID === selectedConversationID}
+                conversation={edge.node}
+                key={edge.cursor}
+                hasDivider={
+                  conversations.indexOf(edge) !== selectedConversationIndex &&
+                  conversations.indexOf(edge) !==
+                    selectedConversationIndex - 1 &&
+                  conversations.indexOf(edge) !== conversations.length - 1
+                }
+              />
             ))}
           </Box>
         ) : (

diff --git a/src/v2/Apps/Conversation/Routes/Conversation/index.tsx b/src/v2/Apps/Conversation/Routes/Conversation/index.tsx
@@ -31,6 +31,7 @@ export const ConversationRoute: React.FC<ConversationRouteProps> = props => {
   const { me } = props
   const { user } = useContext(SystemContext)
   const isEnabled = userHasLabFeature(user, "User Conversations View")
+
   if (isEnabled) {
     const route = findCurrentRoute(props.match)
     let maxWidth
@@ -52,7 +53,10 @@ export const ConversationRoute: React.FC<ConversationRouteProps> = props => {
         </Media>
         <Flex>
           <Media greaterThan="xs">
-            <Conversations me={me as any} />
+            <Conversations
+              me={me as any}
+              selectedConversationID={me.conversation.internalID}
+            />
           </Media>
           {/* @ts-ignore */}
           <Conversation conversation={me.conversation} />
@@ -79,6 +83,7 @@ export const ConversationFragmentContainer = createFragmentContainer(
         @argumentDefinitions(conversationID: { type: "String!" }) {
         ...Conversations_me
         conversation(id: $conversationID) {
+          internalID
           to {
             name
           }

diff --git a/src/v2/__generated__/Conversation_me.graphql.ts b/src/v2/__generated__/Conversation_me.graphql.ts
diff --git a/src/v2/__generated__/routes_DetailQuery.graphql.ts b/src/v2/__generated__/routes_DetailQuery.graphql.ts