Camille Moussu
234b4c3ae8
* [#691] changed searchbar in menubar to mobile searchbar * [#691] add filters to results page for mobile * [#691] added filter for organizers and attendees
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { useAppSelector } from '@/app/hooks'
|
|
import { Box } from '@linagora/twake-mui'
|
|
import { AttendeesFilter } from './AttendeesFilter'
|
|
import DesktopSearchResultsPage from './DesktopSearchResultsPage'
|
|
import { OrganizersFilter } from './OrganizersFilter'
|
|
import { SearchInFilter } from './SearchInFilter'
|
|
import './searchResult.styl'
|
|
|
|
const MobileSearchResultsPage: React.FC = () => {
|
|
const searchResults = useAppSelector(state => state.searchResult)
|
|
const hasSearchParams =
|
|
searchResults.searchParams.search !== '' ||
|
|
searchResults.searchParams.filters.keywords !== '' ||
|
|
searchResults.searchParams.filters.organizers.length > 0 ||
|
|
searchResults.searchParams.filters.attendees.length > 0
|
|
|
|
const displaySearch =
|
|
(!!searchResults.hits || !!searchResults.error || searchResults.loading) &&
|
|
hasSearchParams
|
|
|
|
return (
|
|
<>
|
|
<FiltersButtons />
|
|
{displaySearch && <DesktopSearchResultsPage />}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MobileSearchResultsPage
|
|
|
|
const FiltersButtons: React.FC = () => {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
overflowX: 'auto',
|
|
gap: 2,
|
|
px: 2,
|
|
py: 1,
|
|
scrollbarWidth: 'none',
|
|
'&::-webkit-scrollbar': { display: 'none' },
|
|
backgroundColor: '#FFF',
|
|
minHeight: '48px'
|
|
}}
|
|
>
|
|
<SearchInFilter mode="mobile" />
|
|
<OrganizersFilter mode="mobile" />
|
|
<AttendeesFilter mode="mobile" />
|
|
</Box>
|
|
)
|
|
}
|