chore(release): 1.3.0 [skip ci]

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

@@ -1,10 +1,11 @@
+import { memo } from 'react'
 import classNames from 'clsx'
 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'
 
@@ -14,7 +15,7 @@ export interface ChannelProps {
   selected?: boolean
 }
 
-export const Channel: React.FC<ChannelProps> = (props) => {
+const ChannelMemo: React.FC<ChannelProps> = (props) => {
   const { channel, path, selected = false } = props
   const router = useRouter()
 
@@ -53,3 +54,5 @@ export const Channel: React.FC<ChannelProps> = (props) => {
     </Link>
   )
 }
+
+export const Channel = memo(ChannelMemo)

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,6 +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 {
@@ -8,7 +9,7 @@ export interface GuildProps {
   selected?: boolean
 }
 
-export const Guild: React.FC<GuildProps> = (props) => {
+const GuildMemo: React.FC<GuildProps> = (props) => {
   const { guild, selected } = props
 
   return (
@@ -34,3 +35,5 @@ export const Guild: React.FC<GuildProps> = (props) => {
     </IconLink>
   )
 }
+
+export const Guild = memo(GuildMemo)

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

@@ -1,14 +1,15 @@
+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 {
   member: MemberWithPublicUser
 }
 
-export const Member: React.FC<MemberProps> = (props) => {
+const MemberMemo: React.FC<MemberProps> = (props) => {
   const { member } = props
 
   return (
@@ -45,3 +46,5 @@ export const Member: React.FC<MemberProps> = (props) => {
     </Link>
   )
 }
+
+export const Member = memo(MemberMemo)

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 } from 'react'
+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[]
@@ -28,7 +31,9 @@ export const ChannelsProvider: React.FC<
   const router = useRouter()
   const { authentication } = useAuthentication()
 
-  const cacheKey: CacheKey = `${path.guildId}-${CHANNELS_CACHE_KEY}`
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.guildId}-${CHANNELS_CACHE_KEY}`
+  }, [path.guildId])
 
   const {
     items: channels,
@@ -75,7 +80,7 @@ export const ChannelsProvider: React.FC<
 export const useChannels = (): Channels => {
   const channels = useContext(ChannelsContext)
   if (channels === defaultChannelsContext) {
-    throw new Error('useChannels must be used within ChannelsProvider')
+    throw new Error('`useChannels` must be used within `ChannelsProvider`')
   }
   return channels
 }

contexts/GuildMember.tsx

@@ -1,19 +1,17 @@
 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
   member: Member
 }
 
-export interface GuildMemberResult extends GuildMember {
+export interface GuildMemberResult extends GuildMember {}
-  setGuildMember: React.Dispatch<React.SetStateAction<GuildMember>>
-}
 
 export interface GuildMemberProps {
   guildMember: GuildMember
@@ -79,8 +77,7 @@ export const GuildMemberProvider: React.FC<
   return (
     <GuildMemberContext.Provider
       value={{
-        ...guildMember,
+        ...guildMember
-        setGuildMember
       }}
     >
       {children}
@@ -91,7 +88,9 @@ export const GuildMemberProvider: React.FC<
 export const useGuildMember = (): GuildMemberResult => {
   const guildMember = useContext(GuildMemberContext)
   if (guildMember === defaultGuildMemberContext) {
-    throw new Error('useGuildMember must be used within GuildMemberProvider')
+    throw new Error(
+      '`useGuildMember` must be used within `GuildMemberProvider`'
+    )
   }
   return guildMember
 }

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 {
@@ -62,7 +64,7 @@ export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
 export const useGuilds = (): Guilds => {
   const guilds = useContext(GuildsContext)
   if (guilds === defaultGuildsContext) {
-    throw new Error('useGuilds must be used within GuildsProvider')
+    throw new Error('`useGuilds` must be used within `GuildsProvider`')
   }
   return guilds
 }

contexts/Members.tsx

@@ -1,12 +1,15 @@
-import { createContext, useContext, useEffect } from 'react'
+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[]
@@ -28,7 +31,9 @@ export const MembersProviders: React.FC<
 
   const { authentication } = useAuthentication()
 
-  const cacheKey: CacheKey = `${path.guildId}-${MEMBERS_CACHE_KEY}`
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.guildId}-${MEMBERS_CACHE_KEY}`
+  }, [path.guildId])
 
   const {
     items: members,
@@ -89,7 +94,7 @@ export const MembersProviders: React.FC<
 export const useMembers = (): Members => {
   const members = useContext(MembersContext)
   if (members === defaultMembersContext) {
-    throw new Error('useMembers must be used within MembersProvider')
+    throw new Error('`useMembers` must be used within `MembersProvider`')
   }
   return members
 }

contexts/Messages.tsx

@@ -1,11 +1,14 @@
-import { createContext, useContext, useEffect } from 'react'
+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[]
@@ -26,7 +29,9 @@ export const MessagesProvider: React.FC<
   const { path, children } = props
   const { authentication, user } = useAuthentication()
 
-  const cacheKey: CacheKey = `${path.channelId}-${MESSAGES_CACHE_KEY}`
+  const cacheKey = useMemo<CacheKey>(() => {
+    return `${path.channelId}-${MESSAGES_CACHE_KEY}`
+  }, [path.channelId])
 
   const {
     items: messages,
@@ -88,7 +93,7 @@ export const MessagesProvider: React.FC<
 export const useMessages = (): Messages => {
   const messages = useContext(MessagesContext)
   if (messages === defaultMessagesContext) {
-    throw new Error('useMessages must be used within a MessagesProvider')
+    throw new Error('`useMessages` must be used within a `MessagesProvider`')
   }
   return messages
 }

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/e2e/pages/application/[guildId]/[channelId]/index.cy.ts

@@ -241,8 +241,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
     cy.visit('/application/abc/abc', {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
@@ -253,8 +253,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
     cy.visit(`/application/123/${channelExample.id}`, {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `channelId` doesn't exist", () => {
@@ -263,8 +263,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
       getGuildMemberWithGuildIdHandler
     ]).setCookie('refreshToken', 'refresh-token')
     cy.visit(`/application/${guildExample.id}/123`, { failOnStatusCode: false })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 })
 

cypress/e2e/pages/application/[guildId]/[channelId]/settings.cy.ts

@@ -92,8 +92,8 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     cy.visit(`/application/${guildExample.id}/${channelExample.id}/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 
   it('should redirect the user to `/404` if `guildId` or `channelId` are not numbers', () => {
@@ -104,8 +104,8 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     cy.visit('/application/abc/abc/settings', {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
@@ -116,8 +116,8 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     cy.visit(`/application/123/${channelExample.id}/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `channelId` doesn't exist", () => {
@@ -128,8 +128,8 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
     cy.visit(`/application/${guildExample.id}/123/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 })
 

cypress/e2e/pages/application/[guildId]/channels/create.cy.ts

@@ -56,8 +56,8 @@ describe('Pages > /application/[guildId]/channels/create', () => {
     cy.visit('/application/abc/channels/create', {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
@@ -68,8 +68,8 @@ describe('Pages > /application/[guildId]/channels/create', () => {
     cy.visit(`/application/123/channels/create`, {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 })
 

cypress/e2e/pages/application/[guildId]/settings.cy.ts

@@ -86,8 +86,8 @@ describe('Pages > /application/[guildId]/settings', () => {
     cy.visit('/application/abc/settings', {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 
   it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
@@ -98,8 +98,8 @@ describe('Pages > /application/[guildId]/settings', () => {
     cy.visit(`/application/123/settings`, {
       failOnStatusCode: false
     })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 })
 

cypress/e2e/pages/application/users/[userId]/index.cy.ts

@@ -29,8 +29,8 @@ describe('Pages > /application/users/[userId]', () => {
       'refresh-token'
     )
     cy.visit(`/application/users/123`, { failOnStatusCode: false })
-      .location('pathname')
+      .get('[data-cy=status-code]')
-      .should('eq', '/404')
+      .contains('404')
   })
 })
 

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
@@ -45,15 +42,6 @@ export const usePagination = <T extends PaginationItem>(
   const fetchState = useRef<FetchState>('idle')
   const afterId = useRef<number | null>(null)
 
-  const updateAfterId = (newItems: T[]): void => {
-    if (!inverse) {
-      afterId.current =
-        newItems.length > 0 ? newItems[newItems.length - 1].id : null
-    } else {
-      afterId.current = newItems.length > 0 ? newItems[0].id : null
-    }
-  }
-
   const nextPageAsync: NextPageAsync = useCallback(
     async (query) => {
       if (fetchState.current !== 'idle') {
@@ -68,21 +56,33 @@ export const usePagination = <T extends PaginationItem>(
       const { data: newItems } = await api.get<T[]>(
         `${url}?${searchParameters.toString()}`
       )
-      updateAfterId(newItems)
+      if (!inverse) {
+        afterId.current =
+          newItems.length > 0 ? newItems[newItems.length - 1].id : null
+      } else {
+        afterId.current = newItems.length > 0 ? newItems[0].id : null
+      }
       setItems((oldItems) => {
         const updatedItems = inverse
           ? [...newItems, ...oldItems]
           : [...oldItems, ...newItems]
-        if (cacheKey != null) {
+        const unique = updatedItems.reduce<T[]>((accumulator, item) => {
-          savePaginationCache(cacheKey, updatedItems)
+          const isExisting = accumulator.some((itemSome) => {
+            return itemSome.id === item.id
+          })
+          if (!isExisting) {
+            accumulator.push(item)
           }
-        return updatedItems
+          return accumulator
+        }, [])
+        if (cacheKey != null) {
+          savePaginationCache(cacheKey, unique)
+        }
+        return unique
       })
       setHasMore(newItems.length > 0)
       fetchState.current = 'idle'
     },
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- We don't want infinite loops with updateAfterId
     [api, url, inverse, cacheKey]
   )
 
@@ -106,13 +106,18 @@ export const usePagination = <T extends PaginationItem>(
       afterId.current = null
       setItems([])
     } else {
+      fetchState.current = 'loading'
       const newItems = getPaginationCache<T>(cacheKey)
       setItems(newItems)
-      updateAfterId(newItems)
+      if (!inverse) {
+        afterId.current =
+          newItems.length > 0 ? newItems[newItems.length - 1].id : null
+      } else {
+        afterId.current = newItems.length > 0 ? newItems[0].id : null
       }
-
+      fetchState.current = 'idle'
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- We don't want infinite loops with updateAfterId
+    }
-  }, [cacheKey])
+  }, [cacheKey, inverse])
 
   return { items, hasMore, nextPage, resetPagination, setItems }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "@thream/website",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "private": true,
   "repository": {
     "type": "git",
@@ -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'
 
@@ -68,10 +66,7 @@ export const getServerSideProps = authenticationFromServerSide({
     const guildId = Number(context?.params?.guildId)
     if (isNaN(channelId) || isNaN(guildId)) {
       return {
-        redirect: {
+        notFound: true
-          destination: '/404',
-          permanent: false
-        }
       }
     }
     const { data: guildMember } = await api.get(`/guilds/${guildId}`)

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 {
@@ -63,10 +61,7 @@ export const getServerSideProps = authenticationFromServerSide({
     const guildId = Number(context?.params?.guildId)
     if (isNaN(channelId) || isNaN(guildId)) {
       return {
-        redirect: {
+        notFound: true
-          destination: '/404',
-          permanent: false
-        }
       }
     }
     const { data: guildMember } = await api.get<GuildMember>(
@@ -74,10 +69,7 @@ export const getServerSideProps = authenticationFromServerSide({
     )
     if (!guildMember.member.isOwner) {
       return {
-        redirect: {
+        notFound: true
-          destination: '/404',
-          permanent: false
-        }
       }
     }
     const { data: selectedChannelData } = await api.get(

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
@@ -49,10 +47,7 @@ export const getServerSideProps = authenticationFromServerSide({
     const guildId = Number(context?.params?.guildId)
     if (isNaN(guildId)) {
       return {
-        redirect: {
+        notFound: true
-          destination: '/404',
-          permanent: false
-        }
       }
     }
     const { data: guildMember } = await api.get(`/guilds/${guildId}`)

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'
 
@@ -43,10 +44,7 @@ export const getServerSideProps = authenticationFromServerSide({
     const guildId = Number(context?.params?.guildId)
     if (isNaN(guildId)) {
       return {
-        redirect: {
+        notFound: true
-          destination: '/404',
-          permanent: false
-        }
       }
     }
     const { data: guildMember } = await api.get<GuildMember>(

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
@@ -38,10 +38,7 @@ export const getServerSideProps = authenticationFromServerSide({
     const userId = Number(context?.params?.userId)
     if (isNaN(userId)) {
       return {
-        redirect: {
+        notFound: true
-          destination: '/404',
-          permanent: false
-        }
       }
     }
     const { data } = await api.get(`/users/${userId}`)

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'
 
@@ -16,7 +18,7 @@ export class Authentication {
   constructor(tokens: Tokens, disableSocketIO: boolean = false) {
     this.tokens = tokens
     this.accessTokenAge = Date.now()
-    if (disableSocketIO || typeof window === 'undefined') {
+    if (typeof window === 'undefined' || disableSocketIO) {
       this.socket = undefined
     } else {
       this.socket = io(API_URL, {

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
@@ -25,8 +26,7 @@ export const AuthenticationProvider: React.FC<
   const [user, setUser] = useState<UserCurrent>(props.authentication.user)
 
   const authentication = useMemo(() => {
-    const disableSocketIO = typeof window === 'undefined'
+    return new Authentication(props.authentication.tokens)
-    return new Authentication(props.authentication.tokens, disableSocketIO)
 
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this memo once
   }, [])

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
@@ -54,10 +54,13 @@ export const authenticationFromServerSide = (
           }
         }
       } else {
-        let data = {}
+        let data: any = {}
         if (fetchData != null) {
           data = await fetchData(context, api)
         }
+        if (data.notFound != null) {
+          return data
+        }
         return { props: data }
       }
     } else {
@@ -71,7 +74,7 @@ export const authenticationFromServerSide = (
       } else {
         try {
           let data: any = {}
-          const authentication = new Authentication(tokens, true)
+          const authentication = new Authentication(tokens)
           const { data: currentUser } = await authentication.api.get<
             unknown,
             AxiosResponse<UserCurrent>
@@ -79,7 +82,7 @@ export const authenticationFromServerSide = (
           if (fetchData != null) {
             data = await fetchData(context, authentication.api)
           }
-          if (data.redirect != null) {
+          if (data.notFound != null) {
             return data
           }
           return {
@@ -87,10 +90,7 @@ export const authenticationFromServerSide = (
           }
         } catch {
           return {
-            redirect: {
+            notFound: true
-              destination: '/404',
-              permanent: false
-            }
           }
         }
       }