Merge branch 'dev' into feature/LWB-40_rename-subroute

frontend/next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: false,
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,

frontend/public/icons/index.ts

@@ -1,4 +1,6 @@
+export { default as AddChatOutlineIcon } from "./add-chat-outline.svg";
 export { default as ChatPlusOutlineIcon } from "./chat-plus-outline.svg";
+export { default as FindPeopleOutlineIcon } from "./find-people-outline.svg";
 export { default as FormOutlineIcon } from "./form-outline.svg";
 export { default as GroupOutlineIcon } from "./group-outline.svg";
 export { default as LeftAngleIcon } from "./left-angle.svg";

frontend/src/api/http/auth/auth.ts

@@ -26,3 +26,8 @@ export async function refreshToken() {
   const { data } = await instance.post<AuthTypes>("auth/refresh-tokens", {}, { withCredentials: true });
   return data;
 }
+
+export async function logout() {
+  const { data } = await instance.post<AuthTypes>("auth/logout", {}, { withCredentials: true });
+  return data;
+}

frontend/src/api/socket/index.ts

@@ -3,11 +3,15 @@ import { ChatType } from "@/api/socket/index.types";
 const socketUrl = process.env.NEXT_PUBLIC_WEB_SOCKET_URL;
 
 export const connectToSocket = (token: string) => {
-  return new WebSocket(`${socketUrl}?access=${token}`);
+  const socket = new WebSocket(`${socketUrl}?access=${token}`);
+  socket.onopen = () => {
+    console.log("Connected to socket");
+  };
+  return socket;
 };
 
 export const sendChatMessage = (socket: WebSocket, message: string, chatType: ChatType, chatId: number | string) => {
-  socket.send(`path=/${chatType}/${chatId}/send
+  socket.send(`path=/chat/${chatId}/send
   
   
     ${message}

frontend/src/components/Chat/Chat.tsx

@@ -6,11 +6,12 @@ import { toast } from "react-toastify";
 
 import { getContacts } from "@/api/http/users/users";
 import { ContactParams } from "@/api/http/users/users.types";
-import { SIDEBAR_ICON_SIZE } from "@/components/Chat/chat.config";
 import { InteractiveList } from "@/components/Chat/InteractiveList/InteractiveList";
 import { Contacts } from "@/components/Chat/InteractiveList/interactiveList.types";
 import { MainBox } from "@/components/Chat/MainBox/MainBox";
 import { SideBar } from "@/components/Chat/SideBar/SideBar";
+import { SIDEBAR_ITEM } from "@/components/Chat/SideBar/sidebar.config";
+import { SidebarButtonName } from "@/components/Chat/SideBar/sidebar.types";
 import { CustomButton } from "@/components/CustomButton/CustomButton";
 import { SocketContext } from "@/context/SocketContext/SocketContext";
 import { setCurrentInteractiveList, setCurrentMainBox } from "@/lib/features/chat/chatSlice";
@@ -20,13 +21,14 @@ export function Chat() {
   const dispatch = useAppDispatch();
 
   const { accessToken } = useAppSelector(state => state.auth);
-  const { webSocket } = useContext(SocketContext);
+  const { webSocket, message } = useContext(SocketContext);
   const { currentMainBox, currentInteractiveList } = useAppSelector(state => state.chat);
 
   const router = useRouter();
 
   const [contacts, setContacts] = useState<Contacts>([]);
   const [contact, setContact] = useState<ContactParams | undefined>(undefined);
+  const [currentSidebarItem, setCurrentSidebarItem] = useState<string>("chat" as SidebarButtonName);
 
   useEffect(() => {
     if (!accessToken) {
@@ -44,35 +46,53 @@ export function Chat() {
     fetchContacts();
   }, [accessToken, router, webSocket]);
 
-  const handleContactsClick = () => {
+  useEffect(() => {
+    console.log(message);
+  }, [message]);
+
+  const handleContactClick = (currentContact: ContactParams) => {
+    setContact(currentContact);
+    dispatch(setCurrentMainBox("user-info"));
+  };
+
+  SIDEBAR_ITEM.buttons.contact.onClick = () => {
     dispatch(setCurrentInteractiveList("contacts"));
   };
 
-  const handleChatsClick = async () => {
+  SIDEBAR_ITEM.buttons.chat.onClick = () => {
     dispatch(setCurrentInteractiveList("chats"));
   };
 
-  const handleContactClick = (currentContact: ContactParams) => {
-    setContact(currentContact);
-    dispatch(setCurrentMainBox("user-info"));
+  SIDEBAR_ITEM.buttons["add-chat"].onClick = () => {
+    console.log("add-chat");
+  };
+
+  SIDEBAR_ITEM.buttons["find-people"].onClick = () => {
+    console.log("find-people");
+  };
+
+  SIDEBAR_ITEM.buttons.setting.onClick = () => {
+    console.log("setting");
   };
 
   return (
     <div className="w-screen flex px-64">
       <SideBar>
-        <CustomButton
-          variant="square"
-          icon="chat-plus-outline"
-          iconSize={SIDEBAR_ICON_SIZE}
-          onClick={handleChatsClick}
-        />
-        <CustomButton
-          variant="square"
-          icon="group-outline"
-          iconSize={SIDEBAR_ICON_SIZE}
-          onClick={handleContactsClick}
-        />
-        <CustomButton variant="square" iconSize={SIDEBAR_ICON_SIZE} icon="setting-outline" />
+        {Object.entries(SIDEBAR_ITEM.buttons).map(([buttonName, buttonParams]) => (
+          <CustomButton
+            key={buttonName}
+            className={currentSidebarItem === buttonName ? "dark:bg-dark-50" : ""}
+            onClick={() => {
+              setCurrentSidebarItem(buttonName);
+              if (buttonParams.onClick) {
+                buttonParams.onClick();
+              }
+            }}
+            variant={SIDEBAR_ITEM.variant}
+            icon={buttonParams.icon}
+            iconSize={SIDEBAR_ITEM.iconSize}
+          />
+        ))}
       </SideBar>
       <InteractiveList
         interactiveListVariant={currentInteractiveList}

frontend/src/components/Chat/InteractiveList/InteractiveList.tsx

@@ -1,15 +1,46 @@
-import React from "react";
+import { useRouter } from "next/navigation";
+import React, { useContext } from "react";
+import { toast } from "react-toastify";
 
+import { logout } from "@/api/http/auth/auth";
+import { Avatar } from "@/components/Avatar/Avatar";
 import { InteractiveListProps } from "@/components/Chat/InteractiveList/interactiveList.types";
 import { ChatList } from "@/components/Chat/InteractiveList/variants/ChatList/ChatList";
 import { ContactList } from "@/components/Chat/InteractiveList/variants/ContactList/ContactList";
+import { CustomButton } from "@/components/CustomButton/CustomButton";
+import { Status } from "@/components/Status/Status";
+import { SocketContext } from "@/context/SocketContext/SocketContext";
+import { useAppSelector } from "@/lib/hooks";
 
 export function InteractiveList({
   interactiveListVariant,
   interactiveChat,
   interactiveContact,
 }: Readonly<InteractiveListProps>) {
   let interactiveList;
+  const { webSocket } = useContext(SocketContext);
+  const { accessToken } = useAppSelector(state => state.auth);
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    if (!webSocket || !accessToken) {
+      return;
+    }
+
+    try {
+      webSocket.onclose = () => {
+        console.log("Socket closed");
+      };
+      webSocket.close();
+
+      await logout();
+      localStorage.removeItem("accessToken");
+      console.log("Logged out!");
+      router.replace("/sign-in");
+    } catch (error) {
+      toast.error("Error logging out");
+    }
+  };
 
   if (interactiveListVariant === "contacts") {
     interactiveList = (
@@ -28,6 +59,32 @@ export function InteractiveList({
   return (
     <div className="h-screen flex flex-col min-w-72 w-[55%]">
       <div className="h-screen flex flex-col">{interactiveList}</div>
+      <div className="bg-dark-400 px-8 py-4 left-0 bottom-0 w-full flex justify-between items-center h-auto">
+        <div className="flex items-center gap-2">
+          <Avatar
+            item={{
+              id: 1,
+              avatarPath: undefined,
+            }}
+            alt="Avatar"
+            status={false}
+          />
+          <div className="flex flex-col gap-0">
+            <p className="text-lg">Name</p>
+            <div className="flex items-center text-gray-300">
+              <Status />
+              Active
+            </div>
+          </div>
+        </div>
+        <CustomButton
+          onClick={handleLogout}
+          className="px-1 py-1 text-blue-300 dark:bg-dark-250 w-10 text-2x"
+          iconSize={32}
+          variant="square"
+          icon="sign-out-circle"
+        />
+      </div>
     </div>
   );
 }