reset chat list after logout

frontend/src/components/sidebar/chats-list/chats-list.tsx

@@ -1,32 +1,39 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styles from "./styles.scss";
 import { SiebarItem, UserItem, UserLocations } from "@ui";
-import { useQuery, useSubscription } from "@apollo/client";
+import { useLazyQuery, useQuery, useSubscription } from "@apollo/client";
 import { FETCH_ME, FETCH_MY_CHATS, SUBSCRIBE_MY_CHAT } from "@schemas";
 import { RouteParams, TChat, TUser } from "@features/types";
 import { useHistory, useParams } from "react-router-dom";
 import { routePath } from "@pages/routes";
+import { useLocalStorage } from "@features/hooks";
+import { AUTH_TOKEN } from "@features/constants";
 
 type TProps = {
   toggleSidebar: () => void;
 };
 
 export const ChatsList = ({ toggleSidebar }: TProps) => {
   const [chats, setChats] = useState<TChat[]>([]);
-
+  const { getItem } = useLocalStorage();
+  const isGuest = !getItem(AUTH_TOKEN);
   const { data: userData } = useQuery(FETCH_ME, { fetchPolicy: "cache-only" });
   const me = userData?.me;
 
   const history = useHistory();
 
   const { id } = useParams<RouteParams>();
 
-  const { loading } = useQuery(FETCH_MY_CHATS, {
+  const [fetchMyChats, { loading }] = useLazyQuery(FETCH_MY_CHATS, {
     onCompleted: ({ getMyChats: data }) => {
       setChats(data);
     },
   });
 
+  useEffect(() => {
+    fetchMyChats();
+  }, [fetchMyChats, isGuest]);
+
   useSubscription(SUBSCRIBE_MY_CHAT, {
     variables: { user_id: me?.id },
     onSubscriptionData: ({