feat: display online status

meowtec · Jun 12, 2023 · 2d95c46 · 2d95c46
1 parent 9c2d395
commit 2d95c46
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 4 deletions.
diff --git a/packages/web/src/components/avatar/index.scss b/packages/web/src/components/avatar/index.scss
@@ -13,7 +13,7 @@
   // red dot
   &__badge {
     position: absolute;
-    bottom: 0;
+    top: 0;
     right: 0;
     min-width: 18px;
     height: 18px;
@@ -22,5 +22,24 @@
     border-radius: 50%;
     background-color: #ff0000;
     color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  &__status {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+    color: #fff;
+
+    &.__online {
+      background: #00dd00;
+    }
+
+    &.__offline {
+      background: #ff0000;
+    }
   }
 }
diff --git a/packages/web/src/components/avatar/index.tsx b/packages/web/src/components/avatar/index.tsx
@@ -7,6 +7,7 @@ import './index.scss';
 interface AvatarProps {
   id: string;
   badge?: number;
+  online?: boolean;
   className?: string;
 }
 
@@ -16,7 +17,9 @@ function getAvatarColors(id: string) {
   return new Array(3 + size).fill(0).map(() => `#${Math.floor(rand() * 0xffffff).toString(16).padStart(6, '0')}`);
 }
 
-export default function Avatar({ id, badge, className }: AvatarProps) {
+export default function Avatar({
+  id, badge, online, className,
+}: AvatarProps) {
   const colors = useMemo(() => getAvatarColors(id), [id]);
 
   return (
@@ -27,6 +30,9 @@ export default function Avatar({ id, badge, className }: AvatarProps) {
         colors={colors}
         size={60}
       />
+      {online != null ? (
+        <span className={clsx('avatar__status', online ? '__online' : '__offline')} />
+      ) : null}
       {badge ? (
         <span className="avatar__badge">{badge}</span>
       ) : null}

diff --git a/packages/web/src/model/index.ts b/packages/web/src/model/index.ts
@@ -24,6 +24,10 @@ import { createSelectors } from './selectors';
 const useAppStoreBase = create<AppState>()(persist(() => initialState, {
   name: 'chat-storage',
   version: 0,
+  partialize: (state) => ({
+    ...state,
+    chatUserId: null,
+  }),
 }));
 
 export type UseAppStoreExtended = typeof useAppStoreBase & {

diff --git a/packages/web/src/views/chat/index.tsx b/packages/web/src/views/chat/index.tsx
@@ -9,7 +9,8 @@ import InputBox from './input-box';
 import './index.scss';
 
 interface ChatProps {
-  userInfo: User | null,
+  userInfo: User | null;
+  online: boolean;
   channel: ChatChannel | null;
   onSubmit: (content: File | string) => void;
 }
@@ -20,14 +21,15 @@ const userPlaceholder: User = {
 };
 
 function Chat({
-  channel, userInfo, onSubmit,
+  channel, userInfo, online, onSubmit,
 }: ChatProps) {
   return (
     <div className="chat">
       <div className="chat__header">
         <UserItem
           className="chat__user"
           isMe={false}
+          online={online}
           user={userInfo ?? userPlaceholder}
         />
       </div>
@@ -67,6 +69,7 @@ export default function ChatConnected() {
         <Chat
           userInfo={channelInfo.userInfo ?? null}
           channel={channelInfo.channel ?? null}
+          online={channelInfo.isOnline}
           onSubmit={handleSubmit}
         />
       ) : null}

diff --git a/packages/web/src/views/user-item/index.tsx b/packages/web/src/views/user-item/index.tsx
@@ -7,13 +7,15 @@ interface UserItemProps {
   isMe: boolean;
   user: User;
   unreadCount?: number;
+  online?: boolean;
   className?: string;
 }
 
 export default function UserItem({
   isMe,
   user,
   unreadCount,
+  online,
   className,
 }: UserItemProps) {
   return (
@@ -24,6 +26,7 @@ export default function UserItem({
       <Avatar
         id={user.id}
         badge={unreadCount}
+        online={online}
       />
       <div className="user-item__name">{user.user_name}</div>
     </div>