feat(messages): add animations (#31)

2022-08-31 20:44:33 +01:00
parent d51de554d6
commit cd164538de
98 changed files with 1133 additions and 551 deletions
--- a/components/Application/Messages/Message/EditMessage/EditMessage.tsx
+++ b/components/Application/Messages/Message/EditMessage/EditMessage.tsx
@ -0,0 +1,48 @@
+import useTranslation from 'next-translate/useTranslation'
+import TextareaAutosize from 'react-textarea-autosize'
+
+import type { MessageProps } from '../Message'
+
+export interface EditMessageProps extends MessageProps {
+  handleEdit: () => Promise<void>
+  handleKeyDown: React.KeyboardEventHandler<HTMLFormElement>
+  textareaRef: React.RefObject<HTMLTextAreaElement>
+}
+
+export const EditMessage: React.FC<
+  React.PropsWithChildren<EditMessageProps>
+> = ({ handleEdit, handleKeyDown, textareaRef, message }) => {
+  const { t } = useTranslation()
+
+  const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
+    event
+  ) => {
+    event.preventDefault()
+    await handleEdit()
+  }
+
+  return (
+    <form
+      className='flex h-full w-full items-center'
+      onSubmit={handleEditSubmit}
+      onKeyDown={handleKeyDown}
+    >
+      <TextareaAutosize
+        className='scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none'
+        placeholder={t('application:write-a-message')}
+        wrap='soft'
+        maxRows={6}
+        name='message'
+        defaultValue={message.value}
+        ref={textareaRef}
+        autoFocus
+        onFocus={(event) => {
+          event.currentTarget.setSelectionRange(
+            event.currentTarget.value.length,
+            event.currentTarget.value.length
+          )
+        }}
+      />
+    </form>
+  )
+}
--- a/components/Application/Messages/Message/EditMessage/index.ts
+++ b/components/Application/Messages/Message/EditMessage/index.ts
@ -0,0 +1 @@
+export * from './EditMessage'
--- a/components/Application/Messages/Message/Message.tsx
+++ b/components/Application/Messages/Message/Message.tsx
@ -2,17 +2,18 @@ import { useState, useRef } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import date from 'date-and-time'
-import TextareaAutosize from 'react-textarea-autosize'
-import useTranslation from 'next-translate/useTranslation'
+import type { MotionProps } from 'framer-motion'
+import { motion } from 'framer-motion'

-import { MessageWithMember } from '../../../../models/Message'
+import type { MessageWithMember } from '../../../../models/Message'
 import { MessageText } from './MessageText'
 import { Loader } from '../../../design/Loader'
 import { MessageFile } from './MessageFile'
-import { Emoji } from '../../../Emoji'
 import { useAuthentication } from '../../../../tools/authentication'
+import { MessageOptions } from './MessageOptions'
+import { EditMessage } from './EditMessage'

-export interface MessageProps {
+export interface MessageProps extends MotionProps {
  message: MessageWithMember
 }

@ -21,15 +22,8 @@ export const Message: React.FC<MessageProps> = (props) => {

  const textareaReference = useRef<HTMLTextAreaElement>(null)
  const [isEditing, setIsEditing] = useState(false)
-  const { t } = useTranslation()
  const { authentication, user } = useAuthentication()

-  const handleDeleteMessage = async (): Promise<void> => {
-    try {
-      await authentication.api.delete(`/messages/${message.id}`)
-    } catch {}
-  }
-
  const handleTextareaKeyDown: React.KeyboardEventHandler<HTMLFormElement> = (
    event
  ) => {
@ -57,13 +51,6 @@ export const Message: React.FC<MessageProps> = (props) => {
    handleEditMode()
  }

-  const handleEditSubmit: React.FormEventHandler<HTMLFormElement> = async (
-    event
-  ) => {
-    event.preventDefault()
-    await handleEdit()
-  }
-
  const handleEditMode = (): void => {
    setIsEditing((oldIsEditing) => {
      return !oldIsEditing
@ -71,9 +58,19 @@ export const Message: React.FC<MessageProps> = (props) => {
  }

  return (
-    <div
-      className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
+    <motion.div
+      layout
+      initial='initial'
+      animate='animate'
+      exit='exit'
      data-cy={`message-${message.id}`}
+      className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
+      transition={{ type: 'spring', stiffness: 500, damping: 60 }}
+      variants={{
+        initial: { x: -100, opacity: 0 },
+        animate: { x: 0, opacity: 1 },
+        exit: { opacity: 0 }
+      }}
    >
      <Link href={`/application/users/${message.member.user.id}`}>
        <a>
@ -115,54 +112,24 @@ export const Message: React.FC<MessageProps> = (props) => {
            {date.format(new Date(message.createdAt), 'DD/MM/YYYY - HH:mm:ss')}
          </span>
        </div>
-        {message.member.userId === user.id ? (
-          <div className='absolute right-6 -top-8 flex opacity-0 transition-opacity group-hover:opacity-100'>
-            {message.type === 'text' ? (
-              <div
-                className='message-options rounded-l-lg border-l-slate-600'
-                title={t('application:edit')}
-                onClick={isEditing ? handleEdit : handleEditMode}
-              >
-                <Emoji
-                  value={isEditing ? ':white_check_mark:' : ':pencil2:'}
-                  size={18}
-                />
-              </div>
-            ) : null}
-            <div
-              className='message-options rounded-r-lg border-r-slate-600'
-              title={t('application:delete')}
-              onClick={handleDeleteMessage}
-            >
-              <Emoji value=':wastebasket:' size={18} />
-            </div>
-          </div>
-        ) : null}
+
+        {message.member.userId === user.id && (
+          <MessageOptions
+            message={message}
+            editMode={isEditing ? ':white_check_mark:' : ':pencil2:'}
+            handleEdit={isEditing ? handleEdit : handleEditMode}
+          />
+        )}
+
        {message.type === 'text' ? (
          <>
            {isEditing ? (
-              <form
-                className='flex h-full w-full items-center'
-                onSubmit={handleEditSubmit}
-                onKeyDown={handleTextareaKeyDown}
-              >
-                <TextareaAutosize
-                  className='scrollbar-firefox-support w-full resize-none bg-transparent p-2 tracking-wide outline-none'
-                  placeholder={t('application:write-a-message')}
-                  wrap='soft'
-                  maxRows={6}
-                  name='message'
-                  defaultValue={message.value}
-                  ref={textareaReference}
-                  autoFocus
-                  onFocus={(event) => {
-                    event.currentTarget.setSelectionRange(
-                      event.currentTarget.value.length,
-                      event.currentTarget.value.length
-                    )
-                  }}
-                />
-              </form>
+              <EditMessage
+                message={message}
+                textareaRef={textareaReference}
+                handleEdit={handleEdit}
+                handleKeyDown={handleTextareaKeyDown}
+              />
            ) : (
              <MessageText message={message} />
            )}
@ -173,6 +140,6 @@ export const Message: React.FC<MessageProps> = (props) => {
          <Loader />
        )}
      </div>
-    </div>
+    </motion.div>
  )
 }
--- a/components/Application/Messages/Message/MessageFile/MessageFile.tsx
+++ b/components/Application/Messages/Message/MessageFile/MessageFile.tsx
@ -3,7 +3,7 @@ import axios from 'axios'
 import prettyBytes from 'pretty-bytes'
 import { DownloadIcon } from '@heroicons/react/solid'

-import { MessageWithMember } from '../../../../../models/Message'
+import type { MessageWithMember } from '../../../../../models/Message'
 import { Loader } from '../../../../design/Loader'
 import { FileIcon } from './FileIcon'
 import { api } from '../../../../../tools/api'
--- a/components/Application/Messages/Message/MessageOptions/MessageOptions.tsx
+++ b/components/Application/Messages/Message/MessageOptions/MessageOptions.tsx
@ -0,0 +1,44 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { useAuthentication } from '../../../../../tools/authentication'
+import { Emoji } from '../../../../Emoji'
+import type { MessageProps } from '../Message'
+
+interface MessageOptionsProps extends MessageProps {
+  handleEdit: () => void
+  editMode: ':white_check_mark:' | ':pencil2:'
+}
+
+export const MessageOptions: React.FC<
+  React.PropsWithChildren<MessageOptionsProps>
+> = ({ handleEdit, editMode, message }) => {
+  const { t } = useTranslation()
+  const { authentication } = useAuthentication()
+
+  const handleDeleteMessage = async (): Promise<void> => {
+    try {
+      await authentication.api.delete(`/messages/${message.id}`)
+    } catch {}
+  }
+
+  return (
+    <div className='absolute right-6 -top-8 flex opacity-0 transition-opacity group-hover:opacity-100'>
+      {message.type === 'text' && (
+        <div
+          className='message-options rounded-l-lg border-l-slate-600'
+          title={t('application:edit')}
+          onClick={handleEdit}
+        >
+          <Emoji value={editMode} size={18} />
+        </div>
+      )}
+      <div
+        className='message-options rounded-r-lg border-r-slate-600'
+        title={t('application:delete')}
+        onClick={handleDeleteMessage}
+      >
+        <Emoji value=':wastebasket:' size={18} />
+      </div>
+    </div>
+  )
+}
--- a/components/Application/Messages/Message/MessageOptions/index.ts
+++ b/components/Application/Messages/Message/MessageOptions/index.ts
@ -0,0 +1 @@
+export * from './MessageOptions'
--- a/components/Application/Messages/Message/MessageText/MessageText.tsx
+++ b/components/Application/Messages/Message/MessageText/MessageText.tsx
@ -10,7 +10,7 @@ import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import 'katex/dist/katex.min.css'

 import { Emoji, emojiPlugin, isStringWithOnlyOneEmoji } from '../../../../Emoji'
-import { MessageWithMember } from '../../../../../models/Message'
+import type { MessageWithMember } from '../../../../../models/Message'

 export interface MessageContentProps {
  message: MessageWithMember
--- a/components/Application/Messages/Messages.tsx
+++ b/components/Application/Messages/Messages.tsx
@ -1,5 +1,6 @@
 import useTranslation from 'next-translate/useTranslation'
 import InfiniteScroll from 'react-infinite-scroll-component'
+import { AnimatePresence } from 'framer-motion'

 import { Loader } from '../../design/Loader'
 import { Message } from './Message'
@ -29,19 +30,21 @@ export const Messages: React.FC = () => {
      id='messages'
      className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
    >
-      <InfiniteScroll
-        scrollableTarget='messages'
-        className='messages-list !overflow-x-hidden'
-        dataLength={messages.length}
-        next={nextPage}
-        inverse
-        hasMore={hasMore}
-        loader={<Loader />}
-      >
-        {messages.map((message) => {
-          return <Message key={message.id} message={message} />
-        })}
-      </InfiniteScroll>
+      <AnimatePresence>
+        <InfiniteScroll
+          scrollableTarget='messages'
+          className='messages-list !overflow-x-hidden'
+          dataLength={messages.length}
+          next={nextPage}
+          inverse
+          hasMore={hasMore}
+          loader={<Loader />}
+        >
+          {messages.map((message) => {
+            return <Message key={message.id} message={message} />
+          })}
+        </InfiniteScroll>
+      </AnimatePresence>
    </div>
  )
 }