Profile

src/app/index.ts

@@ -6,8 +6,6 @@ import {
   withStore,
 } from "./providers";
 import { Routes, router, withRouting } from "./providers/withRouting";
-import { ChatAPI } from "@/shared/api/chat/chat.api";
-import { WSClient } from "@/shared/api";
 import { AuthAPI } from "@/shared/api/auth";
 
 async function app() {
@@ -32,30 +30,33 @@ async function app() {
         .querySelector(".modal-overlay")
         ?.addEventListener("click", toggleModal);
 
-      document.body.append(new NavigationList({}).getContent() ?? "");
+      // document.body.append(new NavigationList({}).getContent() ?? "");
     }
   });
 
   const authAPI = new AuthAPI();
 
   try {
     const me = await authAPI.getUser();
+    if (me.reason) {
+      router.go(Routes.Home);
+    }
     window.store.set({ user: me });
   } catch (error) {
     router.go(Routes.Home);
   }
 }
 
-const chatAPI = new ChatAPI();
-// chatAPI.create("test").then(console.log);
-chatAPI.getAll().then(console.log);
-chatAPI.getToken("27462").then(async ({ token }) => {
-  const wsClient = new WSClient(
-    `wss://ya-praktikum.tech/ws/chats/1346861/27462/${token}`,
-  );
-  await wsClient.connect();
-  wsClient.send({ type: "ping" });
-});
+// const chatAPI = new ChatAPI();
+// // chatAPI.create("test").then(console.log);
+// chatAPI.getAll().then(console.log);
+// chatAPI.getToken("27462").then(async ({ token }) => {
+//   const wsClient = new WSClient(
+//     `wss://ya-praktikum.tech/ws/chats/1346861/27462/${token}`,
+//   );
+//   await wsClient.connect();
+//   wsClient.send({ type: "ping" });
+// });
 
 // authAPI.logout();
 

src/app/providers/registerComponents.ts

@@ -1,6 +1,6 @@
 import * as Components from "@/shared/ui";
 import { SigninForm, SignupForm } from "@/widgets/auth";
-import { ChatList, ChatWindow } from "@/widgets/chat";
+import { ChatList, ChatWindow, MessagesList } from "@/widgets/chat";
 import { registerComponent } from "@/shared/lib";
 import { ChatHeader, SearchChat, SendMessage } from "@/features/chat";
 
@@ -22,7 +22,8 @@ function registerComponents(): void {
   registerComponent("ChatWindow", ChatWindow);
   registerComponent("SendMessage", SendMessage);
   registerComponent("IconButton", Components.IconButton);
-  registerComponent("MessageCard", Components.IconButton);
+  registerComponent("MessagesList", MessagesList);
+  registerComponent("MessageCard", Components.MessageCard);
 }
 
 export { registerComponents };

src/app/providers/withRouting.ts

@@ -1,17 +1,29 @@
-import { ChatPage, SigninPage, SignupPage } from "@/pages";
+import {
+  ChatPage,
+  EditProfilePage,
+  ProfilePage,
+  SigninPage,
+  SignupPage,
+} from "@/pages";
 import { Router } from "@/shared/model";
 
 enum Routes {
   Home = "/",
   SignUp = "/sign-up",
   Messenger = "/messenger",
+  Profile = "/profile",
+  SignIn = "/sign-in",
+  ProfileEdit = "/profile-edit",
 }
 
 const rootQuery = "#app";
 const router = new Router(rootQuery);
 router
   .use(Routes.Home, SigninPage)
+  .use(Routes.Profile, ProfilePage)
+  .use(Routes.ProfileEdit, EditProfilePage)
   .use(Routes.SignUp, SignupPage)
+  .use(Routes.SignIn, SigninPage)
   .use(Routes.Messenger, ChatPage);
 
 function withRouting() {

src/app/providers/withStore.ts

@@ -1,4 +1,4 @@
-import { WSClient } from "@/shared/api";
+import { ChatWebsocket } from "@/shared/api";
 import { Chat, Message } from "@/shared/api/chat/chat.types";
 import { User } from "@/shared/api/user";
 import { Store } from "@/shared/model";
@@ -7,7 +7,7 @@ type AppState = {
   user: null | User;
   chats: null | Chat[];
   currentChatId: null | string;
-  chatSocket: WSClient | null;
+  chatSocket: ChatWebsocket | null;
   messages: Message[] | null;
 };
 

src/features/chat/ui/sendMessage/sendMessage.component.ts

@@ -2,23 +2,25 @@ import { Component } from "@/shared/model";
 import clipIcon from "@/assets/clip.svg";
 import arrowIcon from "@/assets/arrow.svg";
 import styles from "./sendMessage.module.css";
+import { ChatAPI } from "@/shared/api";
 
 class SendMessage extends Component {
   constructor() {
     super({
       onClipClick: () => {},
       onSendClick: (event: SubmitEvent) => {
         event.preventDefault();
-
-        console.log({ message: this.refs.message.value() });
+        const message = this.refs.message.value();
+        const { chatSocket } = window.store.getState();
+        chatSocket?.sendMessage(message);
       },
     });
   }
   protected render() {
     return `
       <form class="${styles.sendMessage}">
         {{{ IconButton src="${clipIcon}" onClick=onClipClick type="button" customClass="${styles.clipButton}" }}}
-        {{{ Input placeholder="Собщение..." ref="message" }}}
+        {{{ Input placeholder="Собщение..." ref="message" value="" }}}
         {{{ IconButton src="${arrowIcon}" onClick=onSendClick type="button" customClass="${styles.sendButton}" }}}
       </form>
     `;

src/pages/profile/index.ts

@@ -1 +1 @@
-export { ProfilePage } from "./profilePage.component";
+export { ProfilePageWithStore as ProfilePage } from "./profilePage.component";

src/pages/profile/profilePage.component.ts

@@ -1,40 +1,45 @@
 import { Component } from "@/shared/model";
 import styles from "./profilePage.module.css";
 import { ProfilePageProps } from "./profilePage.types";
+import { AuthController } from "@/widgets/auth/api";
+import { connect } from "@/shared/model/store/connect";
 
 class ProfilePage extends Component {
   constructor(props: ProfilePageProps) {
+    const authController = new AuthController();
+    const { user } = window.store.getState();
     super({
       ...props,
+      user,
       userInfoFields: [
         {
           title: "Почта",
-          value: "[email protected]",
+          value: user?.email,
           type: "info",
         },
         {
           title: "Логин",
-          value: "ivanivanov",
+          value: user?.login,
           type: "info",
         },
         {
           title: "Имя",
-          value: "Иван",
+          value: user?.first_name,
           type: "info",
         },
         {
           title: "Фамилия",
-          value: "Иванов",
+          value: user?.second_name,
           type: "info",
         },
         {
           title: "Имя в чате",
-          value: "Иван",
+          value: user?.display_name,
           type: "info",
         },
         {
           title: "Телефон",
-          value: "+7 (909) 967 30 30",
+          value: user?.phone,
           type: "info",
         },
       ],
@@ -54,27 +59,31 @@ class ProfilePage extends Component {
           type: "info",
         },
       ],
+      handleExitClick: () => {
+        authController.logout();
+      },
     });
   }
   protected render() {
     return `
       {{#> layout}}
         <div class="${styles.profilePage}">
           <div>
-            {{{ SideButton to="/chats" }}}
+            {{{ SideButton to="/messenger" }}}
           </div>
           <div class="${styles.profile}">
             {{{ UserImage }}}
             <div class="${styles.username}">
               Иван
             </div>
               {{{ InfoList items=userInfoFields }}}
-              {{{ InfoList items=userEditFields }}}
+              {{{ Button label="Выйти" onClick=handleExitClick }}}
           </div>
         </div>
       {{/layout}}
     `;
   }
 }
 
-export { ProfilePage };
+const ProfilePageWithStore = connect(({ user }) => ({ user }))(ProfilePage);
+export { ProfilePageWithStore };

src/shared/api/WSClient.ts

@@ -25,7 +25,6 @@ class WSClient extends EventBus {
       throw new Error("Socket is not connected");
     }
 
-    console.log("data", data);
     this.socket.send(JSON.stringify(data));
   }
 
@@ -88,4 +87,4 @@ class WSClient extends EventBus {
   }
 }
 
-export { WSClient };
+export { WSClient, WSTransportEvents };

src/shared/api/auth/auth.api.ts

@@ -1,12 +1,12 @@
 import { APIError, HTTPClient } from "@/shared/api";
 import { User } from "@/shared/api/user";
-import { LoginRequest, SignupResponse } from "./auth.types";
+import { LoginRequest, SignupRequest, SignupResponse } from "./auth.types";
 
 const authAPIInstance = new HTTPClient("https://ya-praktikum.tech/api/v2/auth");
 
 class AuthAPI {
-  public async signup(user: User): Promise<SignupResponse> {
-    return authAPIInstance.post("/signup", { data: user });
+  public async signup(data: SignupRequest): Promise<SignupResponse> {
+    return authAPIInstance.post("/signup", { data });
   }
 
   public async signin(data: LoginRequest): Promise<void | APIError> {

src/shared/api/auth/auth.types.ts

@@ -7,4 +7,13 @@ type LoginRequest = {
   password: string;
 };
 
-export type { SignupResponse, LoginRequest };
+type SignupRequest = {
+  first_name: string;
+  second_name: string;
+  login: string;
+  email: string;
+  password: string;
+  phone: string;
+};
+
+export type { SignupResponse, LoginRequest, SignupRequest };

src/shared/api/chat/chat.api.ts

@@ -1,4 +1,4 @@
-import { HTTPClient, WSClient } from "@/shared/api";
+import { ChatWebsocket, HTTPClient, WSClient } from "@/shared/api";
 import { Chat } from "./chat.types";
 
 const chatAPIInstance = new HTTPClient(
@@ -26,13 +26,14 @@ class ChatAPI {
 
     const { user } = window.store.getState();
     const { token } = await this.getToken(id);
-    const wsClient = new WSClient(
+    const wsClient = new ChatWebsocket(
       `wss://ya-praktikum.tech/ws/chats/${user?.id}/${id}/${token}`,
     );
 
     window.store.set({ chatSocket: wsClient });
 
     await wsClient.connect();
+    wsClient.getMessages("0");
   }
 }
 

src/shared/api/chat/chat.websocket.ts

@@ -1,8 +1,38 @@
 import { WSClient } from "..";
+import { WSTransportEvents } from "../WSClient";
+import { Message } from "./chat.types";
 
 class ChatWebsocket extends WSClient {
   constructor(url: string) {
     super(url);
+    this.register(WSTransportEvents.Message, this.handleWSMessages.bind(this));
+  }
+
+  public getMessages(offset: string): void {
+    this.send({ type: "get old", content: offset });
+  }
+
+  public sendMessage(message: string): void {
+    this.send({ type: "message", content: message });
+  }
+
+  private handleWSMessages(data: any) {
+    switch (data.type) {
+      case undefined:
+        this.storeMessages(data);
+        break;
+
+      case "message":
+        this.getMessages("0");
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  private storeMessages(messages: Message[]): void {
+    window.store.set({ messages });
   }
 }
 

src/shared/model/component/component.ts

@@ -203,6 +203,6 @@ export class Component<Props extends Record<string, any> = any> {
   }
 
   public show() {
-    this.getContent().style.display = "block";
+    this.getContent().style.display = "flex";
   }
 }

src/shared/model/router/route.ts

@@ -39,10 +39,11 @@ class Route {
   }
 
   public render(): void {
-    console.log(this.component);
     if (!this.component) {
       this.component = new this.componentClass({});
       render(this.options.rootQuery, this.component);
+    } else {
+      this.component.show();
     }
   }
 }

src/shared/model/router/router.ts

@@ -1,3 +1,4 @@
+import { Routes } from "@/app/providers/withRouting";
 import { Component } from "..";
 import { Route } from "./route";
 

src/shared/ui/chatCard/chatCard.component.ts

@@ -5,7 +5,6 @@ import { ChatAPI } from "@/shared/api";
 
 class ChatCard extends Component {
   constructor(props: ChatCardProps) {
-    console.log(props);
     super({
       ...props,
       events: {

src/shared/ui/messageCard/messageCard.types.ts

@@ -1,8 +1,8 @@
 interface MessageCardProps {
-  id: string;
-  time: string;
-  userId: string;
-  content: string;
+  id?: string;
+  time?: string;
+  userId?: string;
+  content?: string;
 }
 
 export type { MessageCardProps };