refactoring header

Impeqq · Nov 18, 2021 · 7ad03a2 · 7ad03a2
1 parent 1e05d06
commit 7ad03a2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 37 deletions.
diff --git a/frontend/src/ui/organisms/header/header.tsx b/frontend/src/ui/organisms/header/header.tsx
@@ -7,23 +7,44 @@ import LogoutIcon from "@assets/svg/logout.svg";
 import PersonIcon from "@assets/svg/person.svg";
 import React, { useEffect, useRef, useState } from "react";
 import cn from "classnames";
-import { AUTH_TOKEN } from "@features/constants";
+import { AUTH_TOKEN, SOCKET_API } from "@features/constants";
 import { useLocalStorage } from "@features/hooks";
 import { getImage } from "@features/helpers/getImage";
+import { TUser } from "@features/types";
+import { io } from "socket.io-client";
+import { useLazyQuery } from "@apollo/client";
+import { FETCH_ME } from "@schemas";
 
 type TProps = {
-  firstName?: string;
-  lastName?: string;
-  avatarId?: string;
+  isGuest: boolean;
 };
 
-export const Header = ({ firstName, lastName, avatarId }: TProps) => {
+export const Header = ({ isGuest }: TProps) => {
+  const [me, setMe] = useState<null | TUser>(null);
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef(null);
-  const { removeItem } = useLocalStorage();
-
+  const { removeItem, getItem } = useLocalStorage();
   const history = useHistory();
 
+  const isChanges = getItem(AUTH_TOKEN);
+
+  const [fetchMe] = useLazyQuery(FETCH_ME, {
+    fetchPolicy: "network-only",
+    onCompleted: ({ me }) => setMe(me),
+    onError: () => {
+      setMe(null);
+      history.push(routePath.auth.path);
+    },
+  });
+
+  useEffect(() => {
+    if (me?.id) io(`http://${SOCKET_API}?user_id=${me?.id}`);
+  }, [me]);
+
+  useEffect(() => {
+    fetchMe();
+  }, [fetchMe, isChanges, history, isGuest]);
+
   useEffect(() => {
     const onClick: any = (e: React.MouseEvent) => {
       if (!(ref?.current as any)?.contains(e.target) && isOpen) {
@@ -56,13 +77,13 @@ export const Header = ({ firstName, lastName, avatarId }: TProps) => {
         <Link to={routePath.main.path} className={styles.logo}>
           Messenger 💬
         </Link>
-        {firstName && lastName && (
+        {!isGuest && (
           <>
             <div className={styles.userInfo} onClick={toggleOpen}>
-              <Avatar image={getImage(avatarId)} alt="Avatar" />
+              <Avatar image={getImage(me?.avatar?.id)} alt="Avatar" />
               <div className={styles.info}>
                 <span>
-                  {firstName} {lastName}
+                  {me?.firstName} {me?.lastName}
                 </span>
                 <span>Online</span>
               </div>

diff --git a/frontend/src/ui/templates/main/main.tsx b/frontend/src/ui/templates/main/main.tsx
@@ -1,51 +1,28 @@
 import { Header } from "@ui";
-import { useLazyQuery } from "@apollo/client";
-import { FETCH_ME } from "@schemas";
 import { useHistory } from "react-router-dom";
 import { routePath } from "@pages/routes";
 import { Sidebar } from "@components";
 import styles from "./styles.scss";
 import cn from "classnames";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useLocalStorage } from "@features/hooks";
-import { SOCKET_API, AUTH_TOKEN } from "@features/constants";
-import { TUser } from "@features/types";
-import io from "socket.io-client";
+import { AUTH_TOKEN } from "@features/constants";
 
 export const Main: React.FC = ({ children }) => {
   const history = useHistory();
-  const [me, setMe] = useState<null | TUser>(null);
   const { getItem } = useLocalStorage();
 
-  useEffect(() => {
-    if (me?.id) io(`http://${SOCKET_API}?user_id=${me?.id}`);
-  }, [me]);
-
-  const [fetchMe] = useLazyQuery(FETCH_ME, {
-    fetchPolicy: "network-only",
-    onCompleted: ({ me }) => setMe(me),
-    onError: () => {
-      setMe(null);
-      history.push(routePath.auth.path);
-    },
-  });
-
   const isGuest = !getItem(AUTH_TOKEN);
 
   useEffect(() => {
-    fetchMe();
     if (!isGuest) {
       history.push(routePath.main.path);
     }
-  }, [fetchMe, isGuest, history]);
+  }, [isGuest, history]);
 
   return (
     <>
-      <Header
-        firstName={me?.firstName}
-        lastName={me?.lastName}
-        avatarId={me?.avatar?.id}
-      />
+      <Header isGuest={isGuest} />
       <div className={cn(styles.flex, { [styles.guest]: isGuest })}>
         {!isGuest && <Sidebar />}
         {children}