feat(messages): add animations (#31)
This commit is contained in:
@ -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>
|
||||
|
@ -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'
|
||||
|
||||
|
@ -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'
|
||||
|
||||
|
@ -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'
|
||||
|
||||
|
@ -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()
|
||||
}
|
||||
|
||||
|
@ -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'
|
||||
|
||||
|
@ -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'
|
||||
|
@ -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
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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> => {
|
||||
|
@ -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('')
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
@ -0,0 +1 @@
|
||||
export * from './EditMessage'
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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'
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
@ -0,0 +1 @@
|
||||
export * from './MessageOptions'
|
@ -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
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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) => {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import classNames from 'clsx'
|
||||
|
||||
import { ApplicationProps } from '..'
|
||||
import type { ApplicationProps } from '..'
|
||||
|
||||
export type DirectionSidebar = 'left' | 'right'
|
||||
|
||||
|
@ -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
|
||||
|
@ -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')
|
||||
|
Reference in New Issue
Block a user