Releasing v0.5.0.

Author: Jeff

package.json

@@ -15,7 +15,7 @@
     "polished": "^3.4.1",
     "pubnub": "^4.27.0",
     "pubnub-react": "^2.0.0-beta.4",
-    "pubnub-redux": "^0.1.26-alpha",
+    "pubnub-redux": "^0.1.31-alpha",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-pose": "^4.0.8",

src/features/authentication/loginCommand.ts

@@ -19,7 +19,8 @@ export const login = (userId: string): ThunkAction<Promise<void>> => {
       .then(() => {
         // Subscribe to the user's channel to receive events involving this user
         context.pubnub.api.subscribe({
-          channels: [userId]
+          channels: [userId],
+          withPresence: true
         });
       })
       .then(() => {
@@ -43,7 +44,8 @@ export const login = (userId: string): ThunkAction<Promise<void>> => {
         ].map(membership => membership.id);
 
         context.pubnub.api.subscribe({
-          channels: conversationChannels
+          channels: conversationChannels,
+          withPresence: true
         });
       });
 

src/features/conversationMembers/ConversationMembers/ConversationMembers.tsx

@@ -8,6 +8,10 @@ import {
   getUsersByConversationId,
   MembershipHash
 } from "../conversationMemberStore";
+import {
+  getPresenceByConversationId,
+  ConversationPresence
+} from "features/memberPresence/memberPresenceStore";
 import { MemberDescription, UserFragment } from "../MemberDescription";
 import { getCurrentConversationId } from "features/currentConversation/currentConversationStore";
 import { setLayoutDefault } from "features/layout/actions";
@@ -22,21 +26,31 @@ import {
   BackIconWrapper,
   Title
 } from "./ConversationMembers.style";
-import { fetchMembers } from "pubnub-redux";
+import { fetchMembers, fetchHereNow } from "pubnub-redux";
 import { usePubNub } from "pubnub-react";
 
 export const getCurrentConversationMembers = createSelector(
-  [getUsersById, getCurrentConversationId, getUsersByConversationId],
+  [
+    getUsersById,
+    getCurrentConversationId,
+    getUsersByConversationId,
+    getPresenceByConversationId
+  ],
   (
     users: UsersIndexedById,
     conversationId: string,
-    conversationMemberships: MembershipHash
+    conversationMemberships: MembershipHash,
+    conversationPresence: ConversationPresence
   ): UserFragment[] => {
+    let presence = conversationPresence[conversationId];
     return conversationMemberships[conversationId]
       ? conversationMemberships[conversationId].map(user => {
           return {
             ...users[user.id],
-            presence: true
+            presence:
+              presence.occupants.filter(occupant => {
+                return occupant.uuid === user.id;
+              }).length > 0
           };
         })
       : [];
@@ -69,6 +83,12 @@ const ConversationMembers = () => {
           }
         })
       );
+
+      dispatch(
+        fetchHereNow({
+          channels: [currentConversationId]
+        })
+      );
     }
   }, [members, currentConversationId, pubnub, dispatch]);
 

src/features/currentConversation/ConversationOccupancy/ConversationOccupancy.tsx

@@ -6,6 +6,10 @@ import {
   getUsersByConversationId,
   MembershipHash
 } from "features/conversationMembers/conversationMemberStore";
+import {
+  getPresenceByConversationId,
+  ConversationPresence
+} from "features/memberPresence/memberPresenceStore";
 import { getPanelStates } from "features/layout/selectors";
 import { setLayoutRight } from "features/layout/actions";
 import { PeopleGroup as PeopleGroupIcon } from "foundations/components/icons/PeopleGroup";
@@ -21,15 +25,21 @@ export interface ConversationOccupancyFragment {
 }
 
 export const getCurrentConversationOccupancy = createSelector(
-  [getCurrentConversationId, getUsersByConversationId],
+  [
+    getCurrentConversationId,
+    getUsersByConversationId,
+    getPresenceByConversationId
+  ],
   (
     currentConversationId: string,
-    conversationMemberships: MembershipHash
+    conversationMemberships: MembershipHash,
+    conversationPresence: ConversationPresence
   ): ConversationOccupancyFragment => {
     const members = conversationMemberships[currentConversationId];
+    const presence = conversationPresence[currentConversationId];
     return {
       joinedCount: members ? members.length : 0,
-      presentCount: 5
+      presentCount: presence ? presence.occupancy : 0
     };
   }
 );

src/features/currentConversation/Message/Message.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { UserInitialsAvatar } from "foundations/components/UserInitialsAvatar";
 import convertTimestampToTime from "foundations/utilities/convertTimestampToTime";
 import {
@@ -26,9 +26,10 @@ export interface MessageFragment {
 
 interface MessageProps {
   message: MessageFragment;
+  avatar?: ReactNode;
 }
 
-const Message = ({ message }: MessageProps) => {
+const Message = ({ message, avatar }: MessageProps) => {
   /*
     TODO: THere is a bug here.  The message sender may not be loaded here due to errors in timing.
     But, usually, it does get loaded when the members in the conversation get loaded.
@@ -40,11 +41,15 @@ const Message = ({ message }: MessageProps) => {
   return (
     <Wrapper>
       <Avatar>
-        <UserInitialsAvatar
-          size={36}
-          name={message.sender.name}
-          uuid={message.sender.id}
-        />
+        {avatar ? (
+          avatar
+        ) : (
+          <UserInitialsAvatar
+            size={36}
+            name={message.sender.name}
+            uuid={message.sender.id}
+          />
+        )}
       </Avatar>
       <Body>
         <Header>

src/features/currentConversation/MessageList/MessageList.style.tsx

@@ -5,13 +5,4 @@ export const Wrapper = styled.div`
   flex-direction: column;
   overflow-y: scroll;
   height: 100%;
-
-  > div {
-    &:first-child {
-      margin-top: 16px;
-    }
-    &:last-child {
-      margin-bottom: 16px;
-    }
-  }
 `;

src/features/currentConversation/MessageList/MessageList.tsx

@@ -6,6 +6,7 @@ import { getCurrentConversationId } from "../currentConversationStore";
 import { getUsersById } from "features/users/userStore";
 import { getMessagesById } from "features/messages/messageStore";
 import { Wrapper } from "./MessageList.style";
+import WelcomeMessage from "./WelcomeMessage";
 
 /**
  * Create a selector that that returns the list of messages in the currentConversation joined
@@ -44,7 +45,6 @@ export const getCurrentConversationMessages = createSelector(
       : [];
   }
 );
-
 const MessageList = () => {
   type ConversationScrollPositionsType = { [conversationId: string]: number };
   const conversationId: string = useSelector(getCurrentConversationId);
@@ -104,6 +104,7 @@ const MessageList = () => {
 
   return (
     <Wrapper ref={wrapper} onScroll={handleScroll}>
+      <WelcomeMessage />
       {messages.map(message => (
         <Message message={message} key={message.timetoken} />
       ))}

src/features/currentConversation/MessageList/WelcomeMessage.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { UserInitialsAvatar } from "foundations/components/UserInitialsAvatar";
+import { Message } from "../Message";
+
+const welcomeMessage = {
+  sender: {
+    id: "PUBNUB-BOT",
+    name: "PubNub Bot"
+  },
+  timetoken: "15735897955841496",
+  message: {
+    content: {
+      body:
+        "Welcome to Team Chat. 👋👋 Send a message now to start interacting with other users in the app. ⬇️"
+    }
+  }
+};
+
+const WelcomeMessage = () => (
+  <Message
+    message={welcomeMessage}
+    key={welcomeMessage.timetoken}
+    avatar={
+      <UserInitialsAvatar
+        size={36}
+        name="P N"
+        uuid={welcomeMessage.sender.id}
+        color="#E5585E"
+      />
+    }
+  />
+);
+
+export default WelcomeMessage;

src/features/currentUser/networkStatusStore.ts

@@ -0,0 +1,8 @@
+import { createNetworkStatusReducer } from "pubnub-redux";
+
+/**
+ * Create a reducer to hold the current online status of the user
+ */
+
+const NetworkStatusReducer = createNetworkStatusReducer(false);
+export { NetworkStatusReducer };

src/features/joinedConversations/joinConversationCommand.ts

@@ -7,18 +7,17 @@ export const joinConversation = (
   conversationId: string
 ): ThunkAction<Promise<void>> => {
   return (dispatch, getState, context) => {
-    const done = dispatch(
+    return dispatch(
       joinSpaces({
         userId: userId,
         spaces: [{ id: conversationId }]
       })
     ).then(() => {
       context.pubnub.api.subscribe({
-        channels: [conversationId]
+        channels: [conversationId],
+        withPresence: true
       });
       dispatch(focusOnConversation(conversationId));
     });
-
-    return done;
   };
 };