Add fallback screen

src/components/Inbox/MessagesFallback.module.scss

@@ -0,0 +1,26 @@
+.MessagesFallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+
+  $width: 10.5em;
+
+  .text {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+    width: $width;
+  }
+
+  .button {
+    background: #141414;
+    border-radius: 12px;
+    width: 100%;
+    max-width: $width;
+    text-align: center;
+    color: #fff;
+    height: 48px;
+    text-transform: none;
+  }
+}

src/components/Inbox/MessagesFallback.tsx

@@ -0,0 +1,25 @@
+import { Show } from 'solid-js'
+import styles from './MessagesFallback.module.scss'
+
+type MessagesFallback = {
+  message: string
+  onClick?: () => void
+  actionText?: string
+}
+
+const MessagesFallback = (props: MessagesFallback) => {
+  return (
+    <div class={styles.MessagesFallback}>
+      <div>
+        <p class={styles.text}>{props.message}</p>
+        <Show when={props.onClick}>
+          <button class={styles.button} type="button" onClick={props.onClick}>
+            {props.actionText}
+          </button>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default MessagesFallback

src/components/Views/Inbox.tsx

@@ -16,6 +16,7 @@ import '../../styles/Inbox.scss'
 import { useInbox } from '../../context/inbox'
 import DialogHeader from '../Inbox/DialogHeader'
 import { apiClient } from '../../utils/apiClient'
+import MessagesFallback from '../Inbox/MessagesFallback'
 
 const userSearch = (array: Author[], keyword: string) => {
   const searchTerm = keyword.toLowerCase()
@@ -88,11 +89,11 @@ export const InboxView = () => {
     setPostMessageText(event.target.value)
   }
   createEffect(() => {
+    if (!textareaParent) return
     textareaParent.dataset.replicatedValue = postMessageText()
   })
 
-  const handleOpenInviteModal = (event: Event) => {
+  const handleOpenInviteModal = () => {
-    event.preventDefault()
     showModal('inviteToChat')
   }
 
@@ -120,9 +121,9 @@ export const InboxView = () => {
         <div class="chat-list col-md-4">
           <div class="sidebar-header">
             <Search placeholder="Поиск" onChange={getQuery} />
-            <div onClick={handleOpenInviteModal}>
+            <button type="button" onClick={handleOpenInviteModal}>
               <Icon name="plus-button" style={{ width: '40px', height: '40px' }} />
-            </div>
+            </button>
           </div>
 
           <div class="chat-list__types">
@@ -173,10 +174,17 @@ export const InboxView = () => {
         </div>
 
         <div class="col-md-8 conversation">
-          <Show when={currentDialog()}>
+          <Show
+            when={currentDialog()}
+            fallback={
+              <MessagesFallback
+                message={t('Choose who you want to write to')}
+                onClick={handleOpenInviteModal}
+                actionText={t('Start conversation')}
+              />
+            }
+          >
             <DialogHeader ownId={currentUserId()} chat={currentDialog()} />
-          </Show>
-
             <div class="conversation__messages">
               <div class="conversation__messages-container" ref={chatWindow}>
                 <For each={messages()}>
@@ -199,7 +207,6 @@ export const InboxView = () => {
                     rows={1}
                     onInput={(event) => handleChangeMessage(event)}
                     placeholder="Написать сообщение"
-                  disabled={!currentDialog()?.id}
                   />
                 </div>
                 <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
@@ -207,6 +214,7 @@ export const InboxView = () => {
                 </button>
               </div>
             </div>
+          </Show>
         </div>
       </div>
     </div>

src/locales/ru.json

@@ -188,5 +188,7 @@
   "create_group": "Создать группу",
   "discourse_theme": "Тема дискурса",
   "cancel": "Отмена",
-  "group_chat": "Общий чат"
+  "group_chat": "Общий чат",
+  "Choose who you want to write to": "Выберите кому хотите написать",
+  "Start conversation": "Начать беседу"
 }