random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev
2020-04-29 18:32:49 -04:00
parent 5efe40f301
commit 03de4c4fea
92 changed files with 1132 additions and 787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
app/javascript/gabsocial/features/search.js
View File

@@ -13,6 +13,7 @@ import Heading from '../components/heading'
import Button from '../components/button'
import Text from '../components/text'
import Account from '../components/account'
import PanelLayout from '../components/panel/panel_layout'
const mapStateToProps = (state) => ({
results: state.getIn(['search', 'results']),
@@ -38,14 +39,14 @@ class Search extends ImmutablePureComponent {
isSmallScreen: (window.innerWidth <= 895),
}
render () {
render() {
const { results, location } = this.props
const { isSmallScreen } = this.state
console.log("results:", results)
if (results.isEmpty() && isSmallScreen) {
return (
<div />
)
return null
}
const pathname = location.pathname || ''
@@ -53,58 +54,94 @@ class Search extends ImmutablePureComponent {
const showHashtags = pathname === '/search/hashtags'
const showGroups = pathname === '/search/groups'
const isTop = !showPeople && !showHashtags && !showGroups
const theLimit = 10
let accounts, statuses, hashtags, groups
// : todo : statuses
if (results.get('accounts') && results.get('accounts').size > 0 && (isTop || showPeople)) {
const size = isTop ? Math.min(results.get('accounts').size, 5) : results.get('accounts').size;
const size = isTop ? Math.min(results.get('accounts').size, theLimit) : results.get('accounts').size;
const isMax = size === results.get('accounts').size
accounts = (
<Block>
<div className={[_s.default, _s.py15].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.mb15, _s.px15].join(' ')}>
<Heading size='h2'>
People
</Heading>
<div className={[_s.default, _s.mlAuto].join(' ')}>
<Button
isText
backgroundColor='none'
color='brand'
to='/search/people'
>
<Text size='small' color='inherit' weight='bold'>
See All
</Text>
</Button>
</div>
</div>
{
results.get('accounts').slice(0, size).map(accountId => <Account compact key={accountId} id={accountId} />)
}
<PanelLayout
title='People'
headerButtonTo={isMax ? undefined : '/search/people'}
headerButtonTitle={isMax ? undefined : 'See more'}
footerButtonTo={isMax ? undefined : '/search/people'}
footerButtonTitle={isMax ? undefined : 'See more'}
noPadding
>
<div className={[_s.default, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<Text color='tertiary' size='small'>
Showing {size} of {results.get('accounts').size} results
</Text>
</div>
</Block>
{
results.get('accounts').slice(0, size).map(accountId => (
<Account
compact
withBio
key={accountId}
id={accountId}
/>
))
}
</PanelLayout>
)
}
if (results.get('groups') && results.get('groups').size > 0 && (isTop || showGroups)) {
const size = isTop ? Math.min(results.get('groups').size, 5) : results.get('groups').size;
const size = isTop ? Math.min(results.get('groups').size, theLimit) : results.get('groups').size;
const isMax = size === results.get('groups').size
groups = (
<div className='search-results__section'>
<h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.groups' defaultMessage='Groups' /></h5>
{results.get('groups').slice(0, size).map(group => <GroupListItem key={`search-${group.get('name')}`} group={group} />)}
</div>
);
<PanelLayout
title='Groups'
headerButtonTo={isMax ? undefined : '/search/groups'}
headerButtonTitle={isMax ? undefined : 'See more'}
footerButtonTo={isMax ? undefined : '/search/groups'}
footerButtonTitle={isMax ? undefined : 'See more'}
noPadding
>
<div className={[_s.default, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<Text color='tertiary' size='small'>
Showing {size} of {results.get('groups').size} results
</Text>
</div>
{
results.get('groups').slice(0, size).map(group => (
<GroupListItem
key={`search-${group.get('name')}`}
id={group.get('id')}
/>
))
}
</PanelLayout>
)
}
if (results.get('hashtags') && results.get('hashtags').size > 0 && (isTop || showHashtags)) {
const size = isTop ? Math.min(results.get('hashtags').size, 5) : results.get('hashtags').size;
const size = isTop ? Math.min(results.get('hashtags').size, theLimit) : results.get('hashtags').size;
const isMax = size === results.get('hashtags').size
hashtags = (
<div className='search-results__section'>
<h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
<PanelLayout
title='Hashtags'
headerButtonTo={isMax ? undefined : '/search/hashtags'}
headerButtonTitle={isMax ? undefined : 'See more'}
footerButtonTo={isMax ? undefined : '/search/hashtags'}
footerButtonTitle={isMax ? undefined : 'See more'}
noPadding
>
<div className={[_s.default, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<Text color='tertiary' size='small'>
Showing {size} of {results.get('hashtags').size} results
</Text>
</div>
{results.get('hashtags').slice(0, size).map(hashtag => <HashtagItem isCompact key={hashtag.get('name')} hashtag={hashtag} />)}
</div>
);
</PanelLayout>
)
}
return (