Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Organization switcher: open or create another org #665

Merged
merged 6 commits into from Apr 5, 2019
Merged
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -1,10 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { theme } from '@aragon/ui'
import OrganizationItem from './OrganizationItem'
import { FavoriteDaoType } from '../../../prop-types'
import FocusVisible from '../../FocusVisible'
import ItemButton from './ItemButton'

class FavoriteRow extends React.Component {
static propTypes = {
@@ -23,79 +21,33 @@ class FavoriteRow extends React.Component {
render() {
const { dao } = this.props
return (
<Main>
<FocusVisible>
{({ focusVisible, onFocus }) => (
<React.Fragment>
<OrganizationButton
onClick={this.handleOpenClick}
focusVisible={focusVisible}
onFocus={onFocus}
>
<OrganizationItem dao={dao} />
</OrganizationButton>
<FavoriteButton
onClick={this.handleFavoriteClick}
focusVisible={focusVisible}
onFocus={onFocus}
>
{dao.favorited ? '' : ''}
</FavoriteButton>
</React.Fragment>
)}
</FocusVisible>
</Main>
<div
css={`
display: flex;
align-items: center;
`}
>
<ItemButton
css={`
display: flex;
flex-grow: 1;
`}
onClick={this.handleOpenClick}
>
<OrganizationItem dao={dao} />
</ItemButton>
<ItemButton
css={`
padding: 0 10px;
color: hsl(50, 90%, 50%);
`}
onClick={this.handleFavoriteClick}
>
{dao.favorited ? '' : ''}
</ItemButton>
</div>
)
}
}

const Main = styled.div`
display: flex;
align-items: center;
`

const OrganizationButton = styled.button.attrs({ type: 'button' })`
flex-grow: 1;
border: 0;
background: none;
cursor: pointer;
padding: 0;
&:active {
background: rgba(220, 234, 239, 0.3);
}
&:focus {
outline: ${p => (p.focusVisible ? `2px solid ${theme.accent}` : '0')};
}
&:active {
outline: 0;
background: rgba(220, 234, 239, 0.3);
}
&::-moz-focus-inner {
border: 0;
}
`

const FavoriteButton = styled.button.attrs({ type: 'button' })`
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
height: 44px;
padding: 0 10px;
white-space: nowrap;
cursor: pointer;
border: 0;
color: hsl(50, 90%, 50%);
background: transparent;
&:active {
background: rgba(220, 234, 239, 0.3);
}
&:focus {
outline: ${p => (p.focusVisible ? `2px solid ${theme.accent}` : '0')};
}
&::-moz-focus-inner {
border: 0;
}
`

export default FavoriteRow
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
import styled from 'styled-components'
import { FavoriteDaoType, DaoItemType } from '../../../prop-types'
import FavoriteRow from './FavoriteRow'
import ItemButton from './ItemButton'

class Favorites extends React.Component {
static propTypes = {
@@ -63,6 +64,11 @@ class Favorites extends React.Component {
}
}

handleGoHome = () => {
window.location.hash = ''
this.props.onDone()
This conversation was marked as resolved by bpierre

This comment has been minimized.

Copy link
@sohkai

sohkai Mar 28, 2019

Member

Maybe onDone() could be renamed to onUpdate()?

Also, isn't this behaviour a bit odd? I think we clear the StoredList of favourited organizations every time we call this.props.onDone() without any arguments.

This comment has been minimized.

Copy link
@bpierre

bpierre Mar 28, 2019

Author Member

Yes you’re right, it’s only working because onDone gets called on unmount, with the right data, right after… the empty onDone() call was probably from a previous iteration 😓

And I also agree about onDone => onUpdate.

}

handleDaoOpened = dao => {
window.location.hash = `/${dao.name || dao.address}`
this.props.onDone()
@@ -86,6 +92,16 @@ class Favorites extends React.Component {
)
return (
<section aria-label="Organizations">
<ItemButton
onClick={this.handleGoHome}
css={`
width: 100%;
padding: 0 20px;
`}
>
Open organization…
</ItemButton>

<SectionTitle>Current</SectionTitle>
<FavoriteRow
dao={currentDao}
@@ -0,0 +1,36 @@
import React from 'react'
import { theme } from '@aragon/ui'
import FocusVisible from '../../FocusVisible'

const ItemButton = props => (
<FocusVisible>
This conversation was marked as resolved by bpierre

This comment has been minimized.

Copy link
@AquiGorka

AquiGorka Mar 29, 2019

Contributor

Could you use BaseButton here?

{({ focusVisible, onFocus }) => (
<button
onFocus={onFocus}
css={`
display: flex;
flex-direction: row;
align-items: center;
height: 44px;
padding: 0;
white-space: nowrap;
cursor: pointer;
border: 0;
background: transparent;
&:active {
background: rgba(220, 234, 239, 0.3);
}
&:focus {
outline: ${focusVisible ? `2px solid ${theme.accent}` : '0'};
}
&::-moz-focus-inner {
border: 0;
}
`}
{...props}
/>
)}
</FocusVisible>
)

export default ItemButton
@@ -43,6 +43,7 @@ class OrganizationItem extends React.Component {
}

const Organization = styled.div`
flex-grow: 1;
display: flex;
align-items: center;
padding: 10px 20px;
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.