Messenger

src/app/index.ts

@@ -30,14 +30,18 @@ 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();
+    const me = (await authAPI.getUser()) as any;
+    if (window.location.pathname === Routes.SignUp) {
+      router.go(Routes.SignUp);
+      return;
+    }
     if (me.reason) {
       router.go(Routes.Home);
     }

src/app/providers/registerComponents.ts

@@ -3,6 +3,7 @@ import { SigninForm, SignupForm } from "@/widgets/auth";
 import { ChatList, ChatWindow, MessagesList } from "@/widgets/chat";
 import { registerComponent } from "@/shared/lib";
 import { ChatHeader, SearchChat, SendMessage } from "@/features/chat";
+import { SettingsList } from "@/widgets/user";
 
 function registerComponents(): void {
   registerComponent("Button", Components.Button);
@@ -24,6 +25,7 @@ function registerComponents(): void {
   registerComponent("IconButton", Components.IconButton);
   registerComponent("MessagesList", MessagesList);
   registerComponent("MessageCard", Components.MessageCard);
+  registerComponent("SettingsList", SettingsList);
 }
 
 export { registerComponents };

src/app/providers/withRouting.ts

@@ -13,7 +13,7 @@ enum Routes {
   Messenger = "/messenger",
   Profile = "/profile",
   SignIn = "/sign-in",
-  ProfileEdit = "/profile-edit",
+  ProfileEdit = "/settings",
 }
 
 const rootQuery = "#app";

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

@@ -1,8 +1,6 @@
 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() {
@@ -19,7 +17,6 @@ class SendMessage extends Component {
   protected render() {
     return `
       <form class="${styles.sendMessage}">
-        {{{ IconButton src="${clipIcon}" onClick=onClipClick type="button" customClass="${styles.clipButton}" }}}
         {{{ Input placeholder="Собщение..." ref="message" value="" }}}
         {{{ IconButton src="${arrowIcon}" onClick=onSendClick type="button" customClass="${styles.sendButton}" }}}
       </form>

src/pages/editProfile/editProfile.component.ts

@@ -1,13 +1,9 @@
 import { Component } from "@/shared/model";
 import styles from "./editProfilePage.module.css";
 import profileStyles from "@/pages/profile/profilePage.module.css";
-import {
-  validateEmail,
-  validateLogin,
-  validateName,
-  validatePhone,
-} from "@/shared/lib";
 import { EditProfilePageProps } from "./editProfilePage.types";
+import { connect } from "@/shared/model/store/connect";
+import { UserAPI } from "@/shared/api/user";
 
 class EditProfilePage extends Component {
   constructor(props: EditProfilePageProps) {
@@ -25,93 +21,46 @@ class EditProfilePage extends Component {
         const phone = this.refs.fields.refs.phone.refs.phone.value();
 
         if (firstName && lastName && login && email && displayName && phone) {
-          console.log({
-            firstName,
-            lastName,
-            login,
-            email,
-            displayName,
-            phone,
+          const userAPI = new UserAPI();
+          userAPI.editUser({
+            first_name: firstName,
+            last_name: lastName,
+            login: login,
+            email: email,
+            display_name: displayName,
+            phone: phone,
           });
         }
       },
-      userEditFields: [
-        {
-          title: "Почта",
-          type: "edit",
-          inputName: "email",
-          value: "[email protected]",
-          validate: validateEmail,
-          ref: "email",
-        },
-        {
-          title: "Логин",
-          type: "edit",
-          inputName: "login",
-          value: "ivanovivan",
-          validate: validateLogin,
-          ref: "login",
-        },
-        {
-          title: "Имя",
-          type: "edit",
-          inputName: "first_name",
-          value: "Иван",
-          validate: validateName,
-          ref: "firstName",
-        },
-        {
-          title: "Фамилия",
-          type: "edit",
-          inputName: "second_name",
-          value: "Иванов",
-          validate: validateName,
-          ref: "lastName",
-        },
-        {
-          title: "Имя в чате",
-          type: "edit",
-          inputName: "display_name",
-          value: "Ivan",
-          validate: validateLogin,
-          ref: "displayName",
-        },
-        {
-          title: "Телефон",
-          type: "edit",
-          inputName: "phone",
-          value: "+7 (909) 123 45 67",
-          validate: validatePhone,
-          ref: "phone",
-        },
-      ],
     });
   }
   protected render() {
     return `
-{{#> layout}}
-  <div class="${profileStyles.profilePage} ${styles.editProfilePage}">
-          <div>
-            {{{ SideButton to="/profile" }}}
-          </div>
-    <div class="${profileStyles.profile}">
-      {{{ UserImage }}}
-      <div class="${profileStyles.username}">
-        Иван
-      </div>
-
-      <form>
-      {{{ InfoList items=userEditFields ref="fields" }}}
-      <div class="profile_buttons">
-        {{{ Button label="Сохранить" type="submit" onClick=onSubmit }}}
-      </div>
-      </form>
-    </div>
-  </div>
-{{/layout}}
+      {{#> layout}}
+        <div class="${profileStyles.profilePage} ${styles.editProfilePage}">
+                <div>
+                  {{{ SideButton to="/profile" }}}
+                </div>
+          <div class="${profileStyles.profile}">
+            {{{ UserImage }}}
+            <div class="${profileStyles.username}">
+              Иван
+            </div>
 
-`;
+            <form>
+            {{{ SettingsList user=user ref="fields" }}}
+            <div class="profile_buttons">
+              {{{ Button label="Сохранить" type="submit" onClick=onSubmit }}}
+            </div>
+            </form>
+          </div>
+        </div>
+      {{/layout}}
+    `;
   }
 }
 
-export { EditProfilePage };
+const EditProfilePageWithStore = connect(({ user }) => ({ user }))(
+  EditProfilePage,
+);
+export { EditProfilePageWithStore };

src/pages/editProfile/index.ts

@@ -1 +1 @@
-export { EditProfilePage } from "./editProfile.component";
+export { EditProfilePageWithStore as EditProfilePage } from "./editProfile.component";

src/pages/profile/profilePage.component.ts

@@ -65,6 +65,7 @@ class ProfilePage extends Component {
     });
   }
   protected render() {
+    console.log(this.props);
     return `
       {{#> layout}}
         <div class="${styles.profilePage}">

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

@@ -1,4 +1,4 @@
-import { ChatWebsocket, HTTPClient, WSClient } from "@/shared/api";
+import { ChatWebsocket, HTTPClient } from "@/shared/api";
 import { Chat } from "./chat.types";
 
 const chatAPIInstance = new HTTPClient(
@@ -14,7 +14,7 @@ class ChatAPI {
     return chatAPIInstance.post("", { data: { title } });
   }
 
-  public async getToken(id: string) {
+  public async getToken(id: string): Promise<{ token: string }> {
     return chatAPIInstance.post("/token/".concat(id));
   }
 

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

@@ -19,7 +19,7 @@ class ChatWebsocket extends WSClient {
   private handleWSMessages(data: any) {
     switch (data.type) {
       case undefined:
-        this.storeMessages(data);
+        this.storeMessages(data.reverse());
         break;
 
       case "message":

src/shared/api/user/index.ts

@@ -1 +1,2 @@
+export { UserAPI } from "./user.api";
 export type { User } from "./user.types";

src/shared/api/user/user.api.ts

@@ -0,0 +1,11 @@
+import { HTTPClient } from "@/shared/api";
+
+const userAPIInstance = new HTTPClient("https://ya-praktikum.tech/api/v2/user");
+
+class UserAPI {
+  public async editUser(data: any) {
+    return userAPIInstance.put("/profile", { data });
+  }
+}
+
+export { UserAPI };

src/shared/api/user/user.types.ts

@@ -1,6 +1,7 @@
 interface User {
   first_name: string;
   second_name: string;
+  display_name: string;
   login: string;
   email: string;
   password: string;

src/shared/model/router/route.ts

@@ -7,7 +7,7 @@ type Options = {
 
 class Route {
   protected pathname: string;
-  protected componentClass: Component;
+  protected componentClass: typeof Component;
   protected options: Options;
   protected component: Component | null = null;
 

src/shared/model/router/router.ts

@@ -1,4 +1,3 @@
-import { Routes } from "@/app/providers/withRouting";
 import { Component } from "..";
 import { Route } from "./route";
 
@@ -28,8 +27,8 @@ class Router {
   }
 
   public start() {
-    window.addEventListener("popstate", (event: PopStateEvent) => {
-      this.onRoute(event.currentTarget.location.pathname);
+    window.addEventListener("popstate", () => {
+      this.onRoute(window.location.pathname);
     });
 
     this.onRoute(window.location.pathname);

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

@@ -11,7 +11,7 @@ class ChatCard extends Component {
         click: () => {
           window.store.set({ currentChatId: props.id });
           const chatAPI = new ChatAPI();
-          chatAPI.initChat(props.id);
+          chatAPI.initChat(props.id as string);
         },
       },
     });
@@ -29,7 +29,7 @@ class ChatCard extends Component {
             {{title}}
           </span>
           <div class="${styles.message}">
-            {{message}}
+            {{message.content}}
           </div>
         </div>
 

src/shared/ui/chatCard/chatCard.types.ts

@@ -4,7 +4,7 @@ interface ChatCardProps {
   date?: string;
   userImage?: string;
   newMessages?: string;
-  id: string;
+  id?: string;
 }
 
 export type { ChatCardProps };

src/shared/ui/messageCard/messageCard.module.css

@@ -1,3 +1,6 @@
 .messageCard {
-  border: 1px solid #000000;
+  border: 2px solid #3369f3;
+  border-radius: 5px;
+  padding: 5px;
+  margin-bottom: 10px;
 }

src/shared/ui/navigationList/navList.module.css

@@ -1,5 +1,5 @@
 .navigationList {
   position: fixed;
   bottom: 0;
-  right: 0;
+  left: 0;
 }

src/shared/ui/navigationList/navigationList.component.ts

@@ -11,15 +11,11 @@ class NavigationList extends Component {
     return `
       <nav>
         <ul class="${styles.navigationList}">
-          <li><a href="/">home page</a></li>
-          <li><a href="/signin">signin page</a></li>
-          <li><a href="/signup">signup page</a></li>
-          <li><a href="/profile">profile page</a></li>
-          <li><a href="/chat">chats page</a></li>
-          <li><a href="/not-found">not found error page</a></li>
-          <li><a href="/error">server error page</a></li>
-          <li><a href="/profile-edit">edit profile page</a></li>
-          <li><a href="/password-edit">password edit page</a></li>
+          <li><a href="/">home</a></li>
+          <li><a href="/sign-up">signup</a></li>
+          <li><a href="/profile">profile</a></li>
+          <li><a href="/messenger">messenger</a></li>
+          <li><a href="/settings">edit profile</a></li>
         </ul>
       </nav>
     `;

src/shared/ui/sideButton/sideButton.component.ts

@@ -22,10 +22,10 @@ class SideButton extends Component {
   protected render() {
     const { to } = this.props;
     return `
-<a class="${styles.sideButton}" href="${to}">
-  <img src="${arrowIcon}" />
-</a>
-`;
+      <a class="${styles.sideButton}" href="${to}">
+        <img src="${arrowIcon}" />
+      </a>
+    `;
   }
 }