fix: drawer render

Author: kastov

src/features/ui/dashboard/external-squads/header-action-buttons/header-action-buttons.feature.tsx

@@ -14,22 +14,19 @@ import { useDisclosure } from '@mantine/hooks'
 import { useTranslation } from 'react-i18next'
 import { useField } from '@mantine/form'
 
-import { QueryKeys, useCreateExternalSquad, useGetExternalSquads } from '@shared/api/hooks'
 import { MODALS, useModalsStoreOpenWithData } from '@entities/dashboard/modal-store'
-import { queryClient } from '@shared/api'
+import { useCreateExternalSquad, useGetExternalSquads } from '@shared/api/hooks'
 
 export const ExternalSquadsHeaderActionButtonsFeature = () => {
-    const { isFetching } = useGetExternalSquads()
+    const { isFetching, refetch: refetchExternalSquads } = useGetExternalSquads()
     const { t } = useTranslation()
 
     const openModalWithData = useModalsStoreOpenWithData()
 
     const [opened, { open, close }] = useDisclosure(false)
 
     const handleUpdate = async () => {
-        await queryClient.refetchQueries({
-            queryKey: QueryKeys.externalSquads.getExternalSquads.queryKey
-        })
+        await refetchExternalSquads()
     }
 
     const nameField = useField<CreateExternalSquadCommand.Request['name']>({

src/pages/dashboard/external-squads/components/external-squads.page.component.tsx

@@ -4,6 +4,7 @@ import { Grid } from '@mantine/core'
 
 import { ExternalSquadsGridWidget } from '@widgets/dashboard/external-squads/external-squads-grid/external-squads-grid.widget'
 import { ExternalSquadsHeaderActionButtonsFeature } from '@features/ui/dashboard/external-squads/header-action-buttons'
+import { ExternalSquadsDrawer } from '@widgets/dashboard/external-squads/external-squads-drawer'
 import { RenameModalShared } from '@shared/ui/modals/rename-modal.shared'
 import { DataTableShared } from '@shared/ui/table'
 import { ROUTES } from '@shared/constants'
@@ -51,6 +52,7 @@ export const ExternalSquadsPageComponent = (props: Props) => {
                     </motion.div>
                 </Grid.Col>
             </Grid>
+            <ExternalSquadsDrawer />
             <RenameModalShared key="rename-external-squad-modal" renameFrom="externalSquad" />
         </Page>
     )

src/widgets/dashboard/external-squads/external-squads-drawer/external-squads.drawer.widget.tsx

@@ -16,7 +16,7 @@ import {
 import { PiCheck, PiCopy, PiListChecks, PiUsers } from 'react-icons/pi'
 import { TbFolder, TbSettings, TbWebhook } from 'react-icons/tb'
 import { useTranslation } from 'react-i18next'
-import { useState } from 'react'
+import { memo, useState } from 'react'
 
 import { MODALS, useModalClose, useModalState } from '@entities/dashboard/modal-store'
 import { useGetExternalSquad, useGetSubscriptionTemplates } from '@shared/api/hooks'
@@ -38,7 +38,7 @@ const TAB_TYPE = {
 
 type TabType = (typeof TAB_TYPE)[keyof typeof TAB_TYPE]
 
-export const ExternalSquadsDrawer = () => {
+export const ExternalSquadsDrawer = memo(() => {
     const { t } = useTranslation()
 
     const [activeTab, setActiveTab] = useState<TabType>('templates')
@@ -261,4 +261,4 @@ export const ExternalSquadsDrawer = () => {
             {isLoading && <LoaderModalShared h="80vh" text="Loading..." w="100%" />}
         </Drawer>
     )
-}
+})

src/widgets/dashboard/external-squads/external-squads-grid/external-squads-grid.widget.tsx

@@ -15,7 +15,6 @@ import { queryClient } from '@shared/api/query-client'
 import { sToMs } from '@shared/utils/time-utils'
 
 import { ExternalSquadCardWidget } from '../external-squad-card/external-squad-card.widget'
-import { ExternalSquadsDrawer } from '../external-squads-drawer'
 import { IProps } from './interfaces'
 
 export function ExternalSquadsGridWidget(props: IProps) {
@@ -163,8 +162,6 @@ export function ExternalSquadsGridWidget(props: IProps) {
                     key={externalSquad.uuid}
                 />
             ))}
-
-            <ExternalSquadsDrawer />
         </SimpleGrid>
     )
 }