import React from 'react' ; import * as Styled from './ArticleFiltersMenu.styles' ; import { useArticleFiltersMenuConfig } from './ArticleFiltersMenu.config' ; import { useActions } from '../../../hooks/useActions' ; import { useTypedSelector } from '../../../hooks/useTypedSelector' ; import { ArticleSortingOption } from '../../../types/redux/articles-reducer-types' ; import FilterOption from '../FilterOption/FilterOption' ; export interface Props { isMenuVisible : boolean ; } function param { boolean } isMenuVisible returns { JSX . Element } const ArticleFiltersMenu = ( { isMenuVisible } ) : JSX . Element => { const ARTICLE_MENU_WIDTH = 320 ; const { addFilterOption , removeFilterOption , applySortingOption } = useActions ( ) ; const { allTags , allSortingOptions } = useArticleFiltersMenuConfig ( ) ; const { filterOptions } = useTypedSelector ( ( state ) => state . articles ) ; const handleApplyFiltering = ( filterOption ) : void => { if ( filterOptions . includes ( filterOption ) ) { removeFilterOption ( filterOption ) ; } else { addFilterOption ( filterOption ) ; } } ; const handleApplySorting = ( sortingOption ) : void => { applySortingOption ( sortingOption ) ; } ; return ( < Styled . Container isMenuVisible = { isMenuVisible } menuWidth = { ARTICLE_MENU_WIDTH } > < Styled . TagsWrapper key = { String ( isMenuVisible ) + 1 } > < Styled . UL > { allTags . map ( ( tag , id ) => ( < FilterOption variant = { 'filterOption' } key = { tag + id } action = { handleApplyFiltering } filterTag = { tag } > { tag } < /FilterOption>))} < /Styled.UL> < Styled . Header variant = { 'vertical' } > Filter By Tag < /Styled.Header> < /Styled.TagsWrapper> < Styled . SortingTagsWrapper key = { String ( isMenuVisible ) + 2 } > < Styled . Header variant = { 'horizontal' } > Sort By Tag < /Styled.Header> < Styled . UL > { allSortingOptions . map ( ( sortingTag , id ) => ( < FilterOption key = { sortingTag + id } variant = { 'sortingOption' } sortingTag = { sortingTag } action = { ( ) => handleApplySorting ( sortingTag ) } > { sortingTag } < /FilterOption>))} < /Styled.UL> < /Styled.SortingTagsWrapper> < /Styled.Container>); } ; export default ArticleFiltersMenu ;