fix online/offline in chat header, dremoved unneeded component

Impeqq · Nov 17, 2021 · 92daa0c · 92daa0c
1 parent 23e3ff2
commit 92daa0c
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 137 deletions.
diff --git a/frontend/src/components/chat/chat-header/chat-header.tsx b/frontend/src/components/chat/chat-header/chat-header.tsx
@@ -6,14 +6,18 @@ import SearchIcon from "@assets/svg/search.svg";
 import cn from "classnames";
 import { SUBSCRIBE_ONLINE_USER } from "@schemas";
 import { useSubscription } from "@apollo/client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 type TProps = {
   reciever?: TUser;
 };
 
 export const ChatHeader = ({ reciever }: TProps) => {
-  const [isOnline, setIsOnline] = useState(false);
+  const [isOnline, setIsOnline] = useState(reciever?.online);
+
+  useEffect(() => {
+    setIsOnline(reciever?.online);
+  }, [reciever?.online]);
 
   useSubscription(SUBSCRIBE_ONLINE_USER, {
     onSubscriptionData: ({
@@ -27,8 +31,6 @@ export const ChatHeader = ({ reciever }: TProps) => {
     },
   });
 
-  const online = isOnline || reciever?.online;
-
   return (
     <div className={styles.header}>
       <div className={styles.members}>
@@ -43,11 +45,11 @@ export const ChatHeader = ({ reciever }: TProps) => {
         </span>
         <span
           className={cn(styles.status, {
-            [styles.online]: online,
-            [styles.offline]: !online,
+            [styles.online]: isOnline,
+            [styles.offline]: !isOnline,
           })}
         >
-          {online ? "Online" : "Offline"}
+          {isOnline ? "Online" : "Offline"}
         </span>
       </div>
       <div className={styles.actions}>

diff --git a/frontend/src/components/contact-info/contact-info.tsx b/frontend/src/components/contact-info/contact-info.tsx
diff --git a/frontend/src/components/contact-info/index.ts b/frontend/src/components/contact-info/index.ts
diff --git a/frontend/src/components/contact-info/styles.scss b/frontend/src/components/contact-info/styles.scss
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -1,5 +1,4 @@
 export * from "./sidebar";
 export * from "./chat";
-export * from "./contact-info";
 export * from "./base-form";
 export * from "./date-time";
diff --git a/frontend/src/components/sidebar/new-users-list/new-users-list.tsx b/frontend/src/components/sidebar/new-users-list/new-users-list.tsx
@@ -31,6 +31,7 @@ export const NewUsersList = () => {
     <SiebarItem title={"Last 5 new users"}>
       {newUsers.map((user: TUser) => (
         <UserItem
+          hasOnline={false}
           key={user.id}
           className={styles.userItem}
           type={UserLocations.SIDEBAR}

diff --git a/frontend/src/ui/atoms/avatar/styles.scss b/frontend/src/ui/atoms/avatar/styles.scss
@@ -12,8 +12,8 @@
     width: 12px;
     height: 12px;
     border: 2px solid $c_white;
-    bottom: 1px;
-    right: 1px;
+    bottom: 3px;
+    right: 6px;
     transition: 0.1s ease all;
   }
 

diff --git a/frontend/src/ui/molecules/user-item/user-item.tsx b/frontend/src/ui/molecules/user-item/user-item.tsx
@@ -21,6 +21,7 @@ type TProps = {
   isMessageFromMe?: boolean;
   chat?: any;
   read?: boolean;
+  hasOnline?: boolean;
 };
 
 export enum UserLocations {
@@ -41,6 +42,7 @@ export const UserItem = ({
   currentUser,
   isMessageFromMe = false,
   read,
+  hasOnline = true,
 }: TProps) => {
   const [isOnline, setIsOnline] = useState(user?.online);
   const isSelf = currentUser?.id === user?.id;
@@ -62,7 +64,7 @@ export const UserItem = ({
     },
   });
 
-  const online = type === UserLocations.CHAT ? false : isOnline;
+  const online = !hasOnline || type === UserLocations.CHAT ? false : isOnline;
 
   return (
     <div