Sprint 3

README.md

@@ -2,8 +2,20 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/8d2019e6-98b7-43d0-8cad-a2d86bee843b/deploy-status)](https://app.netlify.com/sites/mellifluous-bunny-f4b9fb/deploys)
 
-* Макет в Figma: [https://www.figma.com/file/tT9Qv8j6OeVC2AmgQzXEG3/Chat?node-id=0%3A1](https://www.figma.com/file/tT9Qv8j6OeVC2AmgQzXEG3/Chat?node-id=0%3A1)
-* Netlify: [https://deploy--sprightly-kataifi-71c800.netlify.app](https://deploy--sprightly-kataifi-71c800.netlify.app)
+* Макет в Figma: [Ссылка на макет](https://www.figma.com/file/tT9Qv8j6OeVC2AmgQzXEG3/Chat?node-id=0%3A1)
+* Netlify: [Ссылка на приложение](https://deploy--sprightly-kataifi-71c800.netlify.app)
+
+#### Логин
+
+```bash
+as1211516dasd
+```
+
+#### Пароль
+
+```bash
+asdasdasdasd
+```
 
 ### Описание
 

netlify.toml

@@ -3,22 +3,22 @@
   command = "npm run build"
 
 [[redirects]]
-  from = "/signup"
+  from = "/sign-up"
   to = "/"
   status = 200
 
 [[redirects]]
-  from = "/chat"
+  from = "/messenger"
   to = "/"
   status = 200
 
 [[redirects]]
-  from = "/profile"
+  from = "/settings"
   to = "/"
   status = 200
 
 [[redirects]]
-  from = "/edit-profile"
+  from = "/edit-settings"
   to = "/"
   status = 200
 

package.json

@@ -16,11 +16,12 @@
     "img": "./src/image",
     "routes": "./src/routes",
     "types": "./src/types",
-    "data": "./src/data",
     "vendor": "./src/vendor",
     "variables": "./src/variables",
     "utils": "./src/utils",
-    "styles": "./src/styles"
+    "styles": "./src/styles",
+    "api": "./src/Api",
+    "services": "./src/services"
   },
   "repository": {
     "type": "git",

src/Api/AuthAPI.ts

@@ -0,0 +1,25 @@
+import { BaseAPI } from './BaseAPI';
+import { SignupType, SigninType } from 'types';
+
+class AuthAPI extends BaseAPI {
+  constructor() {
+    super({ path: '/auth' });
+  }
+
+  public signup({ ...rest }: SignupType) {
+    return this.post('signup', { ...rest });
+  }
+
+  public signin({ ...rest }: SigninType) {
+    return this.post('signin', { ...rest });
+  }
+  public signout() {
+    return this.post('logout', {});
+  }
+
+  public getInfo() {
+    return this.get('user');
+  }
+}
+
+export default new AuthAPI();

src/Api/BaseAPI.ts

@@ -0,0 +1,33 @@
+import { HTTPTransport } from 'utils/classes';
+import { URLS, HEADERS } from 'utils/constants';
+
+export abstract class BaseAPI {
+  private _http: HTTPTransport;
+  private _baseUrl: string;
+  private _headers: Record<string, string>;
+
+  constructor({ path }: Record<string, string>) {
+    this._http = new HTTPTransport();
+    this._baseUrl = `${URLS.BASE}${path}`;
+    this._headers = HEADERS.CT_APPLICATION_JSON;
+  }
+
+  post(url: string, data: unknown) {
+    return this._http.post(`${this._baseUrl}/${url}`, { headers: this._headers, data });
+  }
+
+  get(url: string) {
+    return this._http.get(`${this._baseUrl}/${url}`, { headers: this._headers });
+  }
+
+  put(url: string, data: unknown, headers?: unknown) {
+    return this._http.put(`${this._baseUrl}/${url}`, {
+      headers: headers ? headers : this._headers,
+      data,
+    });
+  }
+
+  delete(url: string, data: unknown) {
+    return this._http.delete(`${this._baseUrl}/${url}`, { headers: this._headers, data });
+  }
+}

src/Api/ChatApi.ts

@@ -0,0 +1,45 @@
+import { BaseAPI } from './BaseAPI';
+import {
+  CreateChatType,
+  RemoveChatType,
+  AddUserToChatType,
+  GetChatTokenType,
+  GetUserForChatType,
+  RemoveUserFromChat,
+} from 'types';
+
+class ChatApi extends BaseAPI {
+  constructor() {
+    super({ path: '/chats' });
+  }
+
+  public createChat({ ...rest }: CreateChatType) {
+    return this.post('', { ...rest });
+  }
+
+  public getChats() {
+    return this.get('');
+  }
+
+  public removeChatById({ ...rest }: RemoveChatType) {
+    return this.delete('', { ...rest });
+  }
+
+  public addUserToChat({ ...rest }: AddUserToChatType) {
+    return this.put('users', { ...rest });
+  }
+
+  public getChatToken({ chatId }: GetChatTokenType) {
+    return this.post(`token/${chatId}`, {});
+  }
+
+  public getUserForChat({ chatId }: GetUserForChatType) {
+    return this.get(`${chatId}/users`);
+  }
+
+  public removeUserFromChat({ ...rest }: RemoveUserFromChat) {
+    return this.delete('users', { ...rest });
+  }
+}
+
+export default new ChatApi();

src/Api/ProfileApi.ts

@@ -0,0 +1,26 @@
+import { BaseAPI } from './BaseAPI';
+import { UserInfoDTO, UserPasswordType, SearchUserByLoginType } from 'types';
+
+class ProfileApi extends BaseAPI {
+  constructor() {
+    super({ path: '/user' });
+  }
+
+  public changeAvatar(avatar: FormData) {
+    return this.put('/profile/avatar', avatar, {});
+  }
+
+  public changeUserInfo(userInfo: UserInfoDTO) {
+    return this.put('/profile', userInfo);
+  }
+
+  public changeUserPassword(userPassword: UserPasswordType) {
+    return this.put('/password', userPassword);
+  }
+
+  public searchUserByLogin({ login }: SearchUserByLoginType) {
+    return this.post('/search', login);
+  }
+}
+
+export default new ProfileApi();

src/Api/index.ts

@@ -0,0 +1,3 @@
+export { default as authAPI } from './AuthAPI';
+export { default as chatApi } from './ChatApi';
+export { default as profileApi } from './ProfileApi';

src/components/authLink/authLink.css

@@ -0,0 +1,16 @@
+.auth-link {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  margin: 0 auto;
+  display: block;
+  font-size: 11px;
+  color: var(--color-secondary);
+  font-weight: 500;
+  line-height: 11px;
+  transition: 0.3s opacity;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}

src/components/authLink/authLink.ts

@@ -0,0 +1,25 @@
+import { Block } from 'core';
+import './authLink.css';
+import { AuthLinkProps } from './types';
+
+export class AuthLink extends Block {
+  static componentName = 'AuthLink';
+
+  constructor({ onClick, ...rest }: AuthLinkProps) {
+    super({ events: { click: onClick }, ...rest });
+  }
+
+  protected getStateFromProps(props: AuthLinkProps): void {
+    this.state = {
+      text: props.text,
+    };
+  }
+
+  protected render(): string {
+    const { text } = this.state;
+    // language=hbs
+    return `
+      <Button class="auth-link" type="button">${text}</Button>
+    `;
+  }
+}

src/components/authLink/index.ts

@@ -0,0 +1 @@
+export { AuthLink as default } from './authLink';

src/components/authLink/types.ts

@@ -0,0 +1,4 @@
+export interface AuthLinkProps {
+  onClick: () => void;
+  text: string;
+}

src/components/avatar/avatar.ts

@@ -1,25 +1,35 @@
-import Block from 'core/Block';
+import { Block } from 'core';
 import './avatar.css';
 import { AvatarProps } from './types';
+import defaultIcon from 'img/avatar.svg';
+import { URLS } from 'utils';
 
 export class Avatar extends Block {
   static componentName = 'Avatar';
-  constructor({ srcAvatar, userName }: AvatarProps) {
-    super({ srcAvatar, userName });
+
+  constructor({ ...rest }: AvatarProps) {
+    super({ ...rest });
   }
+
   protected getStateFromProps(props: AvatarProps): void {
     this.state = {
       userName: props.userName,
       srcAvatar: props.srcAvatar,
     };
   }
+
   protected render(): string {
     const { userName, srcAvatar } = this.state;
+
     // language=hbs
     return `
       <img
         class="avatar"
-        src="${srcAvatar}"
+        src="${
+          srcAvatar !== 'undefined' && srcAvatar !== 'null'
+            ? `${URLS.RESOURCES}${srcAvatar}`
+            : defaultIcon
+        }"
         alt="Аватар пользователя ${userName}"
       />
     `;

src/components/btnBackProfile/btnBackProfile.css

@@ -5,7 +5,7 @@
 
   &__link {
     box-sizing: border-box;
-    text-decoration: none;
+    cursor: pointer;
     border: none;
     padding: 0;
     width: 100%;

src/components/btnBackProfile/btnBackProfile.ts

@@ -1,31 +1,28 @@
-import Block from 'core/Block';
+import { Block } from 'core';
 import './btnBackProfile.css';
 import { BtnBackProfileProps } from './types';
 import left_arrow from 'img/left-arrow.svg';
 
 export class BtnBackProfile extends Block {
   static componentName = 'BtnBackProfile';
-  constructor({ href }: BtnBackProfileProps) {
-    super({ href });
-  }
-  protected getStateFromProps(props: BtnBackProfileProps): void {
-    this.state = {
-      href: props.href,
-    };
+
+  constructor({ onClick }: BtnBackProfileProps) {
+    super({ events: { click: onClick } });
   }
+
   protected render(): string {
     // language=hbs
     return `
       <li class="profile-btn">
-        <a href="${this.state.href}" class="profile-btn__link" aria-label="Вернуться назад">
+        <Button class="profile-btn__link" aria-label="Вернуться назад">
           <div class="profile-btn__wrap">
             <img
               class="profile__icon"
               src="${left_arrow}"
               alt="Иконка вернуться назад"
             />
           </div>
-        </a>
+        </Button>
       </li>
     `;
   }

src/components/btnBackProfile/types.ts

@@ -1,3 +1,3 @@
 export interface BtnBackProfileProps {
-  href: string;
+  onClick: () => void;
 }

src/components/btnProfile/btnProfile.css

@@ -12,7 +12,10 @@
   }
 
   &__link {
-    text-decoration: none;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    padding: 0;
     display: inline-block;
     font-size: 13px;
     font-weight: 500;
@@ -31,4 +34,19 @@
   &__link_color_blue {
     color: var(--color-secondary);
   }
+
+  &__btn {
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 13px;
+    transition: 0.3s opacity;
+  }
+
+  &__btn:hover {
+    opacity: 0.7;
+  }
 }