feat(messages): add animations (#31)

components/Application/Application.tsx

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

components/Application/ChannelSettings/ChannelSettings.tsx

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

components/Application/Channels/Channel.tsx

@@ -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 type { GuildsChannelsPath } from '../Application'
-import { Channel as ChannelType } from '../../../models/Channel'
+import type { Channel as ChannelType } from '../../../models/Channel'
 import { useGuildMember } from '../../../contexts/GuildMember'
 import { IconButton } from '../../design/IconButton'
 

components/Application/Channels/Channels.tsx

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

components/Application/ConfirmPopup/ConfirmPopup.tsx

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

components/Application/CreateChannel/CreateChannel.tsx

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

components/Application/CreateGuild/CreateGuild.tsx

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

components/Application/GuildLeftSidebar/GuildLeftSidebar.tsx

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

components/Application/Guilds/Guild.tsx

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

components/Application/Guilds/Guilds.tsx

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

components/Application/JoinGuildsPublic/GuildPublic.tsx

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

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

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

components/Application/Members/Member.tsx

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

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

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

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

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 type { MotionProps } from 'framer-motion'
-import useTranslation from 'next-translate/useTranslation'
+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
+    <motion.div
-      className='group flex w-full p-4 transition hover:bg-gray-200 dark:hover:bg-gray-900'
+      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.member.userId === user.id && (
-            {message.type === 'text' ? (
+          <MessageOptions
-              <div
+            message={message}
-                className='message-options rounded-l-lg border-l-slate-600'
+            editMode={isEditing ? ':white_check_mark:' : ':pencil2:'}
-                title={t('application:edit')}
+            handleEdit={isEditing ? handleEdit : handleEditMode}
-                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.type === 'text' ? (
           <>
             {isEditing ? (
-              <form
+              <EditMessage
-                className='flex h-full w-full items-center'
+                message={message}
-                onSubmit={handleEditSubmit}
+                textareaRef={textareaReference}
-                onKeyDown={handleTextareaKeyDown}
+                handleEdit={handleEdit}
-              >
+                handleKeyDown={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>
             ) : (
               <MessageText message={message} />
             )}
@@ -173,6 +140,6 @@ export const Message: React.FC<MessageProps> = (props) => {
           <Loader />
         )}
       </div>
-    </div>
+    </motion.div>
   )
 }

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'

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

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

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

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

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,6 +30,7 @@ export const Messages: React.FC = () => {
       id='messages'
       className='scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all'
     >
+      <AnimatePresence>
         <InfiniteScroll
           scrollableTarget='messages'
           className='messages-list !overflow-x-hidden'
@@ -42,6 +44,7 @@ export const Messages: React.FC = () => {
             return <Message key={message.id} message={message} />
           })}
         </InfiniteScroll>
+      </AnimatePresence>
     </div>
   )
 }

components/Application/SendMessage/SendMessage.tsx

@@ -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) => {

components/Application/Sidebar/Sidebar.tsx

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

components/Application/UserProfile/UserProfile.tsx

@@ -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 type { UserPublic } from '../../../models/User'
-import { Guild } from '../../../models/Guild'
+import type { Guild } from '../../../models/Guild'
 
 export interface UserProfileProps {
   className?: string

components/Application/UserSettings/UserSettings.tsx

@@ -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(
+            strategies: oldUser.strategies.filter((strategy) => {
-              (strategy) => strategy !== provider
+              return strategy !== provider
-            )
+            })
           }
         })
         setMessage('application:success-deleted-provider')

components/Authentication/Authentication.tsx

@@ -14,10 +14,8 @@ import { FormState } from '../design/FormState'
 import { AuthenticationForm } from '.'
 import { userSchema } from '../../models/User'
 import { api } from '../../tools/api'
-import {
+import type { Tokens } from '../../tools/authentication'
-  Tokens,
+import { Authentication as AuthenticationClass } from '../../tools/authentication'
-  Authentication as AuthenticationClass
-} from '../../tools/authentication'
 import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
 import { useFormTranslation } from '../../hooks/useFormTranslation'
 

components/Authentication/AuthenticationForm.tsx

@@ -1,5 +1,6 @@
 import classNames from 'clsx'
-import { Form, FormProps } from 'react-component-form'
+import type { FormProps } from 'react-component-form'
+import { Form } from 'react-component-form'
 
 export const AuthenticationForm: React.FC<FormProps> = (props) => {
   const { className, children, ...rest } = props

components/Authentication/AuthenticationSocialMedia.tsx

@@ -3,7 +3,8 @@ import { useRouter } from 'next/router'
 
 import { api } from '../../tools/api'
 import { Authentication, isTokens } from '../../tools/authentication'
-import { SocialMediaButton, SocialMedia } from '../design/SocialMediaButton'
+import type { SocialMedia } from '../design/SocialMediaButton'
+import { SocialMediaButton } from '../design/SocialMediaButton'
 import { providers } from '../../models/OAuth'
 
 export const AuthenticationSocialMedia: React.FC = () => {

components/Emoji/EmojiPicker/EmojiPicker.tsx

@@ -1,5 +1,6 @@
 import 'emoji-mart/css/emoji-mart.css'
-import { EmojiData, Picker } from 'emoji-mart'
+import type { EmojiData } from 'emoji-mart'
+import { Picker } from 'emoji-mart'
 import { useTheme } from 'next-themes'
 
 import { EMOJI_SET } from '../emojiPlugin'

components/Emoji/emojiPlugin.ts

@@ -1,6 +1,6 @@
 import { visit } from 'unist-util-visit'
-import { Plugin, Transformer } from 'unified'
+import type { Plugin, Transformer } from 'unified'
-import { Literal, Parent } from 'unist'
+import type { Literal, Parent } from 'unist'
 import type { ElementContent } from 'hast'
 import type { EmojiSet } from 'emoji-mart'
 

components/Header/Language/Language.tsx

@@ -19,10 +19,14 @@ export const Language: React.FC<LanguageProps> = (props) => {
   const languageClickRef = useRef<HTMLDivElement | null>(null)
 
   const handleHiddenMenu = useCallback(() => {
-    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
+    setHiddenMenu((oldHiddenMenu) => {
+      return !oldHiddenMenu
+    })
   }, [])
 
-  useClickOutsideAlerter(languageClickRef, () => setHiddenMenu(true))
+  useClickOutsideAlerter(languageClickRef, () => {
+    return setHiddenMenu(true)
+  })
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
@@ -59,7 +63,9 @@ export const Language: React.FC<LanguageProps> = (props) => {
             <li
               key={index}
               className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
-              onClick={async () => await handleLanguage(language)}
+              onClick={async () => {
+                return await handleLanguage(language)
+              }}
             >
               <LanguageFlag language={language} />
             </li>

components/design/SocialMediaButton/SocialMediaButton.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import Image from 'next/image'
 import classNames from 'clsx'
 
-import { ProviderOAuth } from '../../../models/OAuth'
+import type { ProviderOAuth } from '../../../models/OAuth'
 
 export type SocialMedia = ProviderOAuth
 

components/design/Textarea/Textarea.tsx

@@ -1,6 +1,5 @@
-import TextareaAutosize, {
+import type { TextareaAutosizeProps } from 'react-textarea-autosize'
-  TextareaAutosizeProps
+import TextareaAutosize from 'react-textarea-autosize'
-} from 'react-textarea-autosize'
 
 export interface TextareaProps extends TextareaAutosizeProps {
   label: string

contexts/Channels.tsx

@@ -1,12 +1,15 @@
 import { createContext, useContext, useEffect, useMemo } from 'react'
 import { useRouter } from 'next/router'
 
-import { NextPage, usePagination } from '../hooks/usePagination'
+import type { NextPage } from '../hooks/usePagination'
+import { usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
-import { Channel, ChannelWithDefaultChannelId } from '../models/Channel'
+import type { Channel, ChannelWithDefaultChannelId } from '../models/Channel'
-import { GuildsChannelsPath } from '../components/Application'
+import type { GuildsChannelsPath } from '../components/Application'
-import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import type { SocketData } from '../tools/handleSocketData'
-import { CacheKey, CHANNELS_CACHE_KEY } from '../tools/cache'
+import { handleSocketData } from '../tools/handleSocketData'
+import type { CacheKey } from '../tools/cache'
+import { CHANNELS_CACHE_KEY } from '../tools/cache'
 
 export interface Channels {
   channels: Channel[]

contexts/GuildMember.tsx

@@ -1,10 +1,10 @@
 import { createContext, useContext, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
-import { GuildWithDefaultChannelId } from '../models/Guild'
+import type { GuildWithDefaultChannelId } from '../models/Guild'
-import { Member } from '../models/Member'
+import type { Member } from '../models/Member'
 import { useAuthentication } from '../tools/authentication'
-import { SocketData } from '../tools/handleSocketData'
+import type { SocketData } from '../tools/handleSocketData'
 
 export interface GuildMember {
   guild: GuildWithDefaultChannelId

contexts/Guilds.tsx

@@ -1,9 +1,11 @@
 import { createContext, useContext, useEffect } from 'react'
 
-import { NextPage, usePagination } from '../hooks/usePagination'
+import type { NextPage } from '../hooks/usePagination'
+import { usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
-import { GuildWithDefaultChannelId } from '../models/Guild'
+import type { GuildWithDefaultChannelId } from '../models/Guild'
-import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import type { SocketData } from '../tools/handleSocketData'
+import { handleSocketData } from '../tools/handleSocketData'
 import { GUILDS_CACHE_KEY } from '../tools/cache'
 
 export interface Guilds {

contexts/Members.tsx

@@ -1,12 +1,15 @@
 import { createContext, useContext, useEffect, useMemo } from 'react'
 
-import { NextPage, usePagination } from '../hooks/usePagination'
+import type { NextPage } from '../hooks/usePagination'
+import { usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
-import { MemberWithPublicUser } from '../models/Member'
+import type { MemberWithPublicUser } from '../models/Member'
-import { GuildsChannelsPath } from '../components/Application'
+import type { GuildsChannelsPath } from '../components/Application'
-import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import type { SocketData } from '../tools/handleSocketData'
-import { User } from '../models/User'
+import { handleSocketData } from '../tools/handleSocketData'
-import { CacheKey, MEMBERS_CACHE_KEY } from '../tools/cache'
+import type { User } from '../models/User'
+import type { CacheKey } from '../tools/cache'
+import { MEMBERS_CACHE_KEY } from '../tools/cache'
 
 export interface Members {
   members: MemberWithPublicUser[]

contexts/Messages.tsx

@@ -1,11 +1,14 @@
 import { createContext, useContext, useEffect, useMemo } from 'react'
 
-import { NextPage, usePagination } from '../hooks/usePagination'
+import type { NextPage } from '../hooks/usePagination'
+import { usePagination } from '../hooks/usePagination'
 import { useAuthentication } from '../tools/authentication'
-import { MessageWithMember } from '../models/Message'
+import type { MessageWithMember } from '../models/Message'
-import { GuildsChannelsPath } from '../components/Application'
+import type { GuildsChannelsPath } from '../components/Application'
-import { handleSocketData, SocketData } from '../tools/handleSocketData'
+import type { SocketData } from '../tools/handleSocketData'
-import { CacheKey, MESSAGES_CACHE_KEY } from '../tools/cache'
+import { handleSocketData } from '../tools/handleSocketData'
+import type { CacheKey } from '../tools/cache'
+import { MESSAGES_CACHE_KEY } from '../tools/cache'
 
 export interface Messages {
   messages: MessageWithMember[]

cypress.config.ts

@@ -5,7 +5,7 @@ import { getLocal } from 'mockttp'
 import type { Mockttp } from 'mockttp'
 
 import { API_DEFAULT_PORT } from './tools/api'
-import { Handlers, Method } from './cypress/fixtures/handler'
+import type { Handlers, Method } from './cypress/fixtures/handler'
 
 const UPLOADS_FIXTURES_DIRECTORY = path.join(
   process.cwd(),

cypress/e2e/common/Header.cy.ts

@@ -1,5 +1,7 @@
 describe('Common > Header', () => {
-  beforeEach(() => cy.visit('/'))
+  beforeEach(() => {
+    return cy.visit('/')
+  })
 
   describe('Switch theme color (dark/light)', () => {
     it('should switch theme from `dark` (default) to `light`', () => {

cypress/fixtures/channels/[channelId]/delete.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { channelExample, channelExample2 } from '../channel'
 
 export const deleteChannelWithChannelIdHandler: Handler = {

cypress/fixtures/channels/[channelId]/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { channelExample, channelExample2 } from '../channel'
 
 export const getChannelWithChannelIdHandler: Handler = {

cypress/fixtures/channels/[channelId]/messages/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import {
   messageExampleComplete,
   messageExampleComplete2,

cypress/fixtures/channels/[channelId]/put.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { channelExample, channelExample2 } from '../channel'
 
 export const putChannelWithChannelIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/channels/get.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { channelExample, channelExample2 } from '../../../channels/channel'
 
 export const getChannelsWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/channels/post.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { channelExample, channelExample2 } from '../../../channels/channel'
 
 export const postChannelsWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/delete.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { guildExample } from '../guild'
 
 export const deleteGuildWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { guildExample } from '../guild'
 import { memberExampleComplete } from '../../members/member'
 

cypress/fixtures/guilds/[guildId]/members/get.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { memberExampleComplete } from '../../../members/member'
 
 export const getMembersWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/[guildId]/members/join.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { memberExampleComplete } from '../../../members/member'
 import { channelExample } from '../../../channels/channel'
 

cypress/fixtures/guilds/[guildId]/members/leave.ts

@@ -1,5 +1,5 @@
 import { guildExample } from '../../guild'
-import { Handler } from '../../../handler'
+import type { Handler } from '../../../handler'
 import { memberExample } from '../../../members/member'
 
 export const deleteLeaveMembersWithGuildIdHandler: Handler = {

cypress/fixtures/guilds/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../handler'
+import type { Handler } from '../handler'
 import { guildExample, guildExample2 } from './guild'
 
 export const getGuildsHandler: Handler = {

cypress/fixtures/guilds/guild.ts

@@ -1,4 +1,4 @@
-import { Guild } from '../../../models/Guild'
+import type { Guild } from '../../../models/Guild'
 
 export const guildExample: Guild = {
   id: 1,

cypress/fixtures/guilds/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../handler'
+import type { Handler } from '../handler'
 import { guildExample } from './guild'
 import { channelExample } from '../channels/channel'
 import { memberExampleComplete } from '../members/member'

cypress/fixtures/guilds/public/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { guildExample, guildExample2 } from '../guild'
 
 export const getGuildsPublicEmptyHandler: Handler = {

cypress/fixtures/uploads/messages/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import {
   messageExampleComplete6,
   messageExampleComplete7,

cypress/fixtures/users/[userId]/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { userExample, userSettingsExample } from '../user'
 
 export const getUserByIdHandler: Handler = {

cypress/fixtures/users/current/get.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { userExample, userSettingsExample } from '../user'
 
 export const getUsersCurrentHandler: Handler = {

cypress/fixtures/users/refresh-token/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 
 export const postUsersRefreshTokenHandler: Handler = {
   method: 'POST',

cypress/fixtures/users/reset-password/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 
 export const postUsersResetPasswordHandler: Handler = {
   method: 'POST',

cypress/fixtures/users/reset-password/put.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 
 export const putUsersResetPasswordHandler: Handler = {
   method: 'PUT',

cypress/fixtures/users/signin/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 
 export const postUsersSigninHandler: Handler = {
   method: 'POST',

cypress/fixtures/users/signup/post.ts

@@ -1,4 +1,4 @@
-import { Handler } from '../../handler'
+import type { Handler } from '../../handler'
 import { userExample, userSettingsExample } from '../user'
 
 export const postUsersSignupHandler: Handler = {

cypress/fixtures/users/user.ts

@@ -1,5 +1,5 @@
-import { UserSettings } from '../../../models/UserSettings'
+import type { UserSettings } from '../../../models/UserSettings'
-import { User } from '../../../models/User'
+import type { User } from '../../../models/User'
 
 export const userExample: User = {
   id: 1,

generators/component/Component.tsx.hbs

@@ -4,7 +4,7 @@ export interface {{ properCase name }}Props {
   className?: string
 }
 
-export const {{ properCase name }}: React.FC<React.PropsWithChildren{{ properCase name }}Props>> = (props) => {
+export const {{ properCase name }}: React.FC<React.PropsWithChildren<{{ properCase name }}Props>> = (props) => {
   const { children, className } = props
 
   return <main className={classNames(className, '')}>{children}</main>

hooks/usePagination.ts

@@ -1,12 +1,9 @@
 import { useState, useRef, useCallback } from 'react'
-import { AxiosInstance } from 'axios'
+import type { AxiosInstance } from 'axios'
 import type { FetchState } from 'react-component-form'
 
-import {
+import type { CacheKey } from '../tools/cache'
-  CacheKey,
+import { getPaginationCache, savePaginationCache } from '../tools/cache'
-  getPaginationCache,
-  savePaginationCache
-} from '../tools/cache'
 
 export interface Query {
   [key: string]: string
@@ -70,9 +67,9 @@ export const usePagination = <T extends PaginationItem>(
           ? [...newItems, ...oldItems]
           : [...oldItems, ...newItems]
         const unique = updatedItems.reduce<T[]>((accumulator, item) => {
-          const isExisting = accumulator.some(
+          const isExisting = accumulator.some((itemSome) => {
-            (itemSome) => itemSome.id === item.id
+            return itemSome.id === item.id
-          )
+          })
           if (!isExisting) {
             accumulator.push(item)
           }

models/Channel.ts

@@ -1,4 +1,5 @@
-import { Type, Static } from '@sinclair/typebox'
+import type { Static } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 
 import { date, id } from './utils'
 

models/Guild.ts

@@ -1,4 +1,5 @@
-import { Type, Static } from '@sinclair/typebox'
+import type { Static } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 
 import { channelSchema } from './Channel'
 import { memberSchema } from './Member'

models/Member.ts

@@ -1,7 +1,8 @@
-import { Type, Static } from '@sinclair/typebox'
+import type { Static } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 
 import { date, id } from './utils'
-import { UserPublicWithoutSettings } from './User'
+import type { UserPublicWithoutSettings } from './User'
 
 export const memberSchema = {
   id,

models/Message.ts

@@ -1,7 +1,8 @@
-import { Type, Static } from '@sinclair/typebox'
+import type { Static } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 
 import { date, id } from './utils'
-import { MemberWithPublicUser } from './Member'
+import type { MemberWithPublicUser } from './Member'
 
 export const types = [Type.Literal('text'), Type.Literal('file')]
 

models/OAuth.ts

@@ -5,12 +5,12 @@ import { date, id } from './utils'
 export const providers = ['Google', 'GitHub', 'Discord'] as const
 export const strategies = [...providers, 'Local'] as const
 
-export const strategiesTypebox = strategies.map((strategy) =>
+export const strategiesTypebox = strategies.map((strategy) => {
-  Type.Literal(strategy)
+  return Type.Literal(strategy)
-)
+})
-export const providersTypebox = providers.map((provider) =>
+export const providersTypebox = providers.map((provider) => {
-  Type.Literal(provider)
+  return Type.Literal(provider)
-)
+})
 
 export type ProviderOAuth = typeof providers[number]
 export type AuthenticationStrategy = typeof strategies[number]

models/User.ts

@@ -1,4 +1,5 @@
-import { Static, Type } from '@sinclair/typebox'
+import type { Static } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 
 import { strategiesTypebox } from './OAuth'
 import { userSettingsSchema } from './UserSettings'

models/UserSettings.ts

@@ -1,4 +1,5 @@
-import { Type, Static } from '@sinclair/typebox'
+import type { Static } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 
 import { date, id } from './utils'
 

package.json

@@ -35,12 +35,13 @@
     "@fontsource/montserrat": "4.5.12",
     "@fontsource/roboto": "4.5.8",
     "@heroicons/react": "1.0.6",
-    "@sinclair/typebox": "0.24.28",
+    "@sinclair/typebox": "0.24.34",
     "axios": "0.26.1",
     "clsx": "1.2.1",
     "date-and-time": "2.4.1",
     "emoji-mart": "3.0.1",
-    "katex": "0.16.1",
+    "framer-motion": "7.2.1",
+    "katex": "0.16.2",
     "next": "12.2.5",
     "next-pwa": "5.6.0",
     "next-themes": "0.2.0",
@@ -67,7 +68,7 @@
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.1.1",
+    "@commitlint/cli": "17.1.2",
     "@commitlint/config-conventional": "17.1.0",
     "@lhci/cli": "0.9.0",
     "@saithodev/semantic-release-backmerge": "2.1.2",
@@ -75,18 +76,18 @@
     "@types/emoji-mart": "3.0.9",
     "@types/hast": "2.3.4",
     "@types/katex": "0.14.0",
-    "@types/node": "18.7.13",
+    "@types/node": "18.7.14",
-    "@types/react": "18.0.17",
+    "@types/react": "18.0.18",
     "@types/react-responsive": "8.0.5",
     "@types/react-syntax-highlighter": "15.5.5",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.35.1",
+    "@typescript-eslint/eslint-plugin": "5.36.1",
-    "@typescript-eslint/parser": "5.35.1",
+    "@typescript-eslint/parser": "5.36.1",
     "autoprefixer": "10.4.8",
-    "cypress": "10.6.0",
+    "cypress": "10.7.0",
     "editorconfig-checker": "4.0.2",
     "eslint": "8.23.0",
-    "eslint-config-conventions": "3.0.0",
+    "eslint-config-conventions": "4.0.0",
     "eslint-config-next": "12.2.5",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",

pages/404.tsx

@@ -1,10 +1,11 @@
-import { GetStaticProps, NextPage } from 'next'
+import type { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from '../components/ErrorPage'
 import { Head } from '../components/Head'
 import { Header } from '../components/Header'
-import { Footer, FooterProps } from '../components/Footer'
+import type { FooterProps } from '../components/Footer'
+import { Footer } from '../components/Footer'
 
 const Error404: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()

pages/500.tsx

@@ -1,10 +1,11 @@
-import { GetStaticProps, NextPage } from 'next'
+import type { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from '../components/ErrorPage'
 import { Head } from '../components/Head'
 import { Header } from '../components/Header'
-import { Footer, FooterProps } from '../components/Footer'
+import type { FooterProps } from '../components/Footer'
+import { Footer } from '../components/Footer'
 
 const Error500: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()

pages/_app.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { AppProps } from 'next/app'
+import type { AppProps } from 'next/app'
 import { ThemeProvider } from 'next-themes'
 import useTranslation from 'next-translate/useTranslation'
 

pages/application/[guildId]/[channelId]/index.tsx

@@ -1,22 +1,20 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 
 import { Head } from '../../../../components/Head'
 import { Application } from '../../../../components/Application'
 import { Messages } from '../../../../components/Application/Messages'
 import { SendMessage } from '../../../../components/Application/SendMessage'
+import type { PagePropsWithAuthentication } from '../../../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../../../tools/authentication'
-import {
+import type { GuildMember } from '../../../../contexts/GuildMember'
-  GuildMember,
+import { GuildMemberProvider } from '../../../../contexts/GuildMember'
-  GuildMemberProvider
-} from '../../../../contexts/GuildMember'
 import { GuildLeftSidebar } from '../../../../components/Application/GuildLeftSidebar'
 import { ChannelsProvider } from '../../../../contexts/Channels'
 import { GuildsProvider } from '../../../../contexts/Guilds'
-import { Channel } from '../../../../models/Channel'
+import type { Channel } from '../../../../models/Channel'
 import { MessagesProvider } from '../../../../contexts/Messages'
 import { MembersProviders } from '../../../../contexts/Members'
 

pages/application/[guildId]/[channelId]/settings.tsx

@@ -1,21 +1,19 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 
 import { Head } from '../../../../components/Head'
 import { Application } from '../../../../components/Application'
+import type { PagePropsWithAuthentication } from '../../../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../../../tools/authentication'
-import {
+import type { GuildMember } from '../../../../contexts/GuildMember'
-  GuildMember,
+import { GuildMemberProvider } from '../../../../contexts/GuildMember'
-  GuildMemberProvider
-} from '../../../../contexts/GuildMember'
 import { GuildLeftSidebar } from '../../../../components/Application/GuildLeftSidebar'
 import { ChannelSettings } from '../../../../components/Application/ChannelSettings'
 import { ChannelsProvider } from '../../../../contexts/Channels'
 import { GuildsProvider } from '../../../../contexts/Guilds'
-import { Channel } from '../../../../models/Channel'
+import type { Channel } from '../../../../models/Channel'
 import { MembersProviders } from '../../../../contexts/Members'
 
 export interface ChannelSettingsPageProps extends PagePropsWithAuthentication {

pages/application/[guildId]/channels/create.tsx

@@ -1,19 +1,17 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../../../components/Head'
 import { Application } from '../../../../components/Application'
+import type { PagePropsWithAuthentication } from '../../../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../../../tools/authentication'
 import { CreateChannel } from '../../../../components/Application/CreateChannel'
 import { GuildsProvider } from '../../../../contexts/Guilds'
-import {
+import type { GuildMember } from '../../../../contexts/GuildMember'
-  GuildMember,
+import { GuildMemberProvider } from '../../../../contexts/GuildMember'
-  GuildMemberProvider
-} from '../../../../contexts/GuildMember'
 
 export interface CreateChannelPageProps extends PagePropsWithAuthentication {
   guildId: number

pages/application/[guildId]/settings.tsx

@@ -1,14 +1,15 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../../components/Head'
 import { Application } from '../../../components/Application'
+import type { PagePropsWithAuthentication } from '../../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../../tools/authentication'
-import { GuildMember, GuildMemberProvider } from '../../../contexts/GuildMember'
+import type { GuildMember } from '../../../contexts/GuildMember'
+import { GuildMemberProvider } from '../../../contexts/GuildMember'
 import { GuildsProvider } from '../../../contexts/Guilds'
 import { GuildSettings } from '../../../components/Application/GuildSettings'
 

pages/application/guilds/create.tsx

@@ -1,12 +1,12 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../../components/Head'
 import { Application } from '../../../components/Application'
+import type { PagePropsWithAuthentication } from '../../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../../tools/authentication'
 import { CreateGuild } from '../../../components/Application/CreateGuild'
 import { GuildsProvider } from '../../../contexts/Guilds'

pages/application/guilds/join.tsx

@@ -1,12 +1,12 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../../components/Head'
 import { Application } from '../../../components/Application'
+import type { PagePropsWithAuthentication } from '../../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../../tools/authentication'
 import { JoinGuildsPublic } from '../../../components/Application/JoinGuildsPublic'
 import { GuildsProvider } from '../../../contexts/Guilds'

pages/application/index.tsx

@@ -1,12 +1,12 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 
 import { Head } from '../../components/Head'
 import { Application } from '../../components/Application'
 import { PopupGuild } from '../../components/Application/PopupGuild'
+import type { PagePropsWithAuthentication } from '../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../tools/authentication'
 import { GuildsProvider } from '../../contexts/Guilds'
 

pages/application/users/[userId]/index.tsx

@@ -1,16 +1,16 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 
 import { Head } from '../../../../components/Head'
 import { Application } from '../../../../components/Application'
+import type { PagePropsWithAuthentication } from '../../../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../../../tools/authentication'
 import { UserProfile } from '../../../../components/Application/UserProfile'
 import { GuildsProvider } from '../../../../contexts/Guilds'
-import { UserPublic } from '../../../../models/User'
+import type { UserPublic } from '../../../../models/User'
-import { Guild } from '../../../../models/Guild'
+import type { Guild } from '../../../../models/Guild'
 
 export interface UserProfilePageProps extends PagePropsWithAuthentication {
   user: UserPublic

pages/application/users/settings.tsx

@@ -1,12 +1,12 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../../components/Head'
 import { Application } from '../../../components/Application'
+import type { PagePropsWithAuthentication } from '../../../tools/authentication'
 import {
   authenticationFromServerSide,
-  AuthenticationProvider,
+  AuthenticationProvider
-  PagePropsWithAuthentication
 } from '../../../tools/authentication'
 import { UserSettings } from '../../../components/Application/UserSettings'
 import { GuildsProvider } from '../../../contexts/Guilds'

pages/authentication/forgot-password.tsx

@@ -1,4 +1,4 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 import axios from 'axios'
@@ -9,7 +9,8 @@ import { AuthenticationForm } from '../../components/Authentication'
 import { Head } from '../../components/Head'
 import { Header } from '../../components/Header'
 import { Main } from '../../components/design/Main'
-import { Footer, FooterProps } from '../../components/Footer'
+import type { FooterProps } from '../../components/Footer'
+import { Footer } from '../../components/Footer'
 import { Input } from '../../components/design/Input'
 import { Button } from '../../components/design/Button'
 import { FormState } from '../../components/design/FormState'

pages/authentication/reset-password.tsx

@@ -1,4 +1,4 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import useTranslation from 'next-translate/useTranslation'
 import axios from 'axios'
@@ -9,7 +9,8 @@ import { Head } from '../../components/Head'
 import { Header } from '../../components/Header'
 import { FormState } from '../../components/design/FormState'
 import { Main } from '../../components/design/Main'
-import { Footer, FooterProps } from '../../components/Footer'
+import type { FooterProps } from '../../components/Footer'
+import { Footer } from '../../components/Footer'
 import { Input } from '../../components/design/Input'
 import { Button } from '../../components/design/Button'
 import { authenticationFromServerSide } from '../../tools/authentication'

pages/authentication/signin.tsx

@@ -1,10 +1,11 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../components/Head'
 import { Authentication } from '../../components/Authentication'
 import { Header } from '../../components/Header'
-import { Footer, FooterProps } from '../../components/Footer'
+import type { FooterProps } from '../../components/Footer'
+import { Footer } from '../../components/Footer'
 import { authenticationFromServerSide } from '../../tools/authentication'
 import { ScrollableBody } from '../../components/ScrollableBody'
 

pages/authentication/signup.tsx

@@ -1,10 +1,11 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from '../../components/Head'
 import { Authentication } from '../../components/Authentication'
 import { Header } from '../../components/Header'
-import { Footer, FooterProps } from '../../components/Footer'
+import type { FooterProps } from '../../components/Footer'
+import { Footer } from '../../components/Footer'
 import { authenticationFromServerSide } from '../../tools/authentication'
 import { ScrollableBody } from '../../components/ScrollableBody'
 

pages/index.tsx

@@ -1,4 +1,4 @@
-import { GetStaticProps, NextPage } from 'next'
+import type { GetStaticProps, NextPage } from 'next'
 import Link from 'next/link'
 import Image from 'next/image'
 import Translation from 'next-translate/Trans'
@@ -7,7 +7,8 @@ import useTranslation from 'next-translate/useTranslation'
 import { Head } from '../components/Head'
 import { Header } from '../components/Header'
 import { Main } from '../components/design/Main'
-import { Footer, FooterProps } from '../components/Footer'
+import type { FooterProps } from '../components/Footer'
+import { Footer } from '../components/Footer'
 import { SocialMediaLink } from '../components/design/SocialMediaButton'
 import { ButtonLink } from '../components/design/Button'
 import { ScrollableBody } from '../components/ScrollableBody'

tools/authentication/Authentication.ts

@@ -1,9 +1,11 @@
-import axios, { AxiosInstance } from 'axios'
+import type { AxiosInstance } from 'axios'
-import { io, Socket } from 'socket.io-client'
+import axios from 'axios'
+import type { Socket } from 'socket.io-client'
+import { io } from 'socket.io-client'
 
 import { API_URL } from '../api'
 import { cookies } from '../cookies'
-import { Tokens } from '.'
+import type { Tokens } from '.'
 import { fetchRefreshToken } from './authenticationFromServerSide'
 import { clearCache } from '../cache'
 

tools/authentication/AuthenticationContext.tsx

@@ -3,8 +3,9 @@ import { useTheme } from 'next-themes'
 import setLanguage from 'next-translate/setLanguage'
 import useTranslation from 'next-translate/useTranslation'
 
-import { Authentication, PagePropsWithAuthentication } from '.'
+import type { PagePropsWithAuthentication } from '.'
-import { UserCurrent } from '../../models/User'
+import { Authentication } from '.'
+import type { UserCurrent } from '../../models/User'
 
 export interface AuthenticationValue {
   authentication: Authentication

tools/authentication/authenticationFromServerSide.ts

@@ -1,11 +1,11 @@
-import { AxiosInstance, AxiosResponse } from 'axios'
+import type { AxiosInstance, AxiosResponse } from 'axios'
-import { GetServerSideProps, GetServerSidePropsContext } from 'next'
+import type { GetServerSideProps, GetServerSidePropsContext } from 'next'
 
 import { api } from '../api'
 import { Cookies } from '../cookies'
-import { RefreshTokenResponse, Tokens } from './index'
+import type { RefreshTokenResponse, Tokens } from './index'
 import { Authentication } from './Authentication'
-import { UserCurrent } from '../../models/User'
+import type { UserCurrent } from '../../models/User'
 
 export const fetchRefreshToken = async (
   refreshToken: string

tools/authentication/index.ts

@@ -1,4 +1,4 @@
-import { UserCurrent } from '../../models/User'
+import type { UserCurrent } from '../../models/User'
 
 export interface RefreshTokenResponse {
   accessToken: string

tools/cache.ts

@@ -1,4 +1,4 @@
-import { PaginationItem } from '../hooks/usePagination'
+import type { PaginationItem } from '../hooks/usePagination'
 
 export const GUILDS_CACHE_KEY = 'guilds' as const
 export const CHANNELS_CACHE_KEY = 'channels' as const

tools/handleSocketData.ts

@@ -1,5 +1,6 @@
-import { SetItems } from '../hooks/usePagination'
+import type { SetItems } from '../hooks/usePagination'
-import { CacheKey, savePaginationCache } from './cache'
+import type { CacheKey } from './cache'
+import { savePaginationCache } from './cache'
 
 export interface Item {
   id: number
@@ -33,14 +34,18 @@ export const handleSocketData = <T extends Item = Item>(
         break
       }
       case 'delete': {
-        const itemIndex = newItems.findIndex((item) => item.id === data.item.id)
+        const itemIndex = newItems.findIndex((item) => {
+          return item.id === data.item.id
+        })
         if (itemIndex !== -1) {
           newItems.splice(itemIndex, 1)
         }
         break
       }
       case 'update': {
-        const itemIndex = newItems.findIndex((item) => item.id === data.item.id)
+        const itemIndex = newItems.findIndex((item) => {
+          return item.id === data.item.id
+        })
         if (itemIndex !== -1) {
           newItems[itemIndex] = {
             ...newItems[itemIndex],