feat(messages): add animations (#31)

This commit is contained in:
Walid
2022-08-31 20:44:33 +01:00
committed by GitHub
parent d51de554d6
commit cd164538de
98 changed files with 1133 additions and 551 deletions

View File

@ -5,7 +5,8 @@ import classNames from 'clsx'
import { useMediaQuery } from 'react-responsive'
import { useSwipeable } from 'react-swipeable'
import { Sidebar, DirectionSidebar } from './Sidebar'
import type { DirectionSidebar } from './Sidebar'
import { Sidebar } from './Sidebar'
import { IconButton } from '../design/IconButton'
import { IconLink } from '../design/IconLink'
import { Guilds } from './Guilds/Guilds'
@ -148,7 +149,9 @@ export const Application: React.FC<
<header className='z-50 flex h-16 items-center justify-between bg-gray-200 px-2 py-3 shadow-lg dark:bg-gray-800'>
<IconButton
className='h-10 w-10 p-2'
onClick={() => handleToggleSidebars('left')}
onClick={() => {
return handleToggleSidebars('left')
}}
>
{!visibleSidebars.left ? <MenuIcon /> : <XIcon />}
</IconButton>
@ -163,7 +166,9 @@ export const Application: React.FC<
<IconButton
data-cy='icon-button-right-sidebar-members'
className='h-10 w-10 p-2'
onClick={() => handleToggleSidebars('right')}
onClick={() => {
return handleToggleSidebars('right')
}}
>
{!visibleSidebars.right ? <UsersIcon /> : <XIcon />}
</IconButton>

View File

@ -11,11 +11,11 @@ import { useGuildMember } from '../../../contexts/GuildMember'
import { Input } from '../../design/Input'
import { Button } from '../../design/Button'
import { useAuthentication } from '../../../tools/authentication'
import {
import type {
Channel,
channelSchema,
ChannelWithDefaultChannelId
} from '../../../models/Channel'
import { channelSchema } from '../../../models/Channel'
import { ConfirmPopup } from '../ConfirmPopup'
import { useFormTranslation } from '../../../hooks/useFormTranslation'

View File

@ -4,8 +4,8 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { CogIcon } from '@heroicons/react/solid'
import { GuildsChannelsPath } from '../Application'
import { Channel as ChannelType } from '../../../models/Channel'
import type { GuildsChannelsPath } from '../Application'
import type { Channel as ChannelType } from '../../../models/Channel'
import { useGuildMember } from '../../../contexts/GuildMember'
import { IconButton } from '../../design/IconButton'

View File

@ -1,7 +1,7 @@
import InfiniteScroll from 'react-infinite-scroll-component'
import { useChannels } from '../../../contexts/Channels'
import { GuildsChannelsPath } from '../Application'
import type { GuildsChannelsPath } from '../Application'
import { Loader } from '../../design/Loader'
import { Channel } from './Channel'

View File

@ -17,7 +17,9 @@ export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
const [isLoading, setIsLoading] = useState(false)
const handleYesLoading = async (): Promise<void> => {
setIsLoading((isLoading) => !isLoading)
setIsLoading((isLoading) => {
return !isLoading
})
await props.handleYes()
}

View File

@ -8,7 +8,8 @@ import { Input } from '../../design/Input'
import { Main } from '../../design/Main'
import { Button } from '../../design/Button'
import { FormState } from '../../design/FormState'
import { Channel, channelSchema } from '../../../models/Channel'
import type { Channel } from '../../../models/Channel'
import { channelSchema } from '../../../models/Channel'
import { useGuildMember } from '../../../contexts/GuildMember'
import { useFormTranslation } from '../../../hooks/useFormTranslation'

View File

@ -1,11 +1,12 @@
import { useRouter } from 'next/router'
import useTranslation from 'next-translate/useTranslation'
import { Form, useForm } from 'react-component-form'
import { AxiosResponse } from 'axios'
import type { AxiosResponse } from 'axios'
import type { HandleUseFormCallback } from 'react-component-form'
import { useAuthentication } from '../../../tools/authentication'
import { GuildComplete, guildSchema } from '../../../models/Guild'
import type { GuildComplete } from '../../../models/Guild'
import { guildSchema } from '../../../models/Guild'
import { Input } from '../../design/Input'
import { Main } from '../../design/Main'
import { Button } from '../../design/Button'

View File

@ -5,7 +5,7 @@ import { useGuildMember } from '../../../contexts/GuildMember'
import { Divider } from '../../design/Divider'
import { Channels } from '../Channels'
import { IconButton } from '../../design/IconButton'
import { GuildsChannelsPath } from '..'
import type { GuildsChannelsPath } from '..'
export interface GuildLeftSidebarProps {
path: GuildsChannelsPath

View File

@ -1,7 +1,7 @@
import { memo } from 'react'
import Image from 'next/image'
import { GuildWithDefaultChannelId } from '../../../models/Guild'
import type { GuildWithDefaultChannelId } from '../../../models/Guild'
import { IconLink } from '../../design/IconLink'
export interface GuildProps {

View File

@ -2,7 +2,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
import { Loader } from '../../design/Loader'
import { useGuilds } from '../../../contexts/Guilds'
import { GuildsPath } from '..'
import type { GuildsPath } from '..'
import { Guild } from './Guild'
export interface GuildsProps {

View File

@ -7,7 +7,7 @@ import axios from 'axios'
import { Emoji } from '../../Emoji'
import { ConfirmPopup } from '../ConfirmPopup'
import {
import type {
GuildPublic as GuildPublicType,
GuildWithDefaultChannelId
} from '../../../models/Guild'
@ -25,7 +25,9 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
const { t } = useTranslation()
const handleIsConfirmed = (): void => {
setIsConfirmed((isConfirmed) => !isConfirmed)
setIsConfirmed((isConfirmed) => {
return !isConfirmed
})
}
const handleYes = async (): Promise<void> => {

View File

@ -3,11 +3,12 @@ import { useEffect, useState } from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
import { useAuthentication } from '../../../tools/authentication'
import { GuildPublic as GuildPublicType } from '../../../models/Guild'
import type { GuildPublic as GuildPublicType } from '../../../models/Guild'
import { Loader } from '../../design/Loader'
import { GuildPublic } from './GuildPublic'
import { usePagination } from '../../../hooks/usePagination'
import { SocketData, handleSocketData } from '../../../tools/handleSocketData'
import type { SocketData } from '../../../tools/handleSocketData'
import { handleSocketData } from '../../../tools/handleSocketData'
export const JoinGuildsPublic: React.FC = () => {
const [search, setSearch] = useState('')

View File

@ -2,7 +2,7 @@ import { memo } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { MemberWithPublicUser } from '../../../models/Member'
import type { MemberWithPublicUser } from '../../../models/Member'
import { Emoji } from '../../Emoji'
export interface MemberProps {

View File

@ -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>
)
}

View File

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

View File

@ -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>
)
}

View File

@ -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'

View File

@ -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>
)
}

View File

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

View File

@ -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

View File

@ -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>
)
}

View File

@ -3,9 +3,10 @@ import useTranslation from 'next-translate/useTranslation'
import TextareaAutosize from 'react-textarea-autosize'
import classNames from 'clsx'
import { GuildsChannelsPath } from '..'
import type { GuildsChannelsPath } from '..'
import { useAuthentication } from '../../../tools/authentication'
import { EmojiPicker, EmojiPickerOnClick } from '../../Emoji'
import type { EmojiPickerOnClick } from '../../Emoji'
import { EmojiPicker } from '../../Emoji'
export interface SendMessageProps {
path: GuildsChannelsPath
@ -65,7 +66,9 @@ export const SendMessage: React.FC<SendMessageProps> = (props) => {
}
const handleVisibleEmojiPicker = (): void => {
setIsVisibleEmojiPicker((isVisible) => !isVisible)
setIsVisibleEmojiPicker((isVisible) => {
return !isVisible
})
}
const handleEmojiPicker: EmojiPickerOnClick = (emoji) => {

View File

@ -1,6 +1,6 @@
import classNames from 'clsx'
import { ApplicationProps } from '..'
import type { ApplicationProps } from '..'
export type DirectionSidebar = 'left' | 'right'

View File

@ -2,8 +2,8 @@ import Image from 'next/image'
import date from 'date-and-time'
import useTranslation from 'next-translate/useTranslation'
import { UserPublic } from '../../../models/User'
import { Guild } from '../../../models/Guild'
import type { UserPublic } from '../../../models/User'
import type { Guild } from '../../../models/Guild'
export interface UserProfileProps {
className?: string

View File

@ -19,7 +19,8 @@ import { Button } from '../../design/Button'
import { FormState } from '../../design/FormState'
import { userSchema } from '../../../models/User'
import { userSettingsSchema } from '../../../models/UserSettings'
import { ProviderOAuth, providers } from '../../../models/OAuth'
import type { ProviderOAuth } from '../../../models/OAuth'
import { providers } from '../../../models/OAuth'
import { useFormTranslation } from '../../../hooks/useFormTranslation'
const schema = {
@ -56,7 +57,9 @@ export const UserSettings: React.FC = () => {
const { getFirstErrorTranslation } = useFormTranslation()
const hasAllProviders = useMemo(() => {
return providers.every((provider) => user.strategies.includes(provider))
return providers.every((provider) => {
return user.strategies.includes(provider)
})
}, [user.strategies])
const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
@ -189,9 +192,9 @@ export const UserSettings: React.FC = () => {
setUser((oldUser) => {
return {
...oldUser,
strategies: oldUser.strategies.filter(
(strategy) => strategy !== provider
)
strategies: oldUser.strategies.filter((strategy) => {
return strategy !== provider
})
}
})
setMessage('application:success-deleted-provider')