-
Notifications
You must be signed in to change notification settings - Fork 212
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Voting: upgrade packages for local identities * Add Identity and modal provider * Voting: use LocalIdentityBadge * LocalIdentityBadge: add lower case to check * Version bump aragon/ui * Upgrade aragon/api * Make useEffect hook dependency explicit * Abstract identity logic with a custom useIdentity react hook (#743) * Move observable logic into a hook * Combine identity contexts and define a custom hook * Add missing propType * Encapsulate both generation and handling of updates in hook * Fix code formatting * Default to null for when an identity is removed * Handle case where identity resolves to null * Use ternary operator * Change order of nesting to have Main first * Rename address to label * propagate promise rejection * Rename address to entity for consistency * LocalIdentityBadge: fix var name error
- Loading branch information
Showing
5 changed files
with
196 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
apps/voting/app/src/components/IdentityManager/IdentityManager.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { Subject } from 'rxjs' | ||
|
|
||
| const updates$ = new Subject() | ||
|
|
||
| const IdentityContext = React.createContext({ | ||
| resolve: () => | ||
| Promise.reject(Error('Please set resolve using IdentityProvider')), | ||
| }) | ||
|
|
||
| const IdentityProvider = ({ | ||
| onResolve, | ||
| onShowLocalIdentityModal, | ||
| children, | ||
| }) => ( | ||
| <IdentityContext.Provider | ||
| value={{ | ||
| resolve: onResolve, | ||
| showLocalIdentityModal: onShowLocalIdentityModal, | ||
| updates$, | ||
| }} | ||
| > | ||
| {children} | ||
| </IdentityContext.Provider> | ||
| ) | ||
|
|
||
| IdentityProvider.propTypes = { | ||
| children: PropTypes.node.isRequired, | ||
| onResolve: PropTypes.func.isRequired, | ||
| onShowLocalIdentityModal: PropTypes.func.isRequired, | ||
| } | ||
|
|
||
| const IdentityConsumer = IdentityContext.Consumer | ||
|
|
||
| export { IdentityProvider, IdentityConsumer, IdentityContext } |
87 changes: 87 additions & 0 deletions
87
apps/voting/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import styled from 'styled-components' | ||
| import { Badge, IdentityBadge, font } from '@aragon/ui' | ||
| import { IdentityContext } from '../IdentityManager/IdentityManager' | ||
|
|
||
| function useIdentity(address) { | ||
| const [name, setName] = React.useState(null) | ||
| const { resolve, updates$, showLocalIdentityModal } = React.useContext( | ||
| IdentityContext | ||
| ) | ||
|
|
||
| const handleNameChange = metadata => { | ||
| setName(metadata ? metadata.name : null) | ||
| } | ||
|
|
||
| const handleShowLocalIdentityModal = address => { | ||
| // Emit an event whenever the modal is closed (when the promise resolves) | ||
| return showLocalIdentityModal(address).then(() => updates$.next(address)) | ||
| } | ||
|
|
||
| React.useEffect(() => { | ||
| resolve(address).then(handleNameChange) | ||
|
|
||
| const subscription = updates$.subscribe(updatedAddress => { | ||
| if (updatedAddress.toLowerCase() === address.toLowerCase()) { | ||
| // Resolve and update state when the identity have been updated | ||
| resolve(address).then(handleNameChange) | ||
| } | ||
| }) | ||
| return () => subscription.unsubscribe() | ||
| }, [address]) | ||
|
|
||
| return [name, handleShowLocalIdentityModal] | ||
| } | ||
|
|
||
| const LocalIdentityBadge = ({ entity, ...props }) => { | ||
| const [label, showLocalIdentityModal] = useIdentity(entity) | ||
| const handleClick = () => showLocalIdentityModal(entity) | ||
| return ( | ||
| <IdentityBadge | ||
| {...props} | ||
| customLabel={label || ''} | ||
| entity={entity} | ||
| popoverAction={{ | ||
| label: `${label ? 'Edit' : 'Add'} custom label`, | ||
| onClick: handleClick, | ||
| }} | ||
| popoverTitle={ | ||
| label ? ( | ||
| <Wrap> | ||
| <Label>{label}</Label> | ||
| <StyledBadge>Custom label</StyledBadge> | ||
| </Wrap> | ||
| ) : ( | ||
| 'Address' | ||
| ) | ||
| } | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| LocalIdentityBadge.propTypes = { | ||
| entity: PropTypes.string.isRequired, | ||
| } | ||
|
|
||
| const Wrap = styled.div` | ||
| display: grid; | ||
| align-items: center; | ||
| grid-template-columns: auto 1fr; | ||
| padding-right: 24px; | ||
| ` | ||
|
|
||
| const Label = styled.span` | ||
| display: inline-block; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| ` | ||
|
|
||
| const StyledBadge = styled(Badge)` | ||
| margin-left: 16px; | ||
| text-transform: uppercase; | ||
| ${font({ size: 'xxsmall' })}; | ||
| ` | ||
|
|
||
| export default LocalIdentityBadge |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters