added deleting chat

LevanovaElena · Oct 26, 2023 · 76324b2 · 76324b2
1 parent 7aab501
commit 76324b2
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 22 deletions.
diff --git a/src/api/chat.ts b/src/api/chat.ts
@@ -16,6 +16,9 @@ export class ChatApi {
     public createChat(title: string) {
         return this.httpTransport.post(this.baseUrl, {data: {title: title}});
     }
+    public deleteChat(id: number) {
+        return this.httpTransport.delete(this.baseUrl, {data: {chatId: id}});
+    }
 
     public addChatUsers(userData: IChatUsersData) {
         return this.httpTransport.put(this.baseUrl + '/users', {data: userData});

diff --git a/src/assets/icons/danger.svg b/src/assets/icons/danger.svg
diff --git a/src/components/menu-chat/menu-chat.pcss b/src/components/menu-chat/menu-chat.pcss
@@ -1,12 +1,21 @@
-.menu-message {
+.menu{
     position: absolute;
-    top:-150%;
-    left:0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
+    z-index: 300;
+
+    &.menu-message{
+        top:-150%;
+        left:0;
+    }
+
+    &.menu-chat{
+        bottom:-190%;
+        right:0;
+    }
 
     &.opened{
         display: flex;

diff --git a/src/components/menu-chat/menu-chat.ts b/src/components/menu-chat/menu-chat.ts
@@ -2,6 +2,9 @@ import {IProps, Block} from "../../core/block.ts";
 import {IChat} from "../../models/IChat.ts";
 import modalController from "../../core/modal-controller.ts";
 import {ModalAvatar, ModalChatUsers} from "../index.ts";
+import ModalPrompt from "../modal-prompt";
+import {deleteChat} from "../../services/chat.ts";
+import {setStateCurrentChat, updateChats} from "../../services/app.ts";
 
 
 interface IMenuChatProps extends IProps {
@@ -11,6 +14,7 @@ interface IMenuChatProps extends IProps {
     deleteUser: () => void,
     changeAvatarChat: () => void,
     closeMenu: () => void,
+    deleteChat: () => void,
 }
 
 export class MenuChat extends Block {
@@ -42,13 +46,35 @@ export class MenuChat extends Block {
         }
         props.changeAvatarChat = () => {
             modalController.addModal((new ModalAvatar({
-                oldAvatar:window.store.getState().currentChat?.avatar||'',
-                type:'chat'
+                oldAvatar: window.store.getState().currentChat?.avatar || '',
+                type: 'chat'
             })) as unknown as Block);
             modalController.openModal();
             this.props.closeMenu();
         }
 
+        props.deleteChat = () => {
+            modalController.addModal((new ModalPrompt({
+                caption: 'Delete Chat',
+                labelText: 'Are you sure you want to delete the chat?',
+                okText: 'Delete Chat',
+                ref: "modal",
+                info: true,
+                okClick: () => {
+                    if (!window.store.getState().currentChat) return;
+                    const id = window.store.getState().currentChat?.id;
+                    if (!id) return;
+                    deleteChat(id)
+                        .then(async () => {
+                            await updateChats();
+                            await setStateCurrentChat(null);
+                            modalController.closeModal();
+                        })
+                        .catch((error) => console.warn(error));
+                },
+            })) as unknown as Block);
+            modalController.openModal();
+        }
         super({
             ...props
         })
@@ -66,6 +92,7 @@ export class MenuChat extends Block {
                     {{{ MenuItem caption='Add User' onClick=addUser icon='plus' }}}
                     {{{ MenuItem caption='Delete User' onClick=deleteUser icon='delete' }}}
                     {{{ MenuItem caption='Change Chat Avatar' onClick=changeAvatarChat icon='avatar' }}}
+                    {{{ MenuItem caption='Delete Chat' onClick=deleteChat icon='danger' }}}
                 </ul>
             </nav>
         `)

diff --git a/src/components/menu-item/menu-item.pcss b/src/components/menu-item/menu-item.pcss
@@ -46,6 +46,10 @@
         &.menu-item__icon_avatar{
             background-image: url("../../assets/icons/chat-avatar.svg") ;
         }
+
+        &.menu-item__icon_danger{
+            background-image: url("../../assets/icons/danger.svg") ;
+        }
     }
 
     .menu-item__caption{

diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
@@ -3,7 +3,7 @@ import {IProps, Block} from "../../core/block.ts";
 
 export interface IMenuItemProps extends IProps {
     caption: string,
-    icon: 'media' | 'file' | 'location' | 'plus' | 'delete' | 'avatar';
+    icon: 'media' | 'file' | 'location' | 'plus' | 'delete' | 'avatar'|'danger';
     onClick: () => void;
     disabled?: boolean;
 }

diff --git a/src/components/menu-message/menu-message.pcss b/src/components/menu-message/menu-message.pcss
@@ -1,21 +1,12 @@
-.menu{
+.menu-message {
     position: absolute;
+    top:-150%;
+    left:0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
-    z-index: 300;
-
-    &.menu-message{
-        top:-150%;
-        left:0;
-    }
-
-    &.menu-chat{
-        bottom:-150%;
-        right:0;
-    }
 
     &.opened{
         display: flex;

diff --git a/src/components/modal-prompt/modal-prompt.ts b/src/components/modal-prompt/modal-prompt.ts
@@ -5,16 +5,21 @@ interface IModalPromptProps extends IProps {
     caption: string,
     labelText: string,
     okText: string,
-    okClick?: (result:string) => void,
+    okClick?: (result?:string) => void,
     okInputClick?: (event:Event) => void,
     cancelClick?: () => void,
-    ref?:string
+    ref?:string,
+    info?:boolean
 }
 
 export class ModalPrompt extends Block {
     constructor(props: IModalPromptProps) {
         props.okInputClick = (event:Event) => {
             event.preventDefault();
+            if(props.info){
+                this.props.okClick&&this.props.okClick();
+                return;
+            }
             const input = this.refs.modal.getRefs().input.value();
             if (!input) {
                 return;
@@ -27,6 +32,7 @@ export class ModalPrompt extends Block {
         }
 
 
+
         super({
             ...props
         })
@@ -38,7 +44,9 @@ export class ModalPrompt extends Block {
     }
 
     getChildren() {
-        const {labelText = ''} = this.props;
+        const {labelText = '',info=false} = this.props;
+        if(info)
+            return `<h6>${labelText}</h6>`
         return (
             `
                 {{{ InputShort label='${labelText}' type='text' name='input' validate=validate.nameChat ref='input' }}}             

diff --git a/src/services/chat.ts b/src/services/chat.ts
@@ -17,6 +17,12 @@ const createChat = async (title: string): Promise<IChat> => {
     if (error) throw Error(error);
      return result.data as IChat;
 }
+const deleteChat = async (id: number): Promise<IChat> => {
+    const result = await chatApi.deleteChat(id);
+    const error = responseHasError(result);
+    if (error) throw Error(error);
+     return result.data as IChat;
+}
 
 const addChatUser = async (data: IChatUsersData) => {
     const result = await chatApi.addChatUsers(data);
@@ -59,5 +65,6 @@ export {
     getChatUsers,
     deleteChatUsers,
     getChatToken,
-    updateChatAvatar
+    updateChatAvatar,
+    deleteChat
 }