From 1badb74f6f2b6e474ce26b197f195eb698ab578a Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 14 Dec 2022 10:07:01 +0300
Subject: [PATCH] Pass selected action to message component

---
 src/components/Inbox/Message.module.scss      |  2 +-
 src/components/Inbox/Message.tsx              |  2 ++
 src/components/Inbox/MessageActionsPopup.tsx  | 28 ++++++++++++++-----
 .../_shared/Popup/Popup.module.scss           |  2 +-
 src/locales/ru.json                           |  8 +++++-
 5 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/Inbox/Message.module.scss b/src/components/Inbox/Message.module.scss
index b6cb4173..614ca652 100644
--- a/src/components/Inbox/Message.module.scss
+++ b/src/components/Inbox/Message.module.scss
@@ -52,7 +52,7 @@ $actionsWidth: 32px * 2;
 
     &:hover {
       .actions {
-        z-index: 1;
+        z-index: 100;
         opacity: 1;
         right: -$actionsWidth;
       }
diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx
index 1f1d3e91..a545e603 100644
--- a/src/components/Inbox/Message.tsx
+++ b/src/components/Inbox/Message.tsx
@@ -27,6 +27,7 @@ const Message = (props: Props) => {
   const isOwn = props.ownId === Number(props.content.author)
   const user = props.members?.find((m) => m.id === Number(props.content.author))
   const [isPopupVisible, setIsPopupVisible] = createSignal<boolean>(false)
+  const [selectedAction, setSelectedAction] = createSignal<string>()
 
   const handleMouseLeave = () => {
     if (isPopupVisible()) setIsPopupVisible(false)
@@ -48,6 +49,7 @@ const Message = (props: Props) => {
             </div>
             <MessageActionsPopup
               forceHide={!isPopupVisible()}
+              actionSelect={(selectedAction) => setSelectedAction(selectedAction)}
               onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
               trigger={<Icon name="menu" />}
             />
diff --git a/src/components/Inbox/MessageActionsPopup.tsx b/src/components/Inbox/MessageActionsPopup.tsx
index e3647b16..dfa83e24 100644
--- a/src/components/Inbox/MessageActionsPopup.tsx
+++ b/src/components/Inbox/MessageActionsPopup.tsx
@@ -1,18 +1,32 @@
+import { createEffect, createSignal, For } from 'solid-js'
 import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
+import { t } from '../../utils/intl'
 
-type MessageActionsPopup = Omit<PopupProps, 'children'>
+type MessageActionsPopup = {
+  actionSelect?: (selectedAction) => void
+} & Omit<PopupProps, 'children'>
+
+const actions = [
+  { name: t('Reply'), action: 'reply' },
+  { name: t('Copy'), action: 'copy' },
+  { name: t('Pin'), action: 'pin' },
+  { name: t('Forward'), action: 'forward' },
+  { name: t('Select'), action: 'select' },
+  { name: t('Delete'), action: 'delete' }
+]
 
 export const MessageActionsPopup = (props: MessageActionsPopup) => {
+  const [selectedAction, setSelectedAction] = createSignal<string>()
+  createEffect(() => {
+    if (props.actionSelect) props.actionSelect(selectedAction())
+  })
   return (
     <Popup {...props} variant="tiny">
       <ul class="nodash">
-        <li>Ответить</li>
-        <li>Скопировать</li>
-        <li>Закрепить</li>
-        <li>Переслать</li>
-        <li>Выбрать</li>
-        <li style={{ color: 'red' }}>Удалить</li>
+        <For each={actions}>
+          {(item) => <li onClick={() => setSelectedAction(item.action)}>{item.name}</li>}
+        </For>
       </ul>
     </Popup>
   )
diff --git a/src/components/_shared/Popup/Popup.module.scss b/src/components/_shared/Popup/Popup.module.scss
index 2ac1330c..b1890f63 100644
--- a/src/components/_shared/Popup/Popup.module.scss
+++ b/src/components/_shared/Popup/Popup.module.scss
@@ -8,7 +8,7 @@
   opacity: 1;
   color: #000;
   position: absolute;
-  z-index: 10;
+  z-index: 100;
   min-width: 144px;
 
   ul {
diff --git a/src/locales/ru.json b/src/locales/ru.json
index ccc1b1cb..93b5ee08 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -205,5 +205,11 @@
   "Date of Birth": "Дата рождения",
   "Social networks": "Социальные сети",
   "Save settings": "Сохранить настройки",
-  "Write message": "Написать сообщение"
+  "Write message": "Написать сообщение",
+  "Reply": "Ответить",
+  "Copy": "Скопировать",
+  "Pin": "Закрепить",
+  "Forward": "Переслать",
+  "Select": "Выбрать",
+  "Delete": "Удалить"
 }