export default function Users()

in frontend/src/old-pages/Users/Users.tsx [58:124]


export default function Users() {
  const {t} = useTranslation()
  const loading = !useSelector(selectUserIndex)
  const user_index = useSelector(selectUserIndex) || {}
  const usernames = Object.keys(user_index).sort()
  const users = usernames
    .map(username => user_index[username])
    .map(user => ({
      ...user,
      email: user.Attributes.email, // adds the email as first-level property so that Cloudscape can filter properly
    }))

  const userEmail = useState(['app', 'user', 'delete', 'Attributes', 'email'])
  const deletedUser = useState(['app', 'user', 'delete'])
  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
  const currentUserEmail = useState(['identity', 'attributes', 'email'])
  const [addUserModalVisible, setAddUserModalVisible] = React.useState(false)

  useHelpPanel(<UsersHelpPanel />)

  useEffect(() => {
    ListUsers()
  }, [])

  const refreshUsers = useCallback(() => {
    ListUsers()
  }, [])

  const {
    items,
    actions,
    filteredItemsCount,
    collectionProps,
    filterProps,
    paginationProps,
  } = useCollection(
    users || [],
    extendCollectionsOptions({
      filtering: {
        empty: (
          <EmptyState
            title={t('users.list.filtering.empty.title')}
            subtitle={t('users.list.filtering.empty.subtitle')}
            action={<></>}
          />
        ),
        noMatch: (
          <EmptyState
            title={t('users.list.filtering.noMatch.title')}
            subtitle={t('users.list.filtering.noMatch.subtitle')}
            action={
              <Button onClick={() => actions.setFiltering('')}>
                {t('users.list.filtering.noMatch.action')}
              </Button>
            }
          />
        ),
      },
      sorting: {
        defaultState: {
          sortingColumn: {
            sortingField: 'email',
          },
        },
      },
      selection: {},
    }),