feat(pages): add /application/[guildId]/[channelId] (#4)

components/Application/Messages/Message/Message.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Message as Component, MessageProps } from './Message'
+import { messageExampleComplete } from '../../../../cypress/fixtures/messages/message'
+
+const Stories: Meta = {
+  title: 'Message',
+  component: Component
+}
+
+export default Stories
+
+export const Message: Story<MessageProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Message.args = { message: messageExampleComplete }

components/Application/Messages/Message/Message.tsx

@@ -0,0 +1,61 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import date from 'date-and-time'
+
+import { MessageWithMember } from '../../../../models/Message'
+import { API_URL } from '../../../../tools/api'
+import { MessageContent } from './MessageContent'
+
+export interface MessageProps {
+  message: MessageWithMember
+}
+
+export const Message: React.FC<MessageProps> = (props) => {
+  const { message } = props
+
+  return (
+    <div className='p-4 flex transition hover:bg-gray-200 dark:hover:bg-gray-900'>
+      <Link href={`/application/users/${message.member.user.id}`}>
+        <a>
+          <div className='w-12 h-12 mr-4 flex flex-shrink-0 items-center justify-center'>
+            <div className='w-10 h-10 drop-shadow-md'>
+              <Image
+                className='rounded-full'
+                src={
+                  message.member.user.logo == null
+                    ? '/images/data/user-default.png'
+                    : API_URL + message.member.user.logo
+                }
+                alt={"Users's profil picture"}
+                width={50}
+                height={50}
+                draggable={false}
+              />
+            </div>
+          </div>
+        </a>
+      </Link>
+      <div className='w-full'>
+        <div className='w-max flex items-center'>
+          <Link href={`/application/users/${message.member.user.id}`}>
+            <a>
+              <span
+                data-cy='message-member-user-name'
+                className='font-bold text-gray-900 dark:text-gray-200'
+              >
+                {message.member.user.name}
+              </span>
+            </a>
+          </Link>
+          <span
+            data-cy='message-date'
+            className='text-gray-500 dark:text-gray-200 text-xs ml-4 select-none'
+          >
+            {date.format(new Date(message.createdAt), 'DD/MM/YYYY - HH:mm:ss')}
+          </span>
+        </div>
+        <MessageContent message={message} />
+      </div>
+    </div>
+  )
+}

components/Application/Messages/Message/MessageContent/MessageContent.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react'
+import ReactMarkdown from 'react-markdown'
+import gfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+
+import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from '../../../../Emoji'
+import { MessageWithMember } from '../../../../../models/Message'
+
+export interface MessageContentProps {
+  message: MessageWithMember
+}
+
+export const MessageContent: React.FC<MessageContentProps> = (props) => {
+  const { message } = props
+
+  const isMessageWithOnlyOneEmoji = useMemo(() => {
+    return isStringWithOnlyOneEmoji(message.value)
+  }, [message.value])
+
+  if (isMessageWithOnlyOneEmoji) {
+    return (
+      <div>
+        <p>
+          <Emoji value={message.value} size={40} />
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <ReactMarkdown
+      disallowedElements={['table']}
+      unwrapDisallowed
+      remarkPlugins={[[gfm], [remarkBreaks]]}
+      rehypePlugins={[emojiPlugin]}
+      linkTarget='_blank'
+      components={{
+        emoji: (props) => {
+          return <Emoji value={props.value} size={20} />
+        }
+      }}
+    >
+      {message.value}
+    </ReactMarkdown>
+  )
+}

components/Application/Messages/Message/MessageContent/index.ts

@@ -0,0 +1 @@
+export * from './MessageContent'

components/Application/Messages/Message/index.ts

@@ -0,0 +1 @@
+export * from './Message'