init chat logic

src/components/Pages/HomePage.tsx

@@ -5,7 +5,7 @@ import { createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { loadPublishedArticles, resetSortedArticles } from '../../stores/zine/articles'
 import { loadRandomTopics } from '../../stores/zine/topics'
 import { Loading } from '../Loading'
-
+import { InboxView } from '../Views/Inbox'
 export const HomePage = (props: PageProps) => {
   const [isLoaded, setIsLoaded] = createSignal(Boolean(props.homeArticles) && Boolean(props.randomTopics))
 
@@ -25,6 +25,7 @@ export const HomePage = (props: PageProps) => {
   return (
     <MainLayout>
       <Show when={isLoaded()} fallback={<Loading />}>
+        <InboxView />
         <HomeView randomTopics={props.randomTopics} recentPublishedArticles={props.homeArticles || []} />
       </Show>
     </MainLayout>

src/components/Views/Inbox.tsx

@@ -1,14 +1,93 @@
+import { For, createSignal, Show, onMount } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
 import { AuthorCard } from '../Author/Card'
 import { Icon } from '../Nav/Icon'
+import { Loading } from '../Loading'
 import '../../styles/Inbox.scss'
+// Для моков
+import { createClient } from '@urql/core'
+
+const OWNER_ID = '501'
+const client = createClient({
+  url: 'https://graphqlzero.almansi.me/api'
+})
 
 // interface InboxProps {
 //   chats?: Chat[]
 //   messages?: Message[]
 // }
+const [messages, setMessages] = createSignal([])
+const [postMessageText, setPostMessageText] = createSignal('')
+const [loading, setLoading] = createSignal<boolean>(false)
+
+const messageQuery = `
+query Comments ($options: PageQueryOptions) {
+  comments(options: $options) {
+    data {
+      id
+      body
+      email
+    }
+  }
+}
+`
+
+const newMessageQuery = `
+mutation postComment($messageBody: String!) {
+  createComment(
+    input: { body: $messageBody, email: "test@test.com", name: "User" }
+  ) {
+    id
+    body
+    name
+    email
+  }
+}
+`
+const fetchMessages = async (query) => {
+  const response = await client
+    .query(query, {
+      options: { slice: { start: 0, end: 3 } }
+    })
+    .toPromise()
+  if (response.error) console.debug('getMessages', response.error)
+  setMessages(response.data.comments.data)
+}
+
+const postMessage = async (msg: string) => {
+  const response = await client.mutation(newMessageQuery, { messageBody: msg }).toPromise()
+  return response.data.createComment
+}
+
+let chatWindow
+onMount(() => {
+  setLoading(true)
+  fetchMessages(messageQuery)
+    .then(() => {
+      setLoading(false)
+      chatWindow.scrollTop = chatWindow.scrollHeight
+    })
+    .catch(() => setLoading(false))
+})
 
 export const InboxView = () => {
+  const handleSubmit = async () => {
+    postMessage(postMessageText())
+      .then((result) => {
+        setMessages((prev) => [...prev, result])
+      })
+      .then(() => {
+        setPostMessageText('')
+        chatWindow.scrollTop = chatWindow.scrollHeight
+        console.log('!!! msg:', messages())
+      })
+  }
+
+  const handleChangeMessage = (event) => {
+    setPostMessageText(event.target.value)
+    console.log('!!! asd:', postMessageText().trim().length)
+  }
+
   // TODO: get user session
   return (
     <div class="messages container">
@@ -37,13 +116,6 @@ export const InboxView = () => {
 
           <div class="chat-list__users">
             <ul>
-              <li>
-                <AuthorCard author={{} as Author} hideFollow={true} />
-                <div class="last-message-date">12:15</div>
-                <div class="last-message-text">
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                </div>
-              </li>
               <li class="user--online chat-list__user--current">
                 <AuthorCard author={{} as Author} hideFollow={true} />
                 <div class="last-message-date">19:48</div>
@@ -64,59 +136,50 @@ export const InboxView = () => {
           </div>
 
           <div class="conversation__messages">
-            <div class="conversation__messages-container">
-              <div class="conversation__message-container conversation__message-container--other">
-                <div class="conversation__message">
-                  Круто, беру в оборот!
-                  <div class="conversation__message-details">
-                    <time>14:26</time>
+            <div class="conversation__messages-container" ref={chatWindow}>
+              <Show when={loading()}>
+                <Loading />
+              </Show>
+              <For each={messages()}>
+                {(comment: { body: string; id: string; email: string }) => (
+                  <div
+                    class={`conversation__message-container
+                  ${
+                    OWNER_ID === comment.id
+                      ? 'conversation__message-container--own'
+                      : 'conversation__message-container--other'
+                  }`}
+                  >
+                    <div class="conversation__message">
+                      {comment.body}
+                      <div class="conversation__message-details">
+                        <time>14:26</time>
+                        {comment.email} id: {comment.id}
+                      </div>
+                      <button class="conversation__context-popup-control">
+                        <Icon name="ellipsis" />
+                      </button>
+                    </div>
                   </div>
-                  <button class="conversation__context-popup-control">
-                    <Icon name="ellipsis" />
-                  </button>
-                </div>
-              </div>
+                )}
+              </For>
 
-              <div class="conversation__message-container conversation__message-container--own">
-                <div class="conversation__message">
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae earum iste itaque
-                  libero perspiciatis possimus quod! Accusamus, aliquam amet consequuntur debitis dolorum
-                  esse laudantium magni omnis rerum voluptatem voluptates!
-                  <div class="conversation__message-details">
-                    <time>14:31</time>
-                    Отредактировано
-                  </div>
-                  <button class="conversation__context-popup-control">
-                    <Icon name="ellipsis" />
-                  </button>
-                </div>
-              </div>
-
-              <div class="conversation__date">
-                <time>12 сентября</time>
-              </div>
-
-              <div class="conversation__message-container conversation__message-container--other">
-                <div class="conversation__message">
-                  Нужна грамотная инфраструктура для сообщений, если ожидается нагрузка - надо опираться на
-                  это. Но в целом это несложно сделать.
-                  <div class="conversation__message-details">
-                    <time>10:47</time>
-                  </div>
-                  <button class="conversation__context-popup-control">
-                    <Icon name="ellipsis" />
-                  </button>
-                </div>
-              </div>
+              {/*<div class="conversation__date">*/}
+              {/*  <time>12 сентября</time>*/}
+              {/*</div>*/}
             </div>
           </div>
 
-          <form class="conversation__message-form">
-            <input type="text" placeholder="Написать сообщение" />
-            <button type="submit">
+          <div class="conversation__message-form">
+            <textarea
+              value={postMessageText()}
+              onInput={(event) => handleChangeMessage(event)}
+              placeholder="Написать сообщение"
+            />
+            <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
               <Icon name="send-message" />
             </button>
-          </form>
+          </div>
         </div>
       </div>
     </div>

src/styles/Inbox.scss

@@ -1,16 +1,22 @@
 main {
   display: flex;
-  height: 100%;
+  height: 100vh;
   flex-direction: column;
   position: relative;
 }
 
 .messages {
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
   display: flex;
   flex: 1;
   flex-direction: column;
-  height: 100%;
-  position: relative;
+  height: 100vh;
+  position: fixed;
+  //position: relative;
+  z-index: 100000;
 
   > .row {
     flex: 1;
@@ -226,14 +232,19 @@ main {
 .conversation__message-form {
   border-top: 1px solid #141414;
   display: flex;
+  flex-direction: row;
+  align-items: center;
   padding: 1em 1em 1em 0;
 
-  input {
-    border: none;
+  textarea {
     @include font-size(2rem);
 
-    height: 5.6rem;
+    font-family: inherit;
+    height: 4.4em;
     width: 100%;
+    padding: 1em;
+    margin-bottom: 0;
+    min-height: unset;
   }
 
   button {
@@ -266,6 +277,7 @@ main {
   position: absolute;
   top: 0;
   width: 100%;
+  scroll-behavior: smooth;
 }
 
 .conversation__date {