message: benefactor: prevent unnecessary API calls
diff: @@ -3,6 +3,7 @@ import { UseQueryResult } from 'react-query'
  import { useTranslation } from 'next-i18next'
  import { Box } from '@mui/material'
  import { DataGrid, GridColDef, GridColumns, GridRenderCellParams } from '@mui/x-data-grid'
  +import { observer } from 'mobx-react'
  import { routes } from 'common/routes'
  import { BenefactorResponse } from 'gql/benefactor'
  @@ -13,10 +14,11 @@ import { ModalStore } from '../BenefactorPage'
  import DetailsModal from './DetailsModal'
  import DeleteModal from './DeleteModal'
  -export default function Grid() {
  +export default observer(function Grid() {
  const { t } = useTranslation('benefactor')
  const [pageSize, setPageSize] = useState(5)
  const { data }: UseQueryResult<BenefactorResponse[]> = useBenefactorList()
  + const { selectedRecord } = ModalStore
  const commonProps: Partial<GridColDef> = {
  align: 'left',
  @@ -84,8 +86,10 @@ export default function Grid() {
  disableSelectionOnClick
  />
  </Box>
  - <DetailsModal />
  +
  + {/* making sure we don't sent requests to the API when not needed */}
  + {selectedRecord.id != '' && <DetailsModal />}
  <DeleteModal />
  </>
  )
  -}
  +})
  