import { useMutation } from '@redwoodjs/web' ; import { toast } from '@redwoodjs/web/toast' ; const DELETE_USER_MUTATION = gql `
  mutation DeleteUserMutation($id: String!) {
    deleteUser(id: $id) {
      id
    }
  }
` ; const MAX_STRING_LENGTH = 150 ; const truncate = ( text ) => { let output = text ; if ( text && text . length > MAX_STRING_LENGTH ) { output = output . substring ( 0 , MAX_STRING_LENGTH ) + '...' ; } return output ; } ; const timeTag = ( datetime ) => { return ( < time dateTime = { datetime } title = { datetime } > { new Date ( datetime ) . toUTCString ( ) } < /time>); } ; const UsersList = ( { users } ) => { const [ deleteUser ] = useMutation ( DELETE_USER_MUTATION , { onCompleted : ( ) => { toast . success ( 'User deleted.' ) ; } , } ) ; const onDeleteClick = ( id ) => { if ( confirm ( 'Are you sure you want to delete user ' + id + '?' ) ) { deleteUser ( { variables : { id } , refetchQueries : [ 'USERS' ] } ) ; } } ; return ( < div className = "rw-segment rw-table-wrapper-responsive" > < table className = "rw-table" > < thead > < tr > < th > Id < /th> < th > User name < /th> < th > Email < /th> < th > Created at < /th> < th > Updated at < /th> < th > Image < /th> < th > Bio < /th> < th > & nbsp ; < /th> < /tr> < /thead> < tbody > { users . map ( ( user ) => ( < tr key = { user . id } > < td > { truncate ( user . id ) } < /td> < td > { truncate ( user . userName ) } < /td> < td > { truncate ( user . email ) } < /td> < td > { timeTag ( user . createdAt ) } < /td> < td > { timeTag ( user . updatedAt ) } < /td> < td > { truncate ( user . image ) } < /td> < td > { truncate ( user . bio ) } < /td> < td > < nav className = "rw-table-actions" > < a href = "#" title = { 'Delete user ' + user . id } className = "rw-button rw-button-small rw-button-red" onClick = { ( ) => onDeleteClick ( user . id ) } > Delete < /a> < /nav> < /td> < /tr>))} < /tbody> < /table> < /div>); } ; export default UsersList ;