From b15b31dd2f6222dfb916436988d7d5bbbdececcd Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Wed, 16 Nov 2022 15:25:37 +0300
Subject: [PATCH] Add markdown, message component [WiP]

---
 src/components/Inbox/Message.module.scss |  7 +++++++
 src/components/Inbox/Message.tsx         | 17 +++++++++++++++++
 src/components/Views/Inbox.tsx           |  6 +++++-
 src/styles/Inbox.scss                    | 14 ++++++++++++--
 4 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Inbox/Message.module.scss
 create mode 100644 src/components/Inbox/Message.tsx

diff --git a/src/components/Inbox/Message.module.scss b/src/components/Inbox/Message.module.scss
new file mode 100644
index 00000000..b80f3594
--- /dev/null
+++ b/src/components/Inbox/Message.module.scss
@@ -0,0 +1,7 @@
+.Message {
+  .own {
+  }
+  .body {
+    // message text
+  }
+}
diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx
new file mode 100644
index 00000000..c9f1f803
--- /dev/null
+++ b/src/components/Inbox/Message.tsx
@@ -0,0 +1,17 @@
+import { clsx } from 'clsx'
+import styles from './Message.module.scss'
+
+type Props = {
+  body: string
+  isOwn: boolean
+}
+
+const Message = (props: Props) => {
+  return (
+    <div class={clsx(styles.Message, props.isOwn && styles.own)}>
+      <div class={styles.body}>{props.body}</div>
+    </div>
+  )
+}
+
+export default Message
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index 2a9c6706..51ec2ef5 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -6,6 +6,7 @@ import { Loading } from '../Loading'
 import DialogCard from '../Inbox/DialogCard'
 import Search from '../Inbox/Search'
 import { useAuthorsStore } from '../../stores/zine/authors'
+import MarkdownIt from 'markdown-it'
 // const { session } = useAuthStore()
 
 import '../../styles/Inbox.scss'
@@ -13,6 +14,9 @@ import '../../styles/Inbox.scss'
 import { createClient } from '@urql/core'
 import { useSession } from '../../context/session'
 
+const md = new MarkdownIt({
+  linkify: true
+})
 const OWNER_ID = '501'
 const client = createClient({
   url: 'https://graphqlzero.almansi.me/api'
@@ -183,7 +187,7 @@ export const InboxView = () => {
                   }`}
                   >
                     <div class="conversation__message">
-                      {comment.body}
+                      <div innerHTML={md.render(comment.body)} />
                       <div class="conversation__message-details">
                         <time>14:26</time>
                         {comment.email} id: {comment.id}
diff --git a/src/styles/Inbox.scss b/src/styles/Inbox.scss
index f51b6b87..2b3e22db 100644
--- a/src/styles/Inbox.scss
+++ b/src/styles/Inbox.scss
@@ -283,6 +283,18 @@ body {
   padding: 12px 16px;
   position: relative;
 
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+    &:hover {
+      color: inherit;
+    }
+  }
+
   &:hover {
     .conversation__context-popup-control {
       opacity: 1;
@@ -303,7 +315,6 @@ body {
 .conversation__message-container--other {
   .conversation__message {
     background: #f6f6f6;
-    border-right: 0.3em solid #fff;
   }
 
   .conversation__context-popup-control {
@@ -317,7 +328,6 @@ body {
 
   .conversation__message {
     background: #000;
-    border-left: 0.3em solid #fff;
     color: #fff;
   }