From 76324b2f6a77c7dc16dabb09eef71f7241b76785 Mon Sep 17 00:00:00 2001
From: ellevanova <ellevanova@gmail.com>
Date: Thu, 26 Oct 2023 21:31:30 +0400
Subject: [PATCH] added deleting chat

---
 src/api/chat.ts                               |  3 ++
 src/assets/icons/danger.svg                   |  1 +
 src/components/menu-chat/menu-chat.pcss       | 15 +++++++--
 src/components/menu-chat/menu-chat.ts         | 31 +++++++++++++++++--
 src/components/menu-item/menu-item.pcss       |  4 +++
 src/components/menu-item/menu-item.ts         |  2 +-
 src/components/menu-message/menu-message.pcss | 15 ++-------
 src/components/modal-prompt/modal-prompt.ts   | 14 +++++++--
 src/services/chat.ts                          |  9 +++++-
 9 files changed, 72 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/icons/danger.svg

diff --git a/src/api/chat.ts b/src/api/chat.ts
index 88bd1fbd3..5ed81118b 100644
--- 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
new file mode 100644
index 000000000..0087bd7f4
--- /dev/null
+++ b/src/assets/icons/danger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#FC4343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-CircleAlert"><circle cx="12" cy="12" r="10"/><path d="M12 7v6m0 3.5v.5"/></svg>
diff --git a/src/components/menu-chat/menu-chat.pcss b/src/components/menu-chat/menu-chat.pcss
index 5d4ee7b7f..f8bcf8838 100644
--- 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
index 6f78cc75b..f38bcb5ad 100644
--- 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
index 5583e9394..7d30e781d 100644
--- 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
index 4795c6771..30fc78384 100644
--- 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
index 0a9652a08..5d4ee7b7f 100644
--- 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
index 34be07f5c..c5cfffa03 100644
--- 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
index 56aa43cb5..11246e02e 100644
--- 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
 }