refactor: rename variables for better consistency

src/blocks/header/HeaderControls.tsx

@@ -1,13 +1,13 @@
 import { BiSidebar } from 'react-icons/bi'
 import { useModal } from 'react-modal-state'
 
-import { BurgerMenu } from 'blocks/sidebar/BurgerMenu'
+import { SidebarMobileModal } from 'blocks/sidebar/SidebarMobileModal'
 import { useAppDispatch, useAppSelector } from 'hooks/redux'
 
 import { selectIsSidebarOpen, setIsSidebarOpen } from 'redux/sidebar.slice'
 
 export const HeaderControls = () => {
-  const { open } = useModal(BurgerMenu)
+  const { open: openSidebarMobileModal } = useModal(SidebarMobileModal)
 
   const isSidebarOpen = useAppSelector(selectIsSidebarOpen)
 
@@ -22,7 +22,7 @@ export const HeaderControls = () => {
         <BiSidebar className='size-full violet:text-black' />
       </button>
       <button
-        onClick={open}
+        onClick={openSidebarMobileModal}
         type='button'
         className='desktop:hidden'>
         <svg className='size-6 stroke-black dark:stroke-white'>

src/blocks/header/HeaderUserInfo.tsx

@@ -10,12 +10,12 @@ import { selectUser } from 'redux/user.slice'
 export const HeaderUserInfo = () => {
   const { name, avatar } = useAppSelector(selectUser)
 
-  const { open } = useModal(EditProfileModal)
+  const { open: openEditProfileModal } = useModal(EditProfileModal)
 
   return (
     <button
       type='button'
-      onClick={open}
+      onClick={openEditProfileModal}
       className='focus-visible:styled-outline flex items-center gap-2'>
       <p>{name}</p>
       <Avatar.Root>

src/blocks/sidebar/SidebarBoardsList.tsx

@@ -10,17 +10,17 @@ import { Pages } from 'config'
 
 import { cn } from 'lib'
 
-import { BurgerMenu } from './BurgerMenu'
 import { SidebarListActiveItem } from './SidebarListActiveItem'
+import { SidebarMobileModal } from './SidebarMobileModal'
 
 export const SidebarBoardsList = () => {
   const navigate = useNavigate()
 
   const boardId = useGetBoardId()
 
-  const { close: closeBurgerMenu } = useModal(BurgerMenu)
+  const { close: closeSidebarMobileModal } = useModal(SidebarMobileModal)
 
-  const { data, isPending } = useGetAllBoards()
+  const { data: boards, isPending } = useGetAllBoards()
 
   return isPending ? (
     <div className='flex h-4xl items-center gap-2 pl-3.5 violet:text-white tablet:pl-6'>
@@ -32,10 +32,10 @@ export const SidebarBoardsList = () => {
       value={boardId}
       onValueChange={v => {
         navigate(`${Pages.Dashboard}/${v}`)
-        closeBurgerMenu()
+        closeSidebarMobileModal()
       }}
-      className={cn('mb-10 text-base', data?.length === 0 && 'mb-auto')}>
-      {data?.map(board => (
+      className={cn('mb-10 text-base', boards?.length === 0 && 'mb-auto')}>
+      {boards?.map(board => (
         <Item
           className={cn(
             `focus-visible:styled-outline flex h-4xl w-full items-center justify-between

src/blocks/sidebar/SidebarListActiveItem.tsx

@@ -5,22 +5,22 @@ import { useModal } from 'react-modal-state'
 import { EditBoardModal } from 'features/kanban/board/components/modals'
 import { useDeleteBoard } from 'features/kanban/board/hooks'
 
-import { BurgerMenu } from './BurgerMenu'
+import { SidebarMobileModal } from './SidebarMobileModal'
 
 export const SidebarListActiveItem = ({
   board: { icon, title, background }
 }: {
   board: Board
 }) => {
-  const { open } = useModal(EditBoardModal)
+  const { open: openEditBoardModal } = useModal(EditBoardModal)
 
-  const { close } = useModal(BurgerMenu)
+  const { close: closeSidebarMobileModal } = useModal(SidebarMobileModal)
 
   const { mutate: deleteBoard } = useDeleteBoard()
 
   const handleBoardEdit = () => {
     close()
-    open({ icon, title, background: background.identifier })
+    openEditBoardModal({ icon, title, background: background.identifier })
   }
 
   return (
@@ -44,12 +44,12 @@ export const SidebarListActiveItem = ({
           tabIndex={0}
           onKeyDown={e => {
             if (e.code === 'Enter' || e.code === 'Space') {
-              close()
+              closeSidebarMobileModal()
               deleteBoard()
             }
           }}
           onClick={() => {
-            close()
+            closeSidebarMobileModal()
             deleteBoard()
           }}
           className='focus-visible:styled-outline hocus:*:stroke-black violet:hocus:*:stroke-black

src/blocks/sidebar/SidebarLogo.tsx

@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom'
 
 import { Pages } from 'config'
 
-import { BurgerMenu } from './BurgerMenu'
+import { SidebarMobileModal } from './SidebarMobileModal'
 
 export const SidebarLogo = () => {
-  const { close: closeBurgerMenu } = useModal(BurgerMenu)
+  const { close: closeSidebarMobileModal } = useModal(SidebarMobileModal)
 
   return (
     <div
@@ -15,7 +15,7 @@ export const SidebarLogo = () => {
       <Link
         className='focus-visible:styled-outline'
         to={Pages.Dashboard}
-        onClick={closeBurgerMenu}>
+        onClick={closeSidebarMobileModal}>
         <svg
           xmlns='http://www.w3.org/2000/svg'
           width='32'

src/blocks/sidebar/SidebarLogoutBtn.tsx

@@ -1,14 +1,23 @@
+import { useModal } from 'react-modal-state'
+
 import { useLogoutUser } from 'features/auth/hooks'
 
+import { SidebarMobileModal } from './SidebarMobileModal'
+
 export const SidebarLogoutBtn = () => {
-  const { mutate, isPending } = useLogoutUser()
+  const { mutate: logoutUser, isPending } = useLogoutUser()
+
+  const { close: closeSidebarMobileModal } = useModal(SidebarMobileModal)
 
   return (
     <button
       className='focus-visible:styled-outline group flex items-center gap-3.5 bg-transparent
         text-md font-medium violet:text-white'
       disabled={isPending}
-      onClick={() => mutate()}>
+      onClick={() => {
+        closeSidebarMobileModal()
+        logoutUser()
+      }}>
       <svg
         className='size-8 text-brand transition-colors group-hover:text-brand-hover
           group-focus:text-brand-hover violet:text-white

src/blocks/sidebar/BurgerMenu.tsx → src/blocks/sidebar/SidebarMobileModal.tsx

@@ -7,7 +7,7 @@ import { SidebarLogoutBtn } from './SidebarLogoutBtn'
 import { SidebarMyBoardsInfo } from './SidebarMyBoardsInfo'
 import { SidebarUserSupport } from './SidebarUserSupport'
 
-export const BurgerMenu = () => {
+export const SidebarMobileModal = () => {
   const { isOpen, close } = useModalInstance()
 
   return (

src/blocks/sidebar/SidebarMyBoardsInfo.tsx

@@ -4,12 +4,12 @@ import { NewBoardModal } from 'features/kanban/board/components/modals'
 
 import { cn } from 'lib'
 
-import { BurgerMenu } from './BurgerMenu'
+import { SidebarMobileModal } from './SidebarMobileModal'
 
 export const SidebarMyBoardsInfo = () => {
-  const { open } = useModal(NewBoardModal)
+  const { open: openNewBoardModal } = useModal(NewBoardModal)
 
-  const { close: closeBurgerMenu } = useModal(BurgerMenu)
+  const { close: closeSidebarMobileModal } = useModal(SidebarMobileModal)
 
   return (
     <div className='mb-10 px-3.5 tablet:px-6'>
@@ -30,8 +30,8 @@ export const SidebarMyBoardsInfo = () => {
             violet:bg-brand-third violet:text-white violet:hocus:bg-[#979CEA]`
           )}
           onClick={() => {
-            open()
-            closeBurgerMenu()
+            openNewBoardModal()
+            closeSidebarMobileModal()
           }}>
           <svg className='size-5'>
             <use href='/icons.svg#icon-plus-min' />

src/blocks/sidebar/SidebarUserSupport.tsx

@@ -2,12 +2,12 @@ import { useModal } from 'react-modal-state'
 
 import { NeedHelpModal } from 'features/user/components/modals'
 
-import { BurgerMenu } from './BurgerMenu'
+import { SidebarMobileModal } from './SidebarMobileModal'
 
 export const SidebarUserSupport = () => {
-  const { open } = useModal(NeedHelpModal)
+  const { open: openNeedHelpModal } = useModal(NeedHelpModal)
 
-  const { close: closeBurgerMenu } = useModal(BurgerMenu)
+  const { close: closeSidebarMobileModal } = useModal(SidebarMobileModal)
 
   return (
     <div
@@ -26,8 +26,8 @@ export const SidebarUserSupport = () => {
       </p>
       <button
         onClick={() => {
-          open()
-          closeBurgerMenu()
+          openNeedHelpModal()
+          closeSidebarMobileModal()
         }}
         className='focus-visible:styled-outline flex items-center gap-2 text-sm font-medium
           transition-colors hocus:text-brand-hover violet:text-white

src/features/auth/components/SigninForm.tsx

@@ -8,10 +8,10 @@ import { SigninSchema } from '../auth.schema'
 export const SigninForm = () => {
   const { handleSubmit, register, formState, reset } = useAppForm(SigninSchema)
 
-  const { mutate, isPending } = useSigninUser(reset)
+  const { mutate: signin, isPending } = useSigninUser(reset)
 
   return (
-    <form onSubmit={handleSubmit(data => mutate(data))}>
+    <form onSubmit={handleSubmit(data => signin(data))}>
       <Field
         autoFocus
         {...register('email')}

src/features/auth/components/SignupForm.tsx

@@ -8,10 +8,10 @@ import { SignupSchema } from '../auth.schema'
 export const SignupForm = () => {
   const { handleSubmit, register, formState, reset } = useAppForm(SignupSchema)
 
-  const { mutate, isPending } = useSignupUser(reset)
+  const { mutate: signup, isPending } = useSignupUser(reset)
 
   return (
-    <form onSubmit={handleSubmit(data => mutate(data))}>
+    <form onSubmit={handleSubmit(data => signup(data))}>
       <Field
         autoFocus
         errors={formState.errors}

src/features/auth/hooks/useLogoutUser.ts

@@ -1,8 +1,6 @@
 import { useMutation } from '@tanstack/react-query'
-import { useModal } from 'react-modal-state'
 import { toast } from 'sonner'
 
-import { BurgerMenu } from 'blocks/sidebar/BurgerMenu'
 import { useAppDispatch } from 'hooks/redux'
 
 import { logout } from 'redux/user.slice'
@@ -13,14 +11,9 @@ import { AuthCacheKeys } from '../config'
 export const useLogoutUser = () => {
   const dispatch = useAppDispatch()
 
-  const { close: closeBurgerMenu } = useModal(BurgerMenu)
-
   return useMutation({
     mutationKey: [AuthCacheKeys.Logout],
     mutationFn: authService.logout,
-    onMutate() {
-      closeBurgerMenu()
-    },
     onSuccess() {
       dispatch(logout())
     },

src/features/kanban/board/components/Board.tsx

@@ -11,39 +11,39 @@ import { useDocumentTitle } from 'hooks'
 import { cn } from 'lib'
 
 export const Board = () => {
-  const { data, isPending } = useGetBoardById()
+  const { data: board, isPending } = useGetBoardById()
 
-  useDocumentTitle(data?.title as string)
+  useDocumentTitle(board?.title as string)
 
   return (
     <ScrollArea.Root
       className='relative flex flex-col overflow-hidden bg-cover bg-center pl-5 pt-3.5
         tablet:pl-8 tablet:pt-xl desktop:pl-6 desktop:pt-sm'
       style={{
-        backgroundImage: `url(${!isPending && data?.background?.url})`
+        backgroundImage: `url(${!isPending && board?.background?.url})`
       }}>
       <div
         className={cn(
           'mb-[39px] flex justify-between text-black tablet:mb-xl desktop:mb-sm',
-          data?.background.hasWhiteTextColor && 'text-white',
-          data?.background.identifier === 'default' && 'dark:text-white'
+          board?.background.hasWhiteTextColor && 'text-white',
+          board?.background.identifier === 'default' && 'dark:text-white'
         )}>
-        <p className='whitespace-pre tablet:text-lg'>{data?.title}</p>
+        <p className='whitespace-pre tablet:text-lg'>{board?.title}</p>
         {!isPending && <Filters />}
       </div>
       {isPending ? (
         <Loader className='absolute inset-0 m-auto' />
       ) : (
         <ScrollArea.Viewport className='w-full flex-1 pb-4'>
-          <DragAndDropProvider initialColumns={data?.columns}>
+          <DragAndDropProvider initialColumns={board?.columns}>
             <BoardColumnsList
-              backgroundIdentifier={data?.background.identifier}
+              backgroundIdentifier={board?.background.identifier}
             />
           </DragAndDropProvider>
         </ScrollArea.Viewport>
       )}
       <Scrollbar
-        backgroundIdentifier={data?.background.identifier}
+        backgroundIdentifier={board?.background.identifier}
         scrollBarClassName='mx-5 mb-2 h-3 tablet:mx-8 desktop:mx-6'
         thumbClassName='!h-3'
         orientation='horizontal'

src/features/kanban/board/components/EmptyBoard.tsx

@@ -3,7 +3,7 @@ import { useModal } from 'react-modal-state'
 import { NewBoardModal } from './modals'
 
 export const EmptyBoard = () => {
-  const { open } = useModal(NewBoardModal)
+  const { open: openNewBoardModal } = useModal(NewBoardModal)
 
   return (
     <div className='flex items-center justify-center'>
@@ -12,7 +12,7 @@ export const EmptyBoard = () => {
           tablet:w-[486px] tablet:text-base'>
         Before starting your project, it is essential{' '}
         <button
-          onClick={open}
+          onClick={openNewBoardModal}
           className='focus-visible:styled-outline text-brand hocus:text-brand-hover
             violet:text-brand-secondary violet:hocus:text-brand-third'>
           to create a board

src/features/kanban/board/components/modals/EditBoardModal.tsx

@@ -27,7 +27,7 @@ export const EditBoardModal = () => {
     { defaultValues: { icon, background } }
   )
 
-  const { mutate, isPending } = useEditBoard(reset)
+  const { mutate: editBoard, isPending } = useEditBoard(reset)
 
   useEffect(() => {
     reset({ icon, title, background })
@@ -41,7 +41,7 @@ export const EditBoardModal = () => {
     <Modal
       modalTitle='Edit board'
       onAnimationEnd={() => reset({}, { keepDefaultValues: true })}>
-      <form onSubmit={handleSubmit(data => mutate(data))}>
+      <form onSubmit={handleSubmit(data => editBoard(data))}>
         <Field
           {...register('title', { setValueAs: value => value.trim() })}
           inputName='title'

src/features/kanban/board/components/modals/NewBoardModal.tsx

@@ -13,11 +13,11 @@ export const NewBoardModal = () => {
     { defaultValues: { icon: 'project', background: 'default' } }
   )
 
-  const { mutate, isPending } = useAddBoard(reset)
+  const { mutate: addBoard, isPending } = useAddBoard(reset)
 
   return (
     <Modal modalTitle='New board'>
-      <form onSubmit={handleSubmit(data => mutate(data))}>
+      <form onSubmit={handleSubmit(data => addBoard(data))}>
         <Field
           {...register('title')}
           inputName='title'

src/features/kanban/board/hooks/useAddBoard.ts

@@ -17,13 +17,13 @@ export const useAddBoard = (reset: UseFormReset<BoardSchema>) => {
 
   const queryClient = useQueryClient()
 
-  const { close } = useModal(NewBoardModal)
+  const { close: closeNewBoardModal } = useModal(NewBoardModal)
 
   return useMutation({
     mutationKey: [BoardCacheKeys.AddBoard],
     mutationFn: boardService.addNewBoard,
     onSuccess(data) {
-      close()
+      closeNewBoardModal()
       reset()
       navigate(`${Pages.Dashboard}/${data.id}`)
       queryClient.invalidateQueries({ queryKey: [BoardCacheKeys.Boards] })