Proyectos de Subversion LeadersLinked - SPA

import React, { useContext, useRef, useState } from 'react'
import { DataGrid } from '@mui/x-data-grid'
import { IconButton, Menu, MenuItem } from '@mui/material'
import { MoreVert } from '@mui/icons-material'

import { PurposesContext } from '@app/contexts/purposes'
import Widget from '@app/components/UI/Widget'

export default function Purposes() {
  const { purposes, toggleModal } = useContext(PurposesContext)
  const [open, setOpen] = useState(false)
  const actionsEl = useRef()

  const toggleActions = () => setOpen(!open)

  const columns = [{ field: 'description', headerName: 'Descripción' }]

  return (
    <>
      <Widget>
        <Widget.Header
          title='Propósitos'
          renderAction={() => (
            <>
              <IconButton
                id='purposes-button'
                aria-controls={open ? 'purposes-menu' : undefined}
                aria-haspopup='true'
                aria-expanded={open ? 'true' : undefined}
                onClick={toggleActions}
                ref={actionsEl}
              >
                <MoreVert />
              </IconButton>
              <Menu
                id='purposes-menu'
                anchorEl={actionsEl.current}
                open={open}
                onClose={toggleActions}
                MenuListProps={{
                  'aria-labelledby': 'purposes-button'
                }}
                anchorOrigin={{
                  vertical: 'bottom',
                  horizontal: 'left'
                }}
                transformOrigin={{
                  vertical: 'top',
                  horizontal: 'left'
                }}
              >
                <MenuItem
                  onClick={() => {
                    toggleModal()
                    toggleActions()
                  }}
                >
                  Agregar
                </MenuItem>
              </Menu>
            </>
          )}
        />
        <Widget.Body>
          <DataGrid
            rows={purposes}
            columns={columns}
            initialState={{
              pagination: {
                paginationModel: { page: 0, pageSize: 10 }
              }
            }}
            pageSizeOptions={[10]}
          />
        </Widget.Body>
      </Widget>
    </>
  )
}